/*!
 * Collector's Key · Warm Stone — v2 shared component stylesheet
 * Used by Achievements, Banks, Settings, Session Detail pages.
 * Inherits nav/footer from the outer Joomla template; only styles our
 * component content area.
 */

:root {
  --ck-gold: #c5a356;
  --ck-gold-2: #d9bf7f;
  --ck-gold-soft: #e8d59c;
  --ck-gold-deep: #8a6b20;
  --ck-navy: #141a2e;
  --ck-navy-2: #1e2642;
  --ck-paper: #ffffff;
  --ck-card: #ecebe4;
  --ck-card-alt: #f4f3ed;
  --ck-card-hover: #e3e0d4;  /* Slightly darker than --ck-card — used for hover backgrounds */
  --ck-line: #d8d4c5;
  --ck-line-2: #c7c2b0;
  --ck-line-soft: #e7e3d6;
  --ck-ink: #1a1d28;
  --ck-muted: #6b6f80;
  --ck-ok: #2f7d4f;
  --ck-err: #b03c3c;
  --ck-shadow: 0 1px 2px rgba(20,26,46,.04), 0 4px 14px rgba(20,26,46,.05);
  --ck-shadow-lg: 0 8px 24px rgba(20,26,46,.09);
}

/* ─── Page scaffold ──────────────────────────────────────────────── */
.ck-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ck-ink);
  line-height: 1.55;
  font-size: 14px;
}
.ck-crumbs {
  color: var(--ck-muted);
  /* Desktop: bumped from 13px → 15px for readability. The breadcrumb
     is now the main "you are here" anchor at the top of dashboard
     pages, and the old size was noticeably smaller than body copy.
     Mobile keeps the tighter 12px override below (line ~2910) so it
     doesn't eat horizontal space on narrow screens. */
  font-size: 15px;
  margin-bottom: 12px;
}
.ck-crumbs a { color: var(--ck-muted); text-decoration: none; }
.ck-crumbs a:hover { color: var(--ck-gold-deep); }
.ck-crumbs .sep { margin: 0 6px; color: var(--ck-line-2); }

/* Shared buttons
 * NOTE: Joomla templates (Cassiopeia, many third-party) set `button { color: ... }`
 * with enough specificity to override a bare `.ck-btn.primary` rule. We raise
 * specificity on the color properties by adding the `button` tag selector so
 * our intended foregrounds always win. Same treatment on `a.ck-btn` for link
 * variants. */
.ck-btn,
button.ck-btn,
a.ck-btn {
  cursor: pointer; border: 0;
  padding: 10px 16px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; font-family: inherit;
  text-decoration: none;
  line-height: 1.2;
}
.ck-btn.primary,
button.ck-btn.primary,
a.ck-btn.primary {
  background: var(--ck-navy);
  color: #ffffff !important;          /* beat Joomla template overrides */
}
.ck-btn.primary:hover,
button.ck-btn.primary:hover,
a.ck-btn.primary:hover {
  background: #24304d;
  color: #ffffff !important;
}
.ck-btn.gold,
button.ck-btn.gold,
a.ck-btn.gold {
  background: var(--ck-gold);
  color: var(--ck-gold-ink, #2a2206) !important;
}
.ck-btn.gold:hover,
button.ck-btn.gold:hover,
a.ck-btn.gold:hover {
  background: #d4b46e;
  color: var(--ck-gold-ink, #2a2206) !important;
}
.ck-btn.ghost,
button.ck-btn.ghost,
a.ck-btn.ghost {
  background: #fff;
  border: 1px solid var(--ck-line);
  color: var(--ck-ink) !important;
}
.ck-btn.ghost:hover,
button.ck-btn.ghost:hover,
a.ck-btn.ghost:hover {
  border-color: var(--ck-gold);
  background: var(--ck-card-alt);
  color: var(--ck-ink) !important;
}
.ck-btn.danger,
button.ck-btn.danger,
a.ck-btn.danger {
  background: #fff;
  color: var(--ck-err) !important;
  border: 1px solid #efc5c5;
}

/* ─── Achievements ───────────────────────────────────────────────── */
.ck-ach-hero {
  background: linear-gradient(135deg, var(--ck-navy), var(--ck-navy-2));
  color: #fff; border-radius: 16px;
  padding: 28px 32px; margin-bottom: 22px;
  display: grid; grid-template-columns: auto 1fr; gap: 28px;
  align-items: center; box-shadow: var(--ck-shadow-lg);
  position: relative; overflow: hidden;
}
.ck-ach-hero::before {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(197,163,86,.15), transparent 70%);
}
@media (max-width: 760px) { .ck-ach-hero { grid-template-columns: 1fr; text-align: center; padding: 22px 20px; } }
.ck-ach-hero .ring { position: relative; width: 140px; height: 140px; }
.ck-ach-hero .ring svg { transform: rotate(-90deg); }
.ck-ach-hero .ring .bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 10; }
.ck-ach-hero .ring .fg { fill: none; stroke: var(--ck-gold-hi, var(--ck-gold)); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .5s; }
.ck-ach-hero .ring .pct {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ck-ach-hero .ring .pct .n { font-family: Georgia, serif; font-size: 36px; font-weight: 700; line-height: 1; }
.ck-ach-hero .ring .pct .l { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-gold-hi, var(--ck-gold)); font-weight: 700; margin-top: 2px; }
.ck-ach-hero .body { z-index: 1; position: relative; }
.ck-ach-hero .body .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ck-gold-hi, var(--ck-gold)); font-weight: 700; }
.ck-ach-hero .body h1 { font-family: Georgia, serif; font-size: 30px; margin: 4px 0 6px; letter-spacing: -.2px; }
.ck-ach-hero .body h1 em { color: var(--ck-gold-hi, var(--ck-gold)); font-style: italic; }
.ck-ach-hero .body p { color: #b2b9d0; margin: 0; max-width: 520px; }
.ck-ach-hero .stats { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.ck-ach-hero .stats b { font-family: Georgia, serif; font-size: 20px; color: var(--ck-gold-hi, var(--ck-gold)); display: block; }
.ck-ach-hero .stats span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8b91a8; font-weight: 700; }

.ck-ach-recent {
  background: linear-gradient(90deg, rgba(197,163,86,.14), rgba(197,163,86,.02));
  border: 1px solid rgba(197,163,86,.3); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ck-ach-recent .lbl { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 4px; }
.ck-ach-recent .items { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.ck-ach-recent .item { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--ck-line); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 12.5px; }
.ck-ach-recent .item .m { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #fae4a4, var(--ck-gold)); color: var(--ck-gold-ink, #2a2206); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; font-family: Georgia, serif; }
.ck-ach-recent .item .d { color: var(--ck-muted); font-size: 11px; margin-left: 4px; }

.ck-ach-category { margin-bottom: 36px; }
.ck-ach-category .cat-head {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 4px 14px; margin-bottom: 18px;
  border-bottom: 2px solid var(--ck-gold-soft);
}
.ck-ach-category .cat-head h2 { font-family: Georgia, serif; font-size: 22px; margin: 0; color: var(--ck-navy); }
.ck-ach-category .cat-head .desc { color: var(--ck-muted); font-size: 13px; }
.ck-ach-category .cat-head .count { margin-left: auto; background: var(--ck-card); color: var(--ck-gold-deep); font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 700; }
.ck-ach-category .cat-head .count b { color: var(--ck-navy); }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ach {
  background: #fff; border: 1.5px solid var(--ck-line);
  border-radius: 14px; padding: 18px 16px 16px;
  text-align: center; position: relative;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ach:hover { transform: translateY(-3px); box-shadow: var(--ck-shadow-lg); border-color: var(--ck-gold-soft); }
.ach.earned { background: linear-gradient(180deg, #fbf4e1, #fff); border-color: var(--ck-gold); }
.ach.earned::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--ck-gold), transparent); }
.ach.locked { opacity: .68; }
.ach.locked:hover { opacity: 1; }
.ach .badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #fae4a4, var(--ck-gold));
  color: var(--ck-gold-ink, #2a2206); font-family: Georgia, serif;
  font-weight: 700; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
.ach.locked .badge { background: #eee4cd; color: #8c7a4a; filter: grayscale(.8); }
.ach.tier-2 .badge { background: linear-gradient(135deg, #e8e8e8, #c0c0c0); color: #333; }
.ach.tier-4 .badge { background: linear-gradient(135deg, #e4f4ff, #80b8d8); color: #1a3a50; }
.ach.tier-secret .badge { background: linear-gradient(135deg, #2a2354, var(--ck-navy)); color: var(--ck-gold-hi, var(--ck-gold)); }
.ach .t { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.ach .d { font-size: 12px; color: var(--ck-muted); line-height: 1.45; min-height: 34px; }
.ach .date { font-size: 10.5px; color: var(--ck-gold-deep); letter-spacing: .08em; font-weight: 700; text-transform: uppercase; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ck-line-soft); }
.ach .progress { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ck-line-soft); }
.ach .progress .bar { height: 4px; background: var(--ck-card); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.ach .progress .bar span { display: block; height: 100%; background: var(--ck-gold); }
.ach .progress .txt { font-size: 10.5px; color: var(--ck-muted); }

/* ─── Banks ──────────────────────────────────────────────────────── */
.ck-banks-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--ck-line-soft); }
.ck-banks-head h1 { font-family: Georgia, serif; font-size: 32px; margin: 0; letter-spacing: -.4px; }
.ck-banks-head h1 em { color: var(--ck-gold-deep); font-style: italic; }
.ck-banks-head .sub { color: var(--ck-muted); font-size: 13.5px; margin-top: 4px; }

.ck-leaderboard {
  background: linear-gradient(135deg, var(--ck-navy), var(--ck-navy-2));
  color: #fff; border-radius: 14px;
  padding: 20px 26px; margin-bottom: 22px;
  box-shadow: var(--ck-shadow-lg);
}
.ck-leaderboard .lb-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ck-leaderboard .trophy { width: 40px; height: 40px; border-radius: 50%; background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-weight: 700; font-size: 20px; }
.ck-leaderboard .lb-head h2 { font-family: Georgia, serif; font-size: 18px; margin: 0; }
.ck-leaderboard .lb-head p { color: #b2b9d0; font-size: 12.5px; margin: 0; }
/* Leaderboard row baseline */
.ck-leaderboard .lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin: 4px 0;
  border-radius: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  transition: transform .15s, background .15s;
}
.ck-leaderboard .lb-row:first-of-type { border-top: 0; }
.ck-leaderboard .rank {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #b2b9d0;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.ck-leaderboard .nm { flex: 1; font-weight: 600; min-width: 0; }
.ck-leaderboard .nm .mt { color: #b2b9d0; font-weight: 400; font-size: 11.5px; margin-left: 8px; }
.ck-leaderboard .pct {
  font-family: Georgia, serif; font-size: 17px;
  color: var(--ck-gold); font-weight: 700;
  flex-shrink: 0;
}
.ck-leaderboard .finds { color: #b2b9d0; font-size: 11.5px; min-width: 80px; text-align: right; flex-shrink: 0; }

/* ─── Medal rows (gold / silver / bronze) ─────────────────────────
   Top three banks by find RATE get a proper podium treatment:
     • Colored row tint for the whole card
     • Enlarged rank circle with metallic gradient
     • A little 🥇🥈🥉 glyph to the left so you can scan the
       podium at a glance
   Tints are subtle on the navy leaderboard background so they
   don't blow out readability — they just say "this one is ranked". */
.ck-leaderboard .lb-row.gold,
.ck-leaderboard .lb-row.silver,
.ck-leaderboard .lb-row.bronze {
  position: relative;
  padding-left: 50px;
  font-weight: 600;
}
.ck-leaderboard .lb-row.gold::before,
.ck-leaderboard .lb-row.silver::before,
.ck-leaderboard .lb-row.bronze::before {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.ck-leaderboard .lb-row.gold::before   { content: '🥇'; }
.ck-leaderboard .lb-row.silver::before { content: '🥈'; }
.ck-leaderboard .lb-row.bronze::before { content: '🥉'; }

.ck-leaderboard .lb-row.gold {
  background: linear-gradient(90deg, rgba(212, 175, 55, .18), rgba(212, 175, 55, 0));
  border-top-color: rgba(212, 175, 55, .4);
}
.ck-leaderboard .lb-row.silver {
  background: linear-gradient(90deg, rgba(192, 192, 192, .15), rgba(192, 192, 192, 0));
  border-top-color: rgba(192, 192, 192, .35);
}
.ck-leaderboard .lb-row.bronze {
  background: linear-gradient(90deg, rgba(205, 127, 50, .18), rgba(205, 127, 50, 0));
  border-top-color: rgba(205, 127, 50, .38);
}

.ck-leaderboard .lb-row.gold .rank {
  background: linear-gradient(135deg, #f7d87e 0%, #c5a356 60%, #8a6b20 100%);
  color: #2a2206;
  box-shadow: 0 2px 6px rgba(197, 163, 86, .5);
}
.ck-leaderboard .lb-row.silver .rank {
  background: linear-gradient(135deg, #eaeaea 0%, #c0c0c0 60%, #8a8a8a 100%);
  color: #333;
  box-shadow: 0 2px 6px rgba(160, 160, 160, .45);
}
.ck-leaderboard .lb-row.bronze .rank {
  background: linear-gradient(135deg, #e2a373 0%, #cd7f32 60%, #8a5421 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(205, 127, 50, .45);
}

.ck-leaderboard .lb-row.gold .pct   { color: #f7d87e; font-size: 19px; }
.ck-leaderboard .lb-row.silver .pct { color: #e0e0e0; }
.ck-leaderboard .lb-row.bronze .pct { color: #e2a373; }

/* Unit label next to the percentage to reinforce "this is a RATE, not a count" */
.ck-leaderboard .pct .unit {
  font-size: 11px; color: rgba(255,255,255,.55);
  font-family: inherit; font-weight: 500; margin-left: 2px;
}

.banks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.bank-card {
  background: #fff; border: 1.5px solid var(--ck-line);
  border-radius: 14px; padding: 18px 20px;
  transition: all .15s;
  position: relative;   /* anchor for the delete button below */
}
.bank-card:hover { border-color: var(--ck-gold); box-shadow: var(--ck-shadow-lg); transform: translateY(-2px); }

/* Delete button — small × in the top-right corner of each bank
   card. Hidden until hover/focus on desktop to avoid visual noise;
   touch devices (which have no hover) get a low-contrast always-
   visible state via the @media (hover: none) override in
   mobile-shell.css. The form wraps the button so submit goes
   through Joomla's standard CSRF flow; native confirm() handles
   the "are you sure" before posting to RollhuntingController::
   deleteBank() (which keeps the linked sessions and just nulls
   their bank_id). */
.bank-card .bank-delete-form {
  position: absolute; top: 8px; right: 8px;
  margin: 0; z-index: 1;
}
.bank-card .bank-delete-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ck-muted, #6b6f80);
  font-size: 20px; line-height: 1;
  font-family: inherit; font-weight: 400;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.bank-card:hover .bank-delete-btn,
.bank-card .bank-delete-btn:focus-visible {
  opacity: 1;
  outline: none;
}
.bank-card .bank-delete-btn:hover,
.bank-card .bank-delete-btn:focus-visible {
  background: rgba(176, 60, 60, .1);
  color: var(--ck-err, #b03c3c);
  border-color: rgba(176, 60, 60, .35);
}
.bank-card.top { border-color: var(--ck-gold); background: linear-gradient(180deg, #fbf4e1, #fff); position: relative; }
.bank-card.top::before {
  content: "#1 BEST"; position: absolute; top: -8px; left: 16px;
  background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206);
  font-size: 9.5px; letter-spacing: .12em; font-weight: 700;
  padding: 3px 9px; border-radius: 4px;
}
.bank-card .bank-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bank-card .bank-logo { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--ck-navy), var(--ck-navy-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.bank-card .bank-info .n { font-family: Georgia, serif; font-weight: 700; font-size: 16px; }
.bank-card .bank-info .b { font-size: 12px; color: var(--ck-muted); margin-top: 1px; }
.bank-card .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; padding: 12px; background: var(--ck-card-alt); border: 1px solid var(--ck-line-soft); border-radius: 10px; }
.bank-card .stats .s { text-align: center; }
.bank-card .stats .n { font-family: Georgia, serif; font-weight: 700; color: var(--ck-navy); font-size: 17px; line-height: 1; }
.bank-card .stats .l { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; margin-top: 3px; }
.bank-card .rate { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ck-line-soft); margin-top: 4px; font-size: 12.5px; }
.bank-card .rate .bar { flex: 1; height: 5px; background: var(--ck-card); border-radius: 3px; overflow: hidden; }
.bank-card .rate .bar span { display: block; height: 100%; background: var(--ck-gold); }
.bank-card .rate .pct { font-family: Georgia, serif; font-weight: 700; color: var(--ck-navy); font-size: 14px; min-width: 48px; text-align: right; }
.bank-card .note { background: #fffaea; border: 1px dashed var(--ck-line-2); border-radius: 8px; padding: 8px 12px; margin-top: 10px; font-size: 12px; color: #5d4206; line-height: 1.5; font-style: italic; }
.bank-card .note::before { content: "✎ "; color: var(--ck-gold-deep); font-style: normal; }

/* ─── Settings ───────────────────────────────────────────────────── */
.ck-settings-layout { display: grid; grid-template-columns: 240px 1fr; gap: 26px; }
@media (max-width: 840px) { .ck-settings-layout { grid-template-columns: 1fr; } }
.ck-sidenav { background: var(--ck-card-alt); border: 1px solid var(--ck-line-soft); border-radius: 12px; padding: 8px; }
.ck-sidenav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; color: #404659; font-weight: 600; text-decoration: none; }
.ck-sidenav a:hover { background: #fff; }
.ck-sidenav a.on { background: #fff; color: var(--ck-navy); box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.ck-sidenav a .ic { width: 24px; height: 24px; border-radius: 6px; background: var(--ck-card); color: var(--ck-gold-deep); display: inline-flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-weight: 700; font-size: 12px; }
.ck-sidenav a.on .ic { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); }

.ck-card { background: #fff; border: 1px solid var(--ck-line); border-radius: 12px; overflow: hidden; box-shadow: var(--ck-shadow); margin-bottom: 18px; }
.ck-card .head { padding: 16px 22px; border-bottom: 1px solid var(--ck-line-soft); background: linear-gradient(180deg, var(--ck-card-alt), #fff); }
.ck-card .head h3 { font-family: Georgia, serif; font-size: 17px; margin: 0; font-weight: 700; color: var(--ck-navy); }
.ck-card .head .cs { color: var(--ck-muted); font-size: 12.5px; margin-top: 2px; }
.ck-card .body { padding: 4px 22px; }
.ck-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--ck-line-soft); }
.ck-row:first-child { border-top: 0; }
.ck-row .meta { flex: 1; min-width: 0; }
.ck-row .meta .t { font-size: 14px; font-weight: 600; color: var(--ck-ink); }
.ck-row .meta .d { font-size: 12.5px; color: var(--ck-muted); margin-top: 2px; }

.mini-switch {
  position: relative;
  width: 52px; height: 26px;                   /* widened from 44 → 52 to fit ON/OFF text */
  background: var(--ck-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.mini-switch.on { background: var(--ck-gold); }
/* ON / OFF text label inside the track. Sits opposite the thumb —
   when the thumb is on the left (off state) the "OFF" label shows on
   the right, and vice versa. Purely decorative; the switch's aria
   state still carries the semantic meaning for screen readers. */
.mini-switch::before {
  content: "OFF";
  position: absolute;
  top: 50%; right: 7px;
  transform: translateY(-50%);
  font: 800 8.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  letter-spacing: .06em;
  color: rgba(20, 26, 46, .55);
  pointer-events: none;
  transition: color .15s;
}
.mini-switch.on::before {
  content: "ON";
  left: 9px; right: auto;
  color: var(--ck-gold-ink, #2a2206);
}
.mini-switch .thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  z-index: 1;                                  /* sit above the ::before text */
}
.mini-switch.on .thumb { transform: translateX(26px); }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 14px 0; }
.theme-opt { position: relative; border: 2px solid var(--ck-line); border-radius: 10px; padding: 10px; cursor: pointer; background: #fff; transition: all .15s; }
.theme-opt:hover { border-color: var(--ck-gold-soft); }
.theme-opt.on { border-color: var(--ck-gold); box-shadow: 0 0 0 2px rgba(197,163,86,.2); }
.theme-opt.on::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 2; }
.theme-name { font-weight: 700; font-size: 12.5px; color: var(--ck-ink); margin-top: 8px; }
.theme-desc { font-size: 11px; color: var(--ck-muted); margin-top: 2px; }

/* Theme preview — mini mockup showing what the theme actually looks
   like. Two colored bars (navy header + accent underline), a tiny card
   below. Each theme-opt[data-theme=X] paints the preview differently. */
.theme-swatch {
  height: 72px; border-radius: 6px;
  border: 1px solid var(--ck-line-soft);
  display: block; position: relative; overflow: hidden;
}
.theme-swatch::before {   /* "nav bar" stripe */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background: var(--ck-navy);
  border-bottom: 2px solid var(--ck-gold);
}
.theme-swatch::after {    /* "content card" */
  content: ""; position: absolute;
  top: 22px; left: 8px; right: 8px; bottom: 8px;
  border-radius: 4px;
  background: var(--ck-card-alt);
  border: 1px solid var(--ck-line-soft);
  box-shadow: inset 0 8px 0 var(--ck-card), inset 0 10px 0 var(--ck-gold-soft);
}

/* Per-theme palette overrides. Each card shows what the user would
   actually get — so "Midnight" has dark card stripes, "Sage Mist" is
   cool greens, etc. */
.theme-opt[data-theme="warm"] .theme-swatch { background: #fbf7ec; }
.theme-opt[data-theme="paper"] .theme-swatch { background: #f6f6f4; }
.theme-opt[data-theme="paper"] .theme-swatch::after { background: #fbfbf9; box-shadow: inset 0 8px 0 #efefeb, inset 0 10px 0 #c9d3d7; }
.theme-opt[data-theme="sage"] .theme-swatch { background: #edf1e7; }
.theme-opt[data-theme="sage"] .theme-swatch::before { background: #234234; border-bottom-color: #7a9872; }
.theme-opt[data-theme="sage"] .theme-swatch::after { background: #dfe6d6; box-shadow: inset 0 8px 0 #eaf0e0, inset 0 10px 0 #9fb88f; }
.theme-opt[data-theme="dark"] .theme-swatch { background: #0d0d1a; }
.theme-opt[data-theme="dark"] .theme-swatch::before { background: #080812; border-bottom-color: var(--ck-gold); }
.theme-opt[data-theme="dark"] .theme-swatch::after { background: #1a1d2e; border-color: #2a2d44; box-shadow: inset 0 8px 0 #242740, inset 0 10px 0 var(--ck-gold-deep); }
.theme-opt[data-theme="auto"] .theme-swatch { background: linear-gradient(90deg, #fbf7ec 50%, #0d0d1a 50%); }
.theme-opt[data-theme="auto"] .theme-swatch::before { background: linear-gradient(90deg, var(--ck-navy) 50%, #080812 50%); }
.theme-opt[data-theme="auto"] .theme-swatch::after { background: linear-gradient(90deg, var(--ck-card-alt) 50%, #1a1d2e 50%); box-shadow: none; border-color: transparent; }

/* Section save button row — sits at the bottom of every settings section */
.ck-section-save {
  display: flex; justify-content: flex-end;
  padding: 18px 0 8px;
  border-top: 1px solid var(--ck-line-soft);
  margin-top: 12px;
}
.ck-section-save .ck-btn { padding: 10px 22px; font-size: 13.5px; }

/* Tab-per-section — only the active section renders */
.ck-settings-layout > div > section { display: none; }
.ck-settings-layout > div > section.on { display: block; animation: ck-fadein .2s ease; }

/* Density = compact — tighter padding everywhere */
html[data-density="compact"] .ck-card .body { padding: 10px 14px; }
html[data-density="compact"] .ck-card .body[style*="padding"] { padding: 14px 16px !important; }
html[data-density="compact"] .ck-row { padding: 8px 0; }
html[data-density="compact"] .ck-page { padding-top: 14px; }
html[data-density="compact"] .ck-stats .sc { padding: 10px 12px; }
html[data-density="compact"] .ck-series > summary.head { padding: 10px 14px; }
html[data-density="compact"] .ck-coin-row { padding: 8px 12px; }

/* Reduce motion = kill transitions and animations */
html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
.theme-name { font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.theme-desc { font-size: 11px; color: var(--ck-muted); margin-top: 1px; }

.color-grid { display: flex; gap: 8px; padding: 12px 0; flex-wrap: wrap; align-items: center; }
.color-opt { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .1s; }
.color-opt:hover { transform: scale(1.08); }
.color-opt.on { border-color: var(--ck-ink); box-shadow: 0 0 0 2px #fff inset; }

.color-opt.custom {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.color-opt.custom input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%; border: 0; padding: 0;
}
.color-opt.custom .plus {
  color: #fff; font-size: 22px; line-height: 1; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  pointer-events: none;
}
.color-opt.custom.on .plus { display: none; }

.accent-preview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 14px;
}
.accent-preview {
  background: var(--ck-card-alt, #f5efe1);
  border: 1px solid var(--ck-line);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 68px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.accent-preview .pl {
  font: 600 11.5px/1 'Inter', system-ui, sans-serif;
  color: var(--ck-muted); letter-spacing: .02em;
  text-transform: none;
}
.accent-preview .ck-btn.primary { pointer-events: none; }
.accent-linklike {
  color: var(--ck-gold-deep, var(--ck-gold));
  font-weight: 700; font-size: 14px;
  text-decoration: none;
}
.accent-linklike:hover { text-decoration: underline; }
.accent-linklike .ar { color: var(--ck-gold); font-weight: 700; }
@media (max-width: 720px) {
  .accent-preview-grid { grid-template-columns: 1fr; }
}

.ck-storage-body { padding: 20px 22px; }
.ck-storage-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 8px;
}
.ck-storage-used b {
  font-family: Georgia, serif; font-size: 22px; font-weight: 700; color: var(--ck-ink);
}
.ck-storage-used span { color: var(--ck-muted); font-size: 14px; font-weight: 400; margin-left: 4px; }
.ck-storage-pct { font-size: 12.5px; color: var(--ck-gold-deep, var(--ck-gold)); font-weight: 700; }
.ck-storage-sub { font-size: 12.5px; color: var(--ck-muted); margin-top: 8px; }
.ck-storage-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--ck-line-soft);
}
.ck-storage-actions .ck-btn { font-size: 13px; padding: 8px 14px; }
.ck-storage-actions .ck-btn:disabled { opacity: .55; cursor: not-allowed; }

.ck-switch-locked { cursor: not-allowed; opacity: .95; }
.ck-switch-locked .thumb { box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 0 0 2px rgba(255,255,255,.7) inset; }
.ck-lock-pill {
  display: inline-block; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--ck-card-alt, #f5efe1);
  color: var(--ck-gold-deep, var(--ck-gold));
  font: 700 10.5px/1.4 'Inter', system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid rgba(197,163,86,.35);
}

.storage-bar { background: var(--ck-card); border-radius: 999px; height: 10px; overflow: hidden; margin: 8px 0; }
.storage-bar span { display: block; height: 100%; background: var(--ck-gold); }

.danger-zone { border: 1px solid #efc5c5; background: #fdf5f5; border-radius: 12px; padding: 16px 22px; }
.danger-zone h3 { font-family: Georgia, serif; font-size: 15px; margin: 0 0 12px; color: var(--ck-err); }

/* Roll hunting head — separator + breathing room between title row + body */
.ck-rollhunting .ck-dash-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--ck-line-soft); }

/* ─── Dashboard (main /my-collection) ────────────────────────────── */
.ck-dashboard .ck-dash-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.ck-dashboard .ck-dash-head h1 { font-family: Georgia, serif; font-size: 32px; margin: 0; letter-spacing: -.4px; }
.ck-dashboard .ck-dash-head .sub { color: var(--ck-muted); font-size: 13.5px; margin-top: 4px; }
.ck-dashboard .ck-dash-head .actions { display: flex; gap: 8px; align-items: center; }

.ck-splitbtn { position: relative; display: inline-flex; }
/* Single combined button — "+ Add Coins ▼" acts as a dropdown trigger */
.ck-splitbtn .combo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 9px;
}
.ck-splitbtn .combo .caret-glyph {
  display: inline-block;
  font-size: 10px; line-height: 1;
  opacity: .7;
  transition: transform .15s;
}
.ck-splitbtn.open .combo .caret-glyph { transform: rotate(180deg); opacity: 1; }
/* Legacy split-button pieces (kept for any other pages still using
   the two-button variant) — no border between halves. */
.ck-splitbtn .main { border-radius: 9px 0 0 9px; padding-right: 12px; }
.ck-splitbtn .caret { border-radius: 0 9px 9px 0; padding: 10px 12px; }
.ck-splitbtn .addmenu {
  position: absolute; top: 46px; right: 0;
  min-width: 270px; background: #fff;
  border: 1px solid var(--ck-line); border-radius: 12px;
  box-shadow: var(--ck-shadow-lg); padding: 6px;
  display: none; z-index: 20;
}
.ck-splitbtn.open .addmenu { display: block; }
.ck-splitbtn .addmenu .mi {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; font-size: 13.5px;
  text-decoration: none; color: var(--ck-ink);
}
.ck-splitbtn .addmenu .mi:hover { background: var(--ck-card); }
.ck-splitbtn .addmenu .tag {
  width: 40px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  flex-shrink: 0;
}
.ck-splitbtn .addmenu .mi.us .tag { background: #dde6fb; color: #1e3a7a; }
.ck-splitbtn .addmenu .mi.world .tag { background: #d6ecdd; color: #2a7054; }
.ck-splitbtn .addmenu .txt b { display: block; font-size: 13.5px; }
.ck-splitbtn .addmenu .txt .t { font-size: 11.5px; color: var(--ck-muted); margin-top: 1px; }

/* Stats */
.ck-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 700px) { .ck-stats { grid-template-columns: repeat(2, 1fr); } }
.ck-stats .sc {
  background: var(--ck-card); border: 1px solid var(--ck-line-soft);
  border-radius: 12px; padding: 14px 16px;
  position: relative; overflow: hidden; box-shadow: var(--ck-shadow);
}
.ck-stats .sc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ck-gold); opacity: .6; }
.ck-stats .sc.gold::before { opacity: 1; width: 4px; }
.ck-stats .sc .l { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; }
.ck-stats .sc .n { font-family: Georgia, serif; font-size: 28px; font-weight: 700; color: var(--ck-navy); margin-top: 3px; line-height: 1.1; }
.ck-stats .sc .d { font-size: 11.5px; color: var(--ck-muted); margin-top: 3px; }

/* Region tabs */
.ck-regions {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: var(--ck-card-alt); border: 1px solid var(--ck-line-soft);
  border-radius: 12px; padding: 6px; box-shadow: var(--ck-shadow);
}
.ck-region {
  flex: 1; text-align: center;
  padding: 10px 14px; border-radius: 8px;
  cursor: pointer; font-weight: 600; font-size: 14px;
  color: #3a4066; border: 1px solid transparent; background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; font-family: inherit;
  transition: all .15s;
}
.ck-region:hover { background: #fff; }
.ck-region.on { background: #fff; border-color: var(--ck-line); color: var(--ck-ink); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ck-region .flag { width: 22px; height: 14px; border-radius: 2px; flex-shrink: 0; background: linear-gradient(180deg, #b22234 0 15%, #fff 15% 23%, #b22234 23% 31%, #fff 31% 39%, #b22234 39% 47%, #fff 47% 55%, #b22234 55% 62%, #fff 62% 70%, #b22234 70% 78%, #fff 78% 85%, #b22234 85%); position: relative; overflow: hidden; }
.ck-region .flag.us::before { content: ""; position: absolute; left: 0; top: 0; width: 40%; height: 55%; background: #3c3b6e; }
.ck-region .flag.world { background: radial-gradient(circle at 30% 30%, #4fb08b 0 45%, #2a7054 45%); border-radius: 50%; width: 16px; height: 16px; }
.ck-region .flag.all { background: linear-gradient(135deg, var(--ck-gold) 50%, var(--ck-navy) 50%); border-radius: 50%; width: 14px; height: 14px; }
.ck-region .ct {
  font-size: 11px; padding: 1px 8px; border-radius: 10px;
  background: var(--ck-line-soft); color: var(--ck-muted);
  font-weight: 600; margin-left: 3px;
}
.ck-region.on .ct { background: var(--ck-gold-soft); color: #5d4206; }

/* Dashboard layout */
.ck-dash-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; }
@media (max-width: 1020px) { .ck-dash-layout { grid-template-columns: 1fr; } }
.ck-dash-layout .main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ck-dash-layout .side { display: flex; flex-direction: column; gap: 14px; }

/* Toolbar */
.ck-toolbar {
  background: #fff; border: 1px solid var(--ck-line-soft);
  border-radius: 12px; padding: 10px 12px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  position: sticky; top: 12px; z-index: 8;
  box-shadow: var(--ck-shadow);
}
.ck-toolbar .search {
  flex: 1 1 200px; min-width: 160px;
  display: flex; align-items: center;
  background: var(--ck-card-alt); border: 1px solid var(--ck-line-soft);
  border-radius: 8px; padding: 6px 10px; gap: 6px;
}
.ck-toolbar .search input {
  border: 0; background: transparent; outline: none; flex: 1;
  font-size: 13.5px; min-width: 0; color: var(--ck-ink);
}
.ck-toolbar .si { width: 12px; height: 12px; border: 1.5px solid var(--ck-muted); border-radius: 50%; position: relative; flex-shrink: 0; }
.ck-toolbar .si::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 7px; height: 1.5px; background: var(--ck-muted); transform: rotate(45deg); transform-origin: left center; }

.ck-seg {
  display: inline-flex;
  background: var(--ck-card-alt);
  border-radius: 8px; padding: 3px;
  border: 1px solid var(--ck-line-soft);
}
.ck-seg button {
  border: 0; background: transparent;
  padding: 6px 11px; font-size: 12.5px;
  border-radius: 5px; color: #4a4f62;
  font-weight: 600; white-space: nowrap;
  font-family: inherit; cursor: pointer;
}
.ck-seg button.on { background: #fff; color: var(--ck-navy); box-shadow: 0 1px 2px rgba(0,0,0,.07); }

/* Chip row */
.ck-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
.ck-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ck-line-soft);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; color: #404659;
  white-space: nowrap; line-height: 1;
}
.ck-chip:hover { border-color: var(--ck-gold); background: var(--ck-card-alt); }
.ck-chip.on { background: var(--ck-navy); color: #fff; border-color: var(--ck-navy); }
.ck-chip .ct { opacity: .65; font-weight: 400; margin-left: 2px; font-variant-numeric: tabular-nums; }
.ck-chip.on .ct { opacity: .85; }

.ck-tab-pane { display: none; flex-direction: column; gap: 14px; }
.ck-tab-pane.on { display: flex; }

/* Series (collapsible) */
.ck-series {
  background: #fff; border: 1px solid var(--ck-line);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--ck-shadow);
  transition: box-shadow .15s, border-color .15s;
}
.ck-series:hover { box-shadow: var(--ck-shadow-lg); border-color: var(--ck-line-2); }
.ck-series > summary.head {
  padding: 14px 18px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; user-select: none;
  background: linear-gradient(180deg, var(--ck-card-alt), #fff);
  border-bottom: 1px solid transparent;
  list-style: none;
}
.ck-series > summary.head::-webkit-details-marker { display: none; }
.ck-series[open] > summary.head { border-bottom-color: var(--ck-line-soft); }
.ck-series .caret {
  width: 20px; text-align: center; color: var(--ck-muted);
  font-size: 11px; transition: transform .15s; flex-shrink: 0;
}
.ck-series[open] .caret { transform: rotate(90deg); color: var(--ck-gold-deep); }
.ck-series .title { flex: 1; min-width: 0; }
.ck-series .title h3 {
  font-family: Georgia, serif; font-size: 17px; margin: 0;
  font-weight: 700; color: var(--ck-navy); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-series .title .years { color: var(--ck-muted); font-size: 12.5px; margin-top: 1px; }
.ck-series .title .tag-nearly {
  font-family: inherit; font-size: 10px;
  background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206);
  padding: 2px 7px; border-radius: 10px;
  font-weight: 700; margin-left: 8px;
}
.ck-series .prog { display: flex; align-items: center; gap: 10px; width: 220px; flex-shrink: 0; }
.ck-series .prog .bar { flex: 1; height: 6px; background: #f1e7d0; border-radius: 3px; overflow: hidden; }
.ck-series .prog .bar span { display: block; height: 100%; background: var(--ck-gold); border-radius: 3px; }
.ck-series .prog .pct { font-size: 12.5px; font-weight: 700; color: var(--ck-navy); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 740px) {
  .ck-series > summary.head { flex-wrap: wrap; }
  .ck-series .prog { width: 100%; order: 3; margin-top: 6px; }
}
.ck-series .coinrows { padding: 16px 18px; background: #fff; }
.ck-series .coinrows .loading { color: var(--ck-muted); font-size: 13px; text-align: center; padding: 20px; }
.ck-series .coinrows .empty-rows { color: var(--ck-muted); font-size: 13px; text-align: center; padding: 20px; }
.ck-series .coinrows .empty-rows p { margin: 0 0 10px; }

/* ─── My Collection: strike-type sub-dropdowns ───────────────────
   When a series the user collects contains both circulation strikes
   and proofs, the per-series coin list is partitioned into two
   collapsible sub-sections. Series with only one strike type render
   flat as before. */
.ck-series .ck-substrike {
  margin: 6px 0;
  border: 1px solid var(--ck-gold-soft);
  border-radius: 8px;
  overflow: hidden;
  background: #fbf7ec;
}
.ck-series .ck-substrike + .ck-substrike { margin-top: 10px; }
.ck-series .ck-substrike > summary.ck-substrike-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ck-gold-deep);
  transition: background .12s;
}
.ck-series .ck-substrike > summary.ck-substrike-head:hover { background: rgba(197,163,86,.12); }
.ck-series .ck-substrike > summary.ck-substrike-head::-webkit-details-marker { display: none; }
.ck-series .ck-substrike > summary.ck-substrike-head .caret {
  width: 12px; font-size: 9px;
  color: var(--ck-gold-deep);
  transition: transform .15s;
}
.ck-series .ck-substrike[open] > summary.ck-substrike-head .caret { transform: rotate(90deg); }
.ck-series .ck-substrike > summary.ck-substrike-head .lbl { flex: 1; }
.ck-series .ck-substrike > summary.ck-substrike-head .cnt {
  font-size: 10.5px; font-weight: 700;
  color: var(--ck-muted); letter-spacing: .04em; text-transform: none;
}
.ck-series .ck-substrike-body { background: #fff; border-top: 1px solid var(--ck-gold-soft); }

/* Series nested inside country card — slimmer styling */
.ck-series.inner { box-shadow: none; border-color: var(--ck-line-soft); margin-bottom: 10px; }
.ck-series.inner:last-child { margin-bottom: 0; }
.ck-series.inner > summary.head { padding: 11px 16px; }
.ck-series.inner .title h3 { font-size: 15px; }
.ck-series.inner .prog { width: 180px; }

/* Country cards (World tab) */
.ck-country {
  background: #fff; border: 1.5px solid var(--ck-line);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--ck-shadow);
  transition: box-shadow .15s, border-color .15s;
  position: relative;
}
.ck-country:hover { box-shadow: var(--ck-shadow-lg); }
.ck-country.pinned { border-color: var(--ck-gold); box-shadow: 0 0 0 1px rgba(197,163,86,.25), var(--ck-shadow); }
.ck-country.pinned::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ck-gold); z-index: 1; }
.ck-country > summary.head {
  padding: 14px 18px 14px 22px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; list-style: none;
  background: linear-gradient(180deg, var(--ck-card-alt), #fff);
  border-bottom: 1px solid transparent;
}
.ck-country > summary.head::-webkit-details-marker { display: none; }
.ck-country[open] > summary.head { border-bottom-color: var(--ck-line-soft); }
.ck-country .cflag {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px;
  font-family: Georgia, serif; letter-spacing: .04em;
  flex-shrink: 0; background: linear-gradient(135deg, #4a5568, #2d3748);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.15);
}
.ck-country .info { flex: 1; min-width: 0; }
.ck-country .info h3 { font-family: Georgia, serif; font-size: 19px; margin: 0; font-weight: 700; color: var(--ck-navy); }
.ck-country .info .meta { font-size: 12px; color: var(--ck-muted); margin-top: 2px; }
.ck-country .cstats { display: flex; gap: 16px; flex-shrink: 0; }
.ck-country .cstats > div { text-align: center; min-width: 42px; }
.ck-country .cstats b { font-family: Georgia, serif; font-size: 17px; font-weight: 700; color: var(--ck-navy); display: block; line-height: 1; }
.ck-country .cstats .want b { color: var(--ck-gold-deep); }
.ck-country .cstats span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; }
.ck-country .caret { width: 20px; text-align: center; color: var(--ck-muted); font-size: 11px; transition: transform .15s; flex-shrink: 0; }
.ck-country[open] .caret { transform: rotate(90deg); color: var(--ck-gold-deep); }
.ck-country .country-body { padding: 12px 14px 14px; background: var(--ck-card-alt); }
.ck-pin-btn {
  background: #fff; border: 1px solid var(--ck-line); color: var(--ck-muted);
  height: 30px; padding: 0 11px; border-radius: 999px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  transition: all .15s; font-family: inherit; flex-shrink: 0;
}
.ck-pin-btn:hover { border-color: var(--ck-gold); color: var(--ck-gold-deep); }
.ck-pin-btn .dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.ck-pin-btn.on { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); border-color: var(--ck-gold); }
.ck-pin-btn.on .dot { background: var(--ck-gold-ink, #2a2206); border-color: var(--ck-gold-ink, #2a2206); }

/* Empty state */
.ck-empty {
  background: var(--ck-card); border: 1px dashed var(--ck-line-2);
  border-radius: 12px; padding: 48px 24px; text-align: center;
}
.ck-empty .big { font-size: 48px; margin-bottom: 10px; }
.ck-empty h3 { font-family: Georgia, serif; font-size: 22px; margin: 0 0 6px; }
.ck-empty p { color: var(--ck-muted); margin: 0 0 16px; max-width: 400px; margin-left: auto; margin-right: auto; }

/* Sidebar cards */
.side-card { background: var(--ck-card); border: 1px solid var(--ck-line-soft); border-radius: 12px; box-shadow: var(--ck-shadow); }
.side-card .head { padding: 14px 18px; border-bottom: 1px solid var(--ck-line-soft); background: linear-gradient(180deg, var(--ck-card-alt), var(--ck-card)); }
.side-card .head h3 { font-family: Georgia, serif; font-size: 15px; margin: 0; font-weight: 700; color: var(--ck-navy); }
.side-card.nearly { background: linear-gradient(135deg, var(--ck-card), var(--ck-gold-soft)); border-color: var(--ck-line-2); }
.side-card.nearly .kicker { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-gold-deep); font-weight: 700; }
.side-card.nearly .title-row { font-family: Georgia, serif; font-size: 17px; font-weight: 700; color: var(--ck-navy); margin-top: 2px; }
.side-card.nearly .sub { font-size: 12.5px; color: #5d4206; margin-top: 4px; }
.side-card.nearly .bar-wrap { height: 8px; background: #e8d9b0; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.side-card.nearly .bar-wrap span { display: block; height: 100%; background: var(--ck-gold); border-radius: 3px; }
.side-card.nearly .pct-text { font-size: 12px; color: #5d4206; margin-top: 6px; }

.activity-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 13px; color: #3a3f52; border-top: 1px solid var(--ck-line-soft); }
.activity-row:first-child { border-top: 0; }
.activity-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ck-gold); margin-top: 6px; flex-shrink: 0; }
.activity-row .dot.navy { background: var(--ck-navy); }
.activity-row .dot.outline { background: transparent; border: 2px solid var(--ck-gold); width: 6px; height: 6px; }
.activity-row .text { flex: 1; }
.activity-row .t { margin-left: auto; color: var(--ck-muted); font-size: 11px; white-space: nowrap; }

.qlinks a { display: block; padding: 9px 6px; border-radius: 7px; color: var(--ck-ink); font-size: 13px; border-top: 1px solid var(--ck-line-soft); text-decoration: none; transition: padding .12s; }
.qlinks a:first-of-type { border-top: 0; }
.qlinks a:hover { background: var(--ck-card-alt); padding-left: 10px; }

/* Drawer */
.ck-drawer-bd { position: fixed; inset: 0; background: rgba(20,26,46,.42); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 40; }
.ck-drawer-bd.on { opacity: 1; pointer-events: auto; }
.ck-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(520px, 100%); background: #fff;
  box-shadow: -20px 0 60px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.2,.9,.3,1);
  z-index: 50; display: flex; flex-direction: column;
}
.ck-drawer.on { transform: translateX(0); }
.ck-drawer .dh {
  /* Reserve 120 px on the left for the absolutely-positioned close
     pill so it can never overlap the title. */
  padding: 14px 20px 14px 120px;
  border-bottom: 1px solid var(--ck-line-soft);
  display: flex; align-items: center;
  background: var(--ck-card-alt);
  position: relative;
  min-height: 60px;
}
.ck-drawer .dh .dh-text { flex: 1; min-width: 0; }
.ck-drawer .dh h2 { font-family: Georgia, serif; font-size: 19px; margin: 0; }
.ck-drawer .dh .bc { font-size: 11.5px; color: var(--ck-muted); }

/* Close button hover — inline styles set its base look (so cascade
   can't override it), this rule layers on an interaction state.
   The selector is doubled up to boost specificity above the inline
   style for these specific properties. */
.ck-drawer > .ck-drawer-close:hover,
.ck-drawer > button.ck-drawer-close:hover {
  background: #9b2323 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(176, 48, 48, .5);
}
.ck-drawer > .ck-drawer-close:active { transform: translateY(0); }
.ck-drawer > .ck-drawer-close:focus-visible {
  outline: 3px solid #ffcf4a;
  outline-offset: 2px;
}

/* Close button moved from top-left (kept hiding behind the sticky
   site header which has z-index: 50 of its own) to a persistent
   bottom bar inside the drawer footer — always visible, thumb-
   reachable on mobile, big and red on desktop. */
.ck-drawer-close,
button.ck-drawer-close {
  display: none !important;   /* top-left variant retired */
}
.ck-drawer-close:hover,
button.ck-drawer-close:hover {
  background: #9b2323 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(176, 48, 48, .5);
}
.ck-drawer-close:active,
button.ck-drawer-close:active { transform: translateY(0); }
.ck-drawer-close:focus-visible,
button.ck-drawer-close:focus-visible {
  outline: 3px solid #ffcf4a;
  outline-offset: 2px;
}
.ck-drawer-close .ck-drawer-close-x {
  font-size: 22px; line-height: 1;
  margin-top: -2px;       /* Optical centering */
}
.ck-drawer-close .ck-drawer-close-txt {
  font-size: 13px; font-weight: 700;
}

/* Persistent close button — full-width red bar at the bottom of the
   drawer footer. Visible on every screen size so users always have
   an obvious exit. */
.ck-drawer-close-mobile,
button.ck-drawer-close-mobile {
  display: flex !important;
  width: 100%;
  padding: 14px 16px;
  margin-top: 10px;
  border-radius: 12px;
  background: #c03030 !important;
  color: #ffffff !important;
  border: 0 !important;
  font: 700 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 2px 8px rgba(176, 48, 48, .3);
  transition: background .12s, transform .12s, box-shadow .12s;
  min-height: 48px;
}
.ck-drawer-close-mobile .x { font-size: 22px; line-height: 1; margin-top: -2px; }
.ck-drawer-close-mobile:hover {
  background: #9b2323 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(176, 48, 48, .45);
}
.ck-drawer-close-mobile:active { transform: translateY(0); }
.ck-drawer-close-mobile:focus-visible {
  outline: 3px solid #ffcf4a;
  outline-offset: 2px;
}

/* Stack the footer's state-buttons row ON TOP of the close bar
   instead of side-by-side, so the close is always below all actions. */
.ck-drawer .df {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
.ck-drawer .df .states { width: 100%; }
.ck-drawer .df .save-hint { text-align: center; }

/* Apply the same prominent red X to the photo-crop modal close button,
   the rh-modal close button, and any `.close` inside a `.ck-modal` header
   so the pattern is consistent everywhere. */
.ck-crop-close,
.ck-rh-modal header .close,
.ck-modal header .close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #c03030 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(176, 48, 48, .35);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 22px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 0;
  transition: background .12s, transform .12s;
  z-index: 2;
}
.ck-crop-close:hover,
.ck-rh-modal header .close:hover,
.ck-modal header .close:hover {
  background: #9b2323 !important;
  transform: scale(1.06);
}
/* The rh-modal's header needs relative positioning for our absolute close */
.ck-rh-modal header,
.ck-modal header {
  position: relative;
}
.ck-drawer .db {
  overflow-y: auto;
  padding: 18px 20px 30px;
  flex: 1;
  -webkit-overflow-scrolling: touch;     /* smooth momentum scroll on iOS */
  overscroll-behavior: contain;          /* don't chain scroll to the page behind */
}
.ck-drawer .df { padding: 12px 20px; border-top: 1px solid var(--ck-line-soft); display: flex; align-items: center; justify-content: space-between; background: var(--ck-card-alt); gap: 12px; }
.ck-drawer .states { display: flex; gap: 5px; }
.ck-drawer .state-btn { padding: 7px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--ck-line-soft); background: #fff; cursor: pointer; font-family: inherit; }
.ck-drawer .state-btn.on[data-state="owned"] { background: var(--ck-navy); color: #fff; border-color: var(--ck-navy); }
.ck-drawer .state-btn.on[data-state="want"] { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); border-color: var(--ck-gold); }
.ck-drawer .save-hint { color: var(--ck-muted); font-size: 11.5px; }

@media (max-width: 620px) {
  /* Drawer becomes a bottom sheet. Use dvh (dynamic viewport height) so
     the drawer sizes correctly when mobile browser chrome (address bar,
     toolbar) is showing or hidden — avoids the "phantom 80px below the
     fold" problem that plagues mobile Safari with plain vh units.
     Older browsers fall back to the 85vh declaration above. */
  .ck-drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 85vh;
    max-height: 85dvh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .ck-drawer.on { transform: translateY(0); }

  /* Grab handle at the top of the sheet — visual affordance that this
     is a dismissable bottom sheet (matches native iOS/Android sheets). */
  .ck-drawer::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    background: var(--ck-line-2);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* The 120px left-pad on desktop reserves room for the absolutely-
     positioned "× Close" pill. On a narrow phone 120px eats half the
     title bar. Shrink it — the pill renders smaller on mobile anyway. */
  .ck-drawer .dh { padding: 12px 16px 12px 68px; min-height: 52px; }
  .ck-drawer .dh h2 { font-size: 17px; }

  /* Footer should hug the bottom without getting pushed off-screen by
     the iOS home-indicator safe area. */
  .ck-drawer .df { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }

  /* Tighten body padding so photo slots + forms breathe on narrow phones. */
  .ck-drawer .db { padding: 14px 16px 20px; }
}

/* Shared card class used in dashboard and elsewhere */
.ck-card { background: var(--ck-card-alt); border: 1px solid var(--ck-line-soft); border-radius: 12px; }

/* ─── Public Profile (/u/{username}) ─────────────────────────────── */
.ck-profile-page { background: #fff; }
.ck-profile-owner-banner {
  max-width: 1100px;
  margin: 40px auto 20px;                      /* breathing room above the page content + a bit below */
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(197,163,86,.14), rgba(197,163,86,.04));
  border: 1px solid rgba(197,163,86,.35); border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
@media (max-width: 760px) {
  .ck-profile-owner-banner { margin: 28px 16px 16px; padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
}
.ck-profile-owner-banner .lbl {
  background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206);
  font-size: 10.5px; letter-spacing: .14em; font-weight: 700;
  padding: 3px 9px; border-radius: 4px;
}
/* Private-preview variant — different color so it's unmistakable */
.ck-profile-owner-banner.private {
  background: linear-gradient(135deg, rgba(176,60,60,.10), rgba(176,60,60,.02));
  border-color: rgba(176,60,60,.35);
}
.ck-profile-owner-banner.private .lbl {
  background: #b03c3c; color: #fff;
}

.ck-profile-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1e2642, #0f1626);
  color: #fff; min-height: 200px;
  border-radius: 16px;
  max-width: 1140px; margin: 12px auto 0;
  box-shadow: 0 6px 18px rgba(20,26,46,.12);
}
.ck-profile-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(197,163,86,.12) 0, transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(197,163,86,.08) 0, transparent 50%);
}
.ck-profile-hero .pattern { position: absolute; inset: 0; opacity: .07; }
.ck-profile-hero .pattern svg { width: 100%; height: 100%; }
.ck-profile-hero .inner {
  max-width: 1100px; margin: 0 auto;
  padding: 56px 20px 100px;
  position: relative; z-index: 1; text-align: center;
}
.ck-profile-hero .eyebrow { color: var(--ck-gold); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.ck-profile-hero h1 { font-family: Georgia, serif; font-size: 38px; margin: 0 0 4px; letter-spacing: -.3px; }
.ck-profile-hero .handle { color: #b2b9d0; font-size: 15px; }
.ck-profile-hero .since { color: #8b91a8; font-size: 12.5px; margin-top: 4px; }
.ck-profile-hero .pills { display: flex; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.ck-profile-hero .pill {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: #e7e9f0; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px;
}
.ck-profile-hero .pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ck-gold); }
.ck-profile-hero .pill.featured { background: rgba(197,163,86,.18); border-color: rgba(197,163,86,.4); color: var(--ck-gold-hi, var(--ck-gold)); }

.ck-profile-card-wrap { max-width: 1100px; margin: -64px auto 0; padding: 0 20px; position: relative; z-index: 2; }
.ck-profile-card {
  background: #fff; border: 1px solid var(--ck-line);
  border-radius: 16px; box-shadow: var(--ck-shadow-lg);
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 24px; align-items: center; padding: 20px 28px;
}
@media (max-width: 760px) { .ck-profile-card { grid-template-columns: auto 1fr; padding: 18px 20px; gap: 16px; } }
@media (max-width: 500px) { .ck-profile-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.ck-profile-card .avatar-big {
  width: 104px; height: 104px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ck-gold), var(--ck-gold-deep));
  color: var(--ck-gold-ink, #2a2206);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 36px; font-weight: 700;
  flex-shrink: 0; border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  margin-top: -48px; overflow: hidden;
}
.ck-profile-card .avatar-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 500px) { .ck-profile-card .avatar-big { margin-top: -60px; } }
.ck-profile-card .info h2 { font-family: Georgia, serif; font-size: 22px; margin: 0; color: var(--ck-ink); }
.ck-profile-card .info .bio { color: #3a3f52; font-size: 14px; margin-top: 6px; line-height: 1.6; max-width: 560px; }
.ck-profile-card .info .meta-row { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ck-muted); font-size: 12.5px; margin-top: 10px; }
.ck-profile-card .info .meta-row span b { color: var(--ck-ink); }
.ck-profile-card .actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
@media (max-width: 760px) { .ck-profile-card .actions { grid-column: 1/-1; flex-direction: row; flex-wrap: wrap; margin-top: 8px; } }

.ck-profile-body { max-width: 1100px; margin: 0 auto; padding: 32px 20px 20px; }
.ck-profile-body > .ck-profile-section:last-of-type { margin-bottom: 0; }

.ck-profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 700px) { .ck-profile-stats { grid-template-columns: repeat(2, 1fr); } }
.ck-profile-stats .s {
  background: var(--ck-card); border: 1px solid var(--ck-line-soft);
  border-radius: 12px; padding: 14px 18px; text-align: center;
  position: relative; overflow: hidden;
}
.ck-profile-stats .s::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ck-gold); opacity: .6; }
.ck-profile-stats .s .n { font-family: Georgia, serif; font-size: 28px; font-weight: 700; color: var(--ck-navy); line-height: 1; }
.ck-profile-stats .s .l { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; margin-top: 5px; }
.ck-profile-stats .s .d { font-size: 11.5px; color: var(--ck-muted); margin-top: 3px; }

.ck-profile-section { margin-bottom: 32px; padding: 22px 26px; border-radius: 14px; background: rgba(255,255,255,.35); border: 1px solid rgba(197,163,86,.18); }
.ck-profile-section .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ck-profile-section .sec-head h3 { font-family: Georgia, serif; font-size: 22px; margin: 0; color: var(--ck-ink); }
.ck-profile-section .sec-head h3 em { color: var(--ck-gold-deep); font-style: italic; }

.badge-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.badge-strip .ach {
  background: transparent; border: 0; padding: 0; box-shadow: none;
  min-height: 132px; perspective: 900px; cursor: pointer; outline: none;
  border-radius: 12px;
}
.badge-strip .ach::before { display: none; }
.badge-strip .ach:hover { transform: none; box-shadow: none; border-color: transparent; }
.badge-strip .ach-inner {
  position: relative; width: 100%; min-height: 132px;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .8, .3, 1);
}
.badge-strip .ach:hover .ach-inner,
.badge-strip .ach:focus-visible .ach-inner,
.badge-strip .ach.is-flipped .ach-inner { transform: rotateY(180deg); }
.badge-strip .ach-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 10px;
  background: #fff; border: 1px solid var(--ck-line); border-radius: 12px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.badge-strip .ach.earned .ach-front {
  background: linear-gradient(180deg, #fbf4e1, #fff); border-color: var(--ck-gold);
}
.badge-strip .ach.earned .ach-front::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ck-gold), transparent);
  border-radius: 12px 12px 0 0;
}
.badge-strip .ach-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, var(--ck-navy), #0a1226);
  border-color: var(--ck-gold-deep);
  color: #f0e4c4; padding: 14px 12px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(10, 18, 38, .25);
}
.badge-strip .ach-back::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ck-gold), transparent);
  border-radius: 12px 12px 0 0;
}
.badge-strip .ach-back .t-back {
  font-family: Georgia, serif; font-style: italic;
  color: var(--ck-gold); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; margin-bottom: 6px; line-height: 1.2;
}
.badge-strip .ach-back .d-back {
  font-size: 12.5px; line-height: 1.45; color: #f0e4c4;
}
.badge-strip .ach .badge { width: 50px; height: 50px; margin: 0 auto 8px; }
.badge-strip .ach .when { font-size: 10.5px; color: var(--ck-muted); margin-top: 6px; }

/* Album tabs */
.album-tabs {
  background: var(--ck-card-alt); border: 1px solid var(--ck-line-soft);
  border-radius: 12px; padding: 6px;
  display: flex; gap: 4px; margin-bottom: 18px;
  overflow-x: auto;
}
.album-tabs::-webkit-scrollbar { height: 4px; }
.album-tabs .tab {
  padding: 9px 16px; border-radius: 8px;
  color: #4a4f62; font-weight: 600; font-size: 13px;
  cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; background: transparent;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px;
}
.album-tabs .tab:hover { background: #fff; }
.album-tabs .tab.on { background: #fff; color: var(--ck-navy); border-color: var(--ck-line); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.album-tabs .tab .pct { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--ck-line-soft); color: var(--ck-muted); font-weight: 600; }
.album-tabs .tab.on .pct { background: var(--ck-gold-soft); color: #5d4206; }

.album-pane { display: none; }
.album-pane.on { display: block; }

/* Album page (tan style default) */
.album-page {
  background: linear-gradient(180deg, #e8dcc2, #d8c9ac);
  border: 1px solid var(--ck-line-2);
  border-radius: 14px; padding: 28px 32px 32px;
  box-shadow: var(--ck-shadow-lg); position: relative;
}
.album-page::before {
  content: ""; position: absolute;
  top: 14px; bottom: 14px; left: 12px; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(138,107,32,.3) 10% 90%, transparent);
}
.album-page .album-top { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 14px; border-bottom: 1px solid rgba(138,107,32,.2); margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.album-page .title h4 { font-family: Georgia, serif; margin: 0; font-size: 19px; letter-spacing: .04em; font-weight: 700; color: #3a2d1c; }
.album-page .title .years { font-style: italic; color: #8a6b20; font-size: 14px; font-family: Georgia, serif; }
.album-page .progress { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.album-page .progress .bar { flex: 1; height: 6px; background: rgba(58,45,28,.15); border-radius: 3px; overflow: hidden; }
.album-page .progress .bar span { display: block; height: 100%; background: var(--ck-gold-deep); border-radius: 3px; }
.album-page .progress .pct { font-family: Georgia, serif; font-weight: 700; color: #3a2d1c; font-variant-numeric: tabular-nums; }

/* Public-profile shared-album grid — 4 columns on desktop (larger
   coin images), stepping down to 3 on tablet, 2 on phone. Tighter gap
   at each breakpoint so slots stay visually close. */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 16px; }
@media (max-width: 820px) { .slots { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; } }
@media (max-width: 480px) { .slots { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; } }
.slot-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.slot {
  aspect-ratio: 1; width: 100%; max-width: 140px;
  border-radius: 50%; border: 2px solid #b9a680;
  background: #2e2214;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  perspective: 800px;
  cursor: default;
}
/* Flip containers — .slot.flippable uses CSS 3D transforms on hover
   to flip the coin, revealing the reverse face. .has-photo lets the
   image take the full slot; .slot itself is already circular. */
.slot .flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.9,.3,1);
  border-radius: inherit;
}
.slot.flippable:hover .flip-inner { transform: rotateY(180deg); }
.slot .face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.slot .face.back { transform: rotateY(180deg); }
.slot .face img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.slot.has-photo { background: #000; border-color: var(--ck-gold-deep); }
.slot.has-photo .slot-year { display: none; }

/* Pagination dock under the slot grid */
.album-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 22px;
  font-family: Georgia, serif;
}
.album-pager .pg {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: inherit;
  border: 1px solid rgba(0,0,0,.12);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: all .15s;
}
.album-page.blue .album-pager .pg {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12); color: #f0e4c4;
}
.album-pager .pg:hover:not(:disabled) {
  background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206);
  border-color: var(--ck-gold);
}
.album-pager .pg:disabled { opacity: .35; cursor: not-allowed; }
.album-pager .dots { display: flex; gap: 5px; }
.album-pager .pdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(0,0,0,.2); cursor: pointer;
  transition: background .12s, transform .12s;
}
.album-page.blue .album-pager .pdot { background: rgba(255,255,255,.22); }
.album-pager .pdot.on { background: var(--ck-gold-deep); transform: scale(1.2); }
.album-page.blue .album-pager .pdot.on { background: var(--ck-gold); }
.album-pager .pnum { font-size: 13px; opacity: .7; font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; }

/* Page visibility — one page at a time */
.album-slot-page { display: none; }
.album-slot-page.on { display: block; animation: ck-fadein .25s ease; }
.slot.own { background: radial-gradient(circle at 30% 30%, #b8915a, #7a5a25 45%, #4a3614); border-color: #8a6b20; }
.slot.want { border-style: dashed; border-color: var(--ck-gold-deep); background: transparent; }
.slot-year { font-family: Georgia, serif; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.45); }
.slot.own .slot-year { color: rgba(255,255,255,.9); }
.slot-label { font-size: 12px; text-align: center; color: #3a2d1c; font-weight: 500; line-height: 1.35; }
.slot-label .grade { font-weight: 600; color: var(--ck-gold-deep); margin-top: 3px; font-size: 10.5px; letter-spacing: .04em; }

/* Blue album variant — darker, navy "album book" look (matches mockup) */
.album-page.blue { background: linear-gradient(180deg, #1a2542, #0f1a33); border-color: #2a3760; color: #f0e4c4; }
.album-page.blue::before { background: linear-gradient(180deg, transparent, rgba(212,180,110,.3) 10% 90%, transparent); }
.album-page.blue .album-top { border-bottom-color: rgba(212,180,110,.3); }
.album-page.blue .title h4 { color: #f0e4c4; }
.album-page.blue .title .years { color: var(--ck-gold); }
.album-page.blue .progress .bar { background: rgba(255,255,255,.12); }
.album-page.blue .progress .bar span { background: var(--ck-gold); }
.album-page.blue .progress .pct { color: #f0e4c4; }
.album-page.blue .slot { background: #0a1226; border-color: #2a3760; }
.album-page.blue .slot.own { background: radial-gradient(circle at 30% 30%, #8a6b20, #5a4410 45%, #3a2c08); border-color: var(--ck-gold); }
.album-page.blue .slot.want { border-color: var(--ck-gold); }
.album-page.blue .slot-year { color: rgba(240,228,196,.4); }
.album-page.blue .slot.own .slot-year { color: #f0e4c4; }
.album-page.blue .slot-label { color: #f0e4c4; }
.album-page.blue .slot-label .grade { color: var(--ck-gold); }
.album-page.blue .album-legend { color: #b2b9d0; }

/* Tan / Blue segmented style picker */
.ck-profile-section .sec-head-actions { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.album-style-seg { display: inline-flex; background: #fff; border: 1px solid var(--ck-line); border-radius: 7px; padding: 3px; }
.album-style-seg button { border: 0; background: transparent; padding: 6px 12px; font-size: 12.5px; border-radius: 5px; color: #4a4f62; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.album-style-seg button.on { background: var(--ck-navy); color: #fff; }
.album-style-seg .sw { width: 12px; height: 12px; border-radius: 3px; }
.album-style-seg .sw.blue { background: #1a2542; border: 1px solid #d4b46e; }
.album-style-seg .sw.tan  { background: #e8dcc2; border: 1px solid #8a6b20; }

/* Meta-row icons (profile card) — inline SVG, subtly muted */
.ck-profile-card .info .meta-row .ico { opacity: .7; vertical-align: -2px; margin-right: 2px; }
.ck-profile-card .info .meta-row span { display: inline-flex; align-items: center; gap: 5px; }
.slot-tag { font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 1px 5px; border-radius: 3px; display: inline-block; margin-top: 2px; }
.tag-key { background: #c96b3c; color: #fff; }
.tag-semi { background: #8a6b20; color: #fff; }
.tag-var { background: #5d3a90; color: #fff; }

.album-legend { display: flex; gap: 18px; justify-content: center; margin-top: 18px; font-size: 12px; color: #3a2d1c; flex-wrap: wrap; }
.album-legend span { display: inline-flex; align-items: center; gap: 5px; }
.album-legend .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #8a6b20; }
.album-legend .dot.own { background: radial-gradient(circle at 30% 30%, #b8915a, #4a3614); border-color: #8a6b20; }
.album-legend .dot.miss { background: #2e2214; border-color: #b9a680; }
.album-legend .dot.want { background: transparent; border-style: dashed; }

/* Profile CTA footer — a proper call-to-action panel so visitors
   can't miss the invitation to sign up. Navy gradient background with
   gold accent, centered. */
.ck-profile-footer {
  max-width: 1100px;
  margin: 24px auto 32px;
  padding: 28px 24px;
  background: linear-gradient(135deg, var(--ck-navy), var(--ck-navy-2));
  color: #e7e9f0; font-size: 16px;
  text-align: center;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20,26,46,.15);
  border: 1px solid rgba(197,163,86,.3);
  font-family: Georgia, serif;
}
.ck-profile-footer a {
  display: inline-block;
  margin-left: 8px;
  padding: 10px 18px;
  background: var(--ck-gold);
  color: var(--ck-gold-ink, #2a2206) !important;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  transition: background .15s, transform .15s;
  box-shadow: 0 2px 6px rgba(197,163,86,.35);
}
.ck-profile-footer a:hover {
  background: var(--ck-gold-hi, var(--ck-gold));
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(197,163,86,.45);
}
@media (max-width: 600px) {
  .ck-profile-footer { margin: 18px 16px 24px; padding: 22px 18px; font-size: 14px; }
  .ck-profile-footer a { display: block; margin: 12px auto 0; }
}

/* ─── Session Detail ─────────────────────────────────────────────── */
.ck-session-hero {
  background: linear-gradient(135deg, var(--ck-navy), var(--ck-navy-2));
  color: #fff; border-radius: 16px;
  padding: 22px 26px; margin-bottom: 20px;
  box-shadow: var(--ck-shadow-lg); position: relative; overflow: hidden;
}
.ck-session-hero.active { background: linear-gradient(135deg, #2d4c2d, #1a3320); }
.ck-session-hero::before {
  content: ""; position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,163,86,.15), transparent 70%);
}
.ck-session-hero .status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.ck-session-hero .status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #d9dde8;
}
.ck-session-hero .status-pill.live { background: rgba(47,125,79,.2); border-color: rgba(47,125,79,.4); color: #8ec39f; }
.ck-session-hero .status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ck-muted); }
.ck-session-hero .status-pill.live .dot { background: #8ec39f; animation: ck-pulse 2s ease-in-out infinite; }
@keyframes ck-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.ck-session-hero .title { margin-top: 12px; position: relative; z-index: 1; }
.ck-session-hero .title h1 { font-family: Georgia, serif; font-size: 26px; margin: 0 0 4px; letter-spacing: -.2px; }
.ck-session-hero .title h1 em { color: var(--ck-gold-hi, var(--ck-gold)); font-style: italic; }
.ck-session-hero .title .sub { color: #b2b9d0; font-size: 13px; }

.ck-session-hero .hero-stats {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative; z-index: 1;
}
@media (max-width: 880px) { .ck-session-hero .hero-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .ck-session-hero .hero-stats { grid-template-columns: repeat(2, 1fr); } }
.ck-session-hero .hs .n { font-family: Georgia, serif; font-size: 22px; font-weight: 700; color: var(--ck-gold); line-height: 1; }
.ck-session-hero .hs.ok .n { color: #8ec39f; }
.ck-session-hero .hs.silver .n { color: #b7c0c8; }
.ck-session-hero .hs .l { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8b91a8; font-weight: 700; margin-top: 3px; }

.ck-session-hero .hero-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ghost-dark sits on dark hero backgrounds (navy, dark green).
   Bumped contrast — was light-gray text on dark green which clocked
   ~3:1, borderline. Now near-white text + slightly stronger fill +
   heavier border for clear visibility. Gold hover for affordance. */
.ck-btn.ghost-dark {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-weight: 600;
}
.ck-btn.ghost-dark:hover {
  background: rgba(255,255,255,.22);
  border-color: var(--ck-gold);
  color: var(--ck-gold);
}
.ck-btn.danger-dark { background: rgba(220,90,90,.22); border: 1px solid rgba(255,160,160,.45); color: #ffcfcf; }
.ck-btn.danger-dark:hover { background: rgba(220,90,90,.32); color: #fff; border-color: #ff9b9b; }

.ck-session-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; }
@media (max-width: 1020px) { .ck-session-layout { grid-template-columns: 1fr; } }
.ck-session-layout .main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ck-session-layout .side { display: flex; flex-direction: column; gap: 16px; }

.ck-card.big { background: #fff; border: 1px solid var(--ck-line); border-radius: 12px; overflow: hidden; box-shadow: var(--ck-shadow); }
.ck-card.big .head { padding: 14px 18px; border-bottom: 1px solid var(--ck-line-soft); background: linear-gradient(180deg, var(--ck-card-alt), #fff); display: flex; align-items: center; gap: 12px; }
.ck-card.big .head h3 { font-family: Georgia, serif; font-size: 17px; margin: 0; font-weight: 700; color: var(--ck-navy); }
.ck-card.big .head .cs { color: var(--ck-muted); font-size: 12.5px; }

/* Finds wall */
.finds-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.find { background: linear-gradient(180deg, #fffaea, #fff); border: 1px solid var(--ck-line-soft); border-radius: 12px; padding: 14px; position: relative; transition: all .15s; }
.find:hover { border-color: var(--ck-gold); transform: translateY(-2px); box-shadow: var(--ck-shadow-lg); }
.find.silver { background: linear-gradient(180deg, #f0f4f7, #fff); }
.find.foreign { background: linear-gradient(180deg, #f2edfb, #fff); }
.find-coin {
  width: 78px; height: 78px; border-radius: 50%;
  margin: 0 auto 10px;
  background: radial-gradient(circle at 30% 30%, var(--ck-gold-2), var(--ck-gold-deep));
  border: 2px solid var(--ck-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; color: var(--ck-gold-ink, #2a2206); font-weight: 700; font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.find.silver .find-coin { background: radial-gradient(circle at 30% 30%, #d8dde0, #8a96a0); border-color: #b7c0c8; color: #1a1d28; }
.find.foreign .find-coin { background: radial-gradient(circle at 30% 30%, #9a8ad9, #5d4a98); border-color: #6a5aa0; color: #fff; }
.find .f-yr { font-family: Georgia, serif; font-weight: 700; font-size: 15px; color: var(--ck-navy); text-align: center; }
.find .f-nm { font-size: 12px; color: var(--ck-muted); margin-top: 3px; text-align: center; line-height: 1.4; }
.find .f-tag { display: inline-block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); }
.find.silver .f-tag { background: #b7c0c8; color: #2a3440; }
.find.foreign .f-tag { background: #8a6ac4; color: #fff; }

.add-find { border: 2px dashed var(--ck-line-2); background: var(--ck-card-alt); border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; color: var(--ck-muted); font-size: 13px; font-weight: 600; transition: all .15s; }
.add-find:hover { border-color: var(--ck-gold); color: var(--ck-gold-deep); background: #fff; }
.add-find .plus { font-size: 28px; font-weight: 300; color: var(--ck-gold-deep); margin-bottom: 4px; }

/* Roll log */
.roll-log { display: flex; flex-direction: column; gap: 4px; }
.roll { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 8px; transition: background .12s; }
.roll:hover { background: var(--ck-card-alt); }
.roll .idx { width: 28px; height: 28px; border-radius: 50%; background: var(--ck-card); color: var(--ck-muted); display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.roll.has-find .idx { background: linear-gradient(135deg, #fae4a4, var(--ck-gold)); color: var(--ck-gold-ink, #2a2206); }
.roll .m { min-width: 0; }
.roll .m .t { font-size: 13.5px; color: var(--ck-ink); }
.roll .m .mm { font-size: 11.5px; color: var(--ck-muted); margin-top: 1px; }
.roll .m .mm b { color: var(--ck-gold-deep); }
.roll .right { font-size: 12px; color: var(--ck-muted); white-space: nowrap; }
.roll .right .count { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 11px; }

/* Modal shared */
.ck-modal-mask { position: fixed; inset: 0; background: rgba(20,26,46,.5); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 40; }
.ck-modal-mask.on { opacity: 1; pointer-events: auto; }
.ck-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -40%) scale(.97);
  background: #fff; border-radius: 14px;
  width: min(480px, 92%); max-height: 88vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  z-index: 50; opacity: 0; pointer-events: none;
  transition: all .22s cubic-bezier(.2,.9,.3,1);
}
.ck-modal.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.ck-modal .mh { padding: 16px 22px; border-bottom: 1px solid var(--ck-line-soft); display: flex; align-items: center; gap: 12px; background: var(--ck-card-alt); }
.ck-modal .mh h2 { font-family: Georgia, serif; font-size: 19px; margin: 0; }
.ck-modal .mh .close { margin-left: auto; background: none; border: 0; font-size: 22px; color: var(--ck-muted); cursor: pointer; }
.ck-modal .mb { padding: 18px 22px 20px; }
.ck-modal .mf { padding: 14px 22px; border-top: 1px solid var(--ck-line-soft); display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--ck-card-alt); }
.ck-modal .fld { width: 100%; padding: 9px 11px; border: 1px solid var(--ck-line); border-radius: 7px; font-size: 13.5px; font-family: inherit; background: #fff; margin-bottom: 10px; }
.ck-modal .fld:focus { outline: 2px solid var(--ck-gold); outline-offset: -1px; border-color: var(--ck-gold); }
.ck-modal .fld-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; margin-bottom: 5px; }
.ck-modal .ck-seg { display: inline-flex; background: var(--ck-card-alt); border-radius: 8px; padding: 3px; border: 1px solid var(--ck-line-soft); flex-wrap: wrap; }

/* Toast */
.ck-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--ck-navy); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-size: 13px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .2s, transform .2s;
  z-index: 60; border: 1px solid var(--ck-gold); pointer-events: none;
}
.ck-toast.on { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ─── Coin rows inside expanded series ──────────────────────────── */
.ck-coin-row {
  display: grid;
  grid-template-columns: 12px 70px 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 9px 16px; border-top: 1px solid #f3eadb;
  cursor: pointer; transition: background .12s;
}
.ck-coin-row:first-child { border-top: 0; }
.ck-coin-row:hover { background: #fbf7ec; }
.ck-coin-row .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ck-coin-row .dot.own { background: var(--ck-gold); box-shadow: 0 0 0 2px var(--ck-gold-soft); }
.ck-coin-row .dot.want { background: transparent; border: 2px solid var(--ck-gold); box-sizing: border-box; }
.ck-coin-row .dot.none { background: #e0d5b2; }
.ck-coin-row .yr {
  font-family: Georgia, serif; font-weight: 700;
  color: var(--ck-navy); font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.ck-coin-row .vtag { font-size: 11.5px; color: var(--ck-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-coin-row .keytag {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 700; padding: 2px 6px; border-radius: 3px;
}
.ck-coin-row .tag-key { background: #fbdecd; color: #9b3a24; }
.ck-coin-row .tag-semi { background: #fbeac9; color: #8b5e13; }
.ck-coin-row .tag-var { background: #efe1f8; color: #5d3a90; }
.ck-coin-row .grade-chip {
  background: var(--ck-card-alt); color: var(--ck-navy);
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 10px; border: 1px solid var(--ck-line-soft);
}

/* ─── Drawer body sections ──────────────────────────────────────── */
.ck-drawer .ck-drawer-section { margin-bottom: 20px; }
.ck-drawer .ck-drawer-section h5 {
  font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ck-muted);
  font-weight: 700; margin: 0 0 9px;
}
.ck-drawer .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-drawer .photo {
  aspect-ratio: 1;
  border: 2px dashed var(--ck-line-2); border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #a3895a; font-size: 12.5px;
  background: var(--ck-card); cursor: pointer;
  gap: 6px; font-weight: 500;
}
.ck-drawer .photo:hover { border-color: var(--ck-gold); background: var(--ck-card-hover); }
.ck-drawer .photo .plus { font-size: 24px; font-weight: 300; color: #c4aa6f; }
.ck-drawer .photo .lbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #8c7a4a; }

/* Filled photo slot (has uploaded image) */
.ck-drawer .photo.has-image {
  position: relative; border-style: solid; border-color: var(--ck-line);
  padding: 0; overflow: hidden; background: #fff;
}
.ck-drawer .photo.has-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ck-drawer .photo.has-image .lbl {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(20, 26, 46, .85); color: #fff;
  padding: 3px 8px; border-radius: 4px;
  font-size: 10px; letter-spacing: .08em;
}
.ck-drawer .photo-del {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20, 26, 46, .85); color: #fff;
  border: none; cursor: pointer;
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.ck-drawer .photo-del:hover { background: #c03030; }

/* Uploading state — spinner */
.ck-drawer .photo.uploading {
  border-color: var(--ck-gold); border-style: solid;
  background: var(--ck-card-hover);
}
.ck-drawer .photo .ph-spin {
  width: 22px; height: 22px;
  border: 2.5px solid var(--ck-line-2);
  border-top-color: var(--ck-gold);
  border-radius: 50%;
  animation: ck-spin .8s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }

.ck-drawer .ph-hint { font-size: 11px; color: var(--ck-muted); margin-top: 6px; padding: 4px 6px; text-align: center; }
.ck-drawer .ph-hint.err { color: #c03030; font-weight: 600; }

.ck-drawer .ck-drawer-field { margin-bottom: 10px; }
.ck-drawer .ck-drawer-field label {
  display: block; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ck-muted); font-weight: 700; margin-bottom: 5px;
}
.ck-drawer input, .ck-drawer select, .ck-drawer textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--ck-line-soft); border-radius: 7px;
  font-size: 13.5px; font-family: inherit;
  background: #fff; color: var(--ck-ink);
}
.ck-drawer input:focus, .ck-drawer select:focus, .ck-drawer textarea:focus {
  outline: 2px solid var(--ck-gold); outline-offset: -1px;
  border-color: var(--ck-gold);
}
.ck-drawer textarea { min-height: 80px; resize: vertical; }
.ck-drawer .save-indicator { font-size: 11.5px; color: var(--ck-ok); margin-top: 4px; }
.ck-drawer .ck-seg {
  display: inline-flex; background: var(--ck-card-alt);
  border-radius: 8px; padding: 3px; border: 1px solid var(--ck-line-soft);
}
.ck-drawer .ck-seg button {
  border: 0; background: transparent;
  padding: 6px 13px; font-size: 12.5px;
  border-radius: 5px; cursor: pointer;
  color: #4a4f62; font-weight: 600; font-family: inherit;
}
.ck-drawer .ck-seg button.on { background: #fff; color: var(--ck-navy); box-shadow: 0 1px 2px rgba(0,0,0,.07); }

.ck-drawer .ref-grid {
  background: var(--ck-card); border: 1px solid var(--ck-line-soft);
  border-radius: 8px; padding: 12px 14px;
  font-size: 13px; line-height: 1.7;
}
.ck-drawer .ref-grid > div {
  display: flex; justify-content: space-between;
  padding: 3px 0; border-top: 1px solid var(--ck-line-soft);
}
.ck-drawer .ref-grid > div:first-child { border-top: 0; }
.ck-drawer .ref-grid .l { color: var(--ck-muted); }
.ck-drawer .ref-grid b { color: var(--ck-ink); font-variant-numeric: tabular-nums; }

/* ─── Showcase Settings ─────────────────────────────────────────── */
.ck-showcase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.ck-showcase-head h1 { font-family: Georgia, serif; font-size: 32px; margin: 0; letter-spacing: -.4px; }
.ck-showcase-head h1 em { color: var(--ck-gold-deep); font-style: italic; }
.ck-showcase-head .sub { color: var(--ck-muted); font-size: 13.5px; margin-top: 4px; max-width: 560px; }

.ck-privacy-hero {
  background: linear-gradient(135deg, var(--ck-navy-2), var(--ck-navy));
  color: #fff; border-radius: 14px;
  padding: 22px 26px; margin-bottom: 22px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 20px; align-items: center;
  box-shadow: var(--ck-shadow-lg);
  position: relative; overflow: hidden;
}
.ck-privacy-hero.public { background: linear-gradient(135deg, #2d4c2d, #1a3320); }
.ck-privacy-hero::before { content: ""; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(197,163,86,.15), transparent 70%); }
.ck-privacy-hero .lock-icon { color: var(--ck-gold); flex-shrink: 0; position: relative; z-index: 1; }
.ck-privacy-hero .body { position: relative; z-index: 1; }
.ck-privacy-hero .body .lbl { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ck-gold-hi, var(--ck-gold)); font-weight: 700; }
.ck-privacy-hero .body h2 { font-family: Georgia, serif; font-size: 22px; margin: 4px 0; color: #fff; }
.ck-privacy-hero .body p { color: #b2b9d0; margin: 0; font-size: 13.5px; line-height: 1.55; }
.ck-privacy-hero .url-bar {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; overflow: hidden;
  max-width: 420px; margin-top: 12px;
}
.ck-privacy-hero .url-bar .url { flex: 1; padding: 8px 12px; color: #e7e9f0; font-family: "SF Mono", Consolas, monospace; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-privacy-hero .url-bar button { background: rgba(197,163,86,.15); border: 0; border-left: 1px solid rgba(255,255,255,.12); color: var(--ck-gold-hi, var(--ck-gold)); padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ck-privacy-hero .url-bar button:hover { background: rgba(197,163,86,.25); }
.ck-privacy-hero .ck-switch {
  position: relative; display: inline-flex;
  align-items: center; gap: 12px;
  cursor: pointer; z-index: 1;
}
.ck-privacy-hero .ck-switch .track { width: 52px; height: 30px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; position: relative; transition: all .2s; }
.ck-privacy-hero .ck-switch .thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.ck-privacy-hero .ck-switch.on .track { background: var(--ck-gold); border-color: var(--ck-gold); }
.ck-privacy-hero .ck-switch.on .thumb { transform: translateX(22px); background: var(--ck-gold-ink, #2a2206); }
.ck-privacy-hero .ck-switch .text { color: #fff; font-weight: 600; font-size: 14px; }
.ck-privacy-hero .ck-switch .text span { display: block; font-size: 11.5px; color: #b2b9d0; font-weight: 400; margin-top: 2px; }

.ck-showcase-layout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; }
@media (max-width: 1080px) { .ck-showcase-layout { grid-template-columns: 1fr; } }
.ck-showcase-layout .main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ck-showcase-layout .side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 12px; align-self: start; }
@media (max-width: 1080px) { .ck-showcase-layout .side { position: static; } }

.ck-field { margin-bottom: 14px; }
.ck-field:last-child { margin-bottom: 0; }
.ck-field label { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; margin-bottom: 6px; }
.ck-field label .optional { color: var(--ck-line-2); text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 5px; font-size: 11px; }
.ck-field label .count { float: right; font-size: 11.5px; color: var(--ck-muted); }
.ck-field input, .ck-field select, .ck-field textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--ck-line); border-radius: 8px;
  font-size: 14px; font-family: inherit;
  background: #fff; color: var(--ck-ink);
}
.ck-field textarea { resize: vertical; min-height: 90px; line-height: 1.55; }

.avatar-upload { display: flex; align-items: center; gap: 18px; }
.avatar-upload .avatar-big {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ck-gold), var(--ck-gold-deep));
  color: var(--ck-gold-ink, #2a2206);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 30px; font-weight: 700;
  flex-shrink: 0; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  overflow: hidden;
}
.avatar-upload .avatar-big img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload .meta { flex: 1; }
.avatar-upload .meta p { margin: 0 0 8px; color: var(--ck-muted); font-size: 12.5px; line-height: 1.5; }
.avatar-upload .meta .row { display: flex; gap: 8px; flex-wrap: wrap; }

.togrow {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--ck-line-soft);
}
.togrow:first-child { border-top: 0; padding-top: 8px; }
.togrow:last-child { padding-bottom: 8px; }
.togrow .tic {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--ck-card-alt); color: var(--ck-gold-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: 700; font-size: 14px;
  flex-shrink: 0; border: 1px solid var(--ck-line-soft);
}
.togrow .m { flex: 1; }
.togrow .m .t { font-size: 14px; font-weight: 600; color: var(--ck-ink); }
.togrow .m .d { font-size: 12.5px; color: var(--ck-muted); margin-top: 1px; }

.alb-row {
  background: #fff; border: 1px solid var(--ck-line);
  border-radius: 10px; padding: 12px 14px;
  display: grid; grid-template-columns: 36px 1fr auto auto;
  gap: 12px; align-items: center; margin-bottom: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.alb-row:hover { border-color: var(--ck-line-2); }
.alb-row.shared { background: linear-gradient(180deg, #fbf4e1, #fff); border-color: var(--ck-gold); box-shadow: 0 0 0 1px rgba(197,163,86,.2); }
.alb-row .cover {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--ck-gold-2), var(--ck-gold-deep));
  border: 2px solid var(--ck-gold);
  font-family: Georgia, serif; color: var(--ck-gold-ink, #2a2206);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.alb-row .cover.world { background: linear-gradient(135deg, #1e3a7a, #0a1e4e); color: #fff; border-color: #1e3a7a; }
.alb-row.shared .cover { box-shadow: 0 0 0 2px rgba(197,163,86,.25); }
.alb-row .info { min-width: 0; }
.alb-row .info .n { font-weight: 600; font-size: 13.5px; color: var(--ck-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alb-row .info .m { font-size: 11.5px; color: var(--ck-muted); margin-top: 1px; }
.alb-row .prog { width: 120px; display: flex; align-items: center; gap: 10px; }
.alb-row .prog .bar { flex: 1; height: 5px; background: #efe2bf; border-radius: 3px; overflow: hidden; }
.alb-row .prog .bar span { display: block; height: 100%; background: var(--ck-gold); }
.alb-row .prog .pct { font-size: 11.5px; font-weight: 700; color: var(--ck-navy); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .alb-row { grid-template-columns: 36px 1fr auto; gap: 8px; }
  .alb-row .prog { display: none; }
}

.alb-seg {
  display: inline-flex; background: var(--ck-card-alt, #f5efe1);
  border: 1px solid var(--ck-line); border-radius: 999px;
  padding: 3px; margin-bottom: 12px;
}
.alb-seg-btn {
  appearance: none; background: transparent; border: 0;
  color: var(--ck-muted); font: 600 12.5px/1 'Inter', system-ui, sans-serif;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.alb-seg-btn .ct {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 0 6px; height: 18px; border-radius: 999px;
  background: rgba(0,0,0,.06); color: var(--ck-muted);
  font-size: 11px; font-weight: 700;
}
.alb-seg-btn.on {
  background: #fff; color: var(--ck-navy);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--ck-gold);
}
.alb-seg-btn.on .ct { background: var(--ck-gold-2, rgba(197,163,86,.18)); color: var(--ck-navy); }

.alb-group { display: none; }
.alb-group.on { display: block; }

.alb-page { display: none; }
.alb-page.on { display: block; }

.alb-empty { border: 1px dashed var(--ck-line); border-radius: 10px; }

.alb-pager {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--ck-line);
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  color: var(--ck-muted);
}
.alb-pager .pg {
  appearance: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 1px solid var(--ck-line);
  color: var(--ck-navy); font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.alb-pager .pg:hover:not(:disabled) { background: var(--ck-card-alt, #f5efe1); border-color: var(--ck-gold); }
.alb-pager .pg:disabled { opacity: .4; cursor: default; }
.alb-pager .dots { display: inline-flex; gap: 6px; flex: 1; justify-content: center; }
.alb-pager .pdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ck-line-2, #d9cfae); cursor: pointer;
  transition: background .15s, transform .15s;
}
.alb-pager .pdot:hover { background: var(--ck-gold); }
.alb-pager .pdot.on { background: var(--ck-gold-deep); transform: scale(1.25); }
.alb-pager .pnum { font-variant-numeric: tabular-nums; }

.preview-header { font-family: Georgia, serif; font-size: 14px; font-weight: 700; color: var(--ck-navy); display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; }
.preview-header .live-dot { display: inline-block; width: 7px; height: 7px; background: #2f7d4f; border-radius: 50%; margin-right: 6px; animation: ck-pulse 1.8s ease-in-out infinite; }
.preview-box { background: linear-gradient(180deg, var(--ck-navy-2), var(--ck-navy)); border-radius: 14px; overflow: hidden; box-shadow: var(--ck-shadow-lg); position: relative; }
.preview-box .preview-nav { background: rgba(0,0,0,.3); padding: 8px 14px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.preview-box .preview-nav .d { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.preview-box .preview-nav .url { flex: 1; background: rgba(255,255,255,.08); color: #8b91a8; padding: 3px 10px; border-radius: 4px; font-size: 10.5px; font-family: "SF Mono", Consolas, monospace; margin-left: 6px; }
.preview-box .prev-body { background: #fff; color: var(--ck-ink); padding: 18px 18px 22px; position: relative; }
.preview-box .prev-cover { height: 60px; background: linear-gradient(135deg, var(--ck-navy-2), #2a3354); border-radius: 8px 8px 0 0; margin: -18px -18px 0; }
.preview-box .prev-avatar {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ck-gold), var(--ck-gold-deep));
  color: var(--ck-gold-ink, #2a2206);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 22px; font-weight: 700;
  border: 3px solid #fff; margin-top: -34px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  overflow: hidden;
}
.preview-box .prev-avatar img { width: 100%; height: 100%; object-fit: cover; }
.preview-box .prev-name { font-family: Georgia, serif; font-size: 18px; font-weight: 700; color: var(--ck-ink); margin-top: 8px; }
.preview-box .prev-handle { font-size: 12px; color: var(--ck-muted); }
.preview-box .prev-bio { font-size: 12.5px; color: #3a3f52; margin-top: 10px; line-height: 1.55; }
.preview-box .prev-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--ck-card-alt); border-radius: 8px; padding: 10px; margin-top: 14px; border: 1px solid var(--ck-line-soft); }
.preview-box .prev-stats .s { text-align: center; }
.preview-box .prev-stats .s .n { font-family: Georgia, serif; font-weight: 700; color: var(--ck-navy); font-size: 16px; line-height: 1; }
.preview-box .prev-stats .s .l { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; margin-top: 2px; }
.preview-box .prev-albums-lbl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ck-line-soft); }
.preview-box .prev-alb-tabs { display: flex; gap: 4px; margin-top: 8px; overflow-x: auto; }
.preview-box .prev-alb-tab { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: var(--ck-card); color: var(--ck-muted); white-space: nowrap; border: 1px solid var(--ck-line-soft); }
.preview-box .prev-alb-tab.on { background: var(--ck-navy); color: #fff; border-color: var(--ck-navy); }
.preview-box .private-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,46,.88), rgba(20,26,46,.95));
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
  z-index: 5; color: #fff; text-align: center; padding: 30px;
}
.preview-box.private .private-mask { display: flex; }
.preview-box .private-mask .lock { width: 44px; height: 44px; border-radius: 50%; background: rgba(197,163,86,.15); display: flex; align-items: center; justify-content: center; color: var(--ck-gold); }
.preview-box .private-mask h4 { font-family: Georgia, serif; font-size: 17px; margin: 0; color: #fff; }
.preview-box .private-mask p { color: #b2b9d0; font-size: 12.5px; margin: 0; max-width: 260px; line-height: 1.55; }

.hidden-preview { display: none !important; }

.pro-tip {
  background: var(--ck-card-alt); border: 1px solid var(--ck-line-soft);
  border-radius: 10px; padding: 14px 16px; font-size: 12.5px;
  color: #3a3f52; line-height: 1.6;
}
.pro-tip b { font-family: Georgia, serif; color: var(--ck-navy); }

/* ─── Album Viewer ───────────────────────────────────────────────── */
.ck-album-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.ck-album-head h1 { font-family: Georgia, serif; font-size: 32px; margin: 0; letter-spacing: -.4px; }
.ck-album-head h1 em { color: var(--ck-gold-deep); font-style: italic; }
.ck-album-head .sub { color: var(--ck-muted); font-size: 13.5px; margin-top: 4px; }
.ck-album-head .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Left-side of the header: title + sub + a row of nav buttons.
   Nav buttons (Back to Collection + Return to Album Shelf) sit here
   rather than in the right-hand .actions area, so the primary "exit"
   controls are anchored under the page title. */
.ck-album-head .head-left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ck-album-head .head-nav  { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

.ck-series-picker {
  background: #fff; border: 1px solid var(--ck-line);
  color: var(--ck-ink); padding: 9px 14px;
  border-radius: 8px; font-size: 13.5px;
  font-family: inherit; min-width: 260px;
  cursor: pointer;
}

.ck-album-head .ck-seg { display: inline-flex; background: var(--ck-card-alt); border-radius: 8px; padding: 3px; border: 1px solid var(--ck-line-soft); }
.ck-album-head .ck-seg a, .ck-album-head .ck-seg button {
  border: 0; background: transparent; padding: 6px 13px;
  font-size: 12.5px; border-radius: 5px; color: #4a4f62;
  font-weight: 600; text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit;
}
.ck-album-head .ck-seg a.on, .ck-album-head .ck-seg button.on {
  background: #fff; color: var(--ck-navy); box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
.ck-album-head .ck-seg .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: -1px; }
.ck-album-head .ck-seg .sw.tan { background: #e8dcc2; border: 1px solid #8a6b20; }
.ck-album-head .ck-seg .sw.blue { background: #1a2542; border: 1px solid #d4b46e; }

.ck-album-progress {
  display: flex; align-items: center; gap: 16px;
  background: var(--ck-card-alt); border: 1px solid var(--ck-line-soft);
  border-radius: 10px; padding: 12px 18px; margin-bottom: 18px;
  font-size: 13.5px;
}
.ck-album-progress .bar { flex: 1; height: 6px; background: #efe2bf; border-radius: 3px; overflow: hidden; min-width: 200px; }
.ck-album-progress .bar span { display: block; height: 100%; background: var(--ck-gold); border-radius: 3px; }
.ck-album-progress .pct { font-family: Georgia, serif; font-weight: 700; color: var(--ck-navy); font-size: 14px; }
.ck-album-progress .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; }

/* ─── Type Set pseudo-album cover ─────────────────────────────
   Distinct from the per-series covers: a richer gradient + a gold
   star badge in the top-right to signal this is a special "1 of
   each design" collection, not a regular series. Tan/Blue theme
   still applies so the cover still reads as a book. */
.ck-album-cover--typeset {
  box-shadow: -4px 6px 20px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12);
  border: 1px solid rgba(212, 180, 110, .4);
}
.ck-album-cover--typeset.cover-tan {
  background:
    linear-gradient(135deg, #e8dcc2, #c7b795),
    radial-gradient(circle at 75% 25%, rgba(138,107,32,.2), transparent 60%);
}
.ck-album-cover--typeset.cover-blue {
  background:
    linear-gradient(135deg, #1a2542, #0a1226),
    radial-gradient(circle at 75% 25%, rgba(212,180,110,.18), transparent 60%);
}
.ck-album-cover--typeset .ts-badge {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ck-gold);
  color: #2a2206;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.ck-album-cover--typeset .yrs em { font-style: italic; font-weight: 500; letter-spacing: .02em; }

/* ─── Denomination filter + grouping on the shelf ─────────────
   A pill-row that lets users with big collections narrow the shelf
   to one denomination (e.g. Cents, Dollars). When no filter is
   active the shelf is grouped under small denomination headings. */
.ck-denom-filter {
  display: flex; align-items: center; gap: 14px;
  margin: 6px 0 18px; flex-wrap: wrap;
}
.ck-denom-filter .lbl {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ck-muted); font-weight: 700;
}
.ck-denom-filter .chips {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ck-denom-filter .chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ck-card-alt);
  border: 1px solid var(--ck-line);
  color: var(--ck-ink);
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.ck-denom-filter .chip:hover { border-color: var(--ck-gold); color: var(--ck-gold-deep); }
.ck-denom-filter .chip.on {
  background: var(--ck-gold); border-color: var(--ck-gold);
  color: var(--ck-gold-ink, #2a2206);
}
html[data-theme="dark"] .ck-denom-filter .chip { background: var(--ck-card); border-color: var(--ck-line-soft); }
html[data-theme="dark"] .ck-denom-filter .chip.on { background: var(--ck-gold); color: #2a2206; border-color: var(--ck-gold); }

/* ─── Shelf: denomination groups flowing horizontally ─────────
   Each denomination is its own mini-section with one centered
   heading. Multiple groups pack onto the same row when they fit
   — a 1-book group sits next to a 2-book group without forcing
   wasted empty rows. When a single group's books run out of room
   they wrap inside the group, so the heading still reads above
   its entire book-flow. */
.ck-shelf-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* rows align at the top so heading lines up */
  gap: 28px 32px;            /* row-gap, column-gap */
  padding: 8px 0 32px;
}
.ck-denom-group {
  /* Size to content, allow shrinking if the whole row runs out of room */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex; flex-direction: column; align-items: stretch;
}
.ck-denom-group-heading {
  font-family: Georgia, serif;
  font-size: 17px; font-weight: 700;
  color: var(--ck-navy);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ck-line-soft);
  text-align: center;
  letter-spacing: .03em;
}
html[data-theme="dark"] .ck-denom-group-heading { color: var(--ck-ink); border-bottom-color: var(--ck-line); }

/* Books within a group — flow horizontally, wrap inside the group
   if the group is too narrow. Each book is ~180px wide (matching
   .ck-album-cover.max-width). */
.ck-denom-group-books {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 18px;
  justify-content: center;
}
.ck-denom-group-books .ck-album-cover {
  /* Lock the width so flex doesn't squish book proportions */
  flex: 0 0 180px;
  width: 180px;
}
@media (max-width: 620px) {
  .ck-shelf-groups { gap: 22px 16px; }
  .ck-denom-group-books { gap: 14px 12px; }
  .ck-denom-group-books .ck-album-cover { flex-basis: 140px; width: 140px; }
}

/* ─── World country index (drill-down: Country → Series → Album) ──
   When kind=world and no country is chosen, the shelf shows country
   tiles instead of book covers. Clicking one navigates to that
   country's series shelf. Each tile shows flag + name + progress. */
.ck-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  padding: 20px 0 32px;
}
.ck-country-tile {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 22px 18px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ck-card-alt), var(--ck-card));
  border: 1px solid var(--ck-line-soft);
  box-shadow: var(--ck-shadow);
  color: var(--ck-ink);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ck-country-tile:hover {
  transform: translateY(-2px);
  border-color: var(--ck-gold);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.ck-country-tile .flag { font-size: 48px; line-height: 1; }
.ck-country-tile .name { font-family: Georgia, serif; font-size: 17px; font-weight: 700; text-align: center; }
.ck-country-tile .meta { font-size: 12px; color: var(--ck-muted); letter-spacing: .02em; text-align: center; }
.ck-country-tile .bar  {
  width: 100%; height: 5px; background: rgba(0,0,0,.08); border-radius: 3px;
  overflow: hidden; margin-top: 4px;
}
.ck-country-tile .bar span { display: block; height: 100%; background: var(--ck-gold); border-radius: 3px; }
html[data-theme="dark"] .ck-country-tile { background: var(--ck-card); border-color: var(--ck-line-soft); }
html[data-theme="dark"] .ck-country-tile .bar { background: rgba(255,255,255,.1); }

/* ─── Album shelf strip: tracked series as 3D book covers ─────
   Two presentations:
     .ck-album-shelf              — inline strip shown above/under
                                     the open book (compact).
     .ck-album-shelf--grid        — the index view: larger covers,
                                     more breathing room, used when
                                     no album is open. */
.ck-album-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
  padding: 20px 0 24px;
  justify-items: center;
}
.ck-album-shelf--grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 28px 22px;
  padding: 24px 0 48px;
}
/* Bigger type on the index grid only — it's the primary nav surface. */
.ck-album-shelf--grid .ck-album-cover h4 { font-size: 16px; }
.ck-album-shelf--grid .ck-album-cover .yrs { font-size: 13.5px; }

/* Book cover proportions — portrait like a real book (~2:3 width:height).
   Fixed max-width keeps them book-shaped even when the grid cell is
   wider, and justify-items:center on the shelf centers each cover in
   its cell. */
.ck-album-cover {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 2 / 3;
  border-radius: 6px 2px 2px 6px;
  position: relative;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: -4px 6px 14px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 18px 22px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.ck-album-cover::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; width: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,.4), transparent);
  border-radius: 6px 0 0 6px;
  pointer-events: none;
}
.ck-album-cover:hover {
  transform: translateY(-4px);
  box-shadow: -6px 14px 28px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.15);
}
.ck-album-cover.on {
  outline: 3px solid var(--ck-gold);
  outline-offset: 2px;
  transform: translateY(-2px);
}
.ck-album-cover .spine-detail {
  position: absolute;
  top: 16px; bottom: 16px; left: 14px; width: 2px;
  opacity: .7;
  pointer-events: none;
}
.ck-album-cover .spine-detail::after {
  content: "";
  position: absolute;
  left: -3px; right: -3px; top: 16px; bottom: 16px;
  border-radius: 2px;
}
.ck-album-cover h4 {
  font-family: Georgia, serif;
  font-size: 15.5px;
  margin: 0 0 8px;
  letter-spacing: .04em;
  line-height: 1.2;
  max-height: 3.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.ck-album-cover .yrs {
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
  margin-bottom: auto;
}
.ck-album-cover .prog {
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}
.ck-album-cover .prog .prog-nums { margin-bottom: 4px; }
.ck-album-cover .prog .bar {
  height: 3px;
  background: rgba(0, 0, 0, .2);
  border-radius: 2px;
  overflow: hidden;
}
.ck-album-cover .prog .bar span {
  display: block;
  height: 100%;
  border-radius: 2px;
}

/* Blue-theme cover */
.ck-album-cover.cover-blue {
  background: linear-gradient(135deg, #1a2542, #0f1a33);
  color: #f0e4c4;
}
.ck-album-cover.cover-blue .spine-detail {
  background: linear-gradient(180deg, transparent, #d4b46e 10% 90%, transparent);
}
.ck-album-cover.cover-blue .spine-detail::after {
  border: 1px solid rgba(212, 180, 110, .3);
}
.ck-album-cover.cover-blue h4 { color: #f0e4c4; }
.ck-album-cover.cover-blue .yrs { color: #d4b46e; }
.ck-album-cover.cover-blue .prog { color: #f0e4c4; }
.ck-album-cover.cover-blue .prog .bar { background: rgba(255, 255, 255, .12); }
.ck-album-cover.cover-blue .prog .bar span { background: #d4b46e; }

/* Tan-theme cover */
.ck-album-cover.cover-tan {
  background: linear-gradient(135deg, #e8dcc2, #d8c9ac);
  color: #3a2d1c;
}
.ck-album-cover.cover-tan .spine-detail {
  background: linear-gradient(180deg, transparent, #8a6b20 10% 90%, transparent);
}
.ck-album-cover.cover-tan .spine-detail::after {
  border: 1px solid rgba(138, 107, 32, .35);
}
.ck-album-cover.cover-tan h4 { color: #3a2d1c; }
.ck-album-cover.cover-tan .yrs { color: #8a6b20; }
.ck-album-cover.cover-tan .prog { color: #3a2d1c; }
.ck-album-cover.cover-tan .prog .bar { background: rgba(58, 45, 28, .15); }
.ck-album-cover.cover-tan .prog .bar span { background: #8a6b20; }

/* Focus ring for keyboard users */
.ck-album-cover:focus-visible {
  outline: 3px solid var(--ck-gold);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .ck-album-shelf { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  /* Keep the 2:3 book proportion on mobile — just cap width smaller */
  .ck-album-cover { max-width: 140px; padding: 22px 14px 18px; }
  .ck-album-cover h4 { font-size: 14px; }
  .ck-album-cover .yrs { font-size: 12px; }
}

/* Slot sub-labels (for the rebuilt album viewer) */
.slot-label .slot-year-lbl {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .02em;
}
.slot-label .slot-sub {
  font-size: 10.5px;
  opacity: .8;
  margin-top: 1px;
  line-height: 1.25;
}

/* Rarity tag styling for the album legend + slot labels */
.album-legend .slot-tag {
  margin: 0;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}
.album-legend .slot-tag.tag-key  { background: rgba(201, 107, 60, .18); color: #c96b3c; }
.album-legend .slot-tag.tag-semi { background: rgba(154, 125, 54, .2); color: #9a7d36; }
.album-legend .slot-tag.tag-var  { background: rgba(125, 90, 160, .2); color: #8e6ac4; }
.album-legend .sep { color: var(--ck-line-2); margin: 0 2px; }

/* ─── Album Viewer: book spread w/ 3D page-flip animation ────────
   Matches mockups/album-viewer.html. The book sits inside a dark
   `book-stage` that provides perspective, and pages hold a 4×6 grid
   of coin slots (24/page, 48/spread). Flip overlay animates a single
   absolute-positioned panel rotateY(0↔-180) between spreads. */

/* Dark museum-ish backdrop around the book. Tan and Blue share the
   same outer tint — the book itself carries the theme. */
.ck-album-stage {
  background: linear-gradient(180deg, #1a1f2e, #2a2f3e);
  border-radius: 16px;
  padding: 32px 28px 36px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  position: relative;
}
.ck-album-stage.book-tan {
  background: linear-gradient(180deg, #23211a, #3a2f20);
}

/* Book frame — holds the banner above the stage. Wide enough to fit
   a 1200px book plus breathing room; scales down on smaller screens. */
.ck-album-stage .book-frame { max-width: 1240px; margin: 0 auto; }

.album-banner {
  text-align: center;
  padding-bottom: 18px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(212,180,110,.3);
  font-family: Georgia, serif;
  color: #f0e4c4;
}
.album-banner h2 {
  font-size: 22px; letter-spacing: .1em;
  margin: 0 0 4px; color: #fff; font-weight: 700;
}
.album-banner .years {
  font-style: italic; color: var(--ck-gold); font-size: 14px;
}

/* Stage gives the book 3D perspective — required for the flip */
.book-stage {
  perspective: 2600px;
  padding: 24px 0;
  display: flex; justify-content: center;
}

/* The book itself — no bg of its own, pages supply the theme.
   aspect-ratio sets open-book proportions. We use ~1.4:1 (slightly
   taller than a classic 1.58 spread) to give each 3×3 slot grid room
   for its labels — year + mint/variety sub + KEY/SEMI/VAR tag + grade
   can stack up to four lines and would otherwise clip. */
.ck-album-book {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 1.4 / 1;
  transform-style: preserve-3d;
}

/* Spreads stack under each other. Only `.on` is visible; the flip
   overlay handles the animated transition between them. Each spread
   fills the book's full box so the aspect-ratio is honored. */
.album-spread { display: none; position: absolute; inset: 0; }
.album-spread.on { display: block; animation: ck-fadein .3s ease; }
@keyframes ck-fadein { from { opacity: 0; } to { opacity: 1; } }

/* Two-page book spread — fills the .album-spread (which fills the book) */
.book-spread {
  position: relative;
  display: flex;
  width: 100%; height: 100%;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
  overflow: hidden;
}
/* Center binding shadow — two-tone gradient strip down the middle */
.book-spread::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; width: 28px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.45) 50%, rgba(0,0,0,.25));
  z-index: 3; pointer-events: none;
}

.page {
  flex: 1;
  position: relative;
  padding: 24px 20px 30px;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.page.left  { border-radius: 6px 0 0 6px; }
.page.right { border-radius: 0 6px 6px 0; }

/* Blue variant — dark navy pages */
.book-blue .page {
  background: linear-gradient(180deg, #1a2542, #0f1a33);
  color: #f0e4c4;
}
.book-blue .page-title { color: #f0e4c4; border-color: rgba(212,180,110,.3); }
.book-blue .page-title em { color: var(--ck-gold); }
.book-blue .slot { background: #0a1226; border-color: #2a3760; }
.book-blue .slot.own { background: radial-gradient(circle at 30% 30%, #8a6b20 0%, #5a4410 45%, #3a2c08 100%); border-color: var(--ck-gold); }
.book-blue .slot.want { border-color: #d4b46e; border-style: dashed; }
.book-blue .slot-year { color: rgba(240,228,196,.4); }
.book-blue .slot.own .slot-year { color: #f0e4c4; }
.book-blue .slot-label { color: #f0e4c4; }
.book-blue .slot-label .grade { color: var(--ck-gold); }
.book-blue .page-note { color: rgba(240,228,196,.45); }

/* Tan variant — warm parchment pages with subtle paper grain */
.book-tan .page {
  background:
    linear-gradient(180deg, #e8dcc2, #d8c9ac),
    repeating-linear-gradient(90deg, rgba(58,45,28,.03) 0 2px, transparent 2px 12px);
  background-blend-mode: multiply;
  color: #3a2d1c;
}
.book-tan .page-title { color: #3a2d1c; border-color: rgba(138,107,32,.25); }
.book-tan .page-title em { color: var(--ck-gold-deep); }
.book-tan .slot { background: #2e2214; border-color: #b9a680; }
.book-tan .slot.own { background: radial-gradient(circle at 30% 30%, #b8915a 0%, #7a5a25 45%, #4a3614 100%); border-color: var(--ck-gold-deep); }
.book-tan .slot.want { border-color: var(--ck-gold-deep); border-style: dashed; }
.book-tan .slot-year { color: rgba(255,255,255,.45); }
.book-tan .slot.own .slot-year { color: rgba(255,255,255,.92); }
.book-tan .slot-label { color: #3a2d1c; }
.book-tan .slot-label .grade { color: var(--ck-gold-deep); }
.book-tan .page-note { color: rgba(58,45,28,.5); }

/* Page header — serif label at the top of each page */
.page-title {
  font-family: Georgia, serif;
  font-size: 14px; letter-spacing: .08em;
  text-align: center; font-weight: 700;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid;
}
.page-title em { font-style: italic; font-weight: 400; }

/* Slot grid — 3 columns × 3 rows = 9 slots per page.
   Fewer, larger slots puts the focus on the coin photos themselves —
   user-uploaded obverse/reverse images read clearly at this size. */
.page .slots {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px 14px;
  flex: 1; align-content: start;
  justify-items: center;
}
.page .slot-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.page .slot {
  aspect-ratio: 1; width: 100%; max-width: 128px;
  border-radius: 50%; border: 2px solid;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.page .slot:hover { transform: scale(1.05); }
.book-tan .slot.own:hover { box-shadow: 0 0 0 3px rgba(138,107,32,.3); }
.book-blue .slot.own:hover { box-shadow: 0 0 0 3px rgba(212,180,110,.3); }

.page .slot-year {
  font-family: Georgia, serif;
  font-size: 15px; font-weight: 700;
  letter-spacing: .02em;
}
.page .slot-label {
  font-size: 11.5px; text-align: center;
  font-weight: 500; line-height: 1.2;
  max-width: 140px;
}
.page .slot-label .slot-year-lbl { font-weight: 700; font-size: 12.5px; }
.page .slot-label .slot-sub { opacity: .8; font-size: 11px; }
.page .slot-label .grade { font-weight: 700; font-size: 11.5px; letter-spacing: .03em; }
.page .slot-label .slot-tag {
  display: inline-block;
  font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700;
  padding: 1.5px 5px; border-radius: 3px; margin-top: 2px;
}
.page .slot-label .slot-tag.tag-key  { background: rgba(201,107,60,.22); color: #c96b3c; }
.page .slot-label .slot-tag.tag-semi { background: rgba(154,125,54,.22); color: #9a7d36; }
.page .slot-label .slot-tag.tag-var  { background: rgba(125,90,160,.22); color: #8e6ac4; }

/* Photo slots inside the album book — user-uploaded images render
   inside the circle. Perspective on the slot makes the .flip-inner
   hover-flip feel 3D instead of flat. The themed border color wins
   over the .has-photo background so tan/blue still read correctly. */
.ck-album-book .page .slot { perspective: 800px; }
.ck-album-book .page .slot.has-photo { background: #000; }
.ck-album-book .page .slot.has-photo .slot-year { display: none; }
.book-blue .slot.own.has-photo { border-color: var(--ck-gold); }
.book-tan  .slot.own.has-photo { border-color: var(--ck-gold-deep); }

.page-note {
  font-family: Georgia, serif; font-style: italic;
  font-size: 11px; text-align: center;
  margin-top: auto; padding-top: 10px; opacity: .55;
}

/* ─── Flip overlay — a single rotating panel sitting over the right
       half of the book. Both next and prev use it:
         NEXT: front = current-right, back = target-left.
               Starts flat (rotateY 0), animates to rotateY(-180) so
               the back face arrives on the left half after the flip.
         PREV: front = target-right, back = current-left.
               Starts at rotateY(-180) (back visible on left),
               animates to 0 (front visible on right). ───────────── */
.ck-album-book .flip-overlay {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.45, .1, .25, 1);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}
.ck-album-book .flip-overlay.active { opacity: 1; }
.ck-album-book .flip-overlay.active.to-back { transform: rotateY(-180deg); }

.ck-album-book .flip-overlay .face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  padding: 24px 20px 30px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.ck-album-book .flip-overlay .face.front { border-radius: 0 6px 6px 0; }
.ck-album-book .flip-overlay .face.back  { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }

.book-blue .flip-overlay .face {
  background: linear-gradient(180deg, #1a2542, #0f1a33);
  color: #f0e4c4;
}
.book-tan .flip-overlay .face {
  background:
    linear-gradient(180deg, #e8dcc2, #d8c9ac),
    repeating-linear-gradient(90deg, rgba(58,45,28,.03) 0 2px, transparent 2px 12px);
  background-blend-mode: multiply;
  color: #3a2d1c;
}

/* ─── Mobile: collapse the spread to a single stacked page ─── */
@media (max-width: 820px) {
  .ck-album-stage { padding: 20px 14px 24px; }
  .book-stage { padding: 12px 0; perspective: none; }
  /* Drop the book aspect-ratio so the stacked pages can size to content */
  .ck-album-book { aspect-ratio: auto; transform-style: flat; }
  .album-spread { position: static; }
  .book-spread { flex-direction: column; height: auto; }
  .book-spread::before { display: none; }
  .page.left, .page.right { border-radius: 0; }
  .page.right { border-top: 1px solid rgba(138,107,32,.25); }
  .book-blue .page.right { border-top-color: rgba(212,180,110,.25); }
  .page .slots { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
  .page .slot { max-width: 88px; }
  .page .slot-year { font-size: 12.5px; }
  .page .slot-label { font-size: 10px; max-width: 100px; }
  /* Disable the flip overlay on small screens — it looks odd stacked. */
  .ck-album-book .flip-overlay { display: none; }
}

.ck-album-pager {
  display: flex; justify-content: center; align-items: center;
  gap: 20px; margin-top: 22px;
}
.ck-album-pager .pg {
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--ck-line);
  color: var(--ck-navy); font-size: 20px; cursor: pointer;
  transition: all .15s;
}
.ck-album-pager .pg:hover:not(:disabled) { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); border-color: var(--ck-gold); }
.ck-album-pager .pg:disabled { opacity: .3; cursor: not-allowed; }
.ck-album-pager .dots { display: flex; gap: 6px; }
.ck-album-pager .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ck-line); cursor: pointer; transition: background .15s; }
.ck-album-pager .dot.on { background: var(--ck-gold); }
.ck-album-pager .spread-num { color: var(--ck-muted); font-size: 13px; min-width: 100px; text-align: center; font-variant-numeric: tabular-nums; }

/* ─── Tracker / Type Set ──────────────────────────────────────── */
.ck-tracker-modes {
  display: flex; background: var(--ck-card-alt);
  border: 1px solid var(--ck-line-soft); border-radius: 12px;
  padding: 6px; margin-bottom: 22px; gap: 4px; box-shadow: var(--ck-shadow);
}
.ck-tracker-modes .mode {
  flex: 1; padding: 12px 16px; border-radius: 8px;
  text-align: center; font-weight: 600; color: #4a4f62;
  cursor: pointer; border: 1px solid transparent;
  font-size: 14px; transition: all .15s;
  text-decoration: none;
}
.ck-tracker-modes .mode:hover { background: #fff; }
.ck-tracker-modes .mode.on { background: #fff; border-color: var(--ck-line); color: var(--ck-navy); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ck-tracker-modes .mode.muted { cursor: default; opacity: .5; }
.ck-tracker-modes .mode .d { font-size: 11.5px; color: var(--ck-muted); font-weight: 400; margin-top: 2px; }

/* Hero (shared between typeset + all sets) */
.ck-typeset-hero, .ck-tracker-hero {
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px;
  align-items: center;
  background: linear-gradient(135deg, var(--ck-card-alt), var(--ck-card));
  border: 1px solid var(--ck-line-soft); border-radius: 14px;
  padding: 22px 26px; margin-bottom: 22px; box-shadow: var(--ck-shadow);
}
@media (max-width: 860px) { .ck-typeset-hero, .ck-tracker-hero { grid-template-columns: 1fr; text-align: center; } }
.ck-typeset-hero .ring, .ck-tracker-hero .ring { position: relative; flex-shrink: 0; }
.ck-typeset-hero .ring svg, .ck-tracker-hero .ring svg { transform: rotate(-90deg); }
.ck-typeset-hero .ring .bg, .ck-tracker-hero .ring .bg { fill: none; stroke: var(--ck-line); stroke-width: 10; }
.ck-typeset-hero .ring .fg, .ck-tracker-hero .ring .fg { fill: none; stroke: var(--ck-gold); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .5s; }
.ck-typeset-hero .ring .pct, .ck-tracker-hero .ring .pct {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ck-typeset-hero .ring .pct .n { font-family: Georgia, serif; font-size: 30px; font-weight: 700; color: var(--ck-navy); line-height: 1; }
.ck-typeset-hero .ring .pct .l { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; margin-top: 3px; }
.ck-tracker-hero .ring .pct .n { font-family: Georgia, serif; font-size: 26px; font-weight: 700; color: var(--ck-navy); }
.ck-tracker-hero .ring .pct .l { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; margin-top: 3px; }
.ck-typeset-hero .body .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ck-gold-deep); font-weight: 700; }
.ck-typeset-hero .body h1, .ck-tracker-hero .body h1 { font-family: Georgia, serif; font-size: 22px; margin: 4px 0; letter-spacing: -.2px; }
.ck-typeset-hero .body h1 b { color: var(--ck-gold-deep); }
.ck-typeset-hero .body p, .ck-tracker-hero .body p { color: var(--ck-muted); margin: 0; font-size: 13.5px; }
.ck-typeset-hero .body .stats, .ck-tracker-hero .body .stats { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.ck-typeset-hero .body .stats > div, .ck-tracker-hero .body .stats > div { display: flex; flex-direction: column; }
.ck-typeset-hero .body .stats b, .ck-tracker-hero .body .stats b { font-family: Georgia, serif; font-size: 18px; color: var(--ck-navy); }
.ck-typeset-hero .body .stats span, .ck-tracker-hero .body .stats span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ck-muted); font-weight: 700; }

/* Section heads inside type set */
.ck-typeset-section { margin-bottom: 32px; }
.ck-typeset-section .cat-head {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 4px 12px; margin-bottom: 16px;
  border-bottom: 2px solid var(--ck-gold-soft);
  flex-wrap: wrap;
}
.ck-typeset-section .cat-head h2 { font-family: Georgia, serif; font-size: 20px; margin: 0; color: var(--ck-navy); }
.ck-typeset-section .cat-head .count {
  background: var(--ck-card); color: var(--ck-gold-deep);
  font-size: 11px; padding: 3px 10px; border-radius: 10px;
  font-weight: 700; letter-spacing: .04em;
}
.ck-typeset-section .cat-head .count b { color: var(--ck-navy); }
.ck-typeset-section .cat-head .bar-wrap {
  flex: 1; max-width: 220px;
  height: 5px; background: var(--ck-card);
  border-radius: 3px; overflow: hidden;
  margin-left: auto;
}
.ck-typeset-section .cat-head .bar-wrap span { display: block; height: 100%; background: var(--ck-gold); }
.ck-typeset-section .cat-head .pct { font-family: Georgia, serif; font-weight: 700; color: var(--ck-navy); font-size: 14px; min-width: 44px; text-align: right; }

/* Design cards */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.design {
  background: #fff; border: 1.5px solid var(--ck-line);
  border-radius: 12px; padding: 14px;
  position: relative; cursor: default;
  transition: all .15s;
  display: flex; flex-direction: column; gap: 8px;
}
.design:hover { border-color: var(--ck-gold); transform: translateY(-2px); box-shadow: var(--ck-shadow-lg); }
.design.complete { border-color: var(--ck-gold); background: linear-gradient(180deg, #fbf4e1, #fff); }
.design.empty .coin-chip {
  background: repeating-linear-gradient(45deg, #f5efe4 0 4px, #ece5d3 4px 8px);
  border: 2px dashed var(--ck-line-2); color: var(--ck-muted);
  font-size: 18px; font-weight: 400; font-family: inherit;
}
.design.hidden { opacity: .45; }
.design .tr { display: flex; align-items: flex-start; gap: 10px; }
.design .coin-chip {
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--ck-gold-2), var(--ck-gold-deep));
  border: 2px solid var(--ck-gold);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif;
  color: var(--ck-gold-ink, #2a2206); font-weight: 700; font-size: 11px;
  box-shadow: 0 2px 5px rgba(0,0,0,.12);
  overflow: hidden;   /* clip photo to circle */
}
/* Photo variant — user uploaded an obverse for this design's rep coin.
   Image fills the chip; background/gradient hidden behind it. */
.design .coin-chip.has-photo {
  background: #000;
  border-color: var(--ck-gold-deep);
}
.design .coin-chip img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.design .tr .txt { flex: 1; min-width: 0; }
.design .nm {
  font-weight: 700; font-size: 14px; color: var(--ck-navy);
  line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.design .yrs { font-size: 11.5px; color: var(--ck-muted); margin-top: 1px; }
.design .check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ck-ok); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  margin-left: 7px;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.design .status-lbl .check { transform: translateY(-1px); }
.design .coin-chip { position: relative; }

.design .pick {
  background: var(--ck-card-alt); border: 1px solid var(--ck-line-soft);
  border-radius: 7px; padding: 6px 8px; font-size: 12px;
  color: var(--ck-ink); width: 100%; font-family: inherit;
  text-align: left; cursor: pointer;
}
.design .pick:hover { border-color: var(--ck-gold); }
.design .meta-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  font-size: 11px; color: var(--ck-muted);
  padding-top: 8px; border-top: 1px dashed var(--ck-line-soft);
  margin-top: auto;
}
.design .meta-row .status-lbl {
  font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
  color: var(--ck-muted);
}
.design.complete .meta-row .status-lbl { color: var(--ck-ok); }

/* Hide/include button — clear button-shaped control instead of the
   old glyph-only icon. Dim neutral by default; flips to a filled
   "Included" pill when the design is currently hidden. */
.design .hide-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px;
  background: #fff; border: 1px solid var(--ck-line);
  color: var(--ck-ink);
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .12s;
}
.design .hide-btn .hide-ic { font-size: 12px; line-height: 1; opacity: .7; }
.design .hide-btn:hover {
  background: #fdf5f5; border-color: #efc5c5; color: var(--ck-err);
}
.design .hide-btn:hover .hide-ic { opacity: 1; }
.design .hide-btn.is-hidden {
  background: var(--ck-gold-soft); border-color: var(--ck-gold-deep);
  color: #5d4206;
}
.design .hide-btn.is-hidden:hover {
  background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206);
  border-color: var(--ck-gold);
}

/* Pick modal extensions */
.ck-modal .pick-section-lbl {
  font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ck-muted);
  font-weight: 700; margin: 10px 0 8px; padding-left: 4px;
}
.ck-modal .pick-section-lbl:first-child { margin-top: 0; }
.ck-modal .pick-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  cursor: pointer; border: 1px solid transparent;
  transition: all .15s;
}
.ck-modal .pick-option:hover { background: var(--ck-card-alt); border-color: var(--ck-line-soft); }
.ck-modal .pick-option.owned { background: #fbf4e1; border-color: var(--ck-gold-soft); }
.ck-modal .pick-option.owned:hover { border-color: var(--ck-gold); }
.ck-modal .pick-option .pc {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--ck-gold);
  background: radial-gradient(circle at 30% 30%, var(--ck-gold-2), var(--ck-gold-deep));
  flex-shrink: 0; font-family: Georgia, serif;
  color: var(--ck-gold-ink, #2a2206); font-weight: 700; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.ck-modal .pick-option .pn { flex: 1; min-width: 0; }
.ck-modal .pick-option .pn b { display: block; font-size: 13.5px; color: var(--ck-ink); }
.ck-modal .pick-option .pn .pm { font-size: 11.5px; color: var(--ck-muted); margin-top: 1px; }
.ck-modal .pick-option .owned-badge {
  font-size: 9.5px; letter-spacing: .1em;
  background: var(--ck-ok); color: #fff;
  padding: 2px 7px; border-radius: 4px; font-weight: 700;
}
.ck-modal .pick-option .rarity-badge { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; font-weight: 700; }
.ck-modal .pick-clear { text-align: center; padding: 12px 0 4px; border-top: 1px dashed var(--ck-line-soft); margin-top: 12px; }
.ck-modal .pick-clear button {
  background: none; border: 0; color: var(--ck-err);
  font-size: 12.5px; cursor: pointer; font-family: inherit;
  padding: 4px 10px;
}
.ck-modal .pick-clear button:hover { text-decoration: underline; }

/* All Sets tracker rows */
.ck-tracker-list { display: flex; flex-direction: column; gap: 6px; }
.ck-tracker-row {
  display: grid; grid-template-columns: 1fr 1.5fr auto auto;
  gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--ck-line-soft);
  border-radius: 10px; padding: 12px 16px;
  text-decoration: none; color: var(--ck-ink);
  transition: border-color .12s, transform .12s;
}
.ck-tracker-row:hover { border-color: var(--ck-gold); transform: translateY(-1px); }
.ck-tracker-row .title .n { font-weight: 700; color: var(--ck-navy); }
.ck-tracker-row .title .y { font-size: 12px; color: var(--ck-muted); margin-top: 1px; }
.ck-tracker-row .prog .bar { height: 6px; background: #f1e7d0; border-radius: 3px; overflow: hidden; }
.ck-tracker-row .prog .bar span { display: block; height: 100%; background: var(--ck-gold); }
.ck-tracker-row .nums { font-size: 13px; color: var(--ck-muted); font-variant-numeric: tabular-nums; }
.ck-tracker-row .pct-cell { font-family: Georgia, serif; font-size: 15px; font-weight: 700; color: var(--ck-navy); min-width: 50px; text-align: right; }

/* ════════════════════════════════════════════════════════════════ */
/* MOBILE SHELL — patterns from the mobile-shell.html mockup        */
/* ════════════════════════════════════════════════════════════════ */

/* Base touch targets (applied globally — every button/link at least 44px hit) */
@media (max-width: 820px) {
  .ck-btn, button.ck-btn, .ck-pin-btn, .pg {
    min-height: 44px;
  }
  .ck-btn { padding: 12px 16px; }
}

/* ─── Page padding on mobile ─── */
@media (max-width: 640px) {
  .ck-page { padding: 14px 12px 100px; }   /* extra bottom for floating bottom nav */
  .ck-crumbs { font-size: 12px; }
}

/* ─── Dashboard mobile ─── */
@media (max-width: 820px) {
  .ck-dashboard .ck-dash-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .ck-dashboard .ck-dash-head h1 { font-size: 24px; }
  .ck-dashboard .ck-dash-head .actions { justify-content: flex-start; flex-wrap: wrap; }
  .ck-splitbtn { flex: 1; min-width: 160px; }
  .ck-splitbtn .main, .ck-splitbtn .combo { flex: 1; }
}

@media (max-width: 640px) {
  .ck-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ck-stats .sc { padding: 12px 14px; }
  .ck-stats .sc .n { font-size: 22px; }
  .ck-stats .sc .d { font-size: 10.5px; }

  .ck-regions { padding: 4px; gap: 3px; }
  .ck-region { padding: 8px 10px; font-size: 12.5px; gap: 5px; }
  .ck-region .flag { width: 18px; height: 12px; }
  .ck-region .ct { font-size: 10px; padding: 1px 6px; }

  .ck-toolbar {
    position: static;   /* sticky interferes with soft-keyboard on iOS */
    padding: 8px 10px;
  }
  .ck-toolbar .search { min-width: 100%; }
  .ck-toolbar .ck-seg { width: 100%; }
  .ck-toolbar .ck-seg button { flex: 1; }

  .ck-chips { gap: 6px; overflow-x: auto; padding-bottom: 2px; flex-wrap: nowrap; scrollbar-width: thin; }
  .ck-chips::-webkit-scrollbar { height: 3px; }
  .ck-chip { padding: 6px 12px; font-size: 12px; flex-shrink: 0; }

  /* Series head on narrow screens — stack title + progress bar */
  .ck-series > summary.head { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .ck-series .title h3 { font-size: 15px; }
  .ck-series .prog { width: 100%; order: 3; margin-top: 4px; }
  .ck-series .coinrows { padding: 12px 14px; }

  /* Coin rows — drop variety column on very narrow screens */
  .ck-coin-row { grid-template-columns: 12px 60px 1fr auto; padding: 10px 12px; gap: 10px; }
  .ck-coin-row .keytag { display: none; }   /* hide tag chip on mobile; status dot + grade tell the story */

  /* Country cards — stack stats + pin button */
  .ck-country > summary.head { flex-wrap: wrap; padding: 14px 16px 14px 20px; gap: 10px; }
  .ck-country .info { flex: 1 1 calc(100% - 56px); }
  .ck-country .cstats { order: 3; flex-basis: 100%; justify-content: space-around; padding-top: 6px; border-top: 1px solid var(--ck-line-soft); margin-top: 4px; }
  .ck-country .cstats > div { min-width: auto; }
  .ck-pin-btn { order: 2; }
  .ck-country .caret { order: 4; }
}

/* ─── Mobile-shell polish (≤500 px) — matches mobile-shell.html ─── */
@media (max-width: 500px) {
  /* Dashboard greeting matches mockup proportions */
  .ck-dashboard .ck-dash-head h1 { font-size: 22px; }
  .ck-dashboard .ck-dash-head .sub { font-size: 12.5px; }
  .ck-dashboard .ck-dash-head .sub b { display: inline; }

  /* Stats compact 2×2 */
  .ck-stats .sc { padding: 10px 12px; border-radius: 10px; }
  .ck-stats .sc .l { font-size: 9.5px; }
  .ck-stats .sc .n { font-size: 20px; margin-top: 2px; }
  .ck-stats .sc .d { font-size: 10px; }
  .ck-stats .sc::before { width: 3px; }

  /* Region pills tighter */
  .ck-regions { padding: 3px; margin-bottom: 10px; }
  .ck-region { padding: 7px; font-size: 11.5px; }
  .ck-region .ct { font-size: 9.5px; padding: 1px 5px; }

  /* Chip row — smaller pill style per mobile mockup */
  .ck-chip { font-size: 11px; padding: 4px 9px; }

  /* Series card header — match mockup's 10px radius, tight padding */
  .ck-series { border-radius: 10px; margin-bottom: 6px; }
  .ck-series > summary.head { padding: 10px 12px; gap: 8px; }
  .ck-series .title h3 { font-size: 13px; }
  .ck-series .title .years { font-size: 11px; }
  .ck-series .prog .bar { height: 4px; }

  /* Public profile: hero + card shrink.
     Bottom padding is intentionally generous so the negatively-margined
     avatar below doesn't crash into the hero pills/name text. */
  .ck-profile-hero {
    min-height: 180px;
    margin: 12px 12px 0;
    border-radius: 14px;
  }
  .ck-profile-hero .inner { padding: 36px 14px 110px; }
  .ck-profile-hero h1 { font-size: 24px; }
  .ck-profile-hero .handle { font-size: 13px; }
  .ck-profile-hero .since { font-size: 11.5px; }
  .ck-profile-hero .pill { padding: 4px 10px; font-size: 11.5px; }
  .ck-profile-card { padding: 16px 16px; gap: 12px; border-radius: 12px; }
  .ck-profile-card .avatar-big { width: 84px; height: 84px; font-size: 28px; margin-top: -48px; }
  .ck-profile-card .info h2 { font-size: 19px; }
  .ck-profile-card .info .bio { font-size: 13px; }
  .ck-profile-card .info .meta-row { font-size: 11.5px; gap: 10px; }
  .ck-profile-card .actions .ck-btn { flex: 1; min-width: 130px; font-size: 12.5px; padding: 8px 12px; }

  .ck-profile-body { padding: 22px 14px 44px; }
  .ck-profile-section .sec-head h3 { font-size: 19px; }
  .ck-profile-section .sec-head-actions { flex-wrap: wrap; gap: 6px; }
  .album-style-seg button { padding: 5px 9px; font-size: 11.5px; }

  /* Album mobile — match mobile-shell's narrow-page look */
  .album-page { padding: 16px 14px 22px; border-radius: 12px; }
  .album-page .album-top { align-items: flex-start; gap: 10px; }
  .album-page .title h4 { font-size: 14px; letter-spacing: .06em; }
  .album-page .title .years { font-size: 12px; }
  .album-page .progress { min-width: 100%; }
  .album-page .slots { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
  .album-page .slot { max-width: 78px; }
  .album-page .slot-year { font-size: 11px; }
  .album-page .slot-label { font-size: 10px; line-height: 1.3; }

  /* Bell-panel rule removed — the later @media (max-width: 640px) block
     now handles mobile positioning with position:fixed pinned to the
     viewport. Keeping this rule caused a cascade conflict. */

  /* Add-coins split button takes full row */
  .ck-splitbtn { width: 100%; }
  .ck-splitbtn .main, .ck-splitbtn .combo { font-size: 13px; padding: 9px 12px; width: 100%; justify-content: center; }
  /* Its dropdown menu keeps min-width: 270px from the desktop rule; on a
     narrow phone that can push off the right edge. Pin it to both edges
     so it always fits the screen. */
  .ck-splitbtn .addmenu {
    left: 0; right: 0;
    min-width: 0;
    max-width: calc(100vw - 24px);
  }

  /* Toolbar search full width */
  .ck-toolbar .search input { font-size: 14px; padding: 9px 12px; }
}

/* ─── Touch-target sanity floor (all mobile) ─── */
@media (hover: none) and (pointer: coarse) {
  /* .mini-switch intentionally excluded — its fixed 26-30px height plus
     precisely-positioned thumb does NOT tolerate min-height expansion
     (the thumb ends up floating at the top of an over-tall track). The
     switch has its own touch-friendly dimensions in the block below. */
  .ck-btn, .ck-chip, .ck-region, .ck-seg button { min-height: 36px; }
  .ck-drawer-close-mobile { min-height: 48px; }   /* thumb-friendly on phones */
}

/* ─── Dashboard layout collapse ─── */
@media (max-width: 1020px) {
  .ck-dash-layout { grid-template-columns: 1fr; gap: 16px; }
  .ck-dash-layout .side { order: 2; }     /* side panels fall below main content */
  .ck-dash-layout .main { order: 1; }
}

/* ─── Drawer → bottom sheet (already defined, strengthen on true mobile) ─── */
@media (max-width: 620px) {
  .ck-drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 90vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .ck-drawer.on { transform: translateY(0); }
  .ck-drawer::before {
    content: ""; display: block;
    width: 36px; height: 4px;
    background: var(--ck-line-2);
    border-radius: 2px;
    margin: 10px auto 0;
  }
  /* On mobile we hide the top-left pill; the bottom-docked close bar
     in the footer is easier to reach with one thumb. */
  .ck-drawer .dh { padding: 12px 18px; }
  .ck-drawer > .ck-drawer-close { display: none !important; }
  .ck-drawer .db { padding: 16px 18px 24px; }
  .ck-drawer .df {
    padding: 12px 18px env(safe-area-inset-bottom, 16px);
    flex-direction: column; align-items: stretch; gap: 6px;
  }
  .ck-drawer .df .ck-drawer-close-mobile { display: flex; }
}

/* ─── Album mobile ─── */
@media (max-width: 820px) {
  .ck-album-head { flex-direction: column; align-items: stretch; }
  .ck-album-head .actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .ck-series-picker { width: 100%; min-width: auto; }
}
@media (max-width: 640px) {
  .album-banner h2 { font-size: 17px; letter-spacing: .08em; }
  .album-banner .years { font-size: 13px; }
  .ck-album-stage { padding: 18px 12px 22px; }
  .page { padding: 20px 16px 24px; }
  .page-title { font-size: 13px; }
  .page .slots { gap: 14px 8px; }
  .page .slot { max-width: 78px; }
  .ck-album-pager { gap: 12px; margin-top: 16px; }
  .ck-album-pager .pg { width: 40px; height: 40px; }
}

/* ─── Public Profile mobile ─── */
@media (max-width: 760px) {
  /* Extra bottom padding on the hero so the negatively-margined
     avatar on the card below doesn't cover the hero pills/name. */
  .ck-profile-hero .inner { padding: 40px 16px 100px; }
  .ck-profile-hero h1 { font-size: 28px; }
  .ck-profile-card { padding: 18px 20px; gap: 16px; }
  .ck-profile-card .avatar-big { margin-top: -48px; }
  .ck-profile-stats { grid-template-columns: repeat(2, 1fr); }
  .album-tabs { padding: 4px; }
  .album-tabs .tab { padding: 7px 12px; font-size: 12px; }
  .album-page { padding: 18px 16px 22px; }
  .slots { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
}

/* ─── Showcase Settings mobile ─── */
@media (max-width: 1080px) {
  .ck-showcase-layout { grid-template-columns: 1fr; }
  .ck-showcase-layout .side { position: static; }
}
@media (max-width: 640px) {
  .ck-privacy-hero { grid-template-columns: 1fr; gap: 14px; padding: 18px 20px; }
  .ck-privacy-hero .lock-icon { display: none; }   /* reclaim space */
  .ck-privacy-hero .ck-switch { align-self: flex-start; }
  .ck-privacy-hero .url-bar { max-width: 100%; }
  .alb-row { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 10px 12px; }
  .alb-row .prog { display: none; }   /* progress bar hidden; percent can return later via a tooltip */
  .togrow .tic { display: none; }      /* tic column collapses, rows get more text width */
  .togrow .m .d { font-size: 12px; }
}

/* ─── Settings mobile ─── */
@media (max-width: 840px) {
  .ck-settings-layout { grid-template-columns: 1fr; gap: 14px; }
  .ck-sidenav {
    position: static;
    display: flex; flex-direction: row;
    overflow-x: auto;
    padding: 6px; gap: 4px;
    scrollbar-width: thin;
  }
  .ck-sidenav a { flex-shrink: 0; padding: 8px 12px; }
  .ck-sidenav a .ic { width: 22px; height: 22px; }
  .ck-card .body { padding: 4px 16px; }
  .ck-row { flex-wrap: wrap; gap: 10px; }
  .ck-row .meta { flex-basis: 100%; }
  .ck-row .ctrl, .ck-row .mini-switch { margin-left: 0; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ─── Achievements mobile ─── */
@media (max-width: 760px) {
  .ck-ach-hero { grid-template-columns: 1fr; text-align: center; padding: 20px 16px; }
  .ck-ach-hero .body h1 { font-size: 24px; }
  .ck-ach-hero .stats { justify-content: center; }
  .ck-ach-category .cat-head { flex-wrap: wrap; gap: 8px; }
  .ck-ach-category .cat-head .count { margin-left: 0; }
  .badge-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ach { padding: 14px 10px 12px; }
  .ach .badge { width: 52px; height: 52px; font-size: 20px; }
}

/* ─── Bank Manager mobile ─── */
@media (max-width: 820px) {
  .ck-banks-head { flex-direction: column; align-items: stretch; }
  .ck-leaderboard { padding: 16px 18px; }
  .ck-leaderboard .lb-row { flex-wrap: wrap; gap: 8px; }
  .ck-leaderboard .nm { flex-basis: calc(100% - 42px); }
  .ck-leaderboard .pct, .ck-leaderboard .finds { margin-left: 42px; }
  .banks-grid { grid-template-columns: 1fr; }
  .bank-card .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Session Detail mobile ─── */
@media (max-width: 820px) {
  .ck-session-hero { padding: 18px 20px; }
  .ck-session-hero .title h1 { font-size: 20px; }
  .ck-session-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .ck-session-hero .hero-actions .ck-btn { justify-content: center; }
  .ck-session-hero .hero-actions .danger-dark { margin-left: 0 !important; }
  .ck-session-layout { grid-template-columns: 1fr; }
  .ck-session-layout .side { order: 2; }
  .ck-session-layout .main { order: 1; }
  .finds-wall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .roll { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 10px; }
}

/* ─── Tracker mobile ─── */
@media (max-width: 820px) {
  .ck-tracker-modes { flex-direction: column; }
  .ck-tracker-modes .mode { text-align: left; }
  .ck-typeset-hero, .ck-tracker-hero {
    grid-template-columns: 1fr; text-align: center; padding: 18px 20px; gap: 16px;
  }
  .ck-typeset-hero .body .stats { justify-content: center; }
  .ck-typeset-section .cat-head { flex-wrap: wrap; }
  .ck-typeset-section .cat-head .bar-wrap { max-width: 100%; flex-basis: 100%; margin-left: 0; order: 4; }
  .design-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
  .ck-tracker-row { grid-template-columns: 1fr auto; }
  .ck-tracker-row .prog { grid-column: 1 / -1; }
  .ck-tracker-row .nums { font-size: 12px; }
}

/* ─── Modal mobile — slide up from bottom ─── */
@media (max-width: 620px) {
  .ck-modal {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 92vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%) scale(1);
  }
  .ck-modal.on { transform: translateY(0) scale(1); }
  .ck-modal::before {
    content: ""; display: block;
    width: 36px; height: 4px;
    background: var(--ck-line-2);
    border-radius: 2px;
    margin: 10px auto 0;
  }
  .ck-modal .mh { padding: 12px 18px; }
  .ck-modal .mb { padding: 14px 18px 20px; }
  .ck-modal .mf { padding: 12px 18px env(safe-area-inset-bottom, 14px); }
}

/* ─── Large-touch affordance for all toggles on mobile ─── */
@media (hover: none) and (pointer: coarse) {
  .mini-switch { width: 56px; height: 30px; }
  .mini-switch::before { font-size: 9px; right: 8px; }
  .mini-switch.on::before { left: 10px; right: auto; }
  .mini-switch .thumb { width: 24px; height: 24px; top: 3px; left: 3px; }
  .mini-switch.on .thumb { transform: translateX(26px); }
  .ck-pin-btn { height: 34px; padding: 0 14px; }
}

/* ─── Notifications bell (dashboard header) ──────────── */
.ck-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ck-bell-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0; margin: 0;
  border: 1px solid var(--ck-line-soft);
  background: #fff; color: var(--ck-navy);
  border-radius: 8px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ck-bell-btn:hover { background: var(--ck-card-hover); border-color: var(--ck-line-2); }
.ck-bell-btn:focus-visible { outline: 2px solid var(--ck-gold); outline-offset: 2px; }
.ck-bell-ico { display: block; }
.ck-bell-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: #c03030; color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ck-bell-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-width: 90vw;
  background: #fff; border: 1px solid var(--ck-line);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(20, 26, 46, .22);
  overflow: hidden;
  z-index: 30;
}
.ck-bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--ck-card-alt);
  border-bottom: 1px solid var(--ck-line-soft);
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 700; color: var(--ck-navy);
}
.ck-bell-clear {
  background: none; border: 0; padding: 2px 4px;
  font: inherit; font-weight: 500; font-size: 11.5px;
  color: var(--ck-muted); cursor: pointer;
  letter-spacing: .02em;
}
.ck-bell-clear:hover { color: var(--ck-gold-deep); }
.ck-bell-list { max-height: 380px; overflow-y: auto; }
.ck-bell-empty {
  padding: 30px 16px; text-align: center;
  color: var(--ck-muted); font-size: 13px;
}
.ck-bell-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--ck-line-soft);
  transition: background .12s;
}
.ck-bell-item:last-child { border-bottom: 0; }
.ck-bell-item:hover { background: var(--ck-card-alt); }
.ck-bell-item.unread { background: rgba(197, 163, 86, .08); }
.ck-bell-item.unread::before {
  content: ""; position: relative; top: 8px;
  width: 7px; height: 7px; flex-shrink: 0;
  background: var(--ck-gold); border-radius: 50%;
  margin-right: -5px;  /* tucks to the left of the icon */
}
.ck-bell-item .ck-bell-ico {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ck-card);
  border: 1px solid var(--ck-line-soft);
  border-radius: 50%;
  color: var(--ck-gold-deep);
  font-size: 13px; font-weight: 700;
  font-family: Georgia, serif;
}
.ck-bell-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ck-bell-title {
  font-size: 13px; font-weight: 600; color: var(--ck-navy);
  line-height: 1.3;
}
.ck-bell-sub {
  font-size: 12px; color: var(--ck-muted); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ck-bell-time {
  font-size: 11px; color: var(--ck-muted); opacity: .75;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.ck-bell-foot {
  display: block;
  padding: 9px 14px;
  text-align: center;
  background: var(--ck-card-alt);
  border-top: 1px solid var(--ck-line-soft);
  color: var(--ck-gold-deep);
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
}
.ck-bell-foot:hover { background: var(--ck-card-hover); }

/* Mobile: pin the bell panel to the viewport so it never slides off
   the right edge. Absolute positioning relative to the bell can push
   the panel beyond the screen if the bell is flush-right, so we break
   out to position:fixed and anchor 8px from the viewport edges.
   The :not([hidden]) guard on the flex declaration is load-bearing —
   the panel uses <div hidden> to stay closed by default, and bare
   `display: flex` would beat the UA `[hidden] { display: none }` rule
   and pop the panel open on page load. */
@media (max-width: 640px) {
  .ck-bell-panel {
    position: fixed;
    top: 62px;                                 /* just below the sticky header */
    right: 8px;
    left: auto;
    width: auto;
    max-width: calc(100vw - 16px);
    min-width: 280px;
    max-height: calc(100vh - 80px);
  }
  .ck-bell-panel:not([hidden]) { display: flex; flex-direction: column; }
  .ck-bell-panel .ck-bell-list {
    max-height: none;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── All tab (combined flat series list) ─────────────── */
.ck-all-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--ck-card);
  border: 1px solid var(--ck-line);
  border-radius: 10px;
}
.ck-all-head .lhs {
  font-size: 13px; color: var(--ck-muted);
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
}
.ck-all-head .lhs b { color: var(--ck-navy); font-weight: 700; }
.ck-all-count {
  display: inline-block; font-family: Georgia, serif;
  font-size: 19px; font-weight: 700;
  color: var(--ck-navy); margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.ck-all-sort { flex-shrink: 0; }
.ck-all-list { display: flex; flex-direction: column; gap: 10px; }

/* Region tag pill (US / WW) on combined series rows */
.ck-region-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 3px 8px;
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  border-radius: 999px; flex-shrink: 0;
  border: 1px solid transparent;
}
.ck-region-tag.us {
  background: #eff2fa; color: #2c3a65; border-color: #d7deec;
}
.ck-region-tag.world {
  background: #eaf5ef; color: #265a44; border-color: #c9e4d5;
}
.ck-series-all > summary.head { gap: 10px; }

@media (max-width: 640px) {
  .ck-all-head { flex-direction: column; align-items: flex-start; }
  .ck-all-head .lhs { order: 2; font-size: 12.5px; }
  .ck-all-sort { order: 1; width: 100%; overflow-x: auto; }
  .ck-region-tag { min-width: 26px; font-size: 9.5px; padding: 2px 6px; }
}

/* ─── Roll Hunting Log page ────────────────────────── */

/* Live-session hero (navy gradient with pulse) */
.ck-live-session {
  background: linear-gradient(135deg, var(--ck-navy), var(--ck-navy-2));
  color: #fff;
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 22px;
  align-items: center;
  box-shadow: var(--ck-shadow-lg);
  position: relative;
  overflow: hidden;
}
.ck-live-session::before {
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 163, 86, .2), transparent 70%);
  pointer-events: none;
}
.ck-live-session .ls-pulse {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: Georgia, serif; font-size: 24px;
  position: relative; flex-shrink: 0;
}
.ck-live-session .ls-pulse::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid var(--ck-gold);
  animation: ck-ls-pulse 2s ease-out infinite; opacity: 0;
}
@keyframes ck-ls-pulse {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}
.ck-live-session .ls-body .lbl {
  font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ck-gold);
  font-weight: 700;
}
.ck-live-session .ls-body h2 {
  font-family: Georgia, serif; font-size: 20px;
  margin: 4px 0 2px; color: #fff;
}
.ck-live-session .ls-body .meta {
  color: #b2b9d0; font-size: 13px;
}
.ck-live-session .ls-body .meta b { color: #fff; }
.ck-live-session .ls-stats {
  display: flex; gap: 22px; flex-wrap: wrap;
}
.ck-live-session .ls-stat { text-align: right; }
.ck-live-session .ls-stat .n {
  font-family: Georgia, serif; font-size: 22px;
  font-weight: 700; color: var(--ck-gold);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.ck-live-session .ls-stat .l {
  font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #b2b9d0;
  margin-top: 3px;
}
.ck-live-session .ls-actions {
  display: flex; flex-direction: column; gap: 8px;
}

/* 6-tile stat strip */
.ck-rh-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px; margin-bottom: 24px;
}
.ck-rh-stats .stat {
  background: var(--ck-card);
  border: 1px solid var(--ck-line-soft);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ck-shadow);
}
.ck-rh-stats .stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--ck-gold); opacity: .6;
}
.ck-rh-stats .stat.hi::before { opacity: 1; width: 4px; }
.ck-rh-stats .stat.silver::before { background: #b7c0c8; opacity: 1; width: 4px; }
.ck-rh-stats .stat.foreign::before { background: #8a6ac4; opacity: 1; width: 4px; }
.ck-rh-stats .stat .l {
  font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ck-muted); font-weight: 700;
}
.ck-rh-stats .stat .n {
  font-family: Georgia, serif; font-size: 28px;
  font-weight: 700; color: var(--ck-navy);
  margin-top: 3px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ck-rh-stats .stat .d {
  font-size: 11.5px; color: var(--ck-muted); margin-top: 3px;
}

/* Layout — main + side */
.ck-rh-layout {
  display: grid; grid-template-columns: 1fr 340px; gap: 20px;
}
.ck-rh-layout .main > .ck-card + .ck-card { margin-top: 18px; }

/* Session history rows */
.ck-rh-sessions { display: flex; flex-direction: column; }
.ck-rh-sessions .session-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 16px; align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--ck-line-soft);
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.ck-rh-sessions .session-row:first-child { border-top: 0; }
.ck-rh-sessions .session-row:hover { background: var(--ck-card-alt); }
.ck-rh-sessions .session-row.active { background: rgba(197, 163, 86, .07); }
.ck-rh-sessions .session-row .date {
  text-align: center; flex-shrink: 0;
  background: var(--ck-card-alt);
  border-radius: 8px; padding: 6px 0;
  border: 1px solid var(--ck-line-soft);
}
.ck-rh-sessions .session-row .date .m {
  font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ck-muted);
  font-weight: 700;
}
.ck-rh-sessions .session-row .date .d {
  font-family: Georgia, serif; font-size: 20px;
  color: var(--ck-navy); font-weight: 700;
  line-height: 1;
}
.ck-rh-sessions .session-row .info { min-width: 0; }
.ck-rh-sessions .session-row .name {
  font-size: 14px; font-weight: 700; color: var(--ck-navy);
  line-height: 1.3;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ck-rh-sessions .session-row .meta {
  font-size: 12px; color: var(--ck-muted); margin-top: 2px;
}
.ck-rh-sessions .session-row .pill {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px;
}
.ck-rh-sessions .session-row .pill.live {
  background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206);
}
.ck-rh-sessions .silver-tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: #e9eef2; color: #3a4a59; font-weight: 600; font-size: 11px;
}
.ck-rh-sessions .session-row .numbers {
  display: flex; gap: 18px;
}
.ck-rh-sessions .session-row .col { text-align: right; }
.ck-rh-sessions .session-row .col b {
  display: block;
  font-family: Georgia, serif; font-size: 18px;
  color: var(--ck-navy);
  font-variant-numeric: tabular-nums;
}
.ck-rh-sessions .session-row .col .l {
  font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ck-muted);
  font-weight: 700; margin-top: 2px;
}
.ck-rh-sessions .session-row .arrow {
  color: var(--ck-muted); font-size: 20px;
  transition: transform .15s, color .15s;
}
.ck-rh-sessions .session-row:hover .arrow {
  color: var(--ck-gold-deep); transform: translateX(3px);
}

/* Bank sidebar list */
.ck-bank-list {
  list-style: none; padding: 0; margin: 0;
}
.ck-bank-list li {
  padding: 12px 18px;
  border-top: 1px solid var(--ck-line-soft);
}
.ck-bank-list li:first-child { border-top: 0; }
.ck-bank-list .bank-name {
  font-weight: 700; color: var(--ck-navy); font-size: 13.5px;
}
.ck-bank-list .bank-sub {
  font-size: 11.5px; color: var(--ck-muted);
  margin-top: 1px;
}
.ck-bank-list .bank-stats {
  display: flex; gap: 10px; margin-top: 6px;
  font-size: 11px; color: var(--ck-muted);
}
.ck-bank-list .bank-stats b {
  color: var(--ck-navy); font-variant-numeric: tabular-nums;
}

.ck-empty-small {
  padding: 16px 18px; text-align: center;
  color: var(--ck-muted); font-size: 13px;
}
.ck-empty-small a {
  display: inline-block; margin-top: 4px;
  color: var(--ck-gold-deep); font-weight: 700;
}

.ck-card-head .meta-link {
  font-size: 11.5px; color: var(--ck-gold-deep);
  font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
}

/* Trophy wall — best finds panel */
.ck-rh-trophy .head {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.ck-rh-trophy .ck-trophy-filter {
  background: var(--ck-card-alt);
  border: 1px solid var(--ck-line-soft);
  border-radius: 8px;
  padding: 3px;
  display: inline-flex;
  flex-wrap: wrap;
}
.ck-rh-trophy .ck-trophy-filter button {
  background: transparent;
  border: 0;
  padding: 5px 11px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  color: var(--ck-muted);
  cursor: pointer;
}
.ck-rh-trophy .ck-trophy-filter button.on {
  background: #fff;
  color: var(--ck-navy);
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
}

.ck-rh-trophy .body { padding: 18px 20px; }
.find-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.find-wall .find {
  background: #fff;
  border: 1px solid var(--ck-line-soft);
  border-radius: 12px;
  padding: 14px 12px;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  display: flex; flex-direction: column;
  gap: 3px;
}
.find-wall .find:hover {
  border-color: var(--ck-gold);
  box-shadow: 0 4px 14px rgba(197, 163, 86, .18);
  transform: translateY(-1px);
}
.find-wall .find.silver { border-color: #c7d2db; background: linear-gradient(180deg, #fff 60%, #eef2f5); }
.find-wall .find.foreign { border-color: #c9b6e6; background: linear-gradient(180deg, #fff 60%, #f1ebfa); }
.find-wall .find.variety { border-color: var(--ck-gold); background: linear-gradient(180deg, #fff 60%, #f8efd7); }

.find-wall .find .find-coin {
  width: 48px; height: 48px;
  background: var(--ck-card-alt);
  border: 2px solid var(--ck-line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif;
  font-size: 12px;
  color: var(--ck-gold-deep);
  font-weight: 700;
  margin-bottom: 6px;
}
.find-wall .find .f-yr {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ck-navy);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.find-wall .find .f-nm {
  font-size: 11.5px;
  color: var(--ck-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.find-wall .find .f-tag {
  display: inline-block;
  margin-top: 6px;
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--ck-card-alt);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ck-gold-deep);
}
.find-wall .find.silver  .f-tag { background: #e7eef2; color: #2f4251; }
.find-wall .find.foreign .f-tag { background: #efe6fa; color: #5a3a8a; }
.find-wall .find.variety .f-tag { background: #f3e4bf; color: #7a5a15; }
.find-wall .find .f-from {
  font-size: 11px;
  color: var(--ck-muted);
  margin-top: 6px;
}
.find-wall .find .f-from b {
  color: var(--ck-navy);
  font-variant-numeric: tabular-nums;
}

/* Monthly bar chart */
.ck-rh-chart .body { padding: 14px 20px 20px; }
.ck-chart-legend {
  display: flex; gap: 16px;
  font-size: 11.5px; color: var(--ck-muted);
  margin-bottom: 12px;
}
.ck-chart-legend .sw {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -1px;
}
.ck-chart-legend .sw.finds    { background: var(--ck-gold); }
.ck-chart-legend .sw.sessions { background: var(--ck-navy); opacity: .5; }

.ck-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 10px;
  height: 140px;
  align-items: flex-end;
}
.ck-chart .chart-col {
  display: flex; flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
}
.ck-chart .chart-col .chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
  width: 100%;
  justify-content: center;
}
.ck-chart .chart-col .cb {
  width: 50%;
  min-width: 12px;
  max-width: 22px;
  border-radius: 3px 3px 0 0;
  transition: height .25s ease;
}
.ck-chart .chart-col .cb.finds    { background: linear-gradient(180deg, var(--ck-gold) 0%, var(--ck-gold-deep) 100%); }
.ck-chart .chart-col .cb.sessions { background: var(--ck-navy); opacity: .5; }
.ck-chart .chart-col .ml {
  font-size: 10.5px;
  color: var(--ck-muted);
  font-weight: 600;
  letter-spacing: .04em;
}

/* ─── Roll-hunting modals (new session + add roll + etc) ─────
   Bigger, more breathing room than the generic .ck-modal — these
   forms are the primary data-entry surface for the feature, so
   they get dedicated typography + spacing. */
.ck-rh-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.98);
  width: 520px; max-width: 94vw;
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 24px 70px rgba(20, 26, 46, .35),
    0 4px 14px rgba(20, 26, 46, .08);
  z-index: 50;
  display: flex; flex-direction: column;
  max-height: 92vh;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1);
  overflow: hidden;
}
.ck-rh-modal.on {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.ck-rh-modal[hidden] { display: none; }

.ck-rh-modal header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--ck-line-soft);
  background: linear-gradient(180deg, #faf8f1, #fff);
}
.ck-rh-modal header h3 {
  font-family: Georgia, serif; font-size: 20px; margin: 0;
  color: var(--ck-navy); font-weight: 700;
  letter-spacing: .01em;
}
.ck-rh-modal header .close {
  background: rgba(20, 26, 46, .06); border: 0;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--ck-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.ck-rh-modal header .close:hover { background: var(--ck-line-soft); color: var(--ck-ink); }

.ck-rh-modal .body {
  padding: 20px 24px 8px;
  overflow-y: auto;
}
.ck-rh-modal .ck-drawer-field { margin-bottom: 18px; }
.ck-rh-modal .ck-drawer-field label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  color: var(--ck-muted);
}
.ck-rh-modal .ck-drawer-field input[type="text"],
.ck-rh-modal .ck-drawer-field input[type="number"],
.ck-rh-modal .ck-drawer-field select,
.ck-rh-modal .ck-drawer-field textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  font-size: 14px; font-family: inherit;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.ck-rh-modal .ck-drawer-field input:focus,
.ck-rh-modal .ck-drawer-field select:focus,
.ck-rh-modal .ck-drawer-field textarea:focus {
  outline: none;
  border-color: var(--ck-gold);
  box-shadow: 0 0 0 3px rgba(197, 163, 86, .18);
}
.ck-rh-modal .ck-drawer-field textarea { resize: vertical; min-height: 70px; }
.ck-rh-modal .ck-drawer-field .hint {
  font-size: 12px; color: var(--ck-muted); margin-top: 6px;
  font-style: italic;
}

/* Segmented control inside modal — nicer than the global default */
.ck-rh-modal .ck-seg {
  display: inline-flex; background: var(--ck-card-alt);
  border: 1px solid var(--ck-line-soft); border-radius: 10px;
  padding: 4px; gap: 2px; flex-wrap: wrap;
}
.ck-rh-modal .ck-seg button {
  background: transparent; border: 0;
  padding: 8px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--ck-muted); cursor: pointer;
  transition: all .12s;
}
.ck-rh-modal .ck-seg button:hover { color: var(--ck-ink); }
.ck-rh-modal .ck-seg button.on {
  background: #fff; color: var(--ck-navy);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.ck-rh-modal footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--ck-line-soft);
  background: var(--ck-card-alt);
}
.ck-rh-modal footer .ck-btn {
  min-height: 38px; padding: 10px 18px;
  font-weight: 700;
}
.ck-rh-modal footer .ck-btn.primary {
  box-shadow: 0 2px 6px rgba(20, 26, 46, .18);
}

.ck-modal-bd {
  position: fixed; inset: 0;
  background: rgba(20, 26, 46, .48);
  z-index: 45;
  opacity: 0; transition: opacity .22s ease;
}
.ck-modal-bd.on { opacity: 1; }
.ck-modal-bd[hidden] { display: none; }

/* Responsive */
@media (max-width: 1100px) {
  .ck-rh-stats { grid-template-columns: repeat(3, 1fr); }
  .ck-rh-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ck-rh-stats { grid-template-columns: repeat(2, 1fr); }
  .ck-live-session {
    grid-template-columns: auto 1fr;
    grid-template-areas: "pulse body" "stats stats" "actions actions";
  }
  .ck-live-session .ls-pulse { grid-area: pulse; }
  .ck-live-session .ls-body { grid-area: body; }
  .ck-live-session .ls-stats { grid-area: stats; }
  .ck-live-session .ls-actions { grid-area: actions; flex-direction: row; }
  .ck-rh-sessions .session-row {
    grid-template-columns: 48px 1fr auto;
    grid-template-areas: "date info arrow" "date numbers arrow";
  }
  .ck-rh-sessions .session-row .date { grid-area: date; }
  .ck-rh-sessions .session-row .info { grid-area: info; }
  .ck-rh-sessions .session-row .numbers { grid-area: numbers; justify-self: end; gap: 12px; margin-top: 4px; }
  .ck-rh-sessions .session-row .arrow { grid-area: arrow; }
}

/* ─── Reduce motion honoring the profile preference ─── */
/* Set via JS adding `ck-reduce-motion` on <body> when profile.reduce_motion = 1 */
body.ck-reduce-motion *,
body.ck-reduce-motion *::before,
body.ck-reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

/* ─── Tracker "All Sets" staging grid ─────────────────────────── */
.ck-tracker-series-list { display: flex; flex-direction: column; gap: 8px; }
.ck-trk-series {
  background: #fff; border: 1px solid var(--ck-line);
  border-radius: 10px; overflow: hidden;
  transition: box-shadow .12s, border-color .12s;
}
.ck-trk-series:hover { border-color: var(--ck-line-2); }
.ck-trk-series[open] { border-color: var(--ck-gold-soft); }
.ck-trk-series > summary.head {
  display: grid;
  grid-template-columns: 16px 1fr 220px 90px 56px;
  align-items: center; gap: 14px;
  padding: 12px 16px; cursor: pointer;
  list-style: none;
}
.ck-trk-series > summary.head::-webkit-details-marker { display: none; }
.ck-trk-series > summary.head .caret {
  width: 16px; transition: transform .15s;
  color: var(--ck-muted); font-size: 10px;
}
.ck-trk-series[open] > summary.head .caret {
  transform: rotate(90deg); color: var(--ck-gold-deep);
}
.ck-trk-series .title .n { font-family: Georgia, serif; font-weight: 700; font-size: 14.5px; color: var(--ck-navy); }
.ck-trk-series .title .y { font-size: 12px; color: var(--ck-muted); margin-top: 1px; }
.ck-trk-series .prog .bar { height: 6px; background: #f1e7d0; border-radius: 3px; overflow: hidden; }
.ck-trk-series .prog .bar span { display: block; height: 100%; background: var(--ck-gold); border-radius: 3px; }
.ck-trk-series .nums { font-size: 12.5px; font-weight: 600; color: var(--ck-ink); text-align: right; font-variant-numeric: tabular-nums; }
.ck-trk-series .pct-cell { font-size: 12.5px; color: var(--ck-gold-deep); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.ck-trk-coins {
  background: var(--ck-card-alt);
  border-top: 1px solid var(--ck-line-soft);
  padding: 8px 4px;
}
.ck-trk-coins .loading { padding: 14px; text-align: center; color: var(--ck-muted); font-size: 13px; }
.ck-trk-empty { padding: 18px; text-align: center; color: var(--ck-muted); font-size: 13px; }
.ck-trk-empty.err { color: var(--ck-err); }
.ck-trk-empty a[data-retry] { color: var(--ck-gold-deep); font-weight: 600; }

/* ─── Strike-type sub-dropdowns (Circulation / Proofs split) ────
   When a series has both circulation strikes and proofs, the coin
   list is partitioned into two collapsible sub-sections so users
   can focus on one strike type at a time. Series with no proofs
   render flat — no sub-headers — so the simple case is unchanged. */
.ck-trk-substrike {
  margin: 4px 0;
  border-radius: 6px;
  overflow: hidden;
}
.ck-trk-substrike + .ck-trk-substrike { margin-top: 6px; }
.ck-trk-substrike > summary.ck-trk-substrike-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  cursor: pointer; list-style: none;
  background: rgba(197,163,86,.08);
  border: 1px solid var(--ck-gold-soft);
  border-radius: 6px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ck-gold-deep);
  transition: background .12s, border-color .12s;
}
.ck-trk-substrike > summary.ck-trk-substrike-head:hover {
  background: rgba(197,163,86,.15);
}
.ck-trk-substrike > summary.ck-trk-substrike-head::-webkit-details-marker { display: none; }
.ck-trk-substrike > summary.ck-trk-substrike-head .caret {
  width: 12px; font-size: 9px;
  color: var(--ck-gold-deep);
  transition: transform .15s;
}
.ck-trk-substrike[open] > summary.ck-trk-substrike-head .caret {
  transform: rotate(90deg);
}
.ck-trk-substrike > summary.ck-trk-substrike-head .lbl { flex: 1; }
.ck-trk-substrike > summary.ck-trk-substrike-head .cnt {
  font-size: 10.5px; font-weight: 700;
  color: var(--ck-muted); letter-spacing: .04em; text-transform: none;
}
.ck-trk-substrike[open] > summary.ck-trk-substrike-head {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.ck-trk-substrike-body {
  padding: 4px 0 6px;
  border: 1px solid var(--ck-gold-soft);
  border-top: none;
  border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
  background: rgba(255,255,255,.4);
}

/* Per-coin row */
.ck-trk-coin {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background .12s;
}
.ck-trk-coin:hover { background: rgba(255,255,255,.5); }
.ck-trk-coin.ck-trk-saving { opacity: .6; pointer-events: none; }

.ck-trk-coin .info b { font-family: Georgia, serif; font-weight: 700; color: var(--ck-navy); font-size: 13.5px; }
.ck-trk-coin .info .v { color: var(--ck-muted); font-size: 12.5px; margin-left: 6px; }
.ck-trk-coin .info .gr {
  display: inline-block; margin-left: 8px;
  padding: 1px 7px; border-radius: 10px;
  background: var(--ck-gold-soft); color: #5d4206;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.ck-trk-tag {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 3px;
  font-size: 9.5px; letter-spacing: .06em; font-weight: 700;
}
.ck-trk-tag.tag-key { background: #c96b3c; color: #fff; }
.ck-trk-tag.tag-semi { background: #8a6b20; color: #fff; }
.ck-trk-tag.tag-var { background: #5d3a90; color: #fff; }

/* Status chip */
.ck-trk-coin .status-chip .lbl {
  display: inline-block;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.lbl-own  { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); }
.lbl-want { background: rgba(197,163,86,.15); color: var(--ck-gold-deep); border: 1px dashed var(--ck-gold-deep); }
.lbl-excl { background: #eee4cd; color: #8c7a4a; }
.lbl-none { background: transparent; color: var(--ck-line-2); }

/* Excluded state — ghost the row */
.ck-trk-coin.ck-trk-s-excluded { opacity: .5; }
.ck-trk-coin.ck-trk-s-excluded .info b { text-decoration: line-through; }

/* Per-coin action buttons */
.ck-trk-coin .actions { display: flex; gap: 4px; flex-shrink: 0; }
.tbtn {
  padding: 5px 10px; border-radius: 6px;
  background: #fff; border: 1px solid var(--ck-line);
  color: var(--ck-ink); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .12s;
  font-family: inherit;
}
.tbtn:hover { border-color: var(--ck-gold); }
.tbtn.on {
  background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206);
  border-color: var(--ck-gold);
}
.tbtn-exclude:hover { background: #eee4cd; border-color: #b9a680; color: #5d4206; }
.tbtn-include { background: var(--ck-gold-soft); color: #5d4206; border-color: var(--ck-gold-deep); }
.tbtn-include:hover { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); }
.tbtn-remove {
  width: 28px; padding: 5px 0; text-align: center;
  background: #fdf0f0; color: var(--ck-err); border-color: #efc5c5;
  font-size: 16px; line-height: 1;
}
.tbtn-remove:hover { background: var(--ck-err); color: #fff; border-color: var(--ck-err); }

/* Mobile — stack row */
@media (max-width: 640px) {
  .ck-trk-series > summary.head { grid-template-columns: 16px 1fr 80px; }
  .ck-trk-series > summary.head .prog,
  .ck-trk-series > summary.head .pct-cell { display: none; }
  .ck-trk-coin { grid-template-columns: 1fr auto; gap: 8px; }
  .ck-trk-coin .actions { grid-column: 1/-1; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
  .ck-trk-coin .status-chip { font-size: 10px; }
}

/* System-level reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Collection filters: hidden series states ───────────────── */
.ck-hidden-denom,
.ck-hidden-filter { display: none !important; }

/* ─── Homepage: hide "Recently Added" on mobile ───────────────
   The homepage article includes a Recently Added coin strip that
   eats a lot of vertical space on phones without adding much value
   — the user already scrolled past the hero, features, and popular
   coins. Hide the whole section (cards + its wrapper/heading) on
   narrow viewports.
   Uses :has() to target whatever container wraps the cards, so the
   section heading disappears too — supported in all modern browsers
   since 2023. The bare .ck-recent-card { display:none } on the same
   media query is a safety net for the older-browser long tail: they
   won't hide the heading, but at least the card grid goes away. */
@media (max-width: 760px) {
  .ck-recent-card { display: none !important; }
  section:has(> .ck-recent-card),
  section:has(> * > .ck-recent-card),
  div:has(> .ck-recent-card),
  div:has(> * > .ck-recent-card) { display: none !important; }
}

/* ─── Coin detail: "About this coin" narrative block ──────────
   Scoped wrapper for the 300+ word editorial section rendered on
   individual coin pages (see coin-page-narrative-prompt.md). Uses
   theme CSS vars so Paper/Sage auto-tint via the theme files; the
   Dark overrides live in dark.css where they can use !important
   to defeat the broad .ck-main h2/p/a rules already there. */
.ck-coin-narrative {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text, #1a1a2e);
  /* No max-width — block fills the parent (coin detail column, article
     body, wherever it lands). The old 780px + margin:auto made sense
     when the narrative was expected to live in a narrow reader column,
     but on the coin detail page the container is already a wide two-col
     layout and the constrained box looked orphaned inside it. */
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--surface, #f5f3ee);
  border-left: 3px solid var(--brand2, #c5a356);
  border-radius: 6px;
}
.ck-coin-narrative h2 {
  font-family: var(--font-sans, ui-sans-serif, system-ui, Arial, sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand2, #c5a356);
  margin: 0 0 1.1rem;
  border-bottom: none;
  padding-bottom: 0;
}
.ck-coin-narrative p {
  margin: 0 0 1.1rem;
  color: var(--text, #1a1a2e);
}
.ck-coin-narrative p:last-child { margin-bottom: 0; }
.ck-coin-narrative a {
  color: var(--brand2, #c5a356);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted var(--brand2, #c5a356);
}
.ck-coin-narrative a:hover { border-bottom-style: solid; }
.ck-narrative-updated {
  font-family: var(--font-sans, ui-sans-serif, system-ui, Arial, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #8a857a);
  text-align: right;
  margin: 0;
}
.ck-narrative-updated time { color: inherit; }
@media (max-width: 600px) {
  .ck-coin-narrative {
    font-size: 16px;
    padding: 1.25rem 1.3rem;
    margin: 2rem auto;
  }
  .ck-narrative-updated { font-size: 10.5px; }
}



/* ─── Dark mode (v2) — activated by <html data-theme="dark"> ─ */
html[data-theme="dark"] {
  --ck-paper:       #0d0d1a;
  --ck-card:        #1a1d2e;
  --ck-card-alt:    #1f2236;
  --ck-card-hover:  #262a40;
  --ck-line:        #2a2d44;
  --ck-line-2:      #383c58;
  --ck-line-soft:   #22253a;
  --ck-ink:         #e9eef9;
  --ck-muted:       #a0a0b8;
  --ck-shadow:      0 1px 2px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35);
  --ck-shadow-lg:   0 10px 28px rgba(0,0,0,.55);
}
html[data-theme="dark"] body { background: #0b0d1a; color: var(--ck-ink); }
html[data-theme="dark"] .ck-page { color: var(--ck-ink); }
html[data-theme="dark"] .ck-card,
html[data-theme="dark"] .ck-sidenav,
html[data-theme="dark"] .ck-toolbar,
html[data-theme="dark"] .ck-chips .ck-chip,
html[data-theme="dark"] .ck-seg,
html[data-theme="dark"] .ck-series,
html[data-theme="dark"] .ck-country,
html[data-theme="dark"] .ck-coin-row,
html[data-theme="dark"] .ck-bell-panel,
html[data-theme="dark"] .ck-splitbtn .addmenu,
html[data-theme="dark"] .ck-modal,
html[data-theme="dark"] .ck-drawer,
html[data-theme="dark"] .preview-box,
html[data-theme="dark"] .pro-tip,
html[data-theme="dark"] .ck-privacy-hero,
html[data-theme="dark"] .alb-row,
html[data-theme="dark"] .togrow,
html[data-theme="dark"] .ck-field input,
html[data-theme="dark"] .ck-field textarea,
html[data-theme="dark"] .ck-field select {
  background: var(--ck-card);
  color: var(--ck-ink);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-field input,
html[data-theme="dark"] .ck-field textarea,
html[data-theme="dark"] .ck-field select { background: var(--ck-card-alt); }
html[data-theme="dark"] .ck-crumbs,
html[data-theme="dark"] .ck-crumbs a,
html[data-theme="dark"] .ck-muted { color: var(--ck-muted); }
html[data-theme="dark"] .ck-seg button { color: var(--ck-muted); background: transparent; }
html[data-theme="dark"] .ck-seg button.on { background: var(--ck-card-hover); color: var(--ck-ink); }
html[data-theme="dark"] .ck-btn.ghost { background: var(--ck-card-alt); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-theme="dark"] .ck-btn.ghost:hover { background: var(--ck-card-hover); }
html[data-theme="dark"] .ck-chip { background: var(--ck-card-alt); color: var(--ck-muted); border-color: var(--ck-line); }
html[data-theme="dark"] .ck-chip.on { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); border-color: var(--ck-gold); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--ck-ink); }
html[data-theme="dark"] h1 em { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] h2 em { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-ach-category .cat-head .count { background: var(--ck-card-alt); color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-sidenav a .ic { background: var(--ck-card-alt); color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ach.earned { background: linear-gradient(180deg, rgba(197,163,86,.12), var(--ck-card)); }
html[data-theme="dark"] .ach.locked .badge { background: var(--ck-card-alt); color: var(--ck-muted); }

/* Dark mode — achievement flip cards in the profile badge strip.
   The cream/white front face has to adopt a dark card palette; the
   navy back face already looks right but its border gets a small
   bump so it reads as lifted. */
html[data-theme="dark"] .badge-strip .ach-face {
  background: var(--ck-card); border-color: var(--ck-line); color: var(--ck-ink);
}
html[data-theme="dark"] .badge-strip .ach.earned .ach-front {
  background: linear-gradient(180deg, rgba(197,163,86,.12), var(--ck-card));
  border-color: var(--ck-gold);
}
html[data-theme="dark"] .badge-strip .ach .when { color: var(--ck-muted); }
html[data-theme="dark"] .badge-strip .ach-back {
  background: linear-gradient(180deg, #16213d, #0a1226);
  border-color: rgba(197,163,86,.5);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
html[data-theme="dark"] .ck-profile-hero .pill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color: var(--ck-ink); }
html[data-theme="dark"] .ck-profile-hero .pill.featured { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-profile-card { background: var(--ck-card); border-color: var(--ck-line); color: var(--ck-ink); }
html[data-theme="dark"] .ck-profile-card .info h2 { color: var(--ck-ink); }
html[data-theme="dark"] .ck-profile-card .info .bio { color: var(--ck-muted); }
html[data-theme="dark"] .ck-profile-card .meta-row span { color: var(--ck-muted); }
html[data-theme="dark"] .ck-profile-card .meta-row b { color: var(--ck-ink); }
html[data-theme="dark"] .ck-profile-stats .s,
html[data-theme="dark"] .ck-profile-section { background: var(--ck-card); border-color: var(--ck-line); color: var(--ck-ink); }
html[data-theme="dark"] .ck-profile-stats .s .l { color: var(--ck-muted); }
html[data-theme="dark"] .ck-profile-footer {
  /* Dark mode — navy is already dark-theme-appropriate; tighten the
     border + shadow so it reads as a lifted card rather than blending. */
  border-color: rgba(197,163,86,.5);
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
  color: #e7e9f0;
}
html[data-theme="dark"] .album-tabs .tab { color: var(--ck-muted); border-color: var(--ck-line); background: var(--ck-card); }
html[data-theme="dark"] .album-tabs .tab.on { color: var(--ck-ink); background: var(--ck-card-hover); border-color: var(--ck-gold); }
html[data-theme="dark"] .album-page { background: var(--ck-card); color: var(--ck-ink); }
html[data-theme="dark"] .album-page .slot { background: var(--ck-card-alt); border-color: var(--ck-line); color: var(--ck-muted); }
html[data-theme="dark"] .album-page .slot.own { background: linear-gradient(135deg, rgba(197,163,86,.22), var(--ck-card)); color: var(--ck-ink); border-color: var(--ck-gold); }
html[data-theme="dark"] .album-page .slot-label { color: var(--ck-muted); }
html[data-theme="dark"] .album-page .album-legend { color: var(--ck-muted); }
html[data-theme="dark"] .ck-coin-row { background: var(--ck-card); border-color: var(--ck-line); color: var(--ck-ink); }
html[data-theme="dark"] .ck-coin-row:hover { background: var(--ck-card-hover); }
html[data-theme="dark"] .ck-coin-row .yr { color: var(--ck-ink); }
html[data-theme="dark"] .ck-coin-row .vtag { color: var(--ck-muted); }
html[data-theme="dark"] .ck-series .head,
html[data-theme="dark"] .ck-country .head { color: var(--ck-ink); }
html[data-theme="dark"] .ck-series .years,
html[data-theme="dark"] .ck-country .meta { color: var(--ck-muted); }
html[data-theme="dark"] .ck-series .prog .pct,
html[data-theme="dark"] .ck-series .prog .bar { color: var(--ck-ink); }
html[data-theme="dark"] .ck-series .prog .bar { background: var(--ck-card-alt); }
html[data-theme="dark"] .ck-stats .sc { background: var(--ck-card); border-color: var(--ck-line); }
html[data-theme="dark"] .ck-stats .sc .l { color: var(--ck-muted); }
html[data-theme="dark"] .ck-stats .sc .n { color: var(--ck-ink); }
html[data-theme="dark"] .ck-stats .sc .d { color: var(--ck-muted); }
html[data-theme="dark"] .ck-stats .sc .d b { color: var(--ck-ink); }
html[data-theme="dark"] .ck-all-head { color: var(--ck-muted); }
html[data-theme="dark"] .ck-all-head b { color: var(--ck-ink); }
html[data-theme="dark"] .ck-region-tag { background: var(--ck-card-alt); color: var(--ck-muted); border-color: var(--ck-line); }
html[data-theme="dark"] .tag-nearly,
html[data-theme="dark"] .slot-tag { background: rgba(197,163,86,.2); color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-crumbs a:hover { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-profile-owner-banner { background: var(--ck-card); border-color: var(--ck-line); color: var(--ck-ink); }
html[data-theme="dark"] .ck-profile-owner-banner.private { background: #2a1414; border-color: #512020; color: #ffd7d7; }
html[data-theme="dark"] .addmenu .mi { background: var(--ck-card-alt); color: var(--ck-ink); }
html[data-theme="dark"] .addmenu .mi .t { color: var(--ck-muted); }
html[data-theme="dark"] .ck-region,
html[data-theme="dark"] .ck-region-btn { background: var(--ck-card); color: var(--ck-muted); border-color: var(--ck-line); }
html[data-theme="dark"] .ck-region.on { background: var(--ck-gold); color: var(--ck-gold-ink, #2a2206); border-color: var(--ck-gold); }
html[data-theme="dark"] .ck-sidenav a { color: var(--ck-muted); }
html[data-theme="dark"] .ck-sidenav a.on { background: var(--ck-card-hover); color: var(--ck-ink); }
html[data-theme="dark"] .ck-all-head,
html[data-theme="dark"] .ck-dash-head,
html[data-theme="dark"] .ck-showcase-head { color: var(--ck-ink); }
html[data-theme="dark"] .sub,
html[data-theme="dark"] .cs,
html[data-theme="dark"] .d,
html[data-theme="dark"] .years,
html[data-theme="dark"] .meta { color: var(--ck-muted); }
html[data-theme="dark"] .ck-toast { background: var(--ck-card-alt); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-theme="dark"] .ck-bell-item { color: var(--ck-ink); border-color: var(--ck-line); }
html[data-theme="dark"] .ck-bell-item:hover { background: var(--ck-card-hover); }
html[data-theme="dark"] .preview-box { background: var(--ck-card-alt); }
html[data-theme="dark"] .danger-zone { background: #2a1414; border-color: #512020; }

html[data-theme="dark"] .ck-btn.primary,
html[data-theme="dark"] .ck-btn.gold { color: var(--ck-gold-ink, #2a2206); }

html[data-theme="dark"] .ck-card .head {
  background: linear-gradient(180deg, var(--ck-card-alt), var(--ck-card));
  border-bottom-color: var(--ck-line);
}
html[data-theme="dark"] .ck-card .head h3 { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-card .head .cs { color: var(--ck-muted); }

html[data-theme="dark"] .ck-series {
  background: var(--ck-card);
  border-color: var(--ck-line);
  color: var(--ck-ink);
}
html[data-theme="dark"] .ck-series > summary.head {
  background: linear-gradient(180deg, var(--ck-card-alt), var(--ck-card));
}
html[data-theme="dark"] .ck-series .coinrows { background: var(--ck-card); color: var(--ck-ink); }
html[data-theme="dark"] .ck-series .ck-substrike {
  background: var(--ck-card-alt); border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-series .ck-substrike > summary.ck-substrike-head {
  color: var(--ck-gold-hi, var(--ck-gold));
}
html[data-theme="dark"] .ck-series .ck-substrike-body { background: var(--ck-card); border-top-color: var(--ck-line); }
html[data-theme="dark"] .ck-trk-substrike > summary.ck-trk-substrike-head {
  background: rgba(197,163,86,.12); border-color: var(--ck-line);
  color: var(--ck-gold-hi, var(--ck-gold));
}
html[data-theme="dark"] .ck-trk-substrike-body {
  background: var(--ck-card); border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-series .title h3 { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-series .title .years { color: var(--ck-muted); }
html[data-theme="dark"] .ck-series .prog .pct { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-series .prog .bar { background: var(--ck-card-alt); }

html[data-theme="dark"] .ck-trk-series {
  background: var(--ck-card);
  border-color: var(--ck-line);
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow);
}
html[data-theme="dark"] .ck-trk-series:hover { border-color: var(--ck-line-2); }
html[data-theme="dark"] .ck-trk-series[open] { border-color: var(--ck-gold-soft, rgba(197,163,86,.5)); }
html[data-theme="dark"] .ck-trk-series > summary.head {
  background: linear-gradient(180deg, var(--ck-card-alt), var(--ck-card));
}
html[data-theme="dark"] .ck-trk-series .title .n { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-trk-series .title .y { color: var(--ck-muted); }
html[data-theme="dark"] .ck-trk-series .prog .bar { background: var(--ck-card-alt); }
html[data-theme="dark"] .ck-trk-series .nums { color: var(--ck-ink); }
html[data-theme="dark"] .ck-trk-series .pct-cell { color: var(--ck-gold-hi, var(--ck-gold)); }

html[data-theme="dark"] .design {
  background: var(--ck-card);
  border-color: var(--ck-line);
  color: var(--ck-ink);
}
html[data-theme="dark"] .design:hover { border-color: var(--ck-gold); }
html[data-theme="dark"] .design.complete {
  background: linear-gradient(180deg, rgba(197,163,86,.18), var(--ck-card));
  border-color: var(--ck-gold);
}
html[data-theme="dark"] .design.empty .coin-chip {
  background: repeating-linear-gradient(45deg, var(--ck-card-alt) 0 4px, var(--ck-card) 4px 8px);
  border-color: var(--ck-line-2);
  color: var(--ck-muted);
}
html[data-theme="dark"] .design .nm { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .design .yrs { color: var(--ck-muted); }
html[data-theme="dark"] .design .pick {
  background: var(--ck-card-alt);
  border-color: var(--ck-line);
  color: var(--ck-ink);
}
html[data-theme="dark"] .design .check { box-shadow: 0 1px 2px rgba(0,0,0,.5); }

html[data-theme="dark"] .ck-typeset-hero,
html[data-theme="dark"] .ck-tracker-hero {
  background: var(--ck-card);
  border: 1px solid var(--ck-line);
  border-radius: 14px;
  color: var(--ck-ink);
}
html[data-theme="dark"] .ck-typeset-hero .ring .bg,
html[data-theme="dark"] .ck-tracker-hero .ring .bg { stroke: var(--ck-line); }
html[data-theme="dark"] .ck-typeset-hero .ring .pct .n,
html[data-theme="dark"] .ck-tracker-hero .ring .pct .n { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-typeset-hero .ring .pct .l,
html[data-theme="dark"] .ck-tracker-hero .ring .pct .l { color: var(--ck-muted); }
html[data-theme="dark"] .ck-typeset-hero .body .lbl { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-typeset-hero .body h1,
html[data-theme="dark"] .ck-tracker-hero .body h1 { color: var(--ck-ink); }
html[data-theme="dark"] .ck-typeset-hero .body h1 b { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-typeset-hero .body p,
html[data-theme="dark"] .ck-tracker-hero .body p { color: var(--ck-muted); }
html[data-theme="dark"] .ck-typeset-hero .body .stats b,
html[data-theme="dark"] .ck-tracker-hero .body .stats b { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-typeset-hero .body .stats span,
html[data-theme="dark"] .ck-tracker-hero .body .stats span { color: var(--ck-muted); }

html[data-theme="dark"] .ck-typeset-section .cat-head h2 { color: var(--ck-ink); }
html[data-theme="dark"] .ck-typeset-section .cat-head .count {
  background: var(--ck-card-alt);
  color: var(--ck-muted);
  border: 1px solid var(--ck-line);
}
html[data-theme="dark"] .ck-typeset-section .cat-head .count b { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-typeset-section .cat-head .bar-wrap { background: var(--ck-card-alt); }
html[data-theme="dark"] .ck-typeset-section .cat-head .pct { color: var(--ck-gold-hi, var(--ck-gold)); }

html[data-theme="dark"] .ck-rh-stats .stat {
  background: var(--ck-card);
  border-color: var(--ck-line);
  color: var(--ck-ink);
}
html[data-theme="dark"] .ck-rh-stats .stat .l { color: var(--ck-muted); }
html[data-theme="dark"] .ck-rh-stats .stat .n { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-rh-stats .stat.silver .n { color: #d0d8e0; }
html[data-theme="dark"] .ck-rh-stats .stat.foreign .n { color: #b39be0; }
html[data-theme="dark"] .ck-rh-stats .stat.ok .n { color: #8ec39f; }
html[data-theme="dark"] .ck-rh-stats .stat .d { color: var(--ck-muted); }

html[data-theme="dark"] .ck-rh-sessions .session-row { border-color: var(--ck-line); color: var(--ck-ink); }
html[data-theme="dark"] .ck-rh-sessions .session-row:hover { background: var(--ck-card-hover); }

html[data-theme="dark"] .find-wall .find {
  background: var(--ck-card);
  border-color: var(--ck-line);
  color: var(--ck-ink);
}
html[data-theme="dark"] .find-wall .find:hover { border-color: var(--ck-gold); }
html[data-theme="dark"] .find-wall .find .coin { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .find-wall .find .meta { color: var(--ck-muted); }

html[data-theme="dark"] .ck-rh-trophy .ck-trophy-filter {
  background: var(--ck-card-alt);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-rh-trophy .ck-trophy-filter button { color: var(--ck-muted); }
html[data-theme="dark"] .ck-rh-trophy .ck-trophy-filter button.on {
  background: var(--ck-card-hover);
  color: var(--ck-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--ck-gold);
}

html[data-theme="dark"] .alb-row { background: var(--ck-card); border-color: var(--ck-line); color: var(--ck-ink); }
html[data-theme="dark"] .alb-row.shared {
  background: linear-gradient(180deg, rgba(197,163,86,.18), var(--ck-card));
  border-color: var(--ck-gold);
  box-shadow: 0 0 0 1px rgba(197,163,86,.28);
}
html[data-theme="dark"] .alb-row .info .n { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .alb-row .info .m { color: var(--ck-muted); }
html[data-theme="dark"] .alb-row .prog .bar { background: var(--ck-card-alt); }
html[data-theme="dark"] .alb-row .prog .pct { color: var(--ck-gold-hi, var(--ck-gold)); }

html[data-theme="dark"] .alb-seg { background: var(--ck-card-alt); border-color: var(--ck-line); }
html[data-theme="dark"] .alb-seg-btn { color: var(--ck-muted); }
html[data-theme="dark"] .alb-seg-btn .ct { background: rgba(255,255,255,.08); color: var(--ck-muted); }
html[data-theme="dark"] .alb-seg-btn.on {
  background: var(--ck-card);
  color: var(--ck-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--ck-gold);
}
html[data-theme="dark"] .alb-seg-btn.on .ct { background: rgba(197,163,86,.22); color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .alb-empty { color: var(--ck-muted); border-color: var(--ck-line); }

html[data-theme="dark"] .alb-pager { color: var(--ck-muted); border-top-color: var(--ck-line); }
html[data-theme="dark"] .alb-pager .pg {
  background: var(--ck-card-alt);
  border-color: var(--ck-line);
  color: var(--ck-ink);
}
html[data-theme="dark"] .alb-pager .pg:hover:not(:disabled) { background: var(--ck-card-hover); border-color: var(--ck-gold); }
html[data-theme="dark"] .alb-pager .pdot { background: var(--ck-line-2); }
html[data-theme="dark"] .alb-pager .pdot.on { background: var(--ck-gold); }

html[data-theme="dark"] .ck-storage-used b { color: var(--ck-ink); }
html[data-theme="dark"] .ck-storage-used span { color: var(--ck-muted); }
html[data-theme="dark"] .ck-storage-pct { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-storage-sub { color: var(--ck-muted); }
html[data-theme="dark"] .ck-storage-actions { border-top-color: var(--ck-line); }
html[data-theme="dark"] .storage-bar { background: var(--ck-card-alt); }

html[data-theme="dark"] .accent-preview {
  background: var(--ck-card-alt);
  border-color: var(--ck-line);
  color: var(--ck-ink);
}
html[data-theme="dark"] .accent-preview .pl { color: var(--ck-muted); }
html[data-theme="dark"] .ck-lock-pill {
  background: rgba(197,163,86,.18);
  color: var(--ck-gold-hi, var(--ck-gold));
  border-color: rgba(197,163,86,.35);
}

html[data-theme="dark"] .theme-opt {
  background: var(--ck-card);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .theme-opt.on { border-color: var(--ck-gold); }
html[data-theme="dark"] .theme-name { color: var(--ck-ink); }
html[data-theme="dark"] .theme-desc { color: var(--ck-muted); }

html[data-theme="dark"] .togrow .tic { background: var(--ck-card-alt); color: var(--ck-gold-hi, var(--ck-gold)); border-color: var(--ck-line); }
html[data-theme="dark"] .togrow .m .t { color: var(--ck-ink); }
html[data-theme="dark"] .togrow .m .d { color: var(--ck-muted); }

html[data-theme="dark"] .ck-row { border-color: var(--ck-line); }
html[data-theme="dark"] .ck-row .t { color: var(--ck-ink); }
html[data-theme="dark"] .ck-row .d { color: var(--ck-muted); }

html[data-theme="dark"] .prev-alb-tabs .prev-alb-tab {
  background: rgba(255,255,255,.08);
  color: var(--ck-ink);
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .prev-alb-tabs .prev-alb-tab.on {
  background: var(--ck-gold);
  color: var(--ck-gold-ink, #2a2206);
  border-color: var(--ck-gold);
}

html[data-theme="dark"] .ck-series .title h3,
html[data-theme="dark"] .ck-series .prog .pct,
html[data-theme="dark"] .ck-trk-series .title .n,
html[data-theme="dark"] .ck-page h1,
html[data-theme="dark"] .ck-page h2,
html[data-theme="dark"] .ck-page h3,
html[data-theme="dark"] .ck-page h4 { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-page h1 em,
html[data-theme="dark"] .ck-page h2 em { color: var(--ck-gold-hi, var(--ck-gold)); }

html[data-theme="dark"] .state-btn {
  background: var(--ck-card-alt);
  color: var(--ck-ink);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .state-btn:hover { background: var(--ck-card-hover); border-color: var(--ck-line-2); }
html[data-theme="dark"] .state-btn.active,
html[data-theme="dark"] .state-btn.on {
  background: var(--ck-gold);
  color: var(--ck-gold-ink, #2a2206);
  border-color: var(--ck-gold);
}

html[data-theme="dark"] .ck-av-menu {
  background: var(--ck-card);
  border-color: var(--ck-line);
  color: var(--ck-ink);
  box-shadow: 0 10px 32px rgba(0,0,0,.6);
}
html[data-theme="dark"] .ck-av-menu .ck-av-item,
html[data-theme="dark"] .ck-av-item { color: var(--ck-ink); }
html[data-theme="dark"] .ck-av-item:hover { background: var(--ck-card-hover); color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-av-greet { border-color: var(--ck-line); }
html[data-theme="dark"] .ck-av-greet .g1 { color: var(--ck-muted); }
html[data-theme="dark"] .ck-av-greet .g2 { color: var(--ck-ink); }

html[data-theme="dark"] .ck-bell-btn {
  background: var(--ck-card-alt);
  color: var(--ck-ink);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-bell-btn:hover { background: var(--ck-card-hover); }
html[data-theme="dark"] .ck-pin-btn {
  background: var(--ck-card-alt);
  color: var(--ck-muted);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-pin-btn:hover { background: var(--ck-card-hover); color: var(--ck-ink); }
html[data-theme="dark"] .ck-pin-btn.pinned {
  background: var(--ck-gold);
  color: var(--ck-gold-ink, #2a2206);
  border-color: var(--ck-gold);
}

html[data-theme="dark"] .mode {
  background: transparent;
  color: var(--ck-muted);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .mode.on,
html[data-theme="dark"] .ck-tracker-modes .mode.on {
  background: var(--ck-card-hover);
  color: var(--ck-gold-hi, var(--ck-gold));
  border-color: var(--ck-gold);
}
html[data-theme="dark"] .mode:hover,
html[data-theme="dark"] .ck-tracker-modes .mode:hover {
  background: var(--ck-card-hover);
  color: var(--ck-gold-hi, var(--ck-gold));
  border-color: var(--ck-gold-soft, rgba(197,163,86,.5));
}
html[data-theme="dark"] .mode .mode-sub,
html[data-theme="dark"] .mode small { color: var(--ck-muted); }

html[data-theme="dark"] .ck-trk-coin .info b { color: var(--ck-ink); }
html[data-theme="dark"] .ck-trk-coin .info .gr { background: rgba(197,163,86,.22); color: var(--ck-gold-hi, var(--ck-gold)); border-color: rgba(197,163,86,.4); }
html[data-theme="dark"] .ck-trk-coin .info { color: var(--ck-ink); }

html[data-theme="dark"] .tbtn {
  background: var(--ck-card-alt);
  color: var(--ck-ink);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .tbtn:hover { background: var(--ck-card-hover); border-color: var(--ck-line-2); }
html[data-theme="dark"] .tbtn-own.on {
  background: var(--ck-gold);
  color: var(--ck-gold-ink, #2a2206);
  border-color: var(--ck-gold);
}
html[data-theme="dark"] .tbtn-want.on {
  background: rgba(122,162,255,.22);
  color: #aebfe0;
  border-color: #4d6aa0;
}
html[data-theme="dark"] .tbtn-exclude.on {
  background: var(--ck-card-hover);
  color: var(--ck-muted);
  border-color: var(--ck-line-2);
}
html[data-theme="dark"] .tbtn-remove {
  background: rgba(176,60,60,.14);
  color: #e59292;
  border-color: rgba(176,60,60,.45);
}
html[data-theme="dark"] .tbtn-remove:hover {
  background: rgba(176,60,60,.28);
  color: #ffb0b0;
}
html[data-theme="dark"] .ck-trk-tag { border-color: transparent; }

html[data-theme="dark"] .ck-card.side-card .text,
html[data-theme="dark"] .side-card .text { color: var(--ck-ink); }
html[data-theme="dark"] .ck-card.side-card .t,
html[data-theme="dark"] .side-card .t { color: var(--ck-muted); }
html[data-theme="dark"] .ck-card.side-card .meta,
html[data-theme="dark"] .side-card .meta { color: var(--ck-muted); }

html[data-theme="dark"] .bank-name { color: var(--ck-ink); }
html[data-theme="dark"] .ck-bank-row,
html[data-theme="dark"] .ck-bank-list .bank-row { color: var(--ck-ink); border-color: var(--ck-line); }

html[data-theme="dark"] .design .hide-btn {
  background: var(--ck-card-alt);
  color: var(--ck-muted);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .design .hide-btn:hover {
  background: rgba(176,60,60,.18);
  color: #e59292;
  border-color: rgba(176,60,60,.45);
}
html[data-theme="dark"] .design .hide-btn.is-hidden {
  background: rgba(197,163,86,.22);
  color: var(--ck-gold-hi, var(--ck-gold));
  border-color: var(--ck-gold);
}

html[data-theme="dark"] .find-wall .find .f-yr,
html[data-theme="dark"] .find-wall .find .denom,
html[data-theme="dark"] .find-wall .find .bank,
html[data-theme="dark"] .find-wall .find .date .d { color: var(--ck-ink); }
html[data-theme="dark"] .find-wall .find .meta,
html[data-theme="dark"] .find-wall .find .sub,
html[data-theme="dark"] .find-wall .find .date { color: var(--ck-muted); }

html[data-theme="dark"] .session-row .info .name { color: var(--ck-ink); }
html[data-theme="dark"] .session-row .date .d { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .session-row .col b { color: var(--ck-ink); }
html[data-theme="dark"] .session-row .col span,
html[data-theme="dark"] .session-row .col .l { color: var(--ck-muted); }

html[data-theme="dark"] .status-chip .lbl-want {
  background: rgba(122,162,255,.22);
  color: #aebfe0;
  border-color: #4d6aa0;
}
html[data-theme="dark"] .status-chip .lbl-excluded {
  background: var(--ck-card-hover);
  color: var(--ck-muted);
  border-color: var(--ck-line-2);
}

html[data-theme="dark"] .ck-all-count,
html[data-theme="dark"] .lhs .ck-all-count { color: var(--ck-ink); }
html[data-theme="dark"] .lhs { color: var(--ck-ink); }
html[data-theme="dark"] .lhs b { color: var(--ck-gold-hi, var(--ck-gold)); }

html[data-theme="dark"] .ck-country > summary.head,
html[data-theme="dark"] .ck-country summary.head,
html[data-theme="dark"] .ck-country .head {
  background: linear-gradient(180deg, var(--ck-card-alt), var(--ck-card));
  border-bottom-color: var(--ck-line);
}
html[data-theme="dark"] .ck-country .title h3,
html[data-theme="dark"] .ck-country .title .n,
html[data-theme="dark"] .ck-country .title .country-name { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-country .cstats { color: var(--ck-ink); }
html[data-theme="dark"] .ck-country .cstats b { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-country .cstats .l,
html[data-theme="dark"] .ck-country .cstats span { color: var(--ck-muted); }

html[data-theme="dark"] .ck-profile-stats .s .n { color: var(--ck-gold-hi, var(--ck-gold)); }

html[data-theme="dark"] .preview-box { background: var(--ck-card-alt); border: 1px solid var(--ck-line); }
html[data-theme="dark"] .preview-box .prev-body {
  background: var(--ck-card);
  color: var(--ck-ink);
}
html[data-theme="dark"] .preview-box .prev-cover {
  background: linear-gradient(135deg, var(--ck-navy-2, #1e2642), var(--ck-navy, #141a2e));
}
html[data-theme="dark"] .preview-box .prev-name { color: var(--ck-ink); }
html[data-theme="dark"] .preview-box .prev-handle { color: var(--ck-muted); }
html[data-theme="dark"] .preview-box .prev-bio { color: var(--ck-ink); }
html[data-theme="dark"] .preview-box .prev-stats { background: var(--ck-card-alt); border-color: var(--ck-line); }
html[data-theme="dark"] .preview-box .prev-stats .n { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .preview-box .prev-stats .l { color: var(--ck-muted); }
html[data-theme="dark"] .preview-box .prev-stats .s { border-color: var(--ck-line); }
html[data-theme="dark"] .preview-box .prev-albums-lbl { color: var(--ck-muted); }
html[data-theme="dark"] .preview-box .prev-nav { background: rgba(0,0,0,.4); }
html[data-theme="dark"] .preview-box .prev-nav .url { background: rgba(255,255,255,.06); color: var(--ck-muted); }

html[data-theme="dark"] .side-card.nearly .title-row,
html[data-theme="dark"] .ck-card.side-card.nearly .title-row { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .side-card.nearly .sub,
html[data-theme="dark"] .ck-card.side-card.nearly .sub { color: var(--ck-muted); }
html[data-theme="dark"] .side-card.nearly .kicker,
html[data-theme="dark"] .ck-card.side-card.nearly .kicker { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .side-card.nearly b,
html[data-theme="dark"] .ck-card.side-card.nearly b { color: var(--ck-ink); }
html[data-theme="dark"] .side-card.nearly .progress,
html[data-theme="dark"] .side-card.nearly .bar,
html[data-theme="dark"] .ck-card.side-card.nearly .bar { background: var(--ck-card-alt); }

html[data-theme="dark"] .ck-sidenav a:hover {
  background: var(--ck-card-hover);
  color: var(--ck-gold-hi, var(--ck-gold));
}
html[data-theme="dark"] .ck-sidenav a.on:hover { background: var(--ck-card-hover); }

html[data-theme="dark"] .ck-profile-page { background: transparent; }

html[data-theme="dark"],
html[data-theme="dark"] body { background: #0b0d1a !important; }

html[data-theme="dark"] .ach.locked {
  background: var(--ck-card-alt);
  border-color: var(--ck-line);
  color: var(--ck-muted);
}
html[data-theme="dark"] .ach.locked .t { color: var(--ck-muted); }
html[data-theme="dark"] .ach.locked .d { color: var(--ck-muted); opacity: .75; }
html[data-theme="dark"] .ach.locked .badge { background: var(--ck-card-hover); color: var(--ck-muted); }
html[data-theme="dark"] .ach.locked .progress,
html[data-theme="dark"] .ach.locked .bar { background: var(--ck-card-hover); }

html[data-theme="dark"] .cb.sessions,
html[data-theme="dark"] .ck-chart .chart-col .cb.sessions,
html[data-theme="dark"] .ck-rh-chart .cb.sessions {
  background: linear-gradient(180deg, #5d7ab8, #3e5891);
}
html[data-theme="dark"] .sw.sessions { background: #5d7ab8; border-color: #5d7ab8; }
html[data-theme="dark"] .ck-chart-legend,
html[data-theme="dark"] .ck-chart-legend .l { color: var(--ck-muted); }
html[data-theme="dark"] .ck-rh-chart .chart-col .month,
html[data-theme="dark"] .ck-rh-chart .month { color: var(--ck-muted); }

html[data-theme="dark"] .ck-main .ck-profile-footer a,
html[data-theme="dark"] .ck-profile-footer a,
html[data-theme="dark"] .ck-profile-footer a:hover {
  color: var(--ck-gold-ink, #2a2206) !important;
  background: var(--ck-gold) !important;
}

html[data-theme="dark"] .ck-ach-recent .item {
  background: var(--ck-card-alt);
  border: 1px solid var(--ck-line);
}
html[data-theme="dark"] .ck-ach-recent .item b { color: var(--ck-ink); }
html[data-theme="dark"] .ck-ach-recent .item .d { color: var(--ck-muted); }

html[data-theme="dark"] .preview-header { color: var(--ck-ink); }
html[data-theme="dark"] .preview-header .live-dot { background: #5cd08d; }

html[data-theme="dark"] .ck-btn.danger,
html[data-theme="dark"] .danger-zone .ck-btn.danger,
html[data-theme="dark"] a.ck-btn.danger {
  background: rgba(176,60,60,.18) !important;
  color: #ffb0b0 !important;
  border-color: rgba(176,60,60,.55) !important;
}
html[data-theme="dark"] .ck-btn.danger:hover,
html[data-theme="dark"] a.ck-btn.danger:hover {
  background: rgba(176,60,60,.32) !important;
  color: #ffd0d0 !important;
  border-color: rgba(176,60,60,.75) !important;
}

.ck-sidenav a {
  padding: 12px 14px;
  margin-bottom: 4px;
}
.ck-sidenav a:last-child { margin-bottom: 0; }

html[data-theme="dark"] .ck-bell-head,
html[data-theme="dark"] .ck-bell-head span { color: var(--ck-ink); }
html[data-theme="dark"] .ck-bell-title { color: var(--ck-ink); }
html[data-theme="dark"] .ck-bell-sub { color: var(--ck-muted); }
html[data-theme="dark"] .ck-bell-time { color: var(--ck-muted); }
html[data-theme="dark"] .ck-bell-ico {
  background: var(--ck-card-alt);
  color: var(--ck-gold-hi, var(--ck-gold));
  border: 1px solid var(--ck-line);
}
html[data-theme="dark"] .ck-bell-item.unread {
  background: rgba(197,163,86,.08);
  border-color: rgba(197,163,86,.35);
}
html[data-theme="dark"] .ck-bell-clear { color: var(--ck-gold-hi, var(--ck-gold)); }

.pick-option {
  margin-bottom: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background .12s, border-color .12s;
}
.pick-option:last-child { margin-bottom: 0; }

html[data-theme="dark"] .pick-option {
  background: var(--ck-card-alt);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .pick-option:hover { background: var(--ck-card-hover); border-color: var(--ck-gold-soft, rgba(197,163,86,.5)); }
html[data-theme="dark"] .pick-option.owned {
  background: linear-gradient(180deg, rgba(197,163,86,.22), var(--ck-card));
  border-color: var(--ck-gold);
}
html[data-theme="dark"] .pick-option.owned:hover {
  background: linear-gradient(180deg, rgba(197,163,86,.3), var(--ck-card-hover));
}
html[data-theme="dark"] .pick-option .pn { color: var(--ck-ink); }
html[data-theme="dark"] .pick-option .pm { color: var(--ck-muted); }
html[data-theme="dark"] .pick-option .pc { color: var(--ck-gold-ink, #2a2206); }
html[data-theme="dark"] .pick-section-lbl { color: var(--ck-muted); }
html[data-theme="dark"] .pick-clear {
  background: var(--ck-card-alt);
  color: var(--ck-muted);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .pick-clear:hover { background: var(--ck-card-hover); color: var(--ck-ink); }

/* ─── Dark-mode stragglers (2026-04-20) ───────────────────────────
   These surfaces had hard-coded `background: #fff` with no dark
   override, so they glowed pure white in dark mode. Consolidated
   here rather than interleaved into each rule's section so the
   dark palette stays easy to audit. */

/* Roll Hunting modal — the primary data-entry surface for sessions. */
html[data-theme="dark"] .ck-rh-modal {
  background: var(--ck-card);
  color: var(--ck-ink);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .55),
    0 4px 14px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .ck-rh-modal header {
  background: linear-gradient(180deg, var(--ck-card-alt), var(--ck-card));
  border-bottom-color: var(--ck-line);
}
html[data-theme="dark"] .ck-rh-modal header h3 { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-rh-modal header .close {
  background: rgba(255, 255, 255, .06);
  color: var(--ck-muted);
}
html[data-theme="dark"] .ck-rh-modal header .close:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--ck-ink);
}
html[data-theme="dark"] .ck-rh-modal .ck-drawer-field label { color: var(--ck-muted); }
html[data-theme="dark"] .ck-rh-modal .ck-drawer-field input[type="text"],
html[data-theme="dark"] .ck-rh-modal .ck-drawer-field input[type="number"],
html[data-theme="dark"] .ck-rh-modal .ck-drawer-field input[type="date"],
html[data-theme="dark"] .ck-rh-modal .ck-drawer-field select,
html[data-theme="dark"] .ck-rh-modal .ck-drawer-field textarea {
  background: var(--ck-card-alt);
  color: var(--ck-ink);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-rh-modal .ck-drawer-field .hint { color: var(--ck-muted); }
html[data-theme="dark"] .ck-rh-modal .ck-seg {
  background: var(--ck-card-alt);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-rh-modal .ck-seg button { color: var(--ck-muted); }
html[data-theme="dark"] .ck-rh-modal .ck-seg button:hover { color: var(--ck-ink); }
html[data-theme="dark"] .ck-rh-modal .ck-seg button.on {
  background: var(--ck-card-hover);
  color: var(--ck-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .ck-rh-modal footer {
  background: var(--ck-card-alt);
  border-top-color: var(--ck-line);
}

/* Album-style segmented control (Blue / Tan album book toggle) */
html[data-theme="dark"] .album-style-seg {
  background: var(--ck-card-alt);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .album-style-seg button { color: var(--ck-muted); }
html[data-theme="dark"] .album-style-seg button.on {
  background: var(--ck-card-hover);
  color: var(--ck-ink);
}

/* Large cards (.ck-card.big) — used for dashboard panels, series detail */
html[data-theme="dark"] .ck-card.big {
  background: var(--ck-card);
  border-color: var(--ck-line);
  color: var(--ck-ink);
}
html[data-theme="dark"] .ck-card.big .head {
  background: linear-gradient(180deg, var(--ck-card-alt), var(--ck-card));
  border-bottom-color: var(--ck-line);
}
html[data-theme="dark"] .ck-card.big .head h3 { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-card.big .head .cs { color: var(--ck-muted); }

/* Generic modal form fields (.ck-modal .fld) */
html[data-theme="dark"] .ck-modal .fld {
  background: var(--ck-card-alt);
  color: var(--ck-ink);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-modal .fld-label { color: var(--ck-muted); }
html[data-theme="dark"] .ck-modal .fld:focus {
  border-color: var(--ck-gold);
  outline-color: var(--ck-gold);
}

/* Coin-drawer state buttons — the desktop CSS sets explicit navy/gold
   per data-state. In dark mode, `--ck-navy` is still navy, which makes
   the "Owned" pill blend into its own background. Swap to gold-on-navy
   with a bright ring so it's obviously selected. */
html[data-theme="dark"] .ck-drawer .state-btn {
  background: var(--ck-card-alt);
  color: var(--ck-ink);
  border-color: var(--ck-line);
}
html[data-theme="dark"] .ck-drawer .state-btn.on[data-state="owned"] {
  background: var(--ck-gold);
  color: var(--ck-gold-ink, #2a2206);
  border-color: var(--ck-gold);
}
html[data-theme="dark"] .ck-drawer .state-btn.on[data-state="want"] {
  background: var(--ck-card-hover);
  color: var(--ck-gold-hi, var(--ck-gold));
  border-color: var(--ck-gold);
}

/* Mini-switch OFF label in dark mode — the track is a darker gray
   in dark theme, so dark-navy text disappears. Lift it to light. */
html[data-theme="dark"] .mini-switch::before { color: rgba(255, 255, 255, .6); }
/* ON label stays gold-ink since the gold track is identical in both themes. */

/* Coin-drawer body + header tint. The multi-selector dark rule above
   covers `.ck-drawer` itself, but the header / footer / section chrome
   needed its own nudge to read as layered cards. */
html[data-theme="dark"] .ck-drawer .dh {
  background: var(--ck-card-alt);
  border-bottom-color: var(--ck-line);
}
html[data-theme="dark"] .ck-drawer .dh h2 { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-drawer .dh .bc { color: var(--ck-muted); }
html[data-theme="dark"] .ck-drawer .df {
  background: var(--ck-card-alt);
  border-top-color: var(--ck-line);
}
html[data-theme="dark"] .ck-drawer .save-hint { color: var(--ck-muted); }
html[data-theme="dark"] .ck-drawer-section h5 { color: var(--ck-gold-hi, var(--ck-gold)); }
html[data-theme="dark"] .ck-drawer-field label { color: var(--ck-muted); }
html[data-theme="dark"] .ck-drawer-field input,
html[data-theme="dark"] .ck-drawer-field select,
html[data-theme="dark"] .ck-drawer-field textarea {
  background: var(--ck-card-alt);
  color: var(--ck-ink);
  border-color: var(--ck-line);
}

body.is-home .ck-home-v2 .ckv-featured {
  background:
    radial-gradient(circle at 80% 0%, rgba(197,163,86,.18), transparent 55%),
    linear-gradient(160deg, var(--ck-navy, #141a2e), var(--ck-navy-2, #1e2642)) !important;
  color: #f4f1e6;
}
body.is-home .ck-home-v2 .ckv-featured::before {
  display: none !important;
}
body.is-home .ck-home-v2 .ckv-featured .frame {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.is-home .ck-home-v2 .ckv-featured .coin-disc {
  background: transparent !important;
  box-shadow: none !important;
}
body.is-home .ck-home-v2 .ckv-featured .coin-disc img {
  object-fit: contain !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
}
body.is-home .ck-home-v2 .ckv-featured .label {
  color: var(--ck-gold, #c5a356) !important;
  letter-spacing: .12em;
  /* WAVE accessibility: the homepage article inlines these tile
   * eyebrows/labels at ~9px which trips "very small text". Force a
   * floor of 11px from the template side so the article HTML doesn't
   * have to be re-edited. */
  font-size: 11px !important;
}
body.is-home .ck-home-v2 .ckv-tile .eyebrow,
body.is-home .ck-home-v2 .ckv-tile .label {
  font-size: 11px !important;
}
/* Was h3 — promoted to h2 in the homepage article for proper heading
 * hierarchy (WAVE accessibility). The warmstone homepage skin paints
 * .ckv-featured navy, so the heading must stay white regardless of the
 * article's default dark color. */
body.is-home .ck-home-v2 .ckv-featured h2 {
  color: #ffffff !important;
}

/* WAVE accessibility: joomla.css forces a.btn { color: #fff !important }
 * site-wide, which made the homepage's gold "Create free account" button
 * white-on-gold (2.4:1, fails AA). The article CSS sets color:#1a1d28 but
 * loses to the !important. Override here with higher specificity. */
body.is-home .ck-home-v2 .ckv-tracker a.btn,
body.is-home .ck-home-v2 .ckv-tracker a.btn:visited,
body.is-home .ck-home-v2 .ckv-tracker a.btn:hover,
body.is-home .ck-home-v2 .ckv-tracker a.btn:focus {
  color: #1a1d28 !important;
  background: #c5a356 !important;
}
body.is-home .ck-home-v2 .ckv-featured .sub,
body.is-home .ck-home-v2 .ckv-featured .meta {
  color: rgba(244, 241, 230, .78) !important;
}
body.is-home .ck-home-v2 .ckv-featured .meta strong {
  color: #ffffff !important;
}
body.is-home .ck-home-v2 .ckv-featured .cta {
  color: var(--ck-gold, #c5a356) !important;
}
body.is-home .ck-home-v2 .ckv-featured .cta:hover {
  color: var(--ck-gold-2, #d9bf7f) !important;
}

html[data-theme="dark"] body.is-home .ck-home-v2 .ckv-featured {
  background:
    radial-gradient(circle at 80% 0%, rgba(197,163,86,.22), transparent 55%),
    linear-gradient(160deg, var(--ck-navy, #141a2e), var(--ck-navy-2, #1e2642)) !important;
}

body.is-home .ck-home-v2 .ckv-search {
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  padding: 4px !important;
  gap: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}
body.is-home .ck-home-v2 .ckv-search input {
  padding: 11px 4px !important;
  font-size: 14.5px !important;
}
body.is-home .ck-home-v2 .ckv-search button {
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 13.5px !important;
}

footer.ck-footer {
  background: #0f1424;
  color: rgba(255, 255, 255, .72);
  padding: 56px 0 0;
  margin-top: 80px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
footer.ck-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  background: linear-gradient(to bottom, rgba(197, 163, 86, 0.40), transparent);
  pointer-events: none;
  z-index: 0;
}
footer.ck-footer .container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

footer.ck-footer .ck-footer-modules {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ck-footer-modules .ck-footer-mod-left,
.ck-footer-modules .ck-footer-mod-right {
  flex: 1 1 300px;
}

.ck-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.6fr;
  gap: 40px;
  padding-bottom: 48px;
}
.ck-footer-col {
  min-width: 0;
}

/* Was h4 — promoted to h2 for proper heading hierarchy (WAVE alert).
 * Visual treatment is identical; only the semantic level changed. */
.ck-footer-col h2 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: .02em;
}
.ck-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ck-footer-col li { margin: 0; }
.ck-footer-col a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .15s;
}
.ck-footer-col a:hover {
  color: var(--ck-gold, #c5a356);
}

.ck-footer-brand {
  position: relative;
  isolation: isolate;
}
.ck-footer-brand::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -65px;
  width: 360px;
  height: 360px;
  transform: translateY(-50%) rotate(-8deg);
  background: url('/images/catalog/IMG_7874.webp') no-repeat center center / contain;
  opacity: 0.12;
  filter: blur(0.5px) saturate(1.1);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 75%);
          mask-image: radial-gradient(circle, #000 35%, transparent 75%);
}
.ck-footer-brand .ck-footer-tag {
  /* WAVE accessibility: bumped from .7 -> .78 to clear 4.5:1 with margin. */
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 320px;
}
.ck-footer-social-label {
  color: var(--ck-gold, #c5a356);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.ck-footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ck-footer-social a.ck-social-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .8);
  transition: background .15s, color .15s, transform .1s;
  text-decoration: none;
}
.ck-footer-social a.ck-social-icon:hover {
  background: var(--ck-gold, #c5a356);
  color: #0f1424;
  transform: translateY(-1px);
}

.ck-footer-news p {
  /* WAVE accessibility: bumped from .62 -> .78 (~4.0:1 -> ~5:1). */
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.ck-footer-newsletter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ck-footer-newsletter input[type="email"] {
  flex: 1 1 180px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.ck-footer-newsletter input[type="email"]:focus {
  border-color: var(--ck-gold, #c5a356);
  background: rgba(255, 255, 255, .08);
}
.ck-footer-newsletter input[type="email"]::placeholder {
  color: rgba(255, 255, 255, .4);
}
.ck-footer-newsletter button {
  background: var(--ck-gold, #c5a356);
  color: #1a1d28;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.ck-footer-newsletter button:hover {
  background: var(--ck-gold-2, #d9bf7f);
  transform: translateY(-1px);
}
.ck-footer-newsletter .ck-news-msg {
  flex-basis: 100%;
  color: var(--ck-gold, #c5a356);
  font-size: 12.5px;
  margin: 6px 0 0;
  min-height: 1em;
}
/* Status-message styling — different colors for success/info/error
 * states. Without these, all messages render in the default gold
 * which doesn't communicate result. */
.ck-footer-newsletter .ck-news-msg.success { color: #8edca5; }
.ck-footer-newsletter .ck-news-msg.info    { color: #d9bf7f; }
.ck-footer-newsletter .ck-news-msg.error   { color: #ec9b9b; }

/* Subscribe + Unsubscribe sit on the same row. Subscribe is the
 * primary gold button (existing style); Unsubscribe is a quiet
 * underlined link so it stays discoverable without competing. */
.ck-footer-news-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}
.ck-footer-news-actions button[data-action="subscribe"] {
  flex: 1;
  min-width: 110px;
}
.ck-footer-news-unsub {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,.55) !important;
  font: inherit !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
  text-decoration: underline !important;
  cursor: pointer;
  padding: 0 !important;
  flex-shrink: 0;
  transform: none !important;
}
.ck-footer-news-unsub:hover {
  color: rgba(255,255,255,.85) !important;
  background: transparent !important;
  transform: none !important;
}
.ck-footer-news-unsub[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.ck-footer-rule {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, .1);
  margin: 0;
}
footer.ck-footer .ck-footer-bottom {
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}
.ck-footer-bottom a {
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .15s;
}
.ck-footer-bottom a:hover {
  color: var(--ck-gold, #c5a356);
}

@media (max-width: 1024px) {
  .ck-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .ck-footer-brand,
  .ck-footer-news {
    grid-column: 1 / -1;
  }
  .ck-footer-brand .ck-footer-tag {
    max-width: none;
  }
}
@media (max-width: 600px) {
  footer.ck-footer {
    padding-top: 40px;
    margin-top: 56px;
    margin-bottom: 0;
  }
  footer.ck-footer .container {
    padding-left: 18px;
    padding-right: 18px;
  }
  .ck-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-bottom: 36px;
  }
  .ck-footer-brand,
  .ck-footer-news {
    grid-column: 1 / -1;
  }
  .ck-footer-bottom {
    justify-content: center;
    text-align: center;
  }
  body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

html[data-theme="dark"] footer.ck-footer {
  background: var(--card, #151528);
}