/* ================================================================
   components.css — extracted from com_uscoin template inline styles
   Generated 2026-03-22
   ================================================================ */

/* ── Browse (Series List) ─────────────────────────────────── */
.ck-browse-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; }
.ck-browse-wrap h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.ck-browse-wrap .ck-sub { color: var(--muted, #666); margin: 0 0 28px; font-size: 15px; }

/* Denom filter tabs */
.denom-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.denom-tab { padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--line, #ddd);
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--text, #222); background: transparent; transition: all .15s; }
.denom-tab:hover, .denom-tab.active { background: var(--brand, #1e3a8a); color: #fff; border-color: var(--brand, #1e3a8a); }

/* Search bar */
.ck-search-row { display: flex; gap: 12px; margin-bottom: 24px; align-items: center; flex-wrap: wrap; }
.ck-search-box { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px;
  background: var(--card, #fff); border: 1.5px solid var(--line, #ddd); border-radius: 28px;
  padding: 9px 18px; transition: border-color .15s; }
.ck-search-box:focus-within { border-color: var(--brand, #1e3a8a); }
.ck-search-box svg { flex-shrink: 0; color: var(--muted, #888); }
.ck-search-input { border: none; outline: none; background: transparent; font-size: 15px;
  color: var(--text, #222); width: 100%; }
.ck-search-input::placeholder { color: var(--muted, #aaa); }
.ck-denom-select { padding: 9px 14px; border-radius: 28px; border: 1.5px solid var(--line, #ddd);
  font-size: 14px; font-weight: 600; background: var(--card, #fff); color: var(--text, #222);
  cursor: pointer; outline: none; transition: border-color .15s; }
.ck-denom-select:focus { border-color: var(--brand, #1e3a8a); }
.no-results { padding: 32px 0; color: var(--muted, #888); font-size: 15px; display: none; }
.denom-section { margin-bottom: 40px; }
.denom-section h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px;
  padding-bottom: 8px; border-bottom: 2px solid var(--line, #eee); }
.denom-section .denom-note { font-size: 13px; color: var(--muted, #888); margin: 0 0 16px; }

/* Series tile grid */
.series-grid { display: flex; flex-wrap: wrap; gap: 25px 22px; justify-content: center; }
.series-tile { width: 150px; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; }
.series-tile:hover .tile-img { transform: scale(1.04); box-shadow: 0 4px 18px rgba(0,0,0,.14); }
.tile-img { width: 100%; max-width: 150px; aspect-ratio: 1; border-radius: 12px; object-fit: cover;
  border: 2px solid var(--line, #eee); background: var(--card, #f7f7f7);
  transition: transform .18s, box-shadow .18s; display: block; }
.tile-img-placeholder { width: 100%; max-width: 150px; aspect-ratio: 1; border-radius: 12px;
  background: var(--card, #f0f0f0); border: 2px solid var(--line, #eee);
  display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 13px; }
.tile-label { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; }
.tile-years { font-size: 12px; color: var(--muted, #888); margin-top: 2px; text-align: center; }
@media (max-width: 768px) {
  .ck-browse-wrap { padding: 0 12px 40px; }
  .ck-browse-wrap h1 { font-size: 22px; }
  .ck-sub { font-size: 13px; }
  .denom-tabs { gap: 5px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: none; }
  .denom-tabs::-webkit-scrollbar { display: none; }
  .denom-tab { padding: 4px 10px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
  .ck-search-row { gap: 8px; flex-direction: column; }
  .ck-search-box { min-width: 0; padding: 7px 14px; width: 100%; }
  .ck-search-input { font-size: 14px; }
  .ck-denom-select { font-size: 13px; padding: 7px 10px; width: 100%; }
  .denom-section h2 { font-size: 17px; }
  .series-grid { gap: 16px 12px; }
  .series-tile { width: 120px; }
  .tile-img, .tile-img-placeholder { max-width: 120px; }
  .tile-label { font-size: 13px; }
  .tile-years { font-size: 11px; }
}
@media (max-width: 400px) {
  .series-grid { gap: 14px 8px; }
  .series-tile { width: 100px; }
  .tile-img, .tile-img-placeholder { max-width: 100px; }
  .tile-label { font-size: 12px; }
}

/* ── Series Detail ─────────────────────────────────── */
.ck-btn { display:inline-flex; align-items:center; padding:8px 18px; border-radius:10px;
  border:2px solid var(--brand,#1e3a8a); color:var(--brand,#1e3a8a) !important; text-decoration:none !important;
  font-size:14px; font-weight:700; transition:background .15s,color .15s; background:transparent; }
.ck-btn:hover { background:rgba(30,58,138,.08); color:var(--brand,#1e3a8a) !important; }
.ck-btn.active, .ck-btn.filled, .ck-btn:hover.filled { background:var(--brand,#1e3a8a); color:#fff !important; border-color:var(--brand,#1e3a8a); }
.ck-btn.secondary { border-color:var(--line,#ddd); color:var(--text,#333) !important; }
.ck-btn.secondary:hover { border-color:var(--brand,#1e3a8a); color:var(--brand,#1e3a8a) !important; }
.series-header{display:flex;gap:22px;align-items:flex-start;margin-bottom:28px;flex-wrap:wrap;}
.series-coin-img{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--line);flex-shrink:0;background:var(--card);}
[data-theme="dark"] .series-coin-img{mix-blend-mode:lighten;background:transparent;border-color:rgba(255,255,255,.1);}
.series-meta{flex:1;min-width:200px;} .series-meta h1{margin:0 0 6px;font-size:26px;}
.series-meta p{margin:0 0 12px;color:var(--muted);line-height:1.6;font-size:15px;}
.series-desc p, #ck-desc-more p{margin:0 0 12px;color:var(--muted);line-height:1.6;font-size:15px;}
.series-desc a, #ck-desc-more a{color:var(--brand2,var(--brand2, #c5a356));font-weight:600;text-decoration:underline;}
.series-desc a:hover, #ck-desc-more a:hover{color:var(--brand,#1a1a2e);}
.series-desc u, #ck-desc-more u{font-size:17px;font-weight:800;color:var(--text,#1a1a2e);display:block;margin:18px 0 6px;text-decoration-color:var(--brand2,var(--brand2, #c5a356));text-underline-offset:4px;}
.series-desc em, #ck-desc-more em{font-style:italic;}
.ck-readmore-btn{display:inline-block;margin:10px 0 16px;font-size:13px;font-weight:700;color:var(--brand,#1a1a2e);
  text-decoration:none;padding:8px 16px;border:1.5px solid var(--line,#e0ddd4);border-radius:6px;transition:all .15s;}
.ck-readmore-btn:hover{border-color:var(--brand2,var(--brand2, #c5a356));color:var(--brand2,var(--brand2, #c5a356));}
.series-stats{display:flex;gap:18px;flex-wrap:wrap;}
.series-stat{font-size:13px;} .series-stat strong{display:block;font-size:18px;font-weight:900;color:var(--brand,#1e3a8a);}
.series-stat span{color:var(--muted);}
.key-dates-section{margin-bottom:28px;}
.key-dates-section h2{font-size:15px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:0 0 12px;}
.key-dates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px;}
.key-date-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--text);transition:border-color .15s,box-shadow .15s;}
.key-date-card:hover{border-color:rgba(32,58,115,.3);box-shadow:0 4px 16px rgba(18,34,66,.08);}
.kd-badge{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:11px;font-weight:900;letter-spacing:.3px;}
.kd-key{background:rgba(198,40,40,.1);color:#b71c1c;} .kd-semi{background:rgba(230,150,0,.1);color:#8a5500;}
.kd-var{background:rgba(32,58,115,.1);color:var(--brand);}
.kd-info{flex:1;} .kd-info strong{display:block;font-size:14px;font-weight:900;} .kd-info span{font-size:12px;color:var(--muted);}
.date-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:6px;margin-bottom:28px;}
.date-link{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--text);background:var(--card);transition:border-color .15s,background .15s;min-height:62px;text-align:center;}
.date-link:hover{border-color:rgba(32,58,115,.28);background:rgba(32,58,115,.04);}
.date-year{font-size:13px;font-weight:900;line-height:1.2;} .date-sub{font-size:11px;color:var(--muted);margin-top:3px;}
.date-link.is-key{border-color:rgba(198,40,40,.3);background:rgba(198,40,40,.04);}
.date-link.is-key:hover{border-color:rgba(198,40,40,.5);background:rgba(198,40,40,.07);}
.date-link.is-key .date-year{color:#b71c1c;}
.date-link.is-semi{border-color:rgba(230,150,0,.3);background:rgba(230,150,0,.04);}
.date-link.is-semi .date-year{color:#8a5500;}
.date-link.is-var{border-color:rgba(32,58,115,.25);background:rgba(32,58,115,.04);}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.legend-dot{width:10px;height:10px;border-radius:3px;}
.strike-btn{display:inline-flex;align-items:center;padding:8px 20px;border-radius:10px;border:2px solid var(--brand,#1e3a8a);color:var(--brand,#1e3a8a);text-decoration:none;font-size:14px;font-weight:700;transition:background .15s,color .15s;}
.strike-btn:hover{background:rgba(30,58,138,.08);}

/* View toggle */
.ck-view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:auto;}
.ck-view-btn{padding:7px 12px;background:transparent;border:none;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;transition:background .15s,color .15s;}
.ck-view-btn:hover{background:rgba(30,58,138,.05);color:var(--text);}
.ck-view-btn.active{background:var(--brand,#1e3a8a);color:#fff;}
.ck-view-btn + .ck-view-btn{border-left:1px solid var(--line);}

/* List view */
.date-list{margin-bottom:28px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card, #fff);}
.date-grid{display:none;}
.date-list table{width:100%;border-collapse:collapse;font-size:14px;}
.date-list th{text-align:left;padding:10px 12px;background:var(--brand,#1e3a8a);color:#fff;font-weight:700;font-size:12px;letter-spacing:.3px;text-transform:uppercase;}
.date-list td{padding:9px 12px;border-top:1px solid var(--line);}
.date-list tr:nth-child(even) td{background:rgba(231,236,246,.45);}
.date-list tr:hover td{background:rgba(32,58,115,.03);}
.date-list a{text-decoration:none;color:var(--text);font-weight:800;}
.date-list a:hover{color:var(--brand);}
.date-list .dl-key{color:#b71c1c;} .date-list .dl-semi{color:#8a5500;} .date-list .dl-var{color:var(--brand);}
.date-list .dl-rarity{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;}
.date-list .dl-regular{color:var(--muted);font-weight:600;}
.date-list .dl-proof{color:#5e35b1;font-weight:700;}
.date-list .dl-special{color:#00838f;font-weight:700;}
.date-list .dl-nifc{color:#6d4c41;font-weight:700;}
.date-list .dl-mintage{color:var(--muted);font-size:13px;}
.date-list .dl-ck{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.2px;white-space:nowrap;}

/* Pagination */
.ck-pager{display:flex;align-items:center;justify-content:center;gap:4px;padding:12px 14px;border-top:1px solid var(--line);background:var(--card, #fff);}
.ck-pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--card, #fff);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-decoration:none;user-select:none;}
.ck-pager-btn:hover{border-color:rgba(30,58,138,.3);background:rgba(30,58,138,.04);}
.ck-pager-btn.active{background:var(--brand,#1e3a8a);color:#fff;border-color:var(--brand,#1e3a8a);}
.ck-pager-btn:disabled,.ck-pager-btn.disabled{opacity:.35;pointer-events:none;}
.ck-pager-info{font-size:12px;color:var(--muted);margin:0 8px;}
.ck-pager-dots{color:var(--muted);font-size:13px;padding:0 2px;user-select:none;}

/* ── Mobile ── */
@media (max-width: 768px) {
  .series-header { gap: 14px; }
  .series-coin-img { width: 70px; height: 70px; }
  .series-meta h1 { font-size: 20px; }
  .series-meta p { font-size: 13px; }
  .series-desc p, #ck-desc-more p { font-size: 13px; }
  .series-desc u, #ck-desc-more u { font-size: 15px; }
  .series-stats { gap: 12px; }
  .series-stat strong { font-size: 15px; }
  .series-stat { font-size: 12px; }
  .key-dates-section h2 { font-size: 13px; }
  .key-date-card { padding: 10px 12px; gap: 8px; }
  .kd-badge { width: 30px; height: 30px; font-size: 10px; }
  .kd-info strong { font-size: 12px; }
  .kd-info span { font-size: 11px; }
  .date-link { padding: 8px 6px; min-height: 50px; }
  .date-year { font-size: 12px; }
  .date-sub { font-size: 10px; }
  .legend { gap: 8px; }
  .legend-item { font-size: 11px; }
  .ck-btn { font-size: 12px; padding: 6px 12px; }
  .strike-btn { font-size: 12px; padding: 6px 14px; }
  .date-list th, .date-list td { padding: 7px 8px; font-size: 12px; }
  .date-list td:first-child { white-space: nowrap; }
  .date-list .dl-mintage { font-size: 11px; }
  .date-list .dl-ck { font-size: 10px; }
  .ck-pager { gap: 3px; padding: 10px 8px; flex-wrap: wrap; }
  .ck-pager-btn { min-width: 32px; height: 32px; font-size: 12px; padding: 0 8px; }
  .ck-pager-info { font-size: 11px; margin: 0 4px; }
}
@media (max-width: 480px) {
  .series-header { flex-direction: column; align-items: center; text-align: center; }
  .series-meta { min-width: 0; }
  .series-stats { justify-content: center; }
  .date-grid { grid-template-columns: repeat(auto-fill, minmax(min(120px,100%), 1fr)); gap: 4px; }

  /* Compact table on small screens */
  .date-list table { table-layout: fixed; }
  .date-list th, .date-list td { padding: 6px 5px; font-size: 11px; }
  .date-list th:nth-child(1), .date-list td:nth-child(1) { width: 22%; white-space: nowrap; }
  .date-list th:nth-child(2), .date-list td:nth-child(2) { width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .date-list th:nth-child(3), .date-list td:nth-child(3) { width: 22%; }
  .date-list th:nth-child(4), .date-list td:nth-child(4) { width: 20%; }
  .date-list th:nth-child(5), .date-list td:nth-child(5) { width: 14%; white-space: nowrap; }
  .date-list .dl-rarity { font-size: 9px; letter-spacing: 0; }
  .date-list .dl-ck { font-size: 9px; }
  .date-list .dl-mintage { font-size: 10px; }
  .date-list a { font-size: 11px; }
}

/* ── Dark mode ── */
[data-theme="dark"] .date-list { background: var(--card, #151528); border-color: color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 25%, transparent); }
[data-theme="dark"] .date-list th { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; }
[data-theme="dark"] .date-list td { border-top-color: var(--line, #2a2a4e); color: var(--text, #e9eef9); }
[data-theme="dark"] .date-list tr:nth-child(even) td { background: rgba(255,255,255,.03); }
[data-theme="dark"] .date-list tr:hover td { background: rgba(255,255,255,.06); }
[data-theme="dark"] .date-list a { color: var(--text, #e9eef9); }
[data-theme="dark"] .date-list a:hover { color: var(--brand2, var(--brand2, #c5a356)); }
[data-theme="dark"] .date-list .dl-key { color: #ef5350; }
[data-theme="dark"] .date-list .dl-semi { color: var(--brand2, var(--brand2, #c5a356)); }
[data-theme="dark"] .date-list .dl-var { color: #7fa8f0; }
[data-theme="dark"] .date-list .dl-regular { color: var(--muted, #a0a0b8); }
[data-theme="dark"] .date-list .dl-proof { color: #b39ddb; }
[data-theme="dark"] .date-list .dl-special { color: #4dd0e1; }
[data-theme="dark"] .date-list .dl-nifc { color: #a1887f; }
[data-theme="dark"] .date-list .dl-mintage { color: var(--muted, #a0a0b8); }
[data-theme="dark"] .date-list .dl-ck { color: var(--muted, #a0a0b8); }
[data-theme="dark"] .ck-pager { background: var(--card, #151528); border-top-color: var(--line, #2a2a4e); }
[data-theme="dark"] .ck-pager-btn { background: var(--card, #151528); border-color: var(--line, #2a2a4e); color: var(--text, #e9eef9); }
[data-theme="dark"] .ck-pager-btn:hover { background: rgba(255,255,255,.06); border-color: var(--brand2, var(--brand2, #c5a356)); }
[data-theme="dark"] .ck-pager-btn.active { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; border-color: var(--brand2, var(--brand2, #c5a356)); }
[data-theme="dark"] .date-link { background: var(--card, #151528); border-color: var(--line, #2a2a4e); color: var(--text, #e9eef9); }
[data-theme="dark"] .date-link:hover { background: rgba(255,255,255,.06); border-color: var(--brand2, var(--brand2, #c5a356)); }
[data-theme="dark"] .date-link.is-key { border-color: rgba(239,83,80,.35); background: rgba(239,83,80,.06); }
[data-theme="dark"] .date-link.is-key .date-year { color: #ef5350; }
[data-theme="dark"] .date-link.is-semi { border-color: rgba(212,183,106,.35); background: rgba(212,183,106,.06); }
[data-theme="dark"] .date-link.is-semi .date-year { color: var(--brand2, var(--brand2, #c5a356)); }
[data-theme="dark"] .date-link.is-var { border-color: rgba(127,168,240,.3); background: rgba(127,168,240,.06); }
[data-theme="dark"] .key-date-card { background: var(--card, #151528); border-color: var(--line, #2a2a4e); color: var(--text, #e9eef9); }
[data-theme="dark"] .key-date-card:hover { border-color: var(--brand2, var(--brand2, #c5a356)); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
[data-theme="dark"] .kd-key { background: rgba(239,83,80,.12); color: #ef5350; }
[data-theme="dark"] .kd-semi { background: rgba(212,183,106,.12); color: var(--brand2, var(--brand2, #c5a356)); }
[data-theme="dark"] .kd-var { background: rgba(127,168,240,.12); color: #7fa8f0; }
[data-theme="dark"] .strike-btn { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); }
[data-theme="dark"] .strike-btn:hover { background: rgba(197,163,86,.08); }
[data-theme="dark"] .strike-btn.active, [data-theme="dark"] .strike-btn[style*="background"] { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; }
[data-theme="dark"] .series-stat strong { color: var(--brand2, var(--brand2, #c5a356)); }
[data-theme="dark"] .ck-view-btn { color: var(--muted, #a0a0b8); }
[data-theme="dark"] .ck-view-btn:hover { background: rgba(255,255,255,.06); color: var(--text, #e9eef9); }
[data-theme="dark"] .ck-view-btn.active { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; }
[data-theme="dark"] .ck-view-toggle { border-color: var(--line, #2a2a4e); }
[data-theme="dark"] .ck-view-btn + .ck-view-btn { border-left-color: var(--line, #2a2a4e); }
[data-theme="dark"] .ck-readmore-btn { color: var(--text, #e9eef9); border-color: var(--line, #2a2a4e); }
[data-theme="dark"] .series-desc u, [data-theme="dark"] #ck-desc-more u { color: var(--text, #e9eef9); }
[data-theme="dark"] .series-desc a:hover, [data-theme="dark"] #ck-desc-more a:hover { color: var(--text, #e9eef9); }
[data-theme="dark"] .legend-dot { opacity: .85; }

/* ── Coin Detail ─────────────────────────────────── */
.ck-nav-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
/* Kill whitespace between gallery and collection bar */
.card.ck-coin-card { padding:0 !important; margin-top:18px; display:flex !important; flex-direction:column !important; }
.card.ck-coin-card .coin-gallery { margin:0 !important; padding:0 !important; flex:1 1 auto; }
.card.ck-coin-card .coin-panel { min-height:240px; }
.card.ck-coin-card .col-action-bar { margin:0 !important; padding:14px 16px !important; margin-top:auto !important; }

/* Narrative variety illustration float */
.variety-float {
  float: right;
  margin: 0 0 16px 20px;
  max-width: 220px;
  padding: 8px;
  border: 1px solid var(--brand2, #c5a356);
  background: var(--card, #fff);
  overflow: hidden;
  box-sizing: border-box;
}
.variety-float img { display: block; width: 100%; height: auto; }
.variety-float p {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted, #777);
  line-height: 1.5;
  padding: 8px 10px;
  margin: 0;
}
@media (max-width: 600px) {
  .variety-float { float: none; max-width: 100%; margin: 0 0 16px; }
}

/* Photo submission CTA (missing images) */
.ck-photo-cta {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--line, #eee);
  font-size: 12px; line-height: 1.5; color: var(--muted, #888);
}
.ck-photo-cta a {
  color: var(--brand2, var(--brand2, #c5a356)); font-weight: 600; text-decoration: none;
}
.ck-photo-cta a:hover { text-decoration: underline; }

/* Collection buttons */
.col-action-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.col-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:10px;
  font-size:13px; font-weight:700; cursor:pointer; border:2px solid var(--line,#ddd);
  background:transparent; color:var(--text,#333); transition:all .15s; }
.col-btn:hover { border-color:var(--brand,#1e3a8a); color:var(--brand,#1e3a8a); }
.col-btn.col-owned { border-color:var(--brand,#1e3a8a); color:var(--brand,#1e3a8a); }
.col-btn.col-owned.active { background:var(--brand,#1e3a8a); color:#fff; }
.col-btn.col-want { border-color:#c4a06a; color:#7a4a00; }
.col-btn.col-want.active { background:#c4a06a; color:#fff; }
.col-login-hint { font-size:14px; font-weight:600; color:var(--text,#444); text-align:center; width:100%; }
.col-login-hint a { color:var(--brand,#1e3a8a); font-weight:700; text-decoration:underline; }
.ck-coin-stats { display:flex; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line,#eee); }
.ck-stat-pill { flex:1; background:#f0f3f8; border-radius:12px; padding:12px 14px; text-align:center; }
.ck-stat-num { font-size:22px; font-weight:900; color:var(--brand,#1e3a8a); line-height:1; }
.ck-stat-num.want { color:#c4a06a; }
.ck-stat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted,#888); margin-top:4px; }
.ck-toast { position:fixed; bottom:24px; right:24px; padding:12px 18px; border-radius:12px;
  background:#1e3a8a; color:#fff; font-size:14px; font-weight:700; z-index:9999;
  opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; pointer-events:none; }
.ck-toast.show { opacity:1; transform:translateY(0); }
.ck-show-mobile { display:none; }

/* ── Coin images sizing ── */
.grid.grid-2.ck-coin-grid { grid-template-columns: 3fr 2fr; }
.coin-img { max-width: 360px; width: 100%; height: auto; border-radius: 50%; }
[data-theme="dark"] .coin-img { mix-blend-mode: lighten; }
.coin-gallery .coin-panel { border:none !important; box-shadow:none !important; }
.coin-gallery .coin-panel + .coin-panel { border-left:none !important; }

/* Share bar */
.ck-share-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line,#eee); }
.ck-share-label { font-size:11px; font-weight:700; color:var(--muted,#888); text-transform:uppercase;
  letter-spacing:.4px; margin-right:2px; }
.ck-share-btn { display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line,#ddd);
  background:transparent; cursor:pointer; transition:border-color .15s, background .15s, transform .1s;
  color:var(--muted,#888); text-decoration:none; }
.ck-share-btn:hover { transform:translateY(-1px); }
.ck-share-btn.sh-x:hover { border-color:#1da1f2; color:#1da1f2; background:rgba(29,161,242,.06); }
.ck-share-btn.sh-fb:hover { border-color:#1877f2; color:#1877f2; background:rgba(24,119,242,.06); }
.ck-share-btn.sh-pin:hover { border-color:#e60023; color:#e60023; background:rgba(230,0,35,.06); }
.ck-share-btn.sh-red:hover { border-color:#ff4500; color:#ff4500; background:rgba(255,69,0,.06); }
.ck-share-btn.sh-wa:hover { border-color:#25d366; color:#25d366; background:rgba(37,211,102,.06); }
.ck-share-btn.sh-em:hover { border-color:#666; color:#444; background:rgba(0,0,0,.04); }
.ck-share-btn.sh-cp:hover { border-color:var(--brand2, var(--brand2, #c5a356)); color:var(--brand2, var(--brand2, #c5a356)); background:rgba(197,163,86,.06); }
.ck-share-btn svg { width:15px; height:15px; }
.ck-share-count { font-size:11px; color:var(--muted,#aaa); margin-left:2px; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .grid.grid-2.ck-coin-grid { grid-template-columns: 1fr !important; }
  .ck-hide-mobile { display:none !important; }
  .ck-show-mobile { display:inline !important; }
  .grid.grid-2 { display:block !important; }
  .grid.grid-2 > * { margin-bottom:16px; }
  .grid.grid-2 > *:last-child { margin-bottom:0; }
  .card.ck-coin-card .coin-panel { min-height:auto; }
  .coin-title { font-size:20px !important; }
  .meta-table td { font-size:13px; }

  /* Compact header nav */
  .ck-nav-bar { margin-bottom:4px !important; }
  .ck-btn { font-size:11px; padding:5px 10px; border-width:1.5px; }
  .subnav { font-size:11px; gap:4px; margin:0 0 8px !important; }
  .subnav .badge { font-size:10px; padding:3px 8px; }
  .subnav .link { font-size:11px; }

  /* Keep gallery side by side on mobile */
  .coin-gallery { flex-direction:row !important; }
  .coin-panel .coin-label { font-size:11px; }

  .col-action-bar { gap:6px; }
  .col-btn { padding:7px 12px; font-size:12px; }
  .ck-coin-stats { gap:8px; }
  .ck-stat-pill { padding:10px 8px; }
  .ck-stat-num { font-size:18px; }
  .ck-stat-label { font-size:10px; }
  .price-table th, .price-table td { padding:6px 4px; font-size:12px; }
  .price-table th:nth-child(2), .price-table td:nth-child(2) { display:none; }
  .ck-toast { left:16px; right:16px; bottom:16px; text-align:center; }
  .ck-share-btn { width:32px; height:32px; }
  .ck-share-label { font-size:10px; }
  section.section { padding-top:4px !important; }
}
@media (max-width: 480px) {
  .subnav { font-size:10px; }
}

/* ── My Coin (Personal Coin Page) ─────────────────────────────────── */
.ck-mc-wrap { max-width: 780px; margin: 0 auto; padding: 0 0 52px; }

/* Breadcrumb */
.ck-mc-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--muted,#888); margin-bottom: 20px; flex-wrap: wrap; }
.ck-mc-breadcrumb a { color: var(--muted,#888); text-decoration: none; }
.ck-mc-breadcrumb a:hover { color: var(--brand,#1e3a8a); }
.ck-mc-breadcrumb span { color: var(--muted,#ccc); }

/* Header */
.ck-mc-header { margin-bottom: 24px; }
.ck-mc-header h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.ck-mc-header .ck-mc-sub { font-size: 14px; color: var(--muted,#888); }
.ck-mc-ref-link { display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--brand,#1e3a8a);
  text-decoration: none; margin-top: 8px; }
.ck-mc-ref-link:hover { text-decoration: underline; }

/* Cards */
.ck-mc-card { background: var(--card,#fff); border: 1px solid var(--line,#eee);
  border-radius: 16px; margin-bottom: 14px; overflow: hidden; }
.ck-mc-card-head { padding: 14px 18px; border-bottom: 1px solid var(--line,#eee);
  font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted,#888); display: flex; justify-content: space-between; align-items: center; }
.ck-mc-card-body { padding: 18px; }

/* Image upload slots */
.ck-img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ck-img-slot { border-radius: 12px; border: 2px dashed var(--line,#ddd);
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; cursor: pointer; transition: border-color .15s;
  position: relative; overflow: hidden; background: #f8f9fc; }
.ck-img-slot:hover { border-color: var(--brand,#1e3a8a); }
.ck-img-slot.has-image { border-style: solid; border-color: var(--line,#ddd); cursor: default; }
.ck-img-slot img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 8px; box-sizing: border-box; }
.ck-img-slot-label { font-size: 12px; font-weight: 700; color: var(--muted,#888);
  text-transform: uppercase; letter-spacing: .5px; }
.ck-img-slot-icon { font-size: 28px; color: var(--muted,#ccc); }
.ck-img-slot-upload { display: none; }

/* Image overlay actions */
.ck-img-actions { position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.55); display: flex; justify-content: center; gap: 8px;
  padding: 8px; opacity: 0; transition: opacity .15s; }
.ck-img-slot:hover .ck-img-actions { opacity: 1; }
.ck-img-act-btn { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: none; cursor: pointer; transition: background .15s; }
.ck-img-act-replace { background: rgba(255,255,255,.9); color: #222; }
.ck-img-act-delete  { background: rgba(220,38,38,.85); color: #fff; }
.ck-img-act-btn:hover { filter: brightness(1.1); }

/* Crop editor buttons on image hover */
.ck-img-act-crop { background: rgba(202,165,106,.9); color: #222; }

/* Upload progress */
.ck-upload-progress { display: none; position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; background: rgba(0,0,0,.1); }
.ck-upload-bar { height: 100%; background: var(--brand,#1e3a8a); width: 0; transition: width .3s; }

/* Storage bar */
.ck-storage-bar-wrap { margin-top: 10px; }
.ck-storage-bar-track { height: 6px; background: var(--line,#eee); border-radius: 4px; overflow: hidden; }
.ck-storage-bar-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.ck-storage-text { font-size: 12px; color: var(--muted,#888); margin-top: 5px; }

/* Grade */
.ck-grade-wrap { display: flex; flex-direction: column; gap: 14px; }
.ck-grade-toggle { display: inline-flex; border: 1.5px solid var(--line,#ddd);
  border-radius: 10px; overflow: hidden; align-self: flex-start; }
.ck-grade-toggle-btn { padding: 8px 18px; font: inherit; font-size: 13px; font-weight: 700;
  border: none; cursor: pointer; transition: all .15s; background: transparent;
  color: var(--muted,#888); }
.ck-grade-toggle-btn.active { background: var(--brand,#1e3a8a); color: #fff; }
.ck-grade-toggle-btn:not(.active):hover { background: var(--line,#eee); }
.ck-grade-select-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ck-grade-select { padding: 9px 14px; border: 1.5px solid var(--line,#ddd); border-radius: 10px;
  font: inherit; font-size: 14px; background: #f0f3f8; color: var(--text,#222);
  min-width: 200px; transition: border-color .15s; cursor: pointer; }
.ck-grade-select:focus { outline: none; border-color: var(--brand,#1e3a8a);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1); }
.ck-grade-badge { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px;
  border-radius: 8px; font-size: 13px; font-weight: 700; }
.ck-grade-badge.raw { background: #f0f3f8; color: var(--brand,#1e3a8a); }
.ck-grade-badge.certified { background: #fdf5e6; color: #7a5c1f; }
.ck-grade-saved { font-size: 13px; color: #2e7d32; display: none; font-weight: 600; }
.ck-grade-clear { font-size: 12px; color: var(--muted,#888); background: none; border: none;
  cursor: pointer; text-decoration: underline; padding: 0; }
.ck-grade-clear:hover { color: var(--text,#222); }
.ck-grade-hint { font-size: 12px; color: var(--muted,#999); line-height: 1.4; }

/* Grade + Price two-column layout */
.ck-grade-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ck-grade-col { display: flex; flex-direction: column; gap: 14px; }

/* Purchase price */
.ck-price-label { font-size: 12px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted,#888); }
.ck-price-input-row { display: flex; align-items: center; gap: 8px; }
.ck-price-symbol { font-size: 16px; font-weight: 700; color: var(--muted,#888); }
.ck-price-input { width: 100%; padding: 9px 14px; border: 1.5px solid var(--line,#ddd);
  border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600;
  background: #f0f3f8; color: var(--text,#222); transition: border-color .15s; }
.ck-price-input:focus { outline: none; border-color: var(--brand,#1e3a8a);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1); background: #fff; }
.ck-price-input::placeholder { color: var(--muted,#bbb); font-weight: 400; }
.ck-price-saved { font-size: 13px; color: #2e7d32; display: none; font-weight: 600; }
.ck-price-hint { font-size: 12px; color: var(--muted,#999); }

@media (max-width: 580px) {
  .ck-grade-price-row { grid-template-columns: 1fr; gap: 14px; }
}

/* Notes */
.ck-notes-area { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line,#ddd);
  border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px;
  resize: vertical; min-height: 120px; background: #f0f3f8; color: var(--text,#222);
  transition: border-color .15s, box-shadow .15s; }
.ck-notes-area:focus { outline: none; border-color: var(--brand,#1e3a8a);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1); background: #fff; }
.ck-notes-save { margin-top: 10px; padding: 9px 22px; border-radius: 10px; border: none;
  background: var(--brand,#1e3a8a); color: #fff; font: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer; transition: background .15s; }
.ck-notes-save:hover { background: #162d6e; }
.ck-notes-saved { font-size: 13px; color: #2e7d32; margin-left: 10px;
  display: none; font-weight: 600; }

/* Toast */
.ck-mc-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1e3a8a; color: #fff; padding: 10px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 600; z-index: 9999; opacity: 0;
  transition: opacity .3s; pointer-events: none; }
.ck-mc-toast.show { opacity: 1; }
.ck-mc-toast.error { background: #b71c1c; }

@media (max-width: 768px) {
  .ck-mc-wrap { padding: 0 12px 40px; }
  .ck-mc-breadcrumb { font-size: 12px; gap: 4px; flex-wrap: wrap; }
  .ck-mc-header h1 { font-size: 20px; }
  .ck-img-grid { grid-template-columns: 1fr; }
  .ck-mc-toast { left: 16px; right: 16px; transform: none; text-align: center; }
}
@media (max-width: 520px) {
  .ck-img-grid { grid-template-columns: 1fr; }
}

/* ── Confirm Dialog ── */
.ck-confirm-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10001;
  background: rgba(0,0,0,.65); display: none; align-items: center; justify-content: center;
  padding: 16px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ck-confirm-overlay.open { display: flex; }

.ck-confirm-modal { background: var(--card,#fff); border-radius: 20px; width: 100%;
  max-width: 400px; padding: 32px 28px 24px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: ckCfmIn .2s ease-out; }
@keyframes ckCfmIn { from { opacity: 0; transform: scale(.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); } }

.ck-confirm-icon { margin-bottom: 16px; color: var(--brand2,#c5a356); }

.ck-confirm-title { font-size: 18px; font-weight: 800; margin: 0 0 8px;
  color: var(--text,#1a1a2e); }

.ck-confirm-msg { font-size: 14px; line-height: 1.6; color: var(--muted,#777);
  margin: 0 0 24px; }

.ck-confirm-actions { display: flex; gap: 10px; justify-content: center; }

.ck-cfm-btn { padding: 11px 24px; border-radius: 10px; border: none; font: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; min-width: 110px; }

.ck-cfm-cancel { background: var(--line,#e0ddd4); color: var(--text,#444); }
.ck-cfm-cancel:hover { filter: brightness(.93); }

.ck-cfm-ok { background: var(--brand2,#c5a356); color: #1a1a2e; }
.ck-cfm-ok:hover { filter: brightness(1.1); }

.ck-cfm-ok.ck-cfm-destructive { background: #d94040; color: #fff; }
.ck-cfm-ok.ck-cfm-destructive:hover { background: #c03030; }

@media (max-width: 520px) {
  .ck-confirm-modal { max-width: 100%; padding: 28px 20px 20px; border-radius: 16px; }
  .ck-confirm-actions { flex-direction: column-reverse; }
  .ck-cfm-btn { width: 100%; text-align: center; padding: 13px 20px; }
}

/* ── Circular Crop Modal ── */
.ck-crop-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; background: rgba(0,0,0,.75);
  display: none; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(4px); }
.ck-crop-overlay.open { display: flex; }
.ck-crop-modal { background: var(--card,#fff); border-radius: 20px; width: 100%;
  max-width: 480px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  animation: ckCropIn .2s ease-out; }
@keyframes ckCropIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

.ck-crop-head { padding: 16px 20px; border-bottom: 1px solid var(--line,#eee);
  display: flex; justify-content: space-between; align-items: center; }
.ck-crop-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.ck-crop-close { background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--muted,#888); line-height: 1; padding: 4px; }
.ck-crop-close:hover { color: var(--text,#222); }

.ck-crop-stage { position: relative; width: 100%; aspect-ratio: 1;
  overflow: hidden; cursor: grab; background: #111; touch-action: none;
  -webkit-user-select: none; user-select: none; }
.ck-crop-stage:active { cursor: grabbing; }
.ck-crop-stage canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Circular mask overlay — drawn via CSS so the canvas stays clean for export */
.ck-crop-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.ck-crop-mask svg { width: 100%; height: 100%; }

.ck-crop-controls { padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.ck-crop-controls label { font-size: 12px; font-weight: 700; color: var(--muted,#888);
  text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0; }
.ck-crop-range { flex: 1; -webkit-appearance: none; appearance: none; height: 6px;
  background: var(--line,#ddd); border-radius: 4px; outline: none; }
.ck-crop-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px;
  background: var(--brand,#1e3a8a); border-radius: 50%; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.ck-crop-range::-moz-range-thumb { width: 20px; height: 20px;
  background: var(--brand,#1e3a8a); border-radius: 50%; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.ck-crop-zoom-val { font-size: 12px; color: var(--muted,#888); min-width: 32px;
  text-align: right; font-variant-numeric: tabular-nums; }

.ck-crop-foot { padding: 14px 20px; border-top: 1px solid var(--line,#eee);
  display: flex; justify-content: flex-end; gap: 10px; }
.ck-crop-btn { padding: 10px 22px; border-radius: 12px; border: none;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; }
.ck-crop-skip { background: var(--line,#eee); color: var(--text,#444); }
.ck-crop-skip:hover { filter: brightness(.95); }
.ck-crop-save { background: var(--brand,#1e3a8a); color: #fff; }
.ck-crop-save:hover { filter: brightness(1.12); }
.ck-crop-hint { font-size: 12px; color: var(--muted,#888); text-align: center;
  padding: 0 20px 4px; }

@media (max-width: 520px) {
  .ck-crop-modal { max-width: 100%; border-radius: 16px; }
  .ck-crop-foot { flex-direction: column; }
  .ck-crop-btn { width: 100%; text-align: center; }
}

/* ── Collection Dashboard ─────────────────────────────────── */
/* ── My Collection page ── */
.ck-col-wrap { max-width: 960px; margin: 0 auto; padding: 0 0 52px; }

/* Header */
.col-hero { margin-bottom: 28px; }
.col-hero h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.col-hero p  { color: var(--muted, #666); margin: 0; font-size: 15px; }

/* Summary bar */
.col-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.col-stat { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--card, #fff); border: 1px solid var(--line, #eee); border-radius: 14px; }
.col-stat .cs-num { font-size: 22px; font-weight: 900; color: var(--brand, #1e3a8a); }
.col-stat .cs-lbl { font-size: 13px; color: var(--muted, #888); }

/* Add Coins button */
.col-add-btn { background: #1a1a2e !important; }
.col-add-btn .cs-num { color: #fff !important; }

/* Segment tabs (U.S. / World) */
.col-segments { display: flex; gap: 8px; margin-bottom: 28px; }
.col-seg { padding: 8px 20px; border-radius: 10px; border: 2px solid var(--line, #ddd);
  font-size: 14px; font-weight: 700; cursor: pointer; background: transparent;
  color: var(--text, #333); transition: all .15s; text-decoration: none; display: inline-block; }
.col-seg:hover { border-color: var(--brand, #1e3a8a); color: var(--brand, #1e3a8a); }
.col-seg.active { background: var(--brand, #1e3a8a); color: #fff; border-color: var(--brand, #1e3a8a); }
.col-seg.coming-soon { opacity: .5; cursor: default; pointer-events: none; }

/* Filter bar */
.col-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; align-items: center; }
.col-filter-tab { padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--line, #ddd);
  font-size: 13px; font-weight: 600; cursor: pointer; background: transparent;
  color: var(--text, #333); transition: all .15s; }
.col-filter-tab:hover, .col-filter-tab.active { background: var(--brand, #1e3a8a); color: #fff; border-color: var(--brand, #1e3a8a); }
.col-status-filter { display: flex; gap: 6px; flex-basis: 100%; padding-top: 4px; }
.col-status-tab { padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--line, #ddd);
  font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: var(--text, #333); transition: all .15s; }
.col-status-tab:hover { border-color: var(--brand, #1e3a8a); color: var(--brand, #1e3a8a); }
.col-status-tab.active { background: var(--brand, #1e3a8a); color: #fff; border-color: var(--brand, #1e3a8a); }

/* Denomination section */
.col-denom-section { margin-bottom: 36px; }
.col-denom-section h2 { font-size: 18px; font-weight: 800; margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--line, #eee); }

/* Series block */
.col-series-block { margin-bottom: 20px; background: var(--card, #fff);
  border: 1px solid var(--line, #eee); border-radius: 16px; overflow: hidden; }
.col-series-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--line, #eee); cursor: pointer; user-select: none; }
.col-series-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--line, #eee); flex-shrink: 0; background: var(--line, #eee); }
.col-series-info { flex: 1; }
.col-series-info strong { display: block; font-size: 15px; font-weight: 800; }
.col-series-info span { font-size: 12px; color: var(--muted, #888); }
.col-series-counts { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.cs-badge { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.cs-badge-owned { background: rgba(30,58,138,.1); color: var(--brand, #1e3a8a); }
.cs-badge-want  { background: rgba(202,165,106,.15); color: #7a4a00; }
.col-series-toggle { font-size: 18px; color: var(--muted, #aaa); transition: transform .2s; }
.col-series-head.open .col-series-toggle { transform: rotate(180deg); }

/* Coin rows */
.col-coins-list { display: flex; flex-direction: column; }
.col-coin-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--line, #f0f0f0); font-size: 14px; transition: background .12s; }
.col-coin-row:last-child { border-bottom: none; }
.col-coin-row:hover { background: rgba(30,58,138,.03); }
.col-coin-link { flex: 1; font-weight: 700; text-decoration: none; color: var(--text, #222); }
.col-coin-link:hover { color: var(--brand, #1e3a8a); }
.col-coin-meta { font-size: 12px; color: var(--muted, #888); margin-left: 4px; font-weight: 400; }
.col-coin-strike { font-size: 11px; padding: 2px 7px; border-radius: 6px; font-weight: 700; margin-left: 4px; }
.strike-proof { background: rgba(100,60,180,.1); color: #4a2a9e; }
.strike-nifc  { background: rgba(30,115,58,.1);  color: #1a5c30; }

/* Status pill + actions */
.col-coin-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.col-pill { padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 700;
  border: 1.5px solid; cursor: pointer; transition: all .15s; background: transparent; }
.col-pill-owned { border-color: var(--brand, #1e3a8a); color: var(--brand, #1e3a8a); }
.col-pill-owned.active { background: var(--brand, #1e3a8a); color: #fff; }
.col-pill-want  { border-color: #c4a06a; color: #7a4a00; }
.col-pill-want.active  { background: #c4a06a; color: #fff; }
.col-remove-btn { background: none; border: none; color: #ef4444; font-size: 20px;
  font-weight: 900; cursor: pointer; line-height: 1; padding: 0 2px; flex-shrink: 0;
  transition: color .15s, transform .15s; }
.col-remove-btn:hover { color: #b91c1c; transform: scale(1.2); }

/* Rarity dots */
.rarity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rarity-key  { background: #b71c1c; }
.rarity-semi { background: #c47a00; }
.rarity-var  { background: var(--brand, #1e3a8a); }
.rarity-reg  { background: var(--line, #ccc); }

/* Empty state */
.col-empty { text-align: center; padding: 52px 20px; color: var(--muted, #888); }
.col-empty .ce-icon { font-size: 48px; margin-bottom: 12px; }
.col-empty h3 { font-size: 18px; font-weight: 800; color: var(--text, #333); margin: 0 0 8px; }
.col-empty p  { font-size: 14px; margin: 0 0 20px; line-height: 1.6; }
/* Tracker button */
.col-tracker-btn {
  display:inline-flex; align-items:center; gap:8px; padding:10px 22px;
  border-radius:12px; background:var(--brand,#1e3a8a); color:#fff;
  font-size:14px; font-weight:800; text-decoration:none;
  transition:background .15s, transform .15s;
  box-shadow:0 4px 12px rgba(30,58,138,.2);
}
.col-tracker-btn:hover { background:#253d6e; transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(30,58,138,.28); color:#fff; }

/* Explainer */
.col-explainer {
  background:linear-gradient(135deg,rgba(32,58,115,.04),rgba(202,165,106,.06)); border:1px solid rgba(202,165,106,.25); border-radius:10px; padding:14px 18px;
  font-size:13px; color:var(--muted,#666); line-height:1.7; margin-bottom:24px;
}
.col-explainer strong { color:var(--text,#1a1a2e); }
.col-ex-pill { display:inline-block; padding:1px 8px; border-radius:12px; font-size:11px;
  font-weight:700; border:1.5px solid var(--brand,#1e3a8a); color:var(--brand,#1e3a8a);
  vertical-align:middle; }
.col-ex-pill.col-ex-want { border-color:#c4a06a; color:#7a4a00; }
.col-ex-remove { display:inline-flex; align-items:center; justify-content:center;
  color:#ef4444; font-weight:900; font-size:14px; vertical-align:middle; }

/* Toast notification */
.ck-toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; border-radius: 12px;
  background: #1e3a8a; color: #fff; font-size: 14px; font-weight: 700; z-index: 9999;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
  pointer-events: none; max-width: 280px; }
.ck-toast.show { opacity: 1; transform: translateY(0); }

/* ── Mobile ── */
@media (max-width: 768px) {
  .ck-col-wrap { padding: 0 12px 40px; }
  .col-hero h1 { font-size: 22px; }
  .col-summary { gap: 8px; }
  .col-stat { padding: 10px 14px; flex: 1 1 auto; min-width: 0; }
  .col-stat .cs-num { font-size: 18px; }
  .col-stat .cs-lbl { font-size: 11px; }
  .col-segments { gap: 6px; }
  .col-seg { padding: 6px 14px; font-size: 12px; }
  .col-tracker-btn { padding: 8px 16px; font-size: 12px; width:100%; justify-content:center; }
  .col-explainer { font-size: 12px; padding: 12px 14px; }
  .col-filter-bar { gap: 6px; }
  .col-filter-tab { padding: 4px 10px; font-size: 11px; }
  .col-status-filter { justify-content: flex-start; }
  .col-status-tab { padding: 4px 10px; font-size: 11px; }
  .col-series-head { padding: 10px 12px; gap: 10px; }
  .col-series-thumb { width: 36px; height: 36px; }
  .col-series-info strong { font-size: 13px; }
  .col-series-counts { display: none; }
  .col-coin-row { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .col-coin-link { font-size: 13px; flex: 1 1 100%; order: 1; }
  .col-coin-actions { order: 2; width: 100%; justify-content: flex-start; }
  .col-pill { font-size: 11px; padding: 2px 9px; }
  .col-denom-section h2 { font-size: 16px; }
}
@media (max-width: 480px) {
  .col-summary { flex-direction: column; }
  .col-coin-row { font-size: 12px; }
}

/* ── Suggestions ── */
.col-suggest-section { margin-top: 32px; }
.col-suggest-title { font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted,#888); margin-bottom: 14px; }
.col-suggest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.col-suggest-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--card,#fff); border: 1px solid var(--line,#eee); border-radius: 14px;
  text-decoration: none; transition: border-color .15s; }
.col-suggest-card:hover { border-color: var(--brand,#1e3a8a); }
.col-suggest-info { flex: 1; min-width: 0; }
.col-suggest-name { font-size: 13px; font-weight: 700; color: var(--text,#222); }
.col-suggest-reason { font-size: 12px; color: var(--muted,#888); margin-top: 2px; }
.col-suggest-badge { font-size: 10px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; white-space: nowrap; flex-shrink: 0; }

/* ── Export buttons ── */
.col-export-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px;
  border-radius: 10px; border: 2px solid var(--line,#ddd); font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; background: transparent; color: var(--text,#333);
  text-decoration: none; transition: all .15s; }
.col-export-btn:hover { border-color: var(--brand,#1e3a8a); color: var(--brand,#1e3a8a); }
.col-export-btn svg { flex-shrink: 0; }

@media (max-width: 768px) {
  .col-suggest-grid { grid-template-columns: 1fr; }
}

/* ── Set Completion Tracker ─────────────────────────────────── */
.ck-tracker { max-width: 960px; margin: 0 auto; padding: 0 16px 52px; }
.ck-tracker h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.ck-tracker .sub { color: var(--muted, #666); font-size: 14px; margin: 0 0 24px; }

/* Mode toggle */
.tk-mode { display: inline-flex; border-radius: 24px; border: 1.5px solid var(--line, #ddd);
  overflow: hidden; margin-bottom: 20px; }
.tk-mode a { padding: 8px 20px; font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--muted, #666); transition: all .15s; }
.tk-mode a.active { background: var(--brand, #1e3a8a); color: #fff; }
.tk-mode a:not(.active):hover { background: rgba(30,58,138,.06); }

/* Filter pills */
.tk-filters { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.tk-filter { padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--line, #ddd);
  font-size: 13px; font-weight: 600; cursor: pointer; background: transparent;
  color: var(--text, #222); transition: all .15s; }
.tk-filter:hover, .tk-filter.active { background: var(--brand, #1e3a8a); color: #fff; border-color: var(--brand, #1e3a8a); }

/* Summary cards */
.tk-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 28px; }
.tk-stat { background: var(--surface, #f5f7fb); border-radius: 10px; padding: 16px 14px; text-align: center; }
.tk-stat-num { font-size: 24px; font-weight: 800; color: var(--brand, #1e3a8a); }
.tk-stat-label { font-size: 12px; color: var(--muted, #666); margin-top: 2px; }

/* Overall progress */
.tk-overall { margin-bottom: 32px; }
.tk-overall-bar { height: 10px; background: var(--line, #e5e7eb); border-radius: 5px; overflow: hidden; }
.tk-overall-fill { height: 100%; border-radius: 5px; transition: width .4s; }
.tk-overall-text { display: flex; justify-content: space-between; font-size: 13px;
  color: var(--muted, #666); margin-top: 6px; }

/* Denom sections */
.tk-denom { margin-bottom: 36px; }
.tk-denom h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px;
  padding-bottom: 8px; border-bottom: 2px solid var(--line, #eee); }

/* Series rows */
.tk-series { display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line, #f0f0f0); }
.tk-series:last-child { border-bottom: none; }
.tk-tile { width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  border: 1.5px solid var(--line, #eee); flex-shrink: 0; background: var(--surface, #f5f7fb); }
.tk-tile-ph { width: 44px; height: 44px; border-radius: 8px; background: var(--surface, #f0f0f0);
  border: 1.5px solid var(--line, #eee); flex-shrink: 0; }
.tk-info { flex: 1; min-width: 0; }
.tk-title { font-size: 14px; font-weight: 700; margin: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tk-title a { color: inherit; text-decoration: none; }
.tk-title a:hover { color: var(--brand, #1e3a8a); }
.tk-years { font-size: 12px; color: var(--muted, #888); margin: 0; }
.tk-progress { flex: 0 0 180px; display: flex; flex-direction: column; gap: 4px; }
.tk-bar { height: 8px; background: var(--line, #e5e7eb); border-radius: 4px; overflow: hidden; }
.tk-bar-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.tk-nums { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted, #888); }
.tk-pct { font-size: 14px; font-weight: 700; flex: 0 0 48px; text-align: right; }

/* Colors for bar */
.bar-0 { background: var(--line, #e5e7eb); width: 0; }
.bar-started { background: #3b82f6; }
.bar-complete { background: #16a34a; }

/* Completed badge */
.tk-complete-badge { font-size: 11px; font-weight: 700; color: #16a34a;
  background: #dcfce7; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }

/* Track toggle */
.tk-track { flex: 0 0 28px; cursor: pointer; background: none; border: none;
  padding: 4px; border-radius: 6px; transition: all .15s; display: flex;
  align-items: center; justify-content: center; }
.tk-track:hover { background: rgba(30,58,138,.06); }
.tk-track svg { width: 18px; height: 18px; }
.tk-track .tk-star-off { color: var(--muted, #ccc); }
.tk-track .tk-star-on { color: #eab308; }

/* Typeset coin picker */
.tk-type-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tk-type-pick { padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--line, #ddd);
  font-size: 12px; font-weight: 600; background: var(--card, #fff); color: var(--text, #333);
  cursor: pointer; outline: none; max-width: 200px; }
.tk-type-pick:focus { border-color: var(--brand, #1e3a8a); }
.tk-type-thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: cover;
  border: 1.5px solid var(--line, #ddd); }
.tk-type-edit { font-size: 12px; font-weight: 600; color: var(--brand, #1e3a8a);
  text-decoration: none; }
.tk-type-edit:hover { text-decoration: underline; }
.tk-type-none { font-size: 12px; color: var(--muted, #999); font-style: italic; }

/* Expandable series */
.tk-series { cursor: pointer; }
.tk-chevron { flex: 0 0 20px; display: flex; align-items: center; justify-content: center;
  transition: transform .2s; color: var(--muted, #aaa); }
.tk-chevron svg { width: 16px; height: 16px; }
.tk-series.expanded .tk-chevron { transform: rotate(90deg); }

/* Coin checklist */
.tk-coins { display: none; padding: 0 0 8px; margin: 0 0 0 58px; }
.tk-series.expanded + .tk-coins { display: block; }
.tk-coin-item { display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 0.5px solid var(--line, #f0f0f0); font-size: 13px; }
.tk-coin-item:last-child { border-bottom: none; }
.tk-coin-icon { flex: 0 0 20px; text-align: center; font-size: 14px; cursor: pointer;
  transition: transform .1s; }
.tk-coin-icon:hover { transform: scale(1.3); }
.tk-coin-icon-owned { color: #16a34a; }
.tk-coin-icon-want { color: #eab308; }
.tk-coin-icon-missing { color: var(--muted, #ccc); }
.tk-coin-name { flex: 1; min-width: 0; }
.tk-coin-name a { color: var(--text, #222); text-decoration: none; }
.tk-coin-name a:hover { color: var(--brand, #1e3a8a); }
.tk-coin-meta { font-size: 11px; color: var(--muted, #888); flex: 0 0 auto; }
.tk-coin-rarity { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.tk-coin-rarity-key { background: #fef2f2; color: #991b1b; }
.tk-coin-rarity-semi { background: #fffbeb; color: #854d0e; }
.tk-coin-rarity-var { background: #eff6ff; color: #1e40af; }
.tk-coins-loading { padding: 12px 0; font-size: 13px; color: var(--muted, #888); }

@media (max-width: 600px) {
  .tk-coins { margin-left: 0; }
}

/* Album view (typeset only) */
.tk-view-toggle { display:inline-flex; border-radius:24px; border:1.5px solid var(--line,#ddd);
  overflow:hidden; margin-left:16px; vertical-align:middle; }
.tk-view-toggle button { padding:8px 22px; font-size:14px; font-weight:700; border:none;
  background:transparent; color:var(--muted,#666); cursor:pointer; font-family:inherit;
  transition:all .15s; display:inline-flex; align-items:center; gap:6px; }
.tk-view-toggle button svg { width:16px; height:16px; }
.tk-view-toggle button.active { background:var(--brand,#1e3a8a); color:#fff; }
.tk-view-toggle button:not(.active):hover { background:rgba(30,58,138,.06); }

.tk-album-wrap { display:none; }
.tk-album-wrap.active { display:block; }
.tk-list-wrap { display:block; }
.tk-list-wrap.hidden { display:none; }

.tk-album-denom { margin-bottom:32px; }
.tk-album-denom-head { font-size:14px; font-weight:800; color:var(--muted,#888);
  text-transform:uppercase; letter-spacing:.5px; padding-bottom:8px; margin-bottom:16px;
  border-bottom:2px solid var(--brand2, var(--brand2, #c5a356)); display:flex; justify-content:space-between; }
.tk-album-denom-count { font-size:12px; font-weight:600; color:var(--muted,#aaa);
  text-transform:none; letter-spacing:0; }
.tk-album-grid { display:flex; flex-wrap:wrap; gap:24px; }
.tk-album-slot { width:140px; text-align:center; transition:transform .15s; position:relative; }
.tk-album-slot:hover { transform:translateY(-2px); }
.tk-album-coin-filled { cursor:pointer; }

/* Album hide button - shows on hover */
.tk-album-hide { position:absolute; top:2px; right:8px; width:24px; height:24px; border-radius:50%;
  border:none; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; font-size:12px;
  display:none; align-items:center; justify-content:center; z-index:2;
  transition:background .15s; }
.tk-album-hide:hover { background:rgba(0,0,0,.7); }
.tk-album-hide svg { width:12px; height:12px; }
.tk-album-slot:hover .tk-album-hide { display:flex; }

/* Hidden album slots */
.tk-album-slot.tk-album-hidden { opacity:.3; }
.tk-album-slot.tk-album-hidden .tk-album-hide { display:flex; background:rgba(30,58,138,.6); }
.tk-album-slot.tk-album-hidden:hover { opacity:.5; }
.tk-album-slot.tk-album-hidden { display:none; }
.tk-album-wrap.show-hidden .tk-album-slot.tk-album-hidden { display:block; }

.tk-show-hidden-btn { padding:8px 18px; border-radius:24px; border:1.5px solid var(--line,#ddd);
  font-size:13px; font-weight:700; cursor:pointer; background:transparent;
  color:var(--text,#222); transition:all .15s; font-family:inherit; }
.tk-show-hidden-btn:hover { border-color:var(--brand,#1e3a8a); color:var(--brand,#1e3a8a); }
.tk-show-hidden-btn.active { background:var(--brand,#1e3a8a); color:#fff; border-color:var(--brand,#1e3a8a); }

/* In typeset mode, fully hide hidden series in list view by default */
.tk-list-wrap.tk-typeset-list .tk-hidden-series { display:none !important; }
.tk-list-wrap.tk-typeset-list.show-hidden .tk-hidden-series { display:flex !important; opacity:0.45; }
.tk-album-coin-wrap { width:130px; height:130px; margin:0 auto 8px; perspective:500px; }
.tk-album-coin-inner { width:100%; height:100%; position:relative;
  transition:transform 0.5s ease; transform-style:preserve-3d; }
.tk-album-coin-inner.flipped { transform:rotateY(180deg); }
.tk-album-coin-front, .tk-album-coin-back { position:absolute; width:100%; height:100%;
  border-radius:50%; -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow:hidden; }
.tk-album-coin-back { transform:rotateY(180deg); }
.tk-album-coin-img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.tk-album-coin-filled .tk-album-coin-front,
.tk-album-coin-filled .tk-album-coin-back { box-shadow:0 4px 18px rgba(0,0,0,.2); }
.tk-album-coin-empty { width:100%; height:100%; border-radius:50%;
  background:var(--surface,#f0f3f8); border:2.5px dashed var(--line,#ddd);
  display:flex; align-items:center; justify-content:center; transition:border-color .15s; }
.tk-album-slot:hover .tk-album-coin-empty { border-color:var(--brand2, var(--brand2, #c5a356)); }
.tk-album-coin-empty svg { opacity:.15; width:36px; height:36px; }
.tk-album-label { font-size:12px; color:var(--muted,#888); line-height:1.3; max-width:140px;
  word-wrap:break-word; overflow-wrap:break-word; }
.tk-album-label-owned { color:var(--text,#1a1a2e); font-weight:700; }
.tk-album-dot { display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--brand2, var(--brand2, #c5a356)); margin-right:4px; vertical-align:middle; }
.tk-album-sublabel { font-size:11px; color:var(--brand,#1e3a8a); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px;
  text-decoration:none; display:block; font-weight:600; }
.tk-album-sublabel:hover { text-decoration:underline; }

@media (max-width:768px) {
  .tk-album-grid { gap:16px; }
  .tk-album-slot { width:110px; }
  .tk-album-coin-wrap { width:100px; height:100px; }
  .tk-album-label { font-size:11px; max-width:110px; }
  .tk-album-sublabel { max-width:110px; }
  .tk-view-toggle { margin-left:0; margin-top:8px; }
}
@media (max-width:480px) {
  .tk-album-grid { gap:12px; justify-content:center; }
  .tk-album-slot { width:90px; }
  .tk-album-coin-wrap { width:84px; height:84px; }
  .tk-album-label { max-width:90px; font-size:10px; }
  .tk-album-sublabel { max-width:90px; font-size:10px; }
}

/* Hidden for filter */
.tk-series.hidden { display: none !important; }
.tk-denom.hidden { display: none !important; }
.tk-hidden-series { opacity: 0.45; }
.tk-coin-excluded { opacity: 0.4; text-decoration: line-through; }
.tk-coin-exclude-btn { background: none; border: none; cursor: pointer; font-size: 11px;
  font-weight: 600; padding: 2px 8px; border-radius: 6px; flex-shrink: 0; }
.tk-coin-exclude-btn:hover { background: rgba(0,0,0,.06); }

@media (max-width: 768px) {
  .ck-tracker { padding: 0 12px 40px; }
  .ck-tracker h1 { font-size: 22px; }
  .tk-mode a { padding: 6px 14px; font-size: 12px; }
  .tk-summary { grid-template-columns: repeat(2, 1fr); }
  .tk-stat-num { font-size: 18px; }
  .tk-filters { gap: 4px; }
  .tk-filter { padding: 4px 10px; font-size: 11px; }
  .tk-series { flex-wrap: wrap; padding: 8px 0; gap: 6px 10px; }
  .tk-track { flex: 0 0 24px; }
  .tk-tile, .tk-tile-ph { width: 36px; height: 36px; }
  .tk-info { flex: 1 1 calc(100% - 100px); min-width: 0; }
  .tk-title { font-size: 13px; }
  .tk-years { font-size: 11px; }
  .tk-progress { flex: 1 1 100%; order: 5; padding-left: 36px; }
  .tk-pct { font-size: 12px; flex: 0 0 auto; order: 4; }
  .tk-chevron { order: 6; }
  .tk-denom h2 { font-size: 16px; }
  .tk-type-row { gap: 6px; }
  .tk-type-pick { max-width: 100%; font-size: 11px; }
  .tk-coin-item { font-size: 12px; gap: 6px; }
}
@media (max-width: 480px) {
  .tk-summary { grid-template-columns: 1fr 1fr; }
  .tk-progress { padding-left: 0; }
}

/* ── Album View ─────────────────────────────────── */
.ck-album-wrap { max-width: 1120px; margin: 0 auto; padding: 0 0 52px; }

/* Header */
.ck-album-header { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ck-album-header h1 { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.ck-album-header-sub { font-size: 14px; color: var(--muted,#888); }
.ck-album-back { font-size: 14px; font-weight: 700; color: var(--brand,#1e3a8a);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  padding: 8px 16px; border: 1.5px solid var(--line,#ddd); border-radius: 10px; transition: all .15s; }
.ck-album-back:hover { border-color: var(--brand,#1e3a8a); background: rgba(30,58,138,.04); }

/* Series picker */
.ck-album-picker { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.ck-album-select { padding: 9px 14px; border: 1.5px solid var(--line,#ddd); border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 600; background: var(--card,#fff);
  color: var(--text,#222); min-width: 260px; cursor: pointer; }
.ck-album-select:focus { outline: none; border-color: var(--brand,#1e3a8a);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1); }
.ck-album-mode { display: inline-flex; border: 1.5px solid var(--line,#ddd);
  border-radius: 10px; overflow: hidden; }
.ck-album-mode-btn { padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 700;
  border: none; cursor: pointer; background: transparent; color: var(--muted,#888);
  transition: all .15s; text-decoration: none; }
.ck-album-mode-btn.active { background: var(--brand,#1e3a8a); color: #fff; }
.ck-album-mode-btn:not(.active):hover { background: var(--line,#eee); }

/* Export button */
.ck-album-export { padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--line,#ddd); border-radius: 10px; background: transparent;
  color: var(--text,#333); cursor: pointer; text-decoration: none; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px; }
.ck-album-export:hover { border-color: var(--brand,#1e3a8a); color: var(--brand,#1e3a8a); }
.ck-album-export svg { flex-shrink: 0; }

/* Stats bar */
.ck-album-stats { display: flex; gap: 16px; align-items: center; margin-bottom: 20px;
  flex-wrap: wrap; }
.ck-album-stat { font-size: 13px; color: var(--muted,#888); }
.ck-album-stat strong { color: var(--text,#222); font-weight: 800; }
.ck-album-pct-bar { flex: 1; min-width: 120px; height: 6px;
  background: var(--line,#eee); border-radius: 4px; overflow: hidden; }
.ck-album-pct-fill { height: 100%; border-radius: 4px; transition: width .4s; }

/* Album page — the visual album */
.ck-album-page { background: #1a2744; border-radius: 20px; padding: 28px 24px;
  box-shadow: 0 16px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative; overflow: hidden; }
.ck-album-page::before { content: ''; position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px; border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; pointer-events: none; }

/* Album title on the page */
.ck-album-page-title { text-align: center; color: rgba(255,255,255,.7); font-size: 15px;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ck-album-page-title span { color: var(--brand2, var(--brand2, #c5a356)); }

/* Coin grid */
.ck-album-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 14px;
  justify-items: center; }

/* Individual coin slot */
.ck-coin-slot { display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; }
.ck-coin-hole { width: 94px; height: 94px; border-radius: 50%;
  position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.ck-coin-slot:hover .ck-coin-hole { transform: scale(1.06);
  box-shadow: 0 0 20px rgba(197,163,86,.3); }

/* Empty hole */
.ck-coin-hole.empty { background: rgba(0,0,0,.35);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center; }
.ck-coin-hole.empty .ck-coin-hole-label { color: rgba(255,255,255,.22); font-size: 13px;
  font-weight: 700; text-align: center; line-height: 1.2; }

/* Want hole */
.ck-coin-hole.want { background: rgba(0,0,0,.35);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.4), 0 0 0 2px rgba(197,163,86,.4);
  display: flex; align-items: center; justify-content: center; }
.ck-coin-hole.want .ck-coin-hole-label { color: rgba(197,163,86,.5); font-size: 13px;
  font-weight: 700; text-align: center; line-height: 1.2; }

/* Filled hole (owned) */
.ck-coin-hole.owned { box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 2px rgba(255,255,255,.08); }
.ck-coin-hole.owned img { width: 100%; height: 100%; object-fit: cover; display: block;
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity .25s;
  transform: scale(1.16); }
.ck-coin-hole .ck-coin-rev { opacity: 0; }

/* Desktop hover flip — show reverse */
@media (hover: hover) and (pointer: fine) {
  .ck-coin-hole.has-rev:hover .ck-coin-obv { opacity: 0; }
  .ck-coin-hole.has-rev:hover .ck-coin-rev { opacity: 1; }
}

/* Coin label below hole */
.ck-coin-label { text-align: center; max-width: 100px; }
.ck-coin-label-year { font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.75); line-height: 1.2; }
.ck-coin-label-grade { font-size: 10px; font-weight: 600; color: var(--brand2, var(--brand2, #c5a356)); margin-top: 1px; }
.ck-coin-label-rarity { font-size: 9px; font-weight: 700; padding: 1px 6px;
  border-radius: 6px; display: inline-block; margin-top: 2px; }
.ck-coin-label-rarity.key  { background: rgba(183,28,28,.3); color: #ff8a8a; }
.ck-coin-label-rarity.semi { background: rgba(196,160,106,.25); color: #e8c870; }
.ck-coin-label-rarity.var  { background: rgba(100,80,200,.25); color: #b0a0f0; }

/* Album footer */
.ck-album-page-footer { text-align: center; margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08); }
.ck-album-legend { display: inline-flex; gap: 18px; font-size: 11px;
  color: rgba(255,255,255,.45); }
.ck-album-legend-dot { width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; vertical-align: middle; margin-right: 4px; }
.ck-legend-owned { background: rgba(255,255,255,.2);
  box-shadow: 0 0 0 2px rgba(255,255,255,.1); }
.ck-legend-want { background: transparent;
  box-shadow: 0 0 0 2px rgba(197,163,86,.5); }
.ck-legend-empty { background: rgba(0,0,0,.4);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }

/* Page flip */
.ck-album-pages-wrap { position: relative; }
.ck-album-grid-page { display: none; }
.ck-album-grid-page.active { display: grid; animation: ckPageIn .3s ease-out; }
@keyframes ckPageIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* Page navigation */
.ck-page-nav { display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.ck-page-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.15);
  background: transparent; color: rgba(255,255,255,.5); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.ck-page-btn:hover { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); }
.ck-page-btn.active { background: rgba(197,163,86,.2); border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); }
.ck-page-btn.disabled { opacity: .25; pointer-events: none; }
.ck-page-arrow { width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); font-size: 16px;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.ck-page-arrow:hover { background: rgba(197,163,86,.2); color: var(--brand2, var(--brand2, #c5a356)); }
.ck-page-arrow.disabled { opacity: .2; pointer-events: none; }
.ck-page-label { font-size: 12px; color: rgba(255,255,255,.35); margin: 0 8px; }

/* Empty album state */
.ck-album-empty { text-align: center; padding: 48px 20px; color: rgba(255,255,255,.5); }
.ck-album-empty h3 { font-size: 18px; color: rgba(255,255,255,.7); margin: 0 0 8px; }
.ck-album-empty p { font-size: 14px; margin: 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .ck-album-wrap { padding: 0 10px 40px; }
  .ck-album-header h1 { font-size: 20px; }
  .ck-album-page { padding: 20px 14px; border-radius: 16px; }
  .ck-album-grid { gap: 14px 10px; }
  .ck-coin-hole { width: 76px; height: 76px; }
  .ck-coin-label-year { font-size: 11px; }
  .ck-album-select { min-width: 200px; }
}
@media (max-width: 480px) {
  .ck-album-grid { grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
  .ck-coin-hole { width: 66px; height: 66px; }
  .ck-coin-hole-label { font-size: 11px !important; }
  .ck-album-picker { flex-direction: column; align-items: stretch; }
  .ck-album-select { min-width: 100%; }
  .ck-coin-label-year { font-size: 10px; }
  .ck-coin-label-grade { font-size: 8px; }
}

/* ── Roll Hunting Log ─────────────────────────────────── */
.rh-wrap{max-width:820px;margin:0 auto;padding:0 0 52px;}
.rh-back{font-size:14px;font-weight:700;color:var(--brand,#1e3a8a);text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;padding:8px 16px;border:1.5px solid var(--line,#ddd);border-radius:10px;transition:all .15s;}
.rh-back:hover{border-color:var(--brand,#1e3a8a);background:rgba(30,58,138,.04);}
.rh-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.rh-title{font-size:26px;font-weight:800;}
.rh-btn{padding:9px 18px;border-radius:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;border:none;background:var(--brand,#1e3a8a);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.rh-btn:hover{opacity:.9;}
.rh-btn-outline{background:transparent;border:1.5px solid var(--line,#ddd);color:var(--text,#333);}
.rh-btn-outline:hover{border-color:var(--brand,#1e3a8a);color:var(--brand,#1e3a8a);}
.rh-btn-sm{padding:6px 12px;font-size:13px;border-radius:8px;}
.rh-btn-danger{background:#dc2626;}

/* Filters */
.rh-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.rh-filter{padding:8px 30px 8px 12px;border:1.5px solid var(--line,#ddd);border-radius:10px;font:inherit;font-size:13px;font-weight:700;background:var(--card,#fff);color:var(--text,#222);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
.rh-filter.active{background:#e6f1fb;border-color:#85b7eb;color:#185fa5;}
.rh-filter-tag{font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px;background:#e6f1fb;color:#185fa5;}
.rh-filter-clear{font-size:12px;font-weight:700;color:var(--muted,#888);cursor:pointer;text-decoration:underline;border:none;background:none;}

/* Export card */
.rh-export-card{background:var(--card,#fff);border:1px solid var(--line,#eee);border-radius:14px;padding:14px 18px;margin-bottom:16px;}
.rh-export-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted,#888);margin-bottom:10px;}
.rh-export-inner{display:flex;flex-direction:column;gap:10px;}
.rh-date-range{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rh-date-label{font-size:12px;font-weight:700;color:var(--muted,#888);}
.rh-date-input{padding:6px 10px;border:1.5px solid var(--line,#ddd);border-radius:8px;font:inherit;font-size:13px;background:#eceef3;color:var(--text,#222);width:140px;}
.rh-date-input:focus{outline:none;border-color:var(--brand,#1e3a8a);}
.rh-export-hint{font-size:11px;color:var(--muted,#aaa);}
.rh-export-btns{display:flex;gap:6px;}
.rh-export-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:1.5px solid var(--line,#ddd);border-radius:8px;font:inherit;font-size:13px;font-weight:700;color:var(--text,#555);text-decoration:none;transition:all .15s;background:var(--card,#fff);}
.rh-export-btn:hover{border-color:var(--brand,#1e3a8a);color:var(--brand,#1e3a8a);}

/* Stats */
.rh-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:20px;}
.rh-stat{background:var(--card,#fff);border:1px solid var(--line,#eee);border-radius:14px;padding:14px 12px;}
.rh-stat-val{font-size:22px;font-weight:900;color:var(--brand,#1e3a8a);}
.rh-stat-lbl{font-size:11px;color:var(--muted,#888);margin-top:2px;}
.rh-stat-sub{font-size:10px;color:var(--muted,#aaa);margin-top:3px;}

/* Chart */
.rh-chart-card{background:var(--card,#fff);border:1px solid var(--line,#eee);border-radius:16px;padding:16px 20px;margin-bottom:20px;}
.rh-chart-title{font-size:14px;font-weight:800;margin-bottom:4px;}
.rh-chart-legend{display:flex;gap:14px;font-size:12px;color:var(--muted,#888);margin-bottom:10px;}
.rh-chart-legend-dot{width:10px;height:10px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:4px;}
.rh-chart{position:relative;height:180px;}

/* Breakdowns */
.rh-bd{background:var(--card,#fff);border:1px solid var(--line,#eee);border-radius:16px;margin-bottom:16px;overflow:hidden;}
.rh-bd-title{padding:12px 18px;font-size:14px;font-weight:800;border-bottom:1px solid var(--line,#eee);}
.rh-bd-row{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--line,#f5f5f5);font-size:13px;}
.rh-bd-row:last-child{border-bottom:none;}
.rh-bd-row:hover{background:rgba(30,58,138,.02);}
.rh-bd-name{flex:2;font-weight:700;}
.rh-bd-val{flex:1;color:var(--muted,#888);text-align:right;}
.rh-bd-bar{flex:1.2;height:6px;border-radius:3px;background:var(--line,#eee);overflow:hidden;margin:0 4px;}
.rh-bd-bar-fill{height:100%;border-radius:3px;background:var(--brand,#1e3a8a);}
.rh-bd-rate{flex:0.7;font-size:12px;font-weight:700;color:var(--brand,#1e3a8a);text-align:right;}
.rh-bd-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;}
.rh-badge-cw{background:#faeeda;color:#854f0b;}
.rh-badge-mw{background:var(--surface,#f0f3f8);color:var(--muted,#888);}
.rh-badge-mixed{background:var(--surface,#f0f3f8);color:var(--muted,#888);}

/* Sessions */
.rh-section-title{font-size:16px;font-weight:800;margin:24px 0 12px;}
.rh-session{background:var(--card,#fff);border:1px solid var(--line,#eee);border-radius:16px;margin-bottom:10px;overflow:hidden;}
.rh-sess-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;transition:background .1s;}
.rh-sess-header:hover{background:rgba(30,58,138,.02);}
.rh-sess-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.rh-sess-info{flex:1;min-width:0;}
.rh-sess-title{font-size:14px;font-weight:800;}
.rh-sess-meta{font-size:12px;color:var(--muted,#888);margin-top:2px;}
.rh-sess-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px;}
.rh-sess-finds{font-size:13px;font-weight:700;color:var(--brand,#1e3a8a);flex-shrink:0;}
.rh-sess-detail{display:none;padding:0 18px 14px;border-top:1px solid var(--line,#eee);}
.rh-session.open .rh-sess-detail{display:block;}
.rh-sess-active{border-color:var(--brand,#1e3a8a);border-width:2px;}

/* Finds */
.rh-find{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line,#f5f5f5);}
.rh-find:last-child{border-bottom:none;}
.rh-find-thumb{width:40px;height:40px;border-radius:50%;background:var(--surface,#f0f3f8);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-size:11px;font-weight:700;color:var(--muted,#ccc);}
.rh-find-thumb img{width:100%;height:100%;object-fit:cover;}
.rh-find-info{flex:1;min-width:0;}
.rh-find-name{font-size:13px;font-weight:700;}
.rh-find-sub{font-size:11px;color:var(--muted,#888);}
.rh-find-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;}
.rh-badge-kept{background:#eaf3de;color:#3b6d11;}
.rh-badge-returned{background:var(--surface,#f0f3f8);color:var(--muted,#888);}
.rh-badge-silver{background:#faeeda;color:#854f0b;margin-right:4px;}
.rh-badge-foreign{background:#eeedfe;color:#534ab7;margin-right:4px;}

/* Forms */
.rh-form-card{background:var(--card,#fff);border:1px solid var(--line,#eee);border-radius:16px;padding:20px;margin-bottom:16px;}
.rh-form-title{font-size:16px;font-weight:800;margin-bottom:16px;}
.rh-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.rh-field label{font-size:12px;font-weight:700;color:var(--muted,#888);}
.rh-field input,.rh-field select,.rh-field textarea{padding:9px 12px;border:1.5px solid var(--line,#ddd);border-radius:10px;font:inherit;font-size:14px;background:#eceef3;color:var(--text,#222);}
.rh-field input:focus,.rh-field select:focus,.rh-field textarea:focus{outline:none;border-color:var(--brand,#1e3a8a);}
.rh-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.rh-field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.rh-type-toggle{display:flex;gap:0;border:1.5px solid var(--line,#ddd);border-radius:10px;overflow:hidden;}
.rh-type-opt{flex:1;padding:9px 8px;font:inherit;font-size:13px;font-weight:700;text-align:center;cursor:pointer;background:transparent;color:var(--muted,#888);border:none;border-right:1px solid var(--line,#eee);transition:all .15s;}
.rh-type-opt:last-child{border-right:none;}
.rh-type-opt.active{background:var(--brand,#1e3a8a);color:#fff;}
.rh-type-opt:hover:not(.active){background:rgba(30,58,138,.04);}
.rh-type-sub{display:block;font-size:9px;font-weight:500;opacity:.6;margin-top:1px;}

/* Bank management */
.rh-bank-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line,#f5f5f5);}
.rh-bank-item:last-child{border-bottom:none;}
.rh-bank-icon{width:32px;height:32px;border-radius:8px;background:var(--surface,#f0f3f8);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rh-bank-name{flex:1;font-size:13px;font-weight:700;}
.rh-bank-stats{font-size:11px;color:var(--muted,#888);}
.rh-add-row{display:flex;gap:8px;margin-top:12px;}
.rh-add-row input{flex:1;}

/* Tabs */
.rh-tabs{display:flex;gap:0;margin-bottom:16px;border-bottom:2px solid var(--line,#eee);}
.rh-tab{padding:8px 16px;font:inherit;font-size:14px;font-weight:700;color:var(--muted,#888);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;}
.rh-tab.active{color:var(--brand,#1e3a8a);border-bottom-color:var(--brand,#1e3a8a);}
.rh-tab-panel{display:none;}
.rh-tab-panel.active{display:block;}

.rh-empty{text-align:center;padding:32px 16px;color:var(--muted,#888);font-size:14px;}

/* Explainer */
.rh-explainer{background:var(--card,#fff);border:1px solid var(--line,#eee);border-radius:16px;padding:20px 24px;margin-bottom:20px;}
.rh-explainer-title{font-size:16px;font-weight:800;margin-bottom:14px;}
.rh-explainer-steps{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.rh-explainer-step{display:flex;gap:12px;align-items:flex-start;}
.rh-explainer-num{width:28px;height:28px;border-radius:50%;background:var(--brand,#1e3a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;}
.rh-explainer-step strong{display:block;font-size:14px;font-weight:800;margin-bottom:2px;}
.rh-explainer-step span{font-size:13px;color:var(--muted,#888);line-height:1.5;}
.rh-explainer-note{font-size:13px;color:var(--muted,#888);line-height:1.6;padding:12px 16px;background:linear-gradient(135deg,rgba(32,58,115,.04),rgba(202,165,106,.06));border:1px solid rgba(202,165,106,.25);border-radius:10px;}
.rh-explainer-note strong{color:var(--text,#333);}

/* Session edit form */
.rh-edit-form{margin-top:12px;padding:0 2px;}

@media(max-width:768px){.rh-stats{grid-template-columns:repeat(3,1fr);}.rh-field-row-3{grid-template-columns:1fr;}}
@media(max-width:480px){.rh-wrap{padding:0 12px 40px;}.rh-stats{grid-template-columns:repeat(2,1fr);}.rh-field-row{grid-template-columns:1fr;}.rh-date-input{width:120px;}}

/* ── User Profile ─────────────────────────────────── */
.up-wrap { max-width: 700px; margin: 0 auto; padding: 0 0 52px; }

/* Header card */
.up-header { background: var(--card,#fff); border: 1px solid var(--line,#eee); border-radius: 20px;
  padding: 32px; text-align: center; margin-bottom: 20px; position: relative; }
.up-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--line,#eee); margin: 0 auto 14px; display: block; }
.up-avatar-placeholder { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--brand,#1e3a8a); display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800; color: #fff; }
.up-name { font-size: 24px; font-weight: 800; margin: 0 0 2px; }
.up-username { font-size: 14px; color: var(--muted,#888); margin: 0 0 12px; }
.up-edit { position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 700;
  color: var(--brand,#1e3a8a); text-decoration: none; padding: 4px 12px;
  border: 1.5px solid var(--line,#ddd); border-radius: 8px; }
.up-edit:hover { border-color: var(--brand,#1e3a8a); }

/* Bio section */
.up-bio-text { font-size: 15px; line-height: 1.7; color: var(--text,#333); text-align: center;
  max-width: 520px; margin: 0 auto 14px; }
.up-meta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; font-size: 13px;
  color: var(--muted,#888); margin-bottom: 14px; }
.up-meta-item { display: flex; align-items: center; gap: 5px; }
.up-meta-icon { width: 14px; height: 14px; opacity: .5; }

/* Stats grid */
.up-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px;
  margin-bottom: 20px; }
.up-stat { background: var(--card,#fff); border: 1px solid var(--line,#eee); border-radius: 14px;
  padding: 18px 14px; text-align: center; }
.up-stat-num { font-size: 28px; font-weight: 900; color: var(--brand,#1e3a8a); }
.up-stat-label { font-size: 12px; color: var(--muted,#888); margin-top: 2px; }

/* Badges */
.up-badges { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.up-badge { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.up-badge-member { background: var(--surface,#f0f3f8); color: var(--muted,#888); }
.up-badge-complete { background: #ecfdf5; color: #065f46; }
.up-badge-collector { background: #eff6ff; color: #1e40af; }

/* Achievement badge icons row */
.up-achievement-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted, #888); text-align: center; margin-top: 16px; margin-bottom: 8px;
}
.up-achievement-row {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 0;
}
.up-achievement {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(var(--brand2-rgb, 197,163,86), .1);
  border: 1.5px solid rgba(var(--brand2-rgb, 197,163,86), .2);
  display: flex; align-items: center; justify-content: center;
  cursor: default; transition: all .2s; position: relative;
}
.up-achievement:hover {
  transform: scale(1.2);
  background: rgba(var(--brand2-rgb, 197,163,86), .2);
  border-color: var(--brand2, var(--brand2, #c5a356));
  box-shadow: 0 4px 16px rgba(var(--brand2-rgb, 197,163,86), .25);
}
.up-achievement-tip {
  display: none; position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; z-index: 100;
  background: var(--card, #fff); border: 1px solid var(--line, #e0ddd4);
  border-radius: 8px; padding: 8px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  text-align: center; pointer-events: none;
}
.up-achievement-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--card, #fff);
}
.up-achievement:hover .up-achievement-tip { display: block; }
.up-achievement-tip-title {
  font-size: 12px; font-weight: 800; color: var(--brand2, var(--brand2, #c5a356));
}
.up-achievement-tip-desc {
  font-size: 11px; color: var(--muted, #888); margin-top: 2px; max-width: 200px; white-space: normal;
}
.up-achievement-tip-date {
  font-size: 10px; color: var(--muted, #aaa); margin-top: 3px;
}

/* Shared Albums */
.up-albums-section { margin-bottom: 20px; }
.up-albums-title { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted,#888); margin-bottom: 12px; }

/* Album dropdown */
.up-album-select-wrap { margin-bottom: 16px; }
.up-album-select { padding: 10px 36px 10px 14px; border-radius: 10px;
  border: 1.5px solid var(--line,#ddd); font: inherit; font-size: 14px; font-weight: 700;
  background: var(--card,#fff); color: var(--text,#222); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }

/* Album page (dark Dansco style) */
.up-album-page { display: none; }
.up-album-page.active { display: block; }
.up-album-card { background: #1a2744; border-radius: 20px; padding: 24px 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,.2); position: relative; overflow: hidden; }
.up-album-card::before { content: ''; position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 14px; pointer-events: none; }

.up-album-header { text-align: center; padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.up-album-header-title { color: rgba(255,255,255,.7); font-size: 15px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; }
.up-album-header-title span { color: var(--brand2, var(--brand2, #c5a356)); }
.up-album-header-meta { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 4px; }
.up-album-header-bar { width: 200px; height: 5px; border-radius: 3px; margin: 8px auto 0;
  background: rgba(255,255,255,.08); overflow: hidden; }
.up-album-header-bar-fill { height: 100%; border-radius: 3px; }

/* Coin grid — matches album viewer */
.up-album-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 14px;
  justify-items: center; }

.up-coin-slot { display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; }
.up-coin-hole { width: 94px; height: 94px; border-radius: 50%;
  position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.up-coin-slot:hover .up-coin-hole { transform: scale(1.06);
  box-shadow: 0 0 20px rgba(197,163,86,.3); }

.up-coin-hole.empty { background: rgba(0,0,0,.35);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center; }
.up-coin-hole.empty .up-coin-hole-label { color: rgba(255,255,255,.22); font-size: 13px;
  font-weight: 700; text-align: center; line-height: 1.2; }

.up-coin-hole.want { background: rgba(0,0,0,.35);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.4), 0 0 0 2px rgba(197,163,86,.4);
  display: flex; align-items: center; justify-content: center; }
.up-coin-hole.want .up-coin-hole-label { color: rgba(197,163,86,.5); font-size: 13px;
  font-weight: 700; text-align: center; line-height: 1.2; }

.up-coin-hole.owned { box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 2px rgba(255,255,255,.08); }
.up-coin-hole.owned img { width: 100%; height: 100%; object-fit: cover; display: block;
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity .25s;
  transform: scale(1.16); }
.up-coin-hole .up-coin-rev { opacity: 0; }

/* Desktop hover flip */
@media (hover: hover) and (pointer: fine) {
  .up-coin-hole.has-rev:hover .up-coin-obv { opacity: 0; }
  .up-coin-hole.has-rev:hover .up-coin-rev { opacity: 1; }
}

/* Coin label */
.up-coin-label { text-align: center; max-width: 100px; }
.up-coin-label-year { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); line-height: 1.2; }
.up-coin-label-grade { font-size: 10px; font-weight: 600; color: var(--brand2, var(--brand2, #c5a356)); margin-top: 1px; }
.up-coin-label-rarity { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
  display: inline-block; margin-top: 2px; letter-spacing: .3px; }
.up-coin-label-rarity.key { background: rgba(220,38,38,.12); color: #fca5a5; }
.up-coin-label-rarity.semi { background: rgba(197,163,86,.12); color: var(--brand2, var(--brand2, #c5a356)); }
.up-coin-label-rarity.var { background: rgba(59,130,246,.12); color: #93c5fd; }

/* Pagination inside album */
.up-album-pager { display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 14px 0 4px; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.up-album-pager-btn { width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12); background: transparent;
  color: rgba(255,255,255,.45); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.up-album-pager-btn:hover { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); }
.up-album-pager-btn.active { background: rgba(197,163,86,.15); color: var(--brand2, var(--brand2, #c5a356));
  border-color: rgba(197,163,86,.3); }
.up-album-pager-btn.disabled { opacity: .2; pointer-events: none; }
.up-album-pager-arrow { width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.06); color: rgba(255,255,255,.35);
  font-size: 16px; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; }
.up-album-pager-arrow:hover { background: rgba(197,163,86,.12); color: var(--brand2, var(--brand2, #c5a356)); }
.up-album-pager-arrow.disabled { opacity: .15; pointer-events: none; }
.up-album-pager-info { font-size: 11px; color: rgba(255,255,255,.3); margin: 0 6px; }

/* Grid pages */
.up-album-grid-page { display: none; }
.up-album-grid-page.active { display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 18px 14px; justify-items: center; animation: upPageIn .25s ease-out; }
@keyframes upPageIn { from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; } }

/* Share link */
.up-album-share { text-align: center; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08); }
.up-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: transparent;
  color: rgba(255,255,255,.45); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all .15s; }
.up-share-btn:hover { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); }
.up-share-btn.copied { border-color: #16a34a; color: #16a34a; }

/* Legend */
.up-album-legend { display: flex; justify-content: center; gap: 16px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 10px; color: rgba(255,255,255,.35); }
.up-legend-dot { width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; vertical-align: middle; margin-right: 4px; }
.up-legend-owned { background: rgba(255,255,255,.2); box-shadow: 0 0 0 1.5px rgba(255,255,255,.1); }
.up-legend-want { background: transparent; box-shadow: 0 0 0 1.5px rgba(197,163,86,.5); }
.up-legend-empty { background: rgba(0,0,0,.3); }

@media (max-width: 768px) {
  .up-album-grid-page.active { grid-template-columns: repeat(6, 1fr); gap: 14px 10px; }
  .up-coin-hole { width: 76px; height: 76px; }
}
@media (max-width: 480px) {
  .up-wrap { padding: 0 12px 40px; }
  .up-header { padding: 24px 16px; }
  .up-stats { grid-template-columns: repeat(2, 1fr); }
  .up-album-grid-page.active { grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
  .up-coin-hole { width: 66px; height: 66px; }
  .up-coin-hole-label { font-size: 11px !important; }
  .up-coin-label-year { font-size: 11px; }
}

/* ── Public Showcase ─────────────────────────────────── */
.sc-wrap { max-width: 720px; margin: 0 auto; padding: 0 0 52px; }
.sc-back { font-size: 14px; font-weight: 700; color: var(--brand,#1e3a8a);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  padding: 8px 16px; border: 1.5px solid var(--line,#ddd); border-radius: 10px; transition: all .15s; }
.sc-back:hover { border-color: var(--brand,#1e3a8a); background: rgba(30,58,138,.04); }
.sc-wrap h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.sc-wrap .sub { color: var(--muted,#888); font-size: 14px; margin: 0 0 24px; }

.sc-form { display: flex; flex-direction: column; gap: 20px; }
.sc-card { background: var(--card,#fff); border: 1px solid var(--line,#eee); border-radius: 16px; padding: 20px 24px; }
.sc-card-title { font-size: 16px; font-weight: 800; margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line,#eee); }

.sc-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.sc-field:last-child { margin-bottom: 0; }
.sc-label { font-size: 13px; font-weight: 700; color: var(--text,#333); }
.sc-hint { font-size: 11px; color: var(--muted,#999); }
.sc-input, .sc-textarea {
  padding: 10px 14px; border: 1.5px solid var(--line,#ddd); border-radius: 10px;
  font: inherit; font-size: 14px; background: var(--card,#fff); color: var(--text,#222); }
.sc-input:focus, .sc-textarea:focus { outline: none; border-color: var(--brand,#1e3a8a); }
.sc-textarea { min-height: 80px; resize: vertical; }
.sc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sc-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.sc-toggle-label { font-size: 14px; font-weight: 600; flex: 1; }
.sc-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.sc-switch input { opacity: 0; width: 0; height: 0; }
.sc-switch .slider { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #b0b8c8; border-radius: 24px;
  cursor: pointer; transition: background .2s; }
.sc-switch .slider::before { content: ''; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .2s; }
.sc-switch input:checked + .slider { background: var(--brand,#1e3a8a); }
.sc-switch input:checked + .slider::before { transform: translateX(20px); }

.sc-avatar-row { display: flex; align-items: center; gap: 16px; }
.sc-avatar-preview { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--line,#eee); background: var(--surface,#f0f3f8); }
.sc-avatar-placeholder { width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface,#f0f3f8); border: 2px solid var(--line,#eee);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: var(--muted,#ccc); }

.sc-public-link { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: var(--surface,#f0f3f8); border-radius: 10px; font-size: 13px;
  color: var(--text,#333); margin-top: 10px; }
.sc-public-link a { color: var(--brand,#1e3a8a); font-weight: 700; word-break: break-all; }

.sc-joomla-info { padding: 10px 14px; background: var(--surface,#f5f7fb); border-radius: 10px;
  font-size: 13px; color: var(--muted,#888); margin-bottom: 14px; }
.sc-joomla-info strong { color: var(--text,#333); }

.sc-submit { padding: 12px 28px; border: none; border-radius: 10px;
  background: var(--brand,#1e3a8a); color: #fff; font: inherit; font-size: 15px;
  font-weight: 700; cursor: pointer; align-self: flex-start; }
.sc-submit:hover { opacity: .9; }

/* Shared albums */
.sc-series-list { display: flex; flex-direction: column; gap: 0; }
.sc-series-row { display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line,#f0f0f0); }
.sc-series-row:last-child { border-bottom: none; }
.sc-series-info { flex: 1; min-width: 0; }
.sc-series-name { font-size: 14px; font-weight: 700; color: var(--text,#222); }
.sc-series-meta { font-size: 12px; color: var(--muted,#888); margin-top: 1px; }
.sc-series-bar { width: 80px; height: 6px; border-radius: 3px; background: var(--line,#e5e7eb);
  overflow: hidden; flex-shrink: 0; }
.sc-series-bar-fill { height: 100%; border-radius: 3px; }
.sc-series-empty { padding: 20px 0; font-size: 13px; color: var(--muted,#aaa); text-align: center; }

.sc-preview { margin-top: 8px; padding: 14px 18px; background: var(--surface,#f5f7fb);
  border-radius: 12px; font-size: 13px; color: var(--muted,#888); }
.sc-preview strong { color: var(--text,#333); }

@media (max-width: 480px) {
  .sc-wrap { padding: 0 12px 40px; }
  .sc-row { grid-template-columns: 1fr; }
  .sc-card { padding: 16px; }
}

/* ── World Coins Browser ─────────────────────────────────── */
.wc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px 52px; overflow-x: hidden; }
.wc-header h1 { font-size: 28px; font-weight: 800; margin: 0 0 4px; }
.wc-header p { color: var(--muted,#888); font-size: 14px; margin: 0 0 24px; }

/* Tabs — removed */

/* Map container */
.wc-map-wrap { background: var(--card,#fff); border: 1px solid var(--line,#eee);
  border-radius: 16px; overflow: hidden; margin-bottom: 24px; position: relative;
  touch-action: none; }
.wc-map-svg { width: 100%; height: auto; display: block; }
.wc-map-tooltip { position: absolute; pointer-events: none; background: var(--card,#fff);
  border: 1px solid var(--line,#ddd); border-radius: 10px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  display: none; z-index: 10; white-space: nowrap; }
.wc-map-tooltip .wc-tt-flag { margin-right: 6px; vertical-align: middle; }
.wc-map-tooltip .wc-tt-flag.fi { width: 1.4em; line-height: 1; }
.wc-map-tooltip .wc-tt-series { font-size: 11px; font-weight: 400; color: var(--muted,#888);
  margin-left: 4px; }

/* Map controls */
.wc-map-controls { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.wc-map-ctrl { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line,#ddd);
  background: var(--card,#fff); color: var(--text,#333); font-size: 18px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s; line-height: 1; }
.wc-map-ctrl:hover { border-color: var(--brand,#1e3a8a); color: var(--brand,#1e3a8a); }
.wc-map-ctrl-reset { width: auto; padding: 0 10px; font-size: 11px; font-weight: 700; }
.wc-map-hint { font-size: 12px; color: var(--muted,#999); text-align: center; margin-top: 10px; }

/* Country list below map */
.wc-list-section { margin-top: 28px; }

/* Country list */
.wc-search { width: 100%; padding: 12px 16px; border: 1.5px solid var(--line,#ddd);
  border-radius: 12px; font: inherit; font-size: 15px; margin-bottom: 20px;
  background: var(--card,#fff); color: var(--text,#222); transition: border-color .15s; }
.wc-search:focus { outline: none; border-color: var(--brand,#1e3a8a);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1); }
.wc-search::placeholder { color: var(--muted,#bbb); }

/* Country cards grid */
.wc-country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wc-country-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--card,#fff); border: 1px solid var(--line,#eee); border-radius: 14px;
  text-decoration: none; transition: border-color .15s, transform .1s; }
.wc-country-card:hover { border-color: var(--brand,#1e3a8a); transform: translateY(-1px); }
.wc-country-flag { flex-shrink: 0; line-height: 1; }
.wc-country-flag.fi { font-size: 28px; width: 1.6em; }
.wc-country-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.wc-country-name { font-size: 14px; font-weight: 700; color: var(--text,#222); flex: 1; min-width: 0; }
.wc-country-meta { font-size: 12px; color: var(--muted,#888); flex-shrink: 0; white-space: nowrap; }

/* Empty state */
.wc-empty { text-align: center; padding: 48px 20px; color: var(--muted,#888); }
.wc-empty h3 { font-size: 18px; font-weight: 800; color: var(--text,#333); margin: 0 0 8px; }
.wc-no-results { display: none; text-align: center; padding: 24px; color: var(--muted,#999);
  font-size: 14px; }

/* Country pagination */
.wc-page { display: none; }
.wc-page.active { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wc-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; }
.wc-pager-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line,#ddd);
  background: transparent; color: var(--text,#555); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.wc-pager-btn:hover { border-color: var(--brand,#1e3a8a); color: var(--brand,#1e3a8a); }
.wc-pager-btn.active { background: var(--brand,#1e3a8a); color: #fff; border-color: var(--brand,#1e3a8a); }
.wc-pager-btn.disabled { opacity: .25; pointer-events: none; }
.wc-pager-arrow { width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--surface,#f0f3f8); color: var(--muted,#888); font-size: 16px;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.wc-pager-arrow:hover { background: rgba(30,58,138,.1); color: var(--brand,#1e3a8a); }
.wc-pager-arrow.disabled { opacity: .2; pointer-events: none; }
.wc-pager-label { font-size: 12px; color: var(--muted,#999); margin: 0 8px; }

@media (max-width: 768px) {
  .wc-wrap { padding: 0 12px 40px; }
  .wc-header h1 { font-size: 22px; }
  .wc-country-grid { grid-template-columns: 1fr; }
  .wc-page.active { grid-template-columns: 1fr; gap: 8px; }
  .wc-country-card { padding: 10px 14px; }
  .wc-map-wrap { border-radius: 10px; }
  .wc-map-hint { font-size: 11px; }
  .wc-pager { flex-wrap: wrap; }
}
@media (min-width: 480px) and (max-width: 768px) {
  .wc-country-grid { grid-template-columns: repeat(2, 1fr); }
  .wc-page.active { grid-template-columns: repeat(2, 1fr); }
}

/* ── World Coin Detail ─────────────────────────────────── */
.wcd-wrap { max-width: 960px; margin: 0 auto; padding: 0 0 52px; }
.wcd-breadcrumb { font-size: 13px; color: var(--muted,#888); margin-bottom: 16px; }
.wcd-breadcrumb a { color: var(--brand,#1e3a8a); text-decoration: none; font-weight: 700; }
.wcd-breadcrumb a:hover { text-decoration: underline; }

.wcd-top { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }

/* Images */
.wcd-images { display: flex; gap: 16px; justify-content: center; }
.wcd-img-wrap { width: 200px; text-align: center; }
.wcd-img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--line,#eee); background: var(--surface,#f5f7fb); }
.wcd-img-label { font-size: 11px; color: var(--muted,#aaa); margin-top: 6px; text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 700; }
.wcd-img-placeholder { width: 200px; height: 200px; border-radius: 50%;
  background: var(--surface,#f0f3f8); border: 3px solid var(--line,#eee);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--muted,#ccc); font-weight: 700; }

/* Details */
.wcd-details h1 { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.wcd-series-link { font-size: 14px; color: var(--muted,#888); margin-bottom: 16px; }
.wcd-series-link a { color: var(--brand,#1e3a8a); text-decoration: none; }
.wcd-rarity { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 8px;
  display: inline-block; margin-bottom: 12px; }
.wcd-rarity.key { background: #fef2f2; color: #991b1b; }
.wcd-rarity.semi { background: #fffbeb; color: #854d0e; }
.wcd-rarity.var { background: #eff6ff; color: #1e40af; }

/* Specs table */
.wcd-specs { width: 100%; border-collapse: collapse; }
.wcd-specs tr { border-bottom: 1px solid var(--line,#f0f0f0); }
.wcd-specs tr:last-child { border-bottom: none; }
.wcd-specs td { padding: 8px 0; font-size: 14px; }
.wcd-specs td:first-child { color: var(--muted,#888); width: 120px; font-weight: 600; }
.wcd-specs td:last-child { color: var(--text,#222); }

/* Narrative */
.wcd-narrative { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line,#eee); }
.wcd-narrative h2 { font-size: 18px; font-weight: 800; margin: 0 0 12px; }
.wcd-narrative-text { font-size: 15px; line-height: 1.7; color: var(--text,#333); }

/* Photo credit */
.wcd-credit { font-size: 11px; color: var(--muted,#aaa); margin-top: 8px; }

/* Collection buttons on world coin page */
.wcd-collection { display: flex; align-items: center; gap: 8px; padding: 14px 0;
  border-top: 1px solid var(--line,#eee); border-bottom: 1px solid var(--line,#eee); margin: 16px 0; }

/* Prev/next navigation */
.wcd-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.wcd-nav-link { font-size: 13px; font-weight: 700; color: var(--brand,#1e3a8a); text-decoration: none; }
.wcd-nav-link:hover { color: var(--brand2,var(--brand2, #c5a356)); }
.wcd-nav-series { font-size: 12px; font-weight: 600; color: var(--muted,#888); padding: 4px 14px;
  background: var(--surface,#f5f7fb); border-radius: 8px; text-decoration: none; }

@media (max-width: 768px) {
  .wcd-top { grid-template-columns: 1fr; gap: 20px; }
  .wcd-images { flex-direction: row; justify-content: center; }
  .wcd-img-wrap { width: 140px; }
  .wcd-img, .wcd-img-placeholder { width: 140px; height: 140px; }
  .wcd-details h1 { font-size: 20px; }
}
@media (max-width: 480px) {
  .wcd-img-wrap { width: 110px; }
  .wcd-img, .wcd-img-placeholder { width: 110px; height: 110px; }
}

/* ── World Country Page ─────────────────────────────────── */
.wcc-wrap { max-width: 960px; margin: 0 auto; padding: 0 0 52px; }
.wcc-back { font-size: 14px; font-weight: 700; color: var(--brand,#1a1a2e);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  padding: 8px 16px; border: 1.5px solid var(--line,#e0ddd4); border-radius: 6px; transition: all .15s; }
.wcc-back:hover { border-color: var(--brand2,var(--brand2, #c5a356)); color: var(--brand2,var(--brand2, #c5a356)); }
.wcc-header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.wcc-flag { line-height: 1; }
.wcc-flag.fi { font-size: 48px; width: 1.6em; }
.wcc-header h1 { font-size: 28px; font-weight: 800; margin: 0; }
.wcc-desc { color: var(--muted,#888); font-size: 14px; margin: 0 0 28px; line-height: 1.6; }

/* Series accordion */
.wcc-series { margin-bottom: 20px; }
.wcc-series-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: var(--card,#fff); border: 1px solid var(--line,#eee); border-radius: 14px;
  cursor: pointer; transition: border-color .15s; }
.wcc-series-header:hover { border-color: var(--brand,#1e3a8a); }
.wcc-series-header.open { border-radius: 14px 14px 0 0; border-bottom-color: transparent; }
.wcc-series-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--line,#eee); flex-shrink: 0; }
.wcc-series-img-placeholder { width: 56px; height: 56px; border-radius: 50%;
  background: var(--line,#eee); flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 24px; color: var(--muted,#ccc); }
.wcc-series-info { flex: 1; min-width: 0; }
.wcc-series-title { font-size: 16px; font-weight: 800; color: var(--text,#222); margin: 0 0 2px; }
.wcc-series-meta { font-size: 13px; color: var(--muted,#888); }
.wcc-series-count { flex-shrink: 0; font-size: 13px; font-weight: 700;
  color: var(--muted,#aaa); padding: 4px 12px; border-radius: 20px;
  background: var(--surface,#f5f7fb); }
.wcc-series-arrow { flex-shrink: 0; font-size: 18px; color: var(--muted,#bbb);
  transition: transform .2s; }
.wcc-series-header.open .wcc-series-arrow { transform: rotate(180deg); }

/* Coin grid inside series */
.wcc-coins { display: none; padding: 16px 20px 20px; background: var(--card,#fff);
  border: 1px solid var(--line,#eee); border-top: none; border-radius: 0 0 14px 14px; }
.wcc-coins.open { display: block; }
.wcc-coin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.wcc-coin-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line,#eee); border-radius: 12px; text-decoration: none;
  transition: border-color .15s, transform .1s; }
.wcc-coin-card:hover { border-color: var(--brand,#1e3a8a); transform: translateY(-1px); }
.wcc-coin-thumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--line,#eee); flex-shrink: 0; }
.wcc-coin-thumb-placeholder { width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface,#f0f3f8); flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted,#ccc); }
.wcc-coin-info { flex: 1; min-width: 0; }
.wcc-coin-title { font-size: 13px; font-weight: 700; color: var(--text,#222);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcc-coin-sub { font-size: 11px; color: var(--muted,#888); margin-top: 1px; }
.wcc-coin-rarity { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
  display: inline-block; margin-top: 2px; }
.wcc-coin-rarity.key { background: #fef2f2; color: #991b1b; }
.wcc-coin-rarity.semi { background: #fffbeb; color: #854d0e; }
.wcc-coin-rarity.var { background: #eff6ff; color: #1e40af; }

.wcc-empty { text-align: center; padding: 48px 20px; color: var(--muted,#888); }
.wcc-empty h3 { font-size: 18px; font-weight: 800; color: var(--text,#333); margin: 0 0 8px; }
.wcc-no-coins { padding: 16px 0; font-size: 13px; color: var(--muted,#aaa); text-align: center; }

@media (max-width: 768px) {
  .wcc-wrap { padding: 0 12px 40px; }
  .wcc-header h1 { font-size: 22px; }
  .wcc-flag.fi { font-size: 36px; }
  .wcc-coin-grid { grid-template-columns: 1fr; }
  .wcc-series-img, .wcc-series-img-placeholder { width: 44px; height: 44px; }
}

/* ── Contact Page ─────────────────────────────────── */
.ck-contact { max-width: 620px; margin: 0 auto; padding: 0 0 52px; }
.ck-contact h1 { font-size: 28px; font-weight: 800; margin: 0 0 4px; }
.ck-contact .sub { color: var(--muted,#888); font-size: 14px; margin: 0 0 28px; }

.ck-cf { display: flex; flex-direction: column; gap: 16px; }
.ck-cf-group { display: flex; flex-direction: column; gap: 4px; }
.ck-cf-label { font-size: 13px; font-weight: 700; color: var(--text,#333); }
.ck-cf-input, .ck-cf-textarea, .ck-cf-select {
  padding: 10px 14px; border: 1.5px solid var(--line,#ddd); border-radius: 10px;
  font: inherit; font-size: 15px; background: var(--card,#fff); color: var(--text,#222);
  transition: border-color .15s; }
.ck-cf-input:focus, .ck-cf-textarea:focus, .ck-cf-select:focus {
  outline: none; border-color: var(--brand,#1e3a8a); box-shadow: 0 0 0 3px rgba(30,58,138,.1); }
.ck-cf-textarea { min-height: 140px; resize: vertical; }
.ck-cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.ck-cf-submit { padding: 12px 28px; border: none; border-radius: 10px;
  background: var(--brand,#1e3a8a); color: #fff; font: inherit; font-size: 15px;
  font-weight: 700; cursor: pointer; transition: opacity .15s; align-self: flex-start; }
.ck-cf-submit:hover { opacity: .9; }
.ck-cf-submit:disabled { opacity: .5; cursor: not-allowed; }

.ck-cf-success { padding: 16px 20px; border-radius: 12px; background: #ecfdf5;
  border: 1px solid #a7f3d0; color: #065f46; font-size: 15px; font-weight: 600; }
.ck-cf-error { padding: 16px 20px; border-radius: 12px; background: #fef2f2;
  border: 1px solid #fecaca; color: #991b1b; font-size: 15px; font-weight: 600; }
.ck-cf-note { font-size: 12px; color: var(--muted,#999); margin-top: 4px; }

/* Photo submission terms notice */
.ck-cf-photo-terms {
  display: flex; gap: 10px; padding: 14px 16px; border-radius: 10px;
  background: rgba(197, 163, 86, 0.06); border: 1px solid rgba(197, 163, 86, 0.2);
  color: var(--text, #333); font-size: 13px; line-height: 1.6;
}
.ck-cf-photo-terms svg { color: var(--brand2, var(--brand2, #c5a356)); }
.ck-cf-photo-terms strong { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--text, #222); }
.ck-cf-photo-terms p { margin: 0; color: var(--muted, #666); }

@media (max-width: 480px) {
  .ck-contact { padding: 0 12px 40px; }
  .ck-cf-row { grid-template-columns: 1fr; }
}

/* ── Community Leaderboard ─────────────────────────────── */
.ck-community-wrap { max-width: 720px; margin: 0 auto; padding: 0 0 52px; }

.lb-header h1 { font-size: 28px; font-weight: 800; margin: 0 0 4px; }
.lb-sub { font-size: 14px; color: var(--muted,#888); margin: 0 0 22px; line-height: 1.5; }

/* Tabs */
.lb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.lb-tab { padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--line,#ddd); background: transparent; color: var(--muted,#666);
  cursor: pointer; transition: all .15s; }
.lb-tab:hover { border-color: var(--brand,#1e3a8a); color: var(--brand,#1e3a8a); }
.lb-tab.active { background: var(--brand,#1e3a8a); color: #fff; border-color: var(--brand,#1e3a8a); }

/* Podium */
.lb-podium { display: flex; justify-content: center; align-items: flex-end; gap: 20px;
  padding: 28px 0 24px; margin-bottom: 8px; }
.lb-podium-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lb-podium-first { margin-top: -14px; }
.lb-podium-ring { border-radius: 50%; padding: 3px; display: flex; align-items: center; justify-content: center; }
.lb-ring-gold { border: 3px solid var(--brand2, #c5a356); }
.lb-ring-silver { border: 2px solid #b4b2a9; }
.lb-ring-bronze { border: 2px solid #d85a30; }
.lb-podium-name { font-size: 13px; font-weight: 700; text-align: center; max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text,#222); }
.lb-podium-score { font-size: 12px; color: var(--muted,#888); }
.lb-podium-badge { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 8px; }
.lb-badge-gold { background: #FAEEDA; color: #854F0B; }
.lb-badge-silver { background: #F1EFE8; color: #5F5E5A; }
.lb-badge-bronze { background: #FAECE7; color: #993C1D; }

/* Avatar */
.lb-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; }
.lb-avatar-init { background: var(--surface,#f0f0f0); color: var(--muted,#666); font-weight: 700; }

/* List */
.lb-list { display: flex; flex-direction: column; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--line,#eee); text-decoration: none; color: inherit;
  transition: background .12s; }
.lb-row:hover { background: var(--surface,#fafafa); }
.lb-row-you { background: #e6f1fb; border-left: 3px solid var(--brand,#1e3a8a); }
.lb-row-you:hover { background: #daeaf8; }
.lb-rank { width: 28px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted,#888); flex-shrink: 0; }
.lb-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-row-name { font-size: 13px; font-weight: 700; color: var(--text,#222);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row-user { font-size: 11px; color: var(--muted,#aaa); }
.lb-row-score { text-align: right; flex-shrink: 0; }
.lb-row-num { font-size: 15px; font-weight: 800; color: var(--text,#222); display: block; }
.lb-row-unit { font-size: 11px; color: var(--muted,#888); }
.lb-you-tag { font-size: 10px; font-weight: 700; color: var(--brand,#1e3a8a);
  background: #e6f1fb; padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: 1px; }

/* Empty */
.lb-empty { text-align: center; padding: 48px 0; color: var(--muted,#888); }

/* CTA */
.lb-cta { text-align: center; font-size: 13px; color: var(--muted,#888); padding: 20px 0;
  border-top: 1px solid var(--line,#eee); margin-top: 20px; }
.lb-cta a { color: var(--brand,#1e3a8a); font-weight: 700; }

@media (max-width: 480px) {
  .ck-community-wrap { padding: 0 12px 40px; }
  .lb-podium { gap: 12px; }
  .lb-podium-name { max-width: 72px; font-size: 12px; }
  .lb-tabs { gap: 4px; }
  .lb-tab { font-size: 12px; padding: 5px 12px; }
}

/* ── World Series Page (coin date list) ────────────────── */
/* World coin prev/next nav — truncate long titles, keep arrows visible */
.wc-nav-title { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; }
@media (min-width: 1100px) { .wc-nav-title { max-width: 280px; } }
@media (max-width: 768px) { .wc-nav-title { max-width: 120px; } }

.wcs-wrap { max-width: 960px; margin: 0 auto; padding: 0 0 52px; }

.wcs-header { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.wcs-thumb { width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line,#ddd); flex-shrink: 0; }
.wcs-meta { flex: 1; min-width: 0; }
.wcs-denom-label { font-size: 13px; color: var(--muted,#888); margin-bottom: 2px; }
.wcs-meta h1 { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.wcs-desc { font-size: 14px; color: var(--muted,#666); line-height: 1.6; margin: 0 0 12px; }
.wcs-stats { display: flex; gap: 28px; }
.wcs-stat { display: flex; flex-direction: column; }
.wcs-stat-val { font-size: 15px; font-weight: 700; }
.wcs-stat-label { font-size: 11px; color: var(--muted,#888); }

/* Coin table */
.wcs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wcs-table thead { background: var(--surface,#f5f7fb); }
.wcs-table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted,#888); }
.wcs-table th.wcs-th-mintage,
.wcs-table th.wcs-th-rarity { text-align: right; }
.wcs-table th.wcs-th-status { text-align: center; width: 140px; }

.wcs-row { border-bottom: 1px solid var(--line,#eee); transition: background .1s; }
.wcs-row:hover { background: var(--surface,#fafafa); }
.wcs-row td { padding: 10px 12px; vertical-align: middle; }

.wcs-td-date { display: flex; align-items: center; gap: 8px; }
.wcs-coin-link { font-weight: 700; color: var(--brand,#1e3a8a); text-decoration: none; }
.wcs-coin-link:hover { color: var(--brand2,var(--brand2, #c5a356)); }
.wcs-td-variety { color: var(--muted,#666); font-size: 13px; }
.wcs-td-mintage { text-align: right; font-variant-numeric: tabular-nums; }
.wcs-td-rarity { text-align: right; }

.wcs-rarity-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.wcs-rarity-badge.rarity-key { background: #FCEBEB; color: #791F1F; }
.wcs-rarity-badge.rarity-semi { background: #FAEEDA; color: #633806; }
.wcs-rarity-badge.rarity-var { background: #EEEDFE; color: #3C3489; }

/* Rarity dots */
.wcs-td-date .rarity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wcs-td-date .rarity-key { background: #E24B4A; }
.wcs-td-date .rarity-semi { background: #EF9F27; }
.wcs-td-date .rarity-var { background: #7F77DD; }

/* Collection pills */
.wcs-td-status { text-align: center; }
.wcs-pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px;
  border: 1.5px solid var(--line,#ddd); background: transparent; color: var(--muted,#888);
  cursor: pointer; transition: all .12s; margin: 0 2px; }
.wcs-pill:hover { border-color: var(--brand,#1e3a8a); color: var(--brand,#1e3a8a); }
.wcs-pill-owned.active { background: var(--brand,#1e3a8a); color: #fff; border-color: var(--brand,#1e3a8a); }
.wcs-pill-want.active { background: var(--brand2, #c5a356); color: #fff; border-color: var(--brand2, #c5a356); }

@media (max-width: 640px) {
  .wcs-header { flex-direction: column; align-items: center; text-align: center; }
  .wcs-stats { justify-content: center; }
  .wcs-th-variety, .wcs-td-variety { display: none; }
  .wcs-th-rarity, .wcs-td-rarity { display: none; }
}

/* ── World Collection (My Collection panel) ────────────── */
.wc-header-bar { display: flex; gap: 8px; margin-bottom: 18px; align-items: center; }
.wc-search-box { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 140px;
  padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--line,#ddd);
  background: var(--bg,#fff); }
.wc-search-box svg { color: var(--muted,#888); flex-shrink: 0; }
.wc-search-input { border: none; background: transparent; font-size: 13px; width: 100%;
  outline: none; color: var(--text,#222); }
.wc-status-select { padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--line,#ddd);
  background: var(--bg,#fff); font-size: 13px; font-weight: 600; color: var(--text,#222);
  cursor: pointer; outline: none; flex-shrink: 0; }

/* Country block */
.wc-country-block { margin-bottom: 4px; border: 1.5px solid var(--line,#ddd); border-radius: 12px;
  overflow: hidden; transition: border-color .12s; }
.wc-country-block:hover { border-color: var(--brand,#1e3a8a); }
.wc-country-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  cursor: pointer; transition: background .12s; }
.wc-country-head.open { background: var(--surface,#f8f8f8); }
.wc-country-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.wc-country-info strong { font-size: 15px; font-weight: 800; color: var(--text,#222); }
.wc-country-counts { display: flex; gap: 6px; flex-shrink: 0; }
.wc-country-arrow { font-size: 14px; color: var(--muted,#888); flex-shrink: 0;
  transition: transform .15s; }
.wc-country-head.open .wc-country-arrow { transform: rotate(0deg); }

.wc-country-body { padding: 0 16px 16px; }

.wc-denom-label { font-size: 13px; font-weight: 700; color: var(--muted,#666);
  margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line,#eee);
  text-transform: uppercase; letter-spacing: .5px; }

/* Pagination */
.wc-pagination { display: flex; align-items: center; gap: 6px; justify-content: center;
  padding: 18px 0; flex-wrap: wrap; }
.wc-page-info { font-size: 12px; color: var(--muted,#888); margin-right: 8px; }
.wc-page-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--line,#ddd);
  background: transparent; font-size: 13px; font-weight: 700; color: var(--muted,#666);
  cursor: pointer; transition: all .12s; }
.wc-page-btn:hover { border-color: var(--brand,#1e3a8a); color: var(--brand,#1e3a8a); }
.wc-page-btn.active { background: var(--brand,#1e3a8a); color: #fff; border-color: var(--brand,#1e3a8a); }

.wc-no-results { text-align: center; padding: 36px 0; color: var(--muted,#888); font-size: 14px; }

/* ── Alignment display ─────────────────────────────────── */
.ck-alignment { font-size: 14px; font-weight: 400;
  display: inline-flex; align-items: center; gap: 4px; }

/* ── New to Collecting — homepage learn section ────────── */
.ck-learn-section { padding: 3rem 0 2.5rem; }
.ck-learn-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
.ck-learn-icon { color: var(--brand2, var(--brand2, #c5a356)); flex-shrink: 0; }
.ck-learn-title { font-size: 17px; font-weight: 700; color: var(--text, #1a1a2e); margin: 0; }
.ck-learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

.ck-learn-card { display: flex; flex-direction: column; gap: 10px;
  background: var(--card, #fff); border: 1.5px solid var(--line, #e0ddd4);
  border-radius: 12px; padding: 1.25rem; text-decoration: none;
  transition: border-color .15s, box-shadow .15s; }
.ck-learn-card:hover { border-color: var(--brand2, var(--brand2, #c5a356));
  box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.ck-learn-card--soon { opacity: .7; pointer-events: none; }

.ck-learn-card-icon { color: var(--brand2, var(--brand2, #c5a356)); flex-shrink: 0; }
.ck-learn-card-title { font-size: 15px; font-weight: 700; color: var(--text, #1a1a2e); line-height: 1.35; }
.ck-learn-card-desc { font-size: 13px; color: var(--muted, #666); line-height: 1.55; }
.ck-learn-card-link { font-size: 12px; font-weight: 600; color: var(--brand2, var(--brand2, #c5a356)); margin-top: auto; }
.ck-learn-card-link--soon { color: var(--muted, #888); }

@media (max-width: 600px) {
  .ck-learn-grid { grid-template-columns: 1fr; }
  .ck-learn-section { padding: 2rem 0 1.5rem; }
}

/* ── Article hub — PCGS-style category cards ──────────── */
.ck-article-hub { padding: 0.5rem 0 2rem; }
.ck-hub-title { font-size: 1.6rem; font-weight: 700; color: var(--text, #1a1a2e);
  margin: 0 0 0.75rem; }
.ck-hub-desc { font-size: 0.95rem; color: var(--muted, #666); margin-bottom: 1.5rem;
  line-height: 1.6; max-width: 700px; }

.ck-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; }
.ck-hub-card-wide { grid-column: span 2; }

.ck-hub-card { background: var(--card, #fff); border: 1.5px solid var(--line, #e0ddd4);
  border-radius: 12px; padding: 0; overflow: hidden; }

.ck-hub-card-header { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1.5px solid var(--line, #e0ddd4);
  background: var(--bg, #faf8f4); }
.ck-hub-card-title { font-size: 1.1rem; font-weight: 700; color: var(--text, #1a1a2e);
  margin: 0; flex: 1; min-width: 0; }
.ck-hub-card-img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0;
  margin-left: 12px; border-radius: 50%; }

.ck-hub-article-list { list-style: none; margin: 0; padding: 10px 20px 16px; }
.ck-hub-article-list li { padding: 7px 0; border-bottom: 1px solid var(--line, #eee); }
.ck-hub-article-list li:last-child { border-bottom: none; }
.ck-hub-article-list a { font-size: 14px; font-weight: 500; color: var(--text, #1a1a2e);
  text-decoration: none; transition: color .12s; }
.ck-hub-article-list a:hover { color: var(--brand2, var(--brand2, #c5a356)); }

.ck-hub-empty { font-size: 13px; color: var(--muted, #999); font-style: italic;
  padding: 14px 20px; margin: 0; }

.ck-hub-direct-articles { margin-top: 2rem; }
.ck-hub-direct-articles h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.75rem;
  color: var(--text, #1a1a2e); }

@media (max-width: 900px) {
  .ck-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ck-hub-grid { grid-template-columns: 1fr; }
  .ck-hub-card-wide { grid-column: span 1; }
}

/* ── Article Hub — News section ────────────────────────── */
.ck-hub-news { background: var(--card, #fff); border: 1.5px solid var(--line, #e0ddd4);
  border-radius: 12px; margin-bottom: 1.5rem; overflow: hidden; }
.ck-hub-news-header { display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 2px solid var(--brand2, var(--brand2, #c5a356)); }
.ck-hub-news-icon { color: var(--brand2, var(--brand2, #c5a356)); flex-shrink: 0; }
.ck-hub-news-title { font-size: 1.1rem; font-weight: 700; color: var(--text, #1a1a2e); margin: 0; }

.ck-hub-news-list { padding: 0; margin: 0; }
.ck-hub-news-item { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 20px; text-decoration: none;
  border-bottom: 1px solid var(--line, #eee); transition: background .12s; }
.ck-hub-news-item:last-child { border-bottom: none; }
.ck-hub-news-item:hover { background: var(--bg, #f8f6f1); }

.ck-hub-news-item-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ck-hub-news-item-title { font-size: 14px; font-weight: 600; color: var(--text, #1a1a2e);
  line-height: 1.4; }
.ck-hub-news-item:hover .ck-hub-news-item-title { color: var(--brand2, var(--brand2, #c5a356)); }
.ck-hub-news-item-summary { font-size: 13px; color: var(--muted, #666); line-height: 1.5; }
.ck-hub-news-item-date { font-size: 12px; color: var(--muted, #888); white-space: nowrap;
  flex-shrink: 0; padding-top: 2px; }

@media (max-width: 600px) {
  .ck-hub-news-item { flex-direction: column; gap: 6px; }
  .ck-hub-news-item-date { align-self: flex-start; }
}

/* ── Article Hub — Card subtitle ───────────────────────── */
.ck-hub-card-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-hub-card-subtitle { font-size: 12px; font-weight: 500; color: var(--muted, #888);
  font-style: italic; line-height: 1.4; }

/* ── Dansco Album Theme ────────────────────────────────── */
.tk-tan { background: #d5cab4; border-radius: 12px; padding: 32px 28px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.12);
  border: 1px solid #c4b89e; }

.tk-tan .tk-album-denom { margin-bottom: 36px; }
.tk-tan .tk-album-denom-head { font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px; font-weight: 700; color: #3a3226; text-transform: uppercase;
  letter-spacing: 1.5px; text-align: center; padding: 0 0 10px;
  margin: 0 0 20px; border-bottom: 1.5px solid #b8a98a; }
.tk-tan .tk-album-denom-count { font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px; color: #8a7d6a; letter-spacing: 0; text-transform: none; }

.tk-tan .tk-album-grid { gap: 28px; justify-content: center; }
.tk-tan .tk-album-slot { width: 130px; }
.tk-tan .tk-album-slot:hover { transform: none; }

.tk-tan .tk-album-coin-wrap { width: 120px; height: 120px; margin: 0 auto 6px;
  border-radius: 50%; background: #2c2822;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.6), inset 0 -1px 4px rgba(0,0,0,.3),
              0 1px 0 rgba(255,255,255,.12); }

.tk-tan .tk-album-coin-empty { width: 100%; height: 100%; border-radius: 50%;
  background: #2c2822; border: none; display: grid; place-items: center; }
.tk-tan .tk-album-coin-empty svg { opacity: .08; width: 32px; height: 32px;
  color: #999; }
.tk-tan .tk-album-slot:hover .tk-album-coin-empty { border-color: transparent; }

.tk-tan .tk-album-coin-filled .tk-album-coin-front,
.tk-tan .tk-album-coin-filled .tk-album-coin-back {
  box-shadow: 0 1px 4px rgba(0,0,0,.35); border-radius: 50%; }
.tk-tan .tk-album-coin-img { border: 1.5px solid rgba(0,0,0,.15); }

.tk-tan .tk-album-label { font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px; color: #3a3226; line-height: 1.35; font-weight: 400; }
.tk-tan .tk-album-label-owned { color: #1a1510; font-weight: 700; }
.tk-tan .tk-album-dot { background: #6b8e4e; }
.tk-tan .tk-album-sublabel { font-family: Georgia, 'Times New Roman', serif;
  font-size: 10px; color: #6b5d4a; }
.tk-tan .tk-album-sublabel:hover { color: #3a3226; }

.tk-tan .tk-album-hide { background: rgba(0,0,0,.4); }
.tk-tan .tk-album-hide:hover { background: rgba(0,0,0,.6); }

@media (max-width: 600px) {
  .tk-tan { padding: 20px 16px; border-radius: 8px; }
  .tk-tan .tk-album-grid { gap: 16px; }
  .tk-tan .tk-album-slot { width: 90px; }
  .tk-tan .tk-album-coin-wrap { width: 80px; height: 80px; }
  .tk-tan .tk-album-label { font-size: 10px; max-width: 90px; }
  .tk-tan .tk-album-denom-head { font-size: 13px; letter-spacing: 1px; }
}
@media (min-width: 601px) and (max-width: 768px) {
  .tk-tan .tk-album-slot { width: 110px; }
  .tk-tan .tk-album-coin-wrap { width: 100px; height: 100px; }
}

/* ── Blue Album Theme ──────────────────────────────────── */
.tk-blue { background: #1a2744; border-radius: 20px; padding: 32px 28px;
  box-shadow: 0 16px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative; }
.tk-blue::before { content: ''; position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 14px; pointer-events: none; }

.tk-blue .tk-album-denom { margin-bottom: 36px; }
.tk-blue .tk-album-denom-head { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: 1.5px; text-align: center; padding: 0 0 12px;
  margin: 0 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tk-blue .tk-album-denom-count { font-size: 11px; color: rgba(255,255,255,.3);
  letter-spacing: 0; text-transform: none; }

.tk-blue .tk-album-grid { gap: 28px; justify-content: center; }
.tk-blue .tk-album-slot { width: 130px; }
.tk-blue .tk-album-slot:hover { transform: none; }

.tk-blue .tk-album-coin-wrap { width: 120px; height: 120px; margin: 0 auto 6px;
  border-radius: 50%; background: rgba(0,0,0,.35);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.04); }

.tk-blue .tk-album-coin-empty { width: 100%; height: 100%; border-radius: 50%;
  background: transparent; border: none; display: grid; place-items: center; }
.tk-blue .tk-album-coin-empty svg { opacity: .1; width: 32px; height: 32px;
  color: rgba(255,255,255,.5); }
.tk-blue .tk-album-slot:hover .tk-album-coin-empty { border-color: transparent; }

.tk-blue .tk-album-coin-filled .tk-album-coin-front,
.tk-blue .tk-album-coin-filled .tk-album-coin-back {
  box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 2px rgba(255,255,255,.08); border-radius: 50%; }

.tk-blue .tk-album-label { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.3; }
.tk-blue .tk-album-label-owned { color: rgba(255,255,255,.9); font-weight: 700; }
.tk-blue .tk-album-dot { background: var(--brand2, var(--brand2, #c5a356)); }
.tk-blue .tk-album-sublabel { font-size: 10px; color: var(--brand2, var(--brand2, #c5a356)); }
.tk-blue .tk-album-sublabel:hover { color: #e8d9a8; }

.tk-blue .tk-album-hide { background: rgba(0,0,0,.4); }
.tk-blue .tk-album-hide:hover { background: rgba(0,0,0,.6); }
.tk-blue .tk-album-slot.tk-album-hidden .tk-album-hide { background: rgba(197,163,86,.5); }

@media (max-width: 600px) {
  .tk-blue { padding: 20px 16px; border-radius: 16px; }
  .tk-blue .tk-album-grid { gap: 16px; }
  .tk-blue .tk-album-slot { width: 90px; }
  .tk-blue .tk-album-coin-wrap { width: 80px; height: 80px; }
  .tk-blue .tk-album-label { font-size: 10px; max-width: 90px; }
  .tk-blue .tk-album-denom-head { font-size: 13px; letter-spacing: 1px; }
}
@media (min-width: 601px) and (max-width: 768px) {
  .tk-blue .tk-album-slot { width: 110px; }
  .tk-blue .tk-album-coin-wrap { width: 100px; height: 100px; }
}

/* ── Tan Album Page Theme (My Collection album) ───────── */
.ck-album-page.ck-album-tan { background: #d5cab4;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.12);
  border: 1px solid #c4b89e; }
.ck-album-page.ck-album-tan::before { border-color: rgba(0,0,0,.04); }

.ck-album-tan .ck-album-page-title { color: #3a3226; font-family: Georgia, 'Times New Roman', serif; }
.ck-album-tan .ck-album-page-title span { color: #8a6d3b; }

.ck-album-tan .ck-coin-hole.empty { background: #2c2822;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.6), inset 0 -1px 4px rgba(0,0,0,.3); }
.ck-album-tan .ck-coin-hole.want { background: #2c2822;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.6), 0 0 0 2px rgba(139,107,59,.5); }
.ck-album-tan .ck-coin-hole.owned { box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 0 2px rgba(0,0,0,.1); }

.ck-album-tan .ck-coin-hole.empty .ck-coin-hole-label { color: rgba(255,255,255,.12); }
.ck-album-tan .ck-coin-hole.want .ck-coin-hole-label { color: rgba(197,163,86,.35); }
.ck-album-tan .ck-coin-hole.owned .ck-coin-hole-label { color: rgba(255,255,255,.5); }

.ck-album-tan .ck-coin-label-year { color: #3a3226; font-family: Georgia, 'Times New Roman', serif; }
.ck-album-tan .ck-coin-label-grade { color: #8a6d3b; }
.ck-album-tan .ck-coin-label-rarity.key { background: rgba(183,28,28,.2); color: #8b2020; }
.ck-album-tan .ck-coin-label-rarity.semi { background: rgba(139,107,59,.2); color: #6b4e1f; }
.ck-album-tan .ck-coin-label-rarity.var { background: rgba(100,80,200,.15); color: #4a3d8f; }

.ck-album-tan .ck-album-legend { color: #8a7d6a; border-top-color: #b8a98a; }
.ck-album-tan .ck-album-page-footer { border-top-color: #b8a98a; }

/* ── Print styles for Type Set album ───────────────────── */
@media print {
  body.tk-printing-album .site-header,
  body.tk-printing-album footer,
  body.tk-printing-album .ck-learn-section,
  body.tk-printing-album .tk-mode,
  body.tk-printing-album .tk-summary,
  body.tk-printing-album .tk-overall,
  body.tk-printing-album .tk-filters,
  body.tk-printing-album .tk-list-wrap,
  body.tk-printing-album #tk-theme-row,
  body.tk-printing-album .ck-tracker > a,
  body.tk-printing-album .ck-tracker > h1,
  body.tk-printing-album .ck-tracker > p,
  body.tk-printing-album .ck-tracker > .tk-mode + p,
  body.tk-printing-album .tk-show-hidden-btn,
  body.tk-printing-album .tk-view-toggle,
  body.tk-printing-album .tk-album-hide,
  body.tk-printing-album #ckCookieBanner { display: none !important; }
  body.tk-printing-album .tk-album-wrap { display: block !important; }
  body.tk-printing-album .tk-album-wrap.tk-blue,
  body.tk-printing-album .tk-album-wrap.tk-tan { box-shadow: none; }
  body.tk-printing-album .tk-album-denom { page-break-inside: avoid; }
}

/* ── Article Hub — World Coins section ─────────────────── */
.ck-hub-world { background: var(--card, #fff); border: 1.5px solid var(--line, #e0ddd4);
  border-radius: 12px; margin-top: 1.5rem; overflow: hidden; }
.ck-hub-world-header { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 16px 20px;
  border-bottom: 2px solid var(--brand2, var(--brand2, #c5a356)); }
.ck-hub-world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0; }
.ck-hub-world-country { padding: 14px 20px; border-bottom: 1px solid var(--line, #eee); }
.ck-hub-world-country:last-child { border-bottom: none; }
.ck-hub-world-country-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; }
.ck-hub-world-country-head strong { font-size: 15px; color: var(--text, #1a1a2e); }

@media (min-width: 601px) {
  .ck-hub-world-grid { grid-template-columns: repeat(2, 1fr); }
  .ck-hub-world-country { border-right: 1px solid var(--line, #eee); }
  .ck-hub-world-country:nth-child(2n) { border-right: none; }
}
@media (min-width: 900px) {
  .ck-hub-world-grid { grid-template-columns: repeat(3, 1fr); }
  .ck-hub-world-country:nth-child(2n) { border-right: 1px solid var(--line, #eee); }
  .ck-hub-world-country:nth-child(3n) { border-right: none; }
}

/* Wide card article list in 2 columns */
.ck-hub-card-wide .ck-hub-article-list { columns: 2; column-gap: 20px; }
.ck-hub-card-wide .ck-hub-article-list li { break-inside: avoid; }
@media (max-width: 640px) {
  .ck-hub-card-wide .ck-hub-article-list { columns: 1; }
}

/* ══════════════════════════════════════════════════════════
   Live eBay Listings Grid (coin detail page)
   ══════════════════════════════════════════════════════════ */
.ck-ebay-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #e0ddd4);
}
.ck-ebay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.ck-ebay-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--line, #e0ddd4);
  border-radius: var(--radius2, 8px);
  background: var(--card, #fff);
  color: var(--text, #1a1a2e);
  text-decoration: none;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.ck-ebay-card:hover {
  border-color: var(--brand2, #c5a356);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: var(--text, #1a1a2e);
  text-decoration: none;
}
.ck-ebay-img-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius, 6px);
  background: var(--surface, #f5f3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.ck-ebay-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ck-ebay-img-empty {
  font-size: 11px;
  color: var(--muted, #888);
  font-style: italic;
}
.ck-ebay-title {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text, #1a1a2e);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
  min-height: 2.8em;
}
.ck-ebay-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand2, #c5a356);
  line-height: 1.2;
  margin-bottom: 2px;
}
.ck-ebay-cond {
  font-size: 10px;
  color: var(--muted, #888);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ck-ebay-disclosure {
  font-size: 11px;
  color: var(--muted, #888);
  margin: 6px 0 0;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .ck-ebay-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ck-ebay-card { padding: 8px; }
  .ck-ebay-title { font-size: 11px; min-height: 2.6em; }
  .ck-ebay-price { font-size: 13px; }
}

/* ── Glossary ─────────────────────────────────────────────── */
.gl-wrap { max-width: 800px; margin: 0 auto; padding: 0 16px 48px; }
.gl-wrap h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.gl-sub { color: var(--muted, #666); font-size: 14px; margin: 0 0 24px; line-height: 1.5; }

/* Category tabs */
.gl-cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.gl-tab { padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--line, #ddd);
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text, #222);
  background: transparent; transition: all .15s; }
.gl-tab:hover { border-color: var(--brand, #1e3a8a); color: var(--brand, #1e3a8a); }
.gl-tab.active { background: var(--brand, #1e3a8a); color: #fff; border-color: var(--brand, #1e3a8a); }

/* A-Z navigation bar */
.gl-alpha-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 28px; justify-content: center; }
.gl-alpha-link { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; border: 1px solid var(--line, #ddd);
  color: var(--text, #222); text-decoration: none; transition: all .15s; }
.gl-alpha-link:hover { background: var(--brand, #1e3a8a); color: #fff; border-color: var(--brand, #1e3a8a); }
.gl-alpha-link.disabled { opacity: .3; pointer-events: none; }

/* Letter headings */
.gl-letter-heading { font-size: 20px; font-weight: 800; color: var(--brand, #1e3a8a);
  border-bottom: 2px solid var(--line, #eee); padding-bottom: 6px; margin: 28px 0 12px; }
.gl-letter-group:first-child .gl-letter-heading { margin-top: 0; }

/* Term cards */
.gl-term { background: var(--card, #fff); border: 1px solid var(--line, #ddd); border-radius: 12px;
  margin-bottom: 8px; overflow: hidden; transition: border-color .15s; }
.gl-term:hover { border-color: rgba(32,58,115,.25); }
.gl-term-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer;
  user-select: none; }
.gl-term-name { font-size: 15px; font-weight: 700; flex: 1; }
.gl-chevron { flex-shrink: 0; color: var(--muted, #888); transition: transform .2s; }
.gl-term.open .gl-chevron { transform: rotate(180deg); }

/* Category badges */
.gl-cat-badge { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 8px;
  white-space: nowrap; }
.gl-cat-grading    { background: rgba(76,175,80,.12); color: #2e7d32; }
.gl-cat-minting    { background: rgba(32,58,115,.1); color: var(--brand, #1e3a8a); }
.gl-cat-varieties  { background: rgba(198,40,40,.1); color: #b71c1c; }
.gl-cat-anatomy    { background: rgba(156,39,176,.1); color: #7b1fa2; }
.gl-cat-history    { background: rgba(230,150,0,.1); color: #8a5500; }
.gl-cat-collecting { background: rgba(0,150,136,.1); color: #00695c; }
.gl-cat-general    { background: var(--line, #eee); color: var(--muted, #666); }

/* Term body / definition */
.gl-term-body { display: none; padding: 0 16px 14px; }
.gl-term.open .gl-term-body { display: block; }
.gl-term-body p { font-size: 14px; line-height: 1.65; color: var(--text, #222); margin: 0; }
.gl-see-also { margin-top: 10px; font-size: 13px; color: var(--muted, #888); }
.gl-see-also a { color: var(--brand2, #3b82f6); font-weight: 600; text-decoration: none; }
.gl-see-also a:hover { text-decoration: underline; }

/* Highlight flash for see-also navigation */
.gl-highlight { animation: gl-flash .6s ease; }
@keyframes gl-flash {
  0%   { box-shadow: 0 0 0 3px rgba(32,58,115,.35); }
  100% { box-shadow: 0 0 0 0 rgba(32,58,115,0); }
}

/* No results */
.gl-no-results { padding: 32px 0; color: var(--muted, #888); font-size: 15px; text-align: center; }

/* Page info */
.gl-page-info { font-size: 13px; color: var(--muted, #888); margin-bottom: 16px; }

/* Pager */
.gl-pager { display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 24px 0 8px; flex-wrap: wrap; }
.gl-pager button { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--line, #ddd);
  border-radius: 8px; background: var(--card, #fff); color: var(--text, #222);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.gl-pager button:hover:not(:disabled) { border-color: var(--brand, #1e3a8a); color: var(--brand, #1e3a8a); }
.gl-pager button.active { background: var(--brand, #1e3a8a); color: #fff; border-color: var(--brand, #1e3a8a); }
.gl-pager button:disabled { opacity: .35; cursor: default; }

/* Responsive */
@media (max-width: 600px) {
  .gl-wrap h1 { font-size: 22px; }
  .gl-alpha-link { width: 28px; height: 28px; font-size: 11px; }
  .gl-term-header { padding: 12px 14px; gap: 8px; }
  .gl-term-name { font-size: 14px; }
  .gl-cat-badge { font-size: 10px; padding: 2px 8px; }
  .gl-cat-tabs { gap: 6px; }
  .gl-tab { padding: 4px 10px; font-size: 12px; }
}

/* ── Glossary Tooltips (inline term highlights) ──────────── */
.gl-tip {
  border-bottom: 1.5px dotted var(--brand, #1e3a8a);
  cursor: help;
  position: relative;
  transition: border-color .15s;
}
.gl-tip:hover { border-bottom-color: var(--brand2, #3b82f6); }

/* Category-colored underlines */
.gl-tip-grading    { border-bottom-color: #2e7d32; }
.gl-tip-minting    { border-bottom-color: var(--brand, #1e3a8a); }
.gl-tip-varieties  { border-bottom-color: #b71c1c; }
.gl-tip-anatomy    { border-bottom-color: #7b1fa2; }
.gl-tip-history    { border-bottom-color: #8a5500; }
.gl-tip-collecting { border-bottom-color: #00695c; }
.gl-tip-general    { border-bottom-color: var(--muted, #888); }

/* Floating tooltip box */
.gl-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 340px;
  min-width: 220px;
  background: var(--card, #fff);
  border: 1.5px solid var(--line, #ddd);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  padding: 14px 16px;
  pointer-events: auto;
  line-height: 1.5;
}
.gl-tooltip-term {
  font-size: 15px;
  font-weight: 800;
  color: var(--text, #222);
  margin-bottom: 2px;
}
.gl-tooltip-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.gl-tooltip-cat-grading    { background: rgba(76,175,80,.12); color: #2e7d32; }
.gl-tooltip-cat-minting    { background: rgba(32,58,115,.1); color: var(--brand, #1e3a8a); }
.gl-tooltip-cat-varieties  { background: rgba(198,40,40,.1); color: #b71c1c; }
.gl-tooltip-cat-anatomy    { background: rgba(156,39,176,.1); color: #7b1fa2; }
.gl-tooltip-cat-history    { background: rgba(230,150,0,.1); color: #8a5500; }
.gl-tooltip-cat-collecting { background: rgba(0,150,136,.1); color: #00695c; }
.gl-tooltip-cat-general    { background: var(--line, #eee); color: var(--muted, #666); }

.gl-tooltip-def {
  font-size: 13px;
  color: var(--text, #333);
  margin-bottom: 8px;
}
.gl-tooltip-link {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand, #1e3a8a);
  text-decoration: none;
}
.gl-tooltip-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .gl-tooltip { max-width: 280px; min-width: 200px; font-size: 13px; }
}

/* Dark mode for glossary tooltips */
[data-theme="dark"] .gl-tip { border-bottom-color: #7b9ed9; }
[data-theme="dark"] .gl-tip-grading    { border-bottom-color: #66bb6a; }
[data-theme="dark"] .gl-tip-varieties  { border-bottom-color: #ef5350; }
[data-theme="dark"] .gl-tip-anatomy    { border-bottom-color: #ab47bc; }
[data-theme="dark"] .gl-tip-history    { border-bottom-color: #ffa726; }
[data-theme="dark"] .gl-tip-collecting { border-bottom-color: #26a69a; }
[data-theme="dark"] .gl-tooltip {
  background: var(--card, #151528); border-color: var(--line, #2a2a4e);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
[data-theme="dark"] .gl-tooltip-term { color: var(--text, #e9eef9); }
[data-theme="dark"] .gl-tooltip-def { color: #a0a0b8; }
[data-theme="dark"] .gl-tooltip-link { color: #7b9ed9; }
[data-theme="dark"] .gl-tooltip-cat-grading    { background: rgba(76,175,80,.2); color: #66bb6a; }
[data-theme="dark"] .gl-tooltip-cat-minting    { background: rgba(123,158,217,.15); color: #7b9ed9; }
[data-theme="dark"] .gl-tooltip-cat-varieties  { background: rgba(239,83,80,.15); color: #ef5350; }
[data-theme="dark"] .gl-tooltip-cat-anatomy    { background: rgba(171,71,188,.15); color: #ab47bc; }
[data-theme="dark"] .gl-tooltip-cat-history    { background: rgba(255,167,38,.15); color: #ffa726; }
[data-theme="dark"] .gl-tooltip-cat-collecting { background: rgba(38,166,154,.15); color: #26a69a; }
[data-theme="dark"] .gl-tooltip-cat-general    { background: rgba(255,255,255,.08); color: #a0a0b8; }

/* ── Grading Guide tab bar ───────────────────────────────── */
.ck-tabs#grading-tabs { width: fit-content !important; border-radius: 10px; margin-left: auto !important; margin-right: auto !important; }

/* ── Glossary tooltip exclusions ─────────────────────────── */
/* Don't highlight terms inside pagination, navigation, buttons, or badges */
.pagination .gl-tip,
.page-item .gl-tip,
.btn .gl-tip,
.badge .gl-tip,
.nav .gl-tip,
.nav-tabs .gl-tip,
.denom-tabs .gl-tip,
.gl-cat-tabs .gl-tip,
.ck-tabs .gl-tip { border-bottom: none !important; cursor: default !important; pointer-events: none; }