:root{
  --pitch-dark:#0d2818;
  --pitch:#153c26;
  --pitch-line:#2d6a4f;
  --chalk:#f6f4ec;
  --chalk-dim:#d9d5c4;
  --gold:#c9a227;
  --gold-bright:#e8c04a;
  --ink:#0a1a10;
  --red-card:#a53030;
  --shadow: 0 8px 30px rgba(0,0,0,0.35);
  --radius: 10px;
  --fw-motion-fast: 140ms;
  --fw-motion-page: 190ms;
  --fw-motion-ease: cubic-bezier(.2,.75,.25,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, #1c4a2e 0%, transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, #163d27 0%, transparent 55%),
    repeating-linear-gradient(0deg, var(--pitch-dark) 0px, var(--pitch-dark) 44px, var(--pitch) 44px, var(--pitch) 88px);
  color:var(--chalk);
  font-family:'Oswald',sans-serif;
  min-height:100vh;
}
::selection{background:var(--gold);color:var(--ink);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--pitch-line);border-radius:6px;}

.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Anton',sans-serif;letter-spacing:0.02em;}

/* ---------- LOGIN ---------- */
#login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-card{
  width:100%;
  max-width:400px;
  background:linear-gradient(180deg, rgba(20,50,32,0.9), rgba(10,26,16,0.95));
  border:1px solid rgba(201,162,39,0.35);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:36px 32px 30px;
  position:relative;
  overflow:hidden;
}
.login-card::before{
  content:"";
  position:absolute;
  top:-2px;left:-2px;right:-2px;
  height:6px;
  background:repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 36px);
  opacity:0.9;
}
.badge-crest{
  width:64px;height:64px;
  margin:0 auto 14px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #1d4a2e, #0f2418 70%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.4), 0 0 0 3px var(--gold);
  overflow:hidden;
}
.badge-crest svg{
  width:72%;height:72%;
}
.login-title{
  font-family:'Anton',sans-serif;
  text-align:center;
  font-size:26px;
  letter-spacing:0.03em;
  margin:0 0 2px;
  color:var(--chalk);
}
.login-sub{
  text-align:center;
  color:var(--chalk-dim);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:0 0 26px;
  font-family:'IBM Plex Mono',monospace;
}
.login-tagline{
  text-align:center;
  color:var(--gold-bright);
  font-size:12px;
  letter-spacing:0.06em;
  margin:-18px 0 26px;
  font-family:'Oswald',sans-serif;
}
.login-disclaimer{
  text-align:center;
  color:var(--chalk-dim);
  font-size:10.5px;
  line-height:1.5;
  margin:22px 0 0;
  opacity:0.75;
}
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold-bright);
  margin-bottom:6px;
  font-family:'IBM Plex Mono',monospace;
}
.field input{
  width:100%;
  padding:11px 13px;
  border-radius:6px;
  border:1px solid rgba(246,244,236,0.18);
  background:rgba(246,244,236,0.06);
  color:var(--chalk);
  font-size:15px;
  font-family:'Oswald',sans-serif;
  outline:none;
  transition:border-color .15s, background .15s;
}
.field input:focus{border-color:var(--gold); background:rgba(246,244,236,0.1);}
.btn{
  width:100%;
  padding:12px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  transition:transform .1s, filter .15s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:var(--ink);
}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{
  background:transparent;
  color:var(--chalk-dim);
  border:1px solid rgba(246,244,236,0.2);
  margin-top:10px;
}
.btn-ghost:hover{color:var(--chalk); border-color:rgba(246,244,236,0.4);}
.login-error{
  background:rgba(165,48,48,0.18);
  border:1px solid rgba(165,48,48,0.5);
  color:#ffb4b4;
  padding:9px 12px;
  border-radius:6px;
  font-size:13px;
  margin-bottom:16px;
  display:none;
}
.login-toggle{
  text-align:center;
  margin-top:14px;
  font-size:12.5px;
  color:var(--chalk-dim);
}
.login-toggle a{color:var(--gold-bright);cursor:pointer;text-decoration:none;}
.login-toggle a:hover{text-decoration:underline;}

/* ---------- APP SHELL ---------- */
#app{display:none;min-height:100vh;}
.topbar{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg, rgba(10,24,15,0.97), rgba(10,24,15,0.9));
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--gold);
  padding:8px 18px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:8px 14px;
}
.topbar .title-block{display:flex;align-items:center;gap:12px;min-width:0;}
.title-block .crest-mini{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 65%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;color:var(--ink);font-size:16px;
}
.title-block h1{
  font-family:'Anton',sans-serif;
  font-size:19px;
  margin:0;
  letter-spacing:0.02em;
  line-height:1.1;
}
.title-block .sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:var(--chalk-dim);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.topbar .nav-btn{
  padding:5px 11px;
  font-size:11.5px;
}
.topbar-pages{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex-wrap:wrap;}
.topbar-tools{position:relative;z-index:22;}
.topbar-tools summary{list-style:none;cursor:pointer;white-space:nowrap;}
.topbar-tools summary::-webkit-details-marker{display:none;}
.topbar-tools summary span{margin-left:4px;color:var(--gold-bright);}
.topbar-tools[open] summary{background:rgba(201,162,39,0.12);}
.topbar-tools-menu{
  position:absolute;top:calc(100% + 10px);right:0;
  display:grid;gap:8px;min-width:190px;padding:12px;
  border:1px solid rgba(201,162,39,0.45);border-radius:10px;
  background:rgba(10,24,15,0.98);box-shadow:var(--shadow);
}
.topbar-tools-menu .nav-btn{width:100%;text-align:left;white-space:nowrap;}
.topbar-account{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;}
.user-chip{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:var(--chalk-dim);
  border:1px solid rgba(246,244,236,0.2);
  padding:4px 9px;
  border-radius:20px;
  max-width:min(32vw,300px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.signout-btn{
  background:transparent;border:1px solid rgba(165,48,48,0.5);
  color:#ffb4b4;padding:5px 11px;border-radius:20px;font-family:'Oswald',sans-serif;
  font-size:11.5px;letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;
}
.signout-btn:hover{background:rgba(165,48,48,0.15);}
.account-switcher{
  background:transparent;border:1px solid rgba(201,162,39,0.4);
  color:var(--gold-bright);padding:6px 10px;border-radius:20px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;cursor:pointer;outline:none;
}
.account-switcher:hover{background:rgba(201,162,39,0.12);}
.saved-accounts-row{
  display:none;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(246,244,236,0.15);
}
.saved-accounts-row .sa-label{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--chalk-dim);margin-bottom:8px;
}
.saved-account-btn{
  width:100%;text-align:left;
  background:rgba(246,244,236,0.06);border:1px solid rgba(246,244,236,0.15);
  color:var(--chalk);padding:9px 12px;border-radius:6px;
  font-family:'Oswald',sans-serif;font-size:13.5px;cursor:pointer;
  margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;
  transition:border-color .15s, background .15s;
}
.saved-account-btn:hover{border-color:var(--gold);background:rgba(201,162,39,0.1);}
.saved-account-btn .sa-remove{
  color:var(--chalk-dim);font-size:11px;padding:2px 6px;border-radius:4px;
}
.saved-account-btn .sa-remove:hover{color:#ffb4b4;background:rgba(165,48,48,0.15);}

/* Scoreboard */
.scoreboard{
  max-width:1180px;margin:22px auto 0;padding:0 22px;
  display:grid;grid-template-columns:1.3fr 1fr;gap:16px;
}
@media(max-width:760px){.scoreboard{grid-template-columns:1fr;}}
.score-panel{
  background:linear-gradient(180deg, rgba(21,60,38,0.75), rgba(10,26,16,0.85));
  border:1px solid rgba(201,162,39,0.3);
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--shadow);
}
.score-panel .label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-bright);
  margin-bottom:8px;
}
.big-count{display:flex;align-items:baseline;gap:10px;}
.big-count .num{font-family:'Anton',sans-serif;font-size:44px;color:var(--chalk);line-height:1;}
.big-count .of{font-family:'Oswald',sans-serif;color:var(--chalk-dim);font-size:16px;}
.pitch-bar{
  margin-top:12px;height:12px;border-radius:6px;overflow:hidden;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 20px, rgba(255,255,255,0.02) 20px 40px);
  border:1px solid rgba(246,244,236,0.15);
  position:relative;
}
.pitch-bar .fill{
  height:100%;background:linear-gradient(90deg, var(--pitch-line), var(--gold));
  transition:width .4s ease;
}
.mini-stats{display:flex;gap:18px;flex-wrap:wrap;}
.mini-stat{flex:1;min-width:110px;}
.mini-stat .n{font-family:'Anton',sans-serif;font-size:22px;color:var(--gold-bright);}
.mini-stat .l{font-family:'IBM Plex Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--chalk-dim);}

/* Controls */
.controls{
  max-width:1180px;margin:18px auto 0;padding:0 22px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.controls input[type="text"]{
  flex:1;min-width:200px;
  padding:10px 14px;border-radius:20px;
  border:1px solid rgba(246,244,236,0.2);
  background:rgba(246,244,236,0.06);color:var(--chalk);
  font-family:'Oswald',sans-serif;font-size:14px;outline:none;
}
.controls input[type="text"]:focus{border-color:var(--gold);}
.controls select{
  padding:10px 12px;border-radius:20px;
  border:1px solid rgba(246,244,236,0.2);
  background:rgba(246,244,236,0.06);color:var(--chalk);
  font-family:'Oswald',sans-serif;font-size:13.5px;outline:none;
  cursor:pointer;
}
.seg{
  display:flex;border:1px solid rgba(246,244,236,0.2);border-radius:20px;overflow:hidden;
}
.seg button{
  background:transparent;border:none;color:var(--chalk-dim);
  padding:9px 14px;font-family:'Oswald',sans-serif;font-size:13px;cursor:pointer;
  letter-spacing:0.03em;
}
.seg button.active{background:var(--gold);color:var(--ink);font-weight:600;}

/* Sets list */
#sets-container{max-width:1180px;margin:22px auto 60px;padding:0 22px;display:flex;flex-direction:column;gap:14px;}
.set-group{
  background:linear-gradient(180deg, rgba(16,42,27,0.7), rgba(10,26,16,0.8));
  border:1px solid rgba(246,244,236,0.12);
  border-radius:var(--radius);
  overflow:hidden;
}
.set-header{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;cursor:pointer;
  user-select:none;
}
.set-header:hover{background:rgba(246,244,236,0.03);}
.set-header .chev{
  font-family:'IBM Plex Mono',monospace;color:var(--gold-bright);
  transition:transform .2s;font-size:13px;width:14px;
}
.set-group.open .chev{transform:rotate(90deg);}
.set-header .name{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;
  letter-spacing:0.02em;
}
.set-header .count{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--chalk-dim);
  margin-left:auto;
}
.set-header .mini-bar{
  width:110px;height:6px;border-radius:4px;overflow:hidden;
  background:rgba(246,244,236,0.12);
}
.set-header .mini-bar .f{height:100%;background:var(--gold);}
.set-body{display:none;}
.set-group.open .set-body{display:block;}
.card-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
  padding:14px 18px 18px;
}
.card-tile{
  position:relative;
  background:linear-gradient(165deg, rgba(246,244,236,0.05), rgba(246,244,236,0.02));
  border:1px solid rgba(246,244,236,0.14);
  border-radius:8px;
  padding:56px 11px 11px;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .1s;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-height:86px;
}
.card-tile:hover{
  border-color:rgba(201,162,39,0.5);
  background:rgba(246,244,236,0.06);
}
.card-tile:active{transform:scale(0.98);}
.card-tile.owned{
  background:linear-gradient(165deg, rgba(201,162,39,0.22), rgba(201,162,39,0.07));
  border-color:var(--gold);
}
.card-tile.owned-numbered-only{
  background:linear-gradient(165deg, rgba(90,150,220,0.20), rgba(90,150,220,0.06));
  border-color:#5a96dc;
}
.card-tile.owned-numbered-only .check-badge{
  background:#5a96dc;border-color:#5a96dc;color:#fff;
}
.card-tile .cid{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--gold-bright);
}
.card-tile .cname{
  font-size:14px;line-height:1.25;color:var(--chalk);font-weight:500;
}
.card-tile .cname .dupe-multiplier{
  display:inline-block;
  margin-left:4px;
  color:#ff7a6b;
  font-family:'IBM Plex Mono',monospace;
  font-weight:800;
  font-size:14px;
  text-shadow:0 0 8px rgba(226,102,94,0.5);
}
.card-tile .cteam{
  margin-top:auto;
  font-size:11px;color:var(--chalk-dim);font-family:'IBM Plex Mono',monospace;
}
.card-tile .trade-sticker{
  margin-top:4px;
  align-self:flex-start;
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.03em;
  padding:2px 7px;
  border-radius:9px;
  line-height:1.5;
}
.card-tile .trade-sticker.both-own{
  background:rgba(201,162,39,0.2);
  color:var(--gold-bright);
  border:1px solid rgba(201,162,39,0.45);
}
.card-tile .trade-sticker.traded-to-you{
  background:rgba(90,150,220,0.2);
  color:#7fb3ff;
  border:1px solid rgba(90,150,220,0.45);
}
.card-tile .trade-sticker.traded-by-you{
  background:rgba(165,48,48,0.2);
  color:#ffb4b4;
  border:1px solid rgba(165,48,48,0.45);
}
.card-tile .badges{display:flex;gap:5px;flex-wrap:wrap;}
.card-tile .rk{
  font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--pitch-dark);
  background:var(--gold-bright);
  padding:1px 6px;border-radius:8px;letter-spacing:0.05em;display:inline-block;
}
.card-tile .rk.year{background:var(--chalk-dim);}
.card-tile .check-badge{
  position:absolute;top:7px;right:7px;
  width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(246,244,236,0.3);
  background:rgba(0,0,0,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:transparent;
  transition:all .15s;
}
.card-tile.owned .check-badge{
  background:var(--gold);border-color:var(--gold);color:var(--ink);
}
.card-tile .dup-check-btn{
  position:absolute;top:7px;left:7px;
  width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(246,244,236,0.25);
  background:rgba(0,0,0,0.3);
  color:var(--chalk-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;
  cursor:pointer;
  padding:0;
  transition:all .15s;
  z-index:2;
}
.card-tile .dup-check-btn:hover{
  background:var(--pitch-line);
  border-color:var(--gold-bright);
  color:var(--gold-bright);
  transform:scale(1.08);
}
.card-tile .dup-check-btn.lit{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  box-shadow:0 0 8px rgba(201,162,39,0.6);
}
.card-tile .dup-check-btn.lit:hover{
  background:var(--gold-bright);
  border-color:var(--gold-bright);
  color:var(--ink);
}
.card-tile .dup-check-btn.disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.card-tile .dup-check-btn.disabled:hover{
  background:rgba(0,0,0,0.3);
  border-color:rgba(246,244,236,0.25);
  color:var(--chalk-dim);
  transform:none;
}
.card-tile .numbered-btn{
  position:absolute;top:31px;right:7px;
  width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(246,244,236,0.25);
  background:rgba(0,0,0,0.3);
  color:var(--chalk-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;font-family:'IBM Plex Mono',monospace;font-weight:600;
  cursor:pointer;
  padding:0;
  transition:all .15s;
  z-index:2;
}
.card-tile .numbered-btn:hover{
  background:var(--pitch-line);
  border-color:#7fb3ff;
  color:#7fb3ff;
  transform:scale(1.08);
}
.card-tile .numbered-btn.lit{
  background:#3d6fa8;
  border-color:#7fb3ff;
  color:#fff;
  box-shadow:0 0 8px rgba(127,179,255,0.55);
}
.card-tile .numbered-btn.lit:hover{
  background:#4a80c0;
  border-color:#a3ccff;
  color:#fff;
}
.card-tile .sold-btn{
  position:absolute;top:31px;left:7px;
  width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(246,244,236,0.25);
  background:rgba(0,0,0,0.3);
  color:var(--chalk-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;font-family:'IBM Plex Mono',monospace;font-weight:700;
  cursor:pointer;
  padding:0;
  transition:all .15s;
  z-index:2;
}
.card-tile .sold-btn:hover{
  background:var(--pitch-line);
  border-color:#e2665e;
  color:#e2665e;
  transform:scale(1.08);
}
.card-tile .sold-btn .dupe-count{
  position:absolute;
  top:-8px;right:-8px;
  min-width:18px;height:18px;
  border-radius:50%;
  background:var(--gold-bright);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
  font-family:'IBM Plex Mono',monospace;
  line-height:1;
  border:2px solid var(--pitch-dark);
}
.export-pages-list{
  display:flex;flex-direction:column;gap:12px;
  max-height:60vh;overflow-y:auto;
  margin-bottom:4px;
}
.export-zip-btn{
  width:100%;
  padding:11px 14px;border-radius:8px;border:none;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:var(--ink);font-family:'Oswald',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:0.03em;text-transform:uppercase;
  cursor:pointer;transition:filter .15s;
  margin-bottom:14px;
}
.export-zip-btn:hover{filter:brightness(1.08);}
.export-zip-btn:disabled{opacity:0.5;cursor:not-allowed;filter:none;}
.export-page-row{
  display:flex;align-items:center;gap:12px;
  background:rgba(246,244,236,0.04);
  border:1px solid rgba(246,244,236,0.12);
  border-radius:8px;
  padding:10px;
}
.export-page-row img{
  width:64px;height:auto;border-radius:4px;
  border:1px solid rgba(246,244,236,0.15);
  flex-shrink:0;display:block;
}
.export-page-row .epr-info{flex:1;min-width:0;}
.export-page-row .epr-title{
  font-family:'Oswald',sans-serif;font-weight:600;
  color:var(--chalk);font-size:14px;
}
.export-page-row .epr-sub{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  color:var(--chalk-dim);margin-top:2px;line-height:1.4;
}
.export-page-row button{
  flex-shrink:0;
  padding:9px 16px;border-radius:6px;border:none;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:var(--ink);font-family:'Oswald',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:0.02em;text-transform:uppercase;
  cursor:pointer;transition:filter .15s;
}
.export-page-row button:hover{filter:brightness(1.08);}
.export-page-row button.saved{
  background:rgba(246,244,236,0.1);color:var(--chalk-dim);
}
.empty-msg{
  text-align:center;color:var(--chalk-dim);padding:50px 20px;font-family:'IBM Plex Mono',monospace;
  font-size:13px;letter-spacing:0.05em;
}
@media(max-width:600px){
  .card-list{grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));}
}
.loading-spinner{
  display:flex;align-items:center;justify-content:center;min-height:60vh;
  color:var(--chalk-dim);font-family:'IBM Plex Mono',monospace;letter-spacing:0.1em;
}
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--ink);border:1px solid var(--gold);color:var(--chalk);
  padding:9px 18px;border-radius:20px;font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;
  z-index:100;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}
.shortcuts-panel{
  display:none;
  position:fixed;
  bottom:16px;right:16px;
  background:linear-gradient(180deg, rgba(21,60,38,0.92), rgba(10,26,16,0.96));
  border:1px solid rgba(201,162,39,0.4);
  border-radius:10px;
  padding:11px 14px;
  box-shadow:var(--shadow);
  z-index:90;
  max-width:230px;
}
.shortcuts-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;}
.shortcuts-heading .shortcuts-title{margin-bottom:0;}
.shortcuts-hide-btn,.shortcuts-show-btn{
  border:1px solid rgba(201,162,39,0.5);border-radius:5px;background:rgba(201,162,39,0.12);
  color:var(--gold-bright);font-family:'IBM Plex Mono',monospace;font-size:10px;
  padding:4px 7px;cursor:pointer;text-transform:uppercase;letter-spacing:0.04em;
}
.shortcuts-show-btn{position:fixed;right:16px;bottom:16px;z-index:90;padding:9px 12px;background:linear-gradient(180deg, rgba(21,60,38,0.96), rgba(10,26,16,0.98));box-shadow:var(--shadow);}
.shortcuts-title{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:7px;
}
.shortcuts-row{
  display:flex;align-items:center;gap:9px;
  margin-bottom:6px;
}
.shortcuts-row:last-child{margin-bottom:0;}
.shortcuts-tip{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(246,244,236,0.14);
  font-size:10.5px;
  line-height:1.4;
  color:var(--chalk-dim);
  font-family:'Oswald',sans-serif;
}
.shortcuts-tip b{
  color:var(--gold-bright);
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
}
.bulk-trade-btn{
  margin-top:10px;
  width:100%;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid rgba(201,162,39,0.4);
  background:rgba(201,162,39,0.1);
  color:var(--gold-bright);
  font-family:'Oswald',sans-serif;
  font-size:11.5px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s;
}
.bulk-trade-btn:hover{background:rgba(201,162,39,0.2);}
.export-dupes-btn{
  margin-top:8px;
  width:100%;
  padding:8px 10px;
  border-radius:6px;
  border:none;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:var(--ink);
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:11.5px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:filter .15s;
}
.export-dupes-btn:hover{filter:brightness(1.08);}
.export-dupes-btn:disabled{opacity:0.5;cursor:not-allowed;filter:none;}
.modal-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(5,15,9,0.75);
  backdrop-filter:blur(3px);
  z-index:200;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal-backdrop.show{display:flex;}
.modal-card{
  width:100%;max-width:480px;
  background:linear-gradient(180deg, rgba(21,60,38,0.97), rgba(10,26,16,0.99));
  border:1px solid rgba(201,162,39,0.4);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}
#scanner-modal-backdrop{
  padding:12px;
  -webkit-backdrop-filter:none;
  backdrop-filter:none; /* WebKit paints live camera video blank under a backdrop-filter */
}
#scanner-modal-backdrop.show .modal-card{animation:none;}
#scanner-modal-backdrop .modal-card{
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:clamp(14px,3vw,24px);
}
.scanner-modal-card{max-width:none;width:100%;height:calc(100vh - 24px);height:calc(100dvh - 24px);display:flex;flex-direction:column;}
.scanner-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:20px;}
.scanner-cam-col{height:100%;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;}
.scanner-info-col{min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;}
@media (max-width:900px){
  .scanner-layout{grid-template-columns:1fr;overflow-y:auto;}
  .scanner-info-col{overflow:visible;}
  .scanner-cam-col{height:auto;min-height:260px;overflow:visible;border-radius:0;}
  #scanner-video{width:100%;height:min(55dvh,460px);min-height:260px;max-height:none;background:#000;border-radius:0;transform:translateZ(0);}
}
#scanner-workflow{
  display:none;
  align-items:center;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  margin:0 0 8px;
  padding:6px 12px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--gold-dim,#665);
  border-radius:8px;
}
#scanner-workflow>div{flex:0 0 auto;}
#scanner-workflow>div+div{padding-left:12px;border-left:1px solid rgba(246,244,236,0.18);}
.scanner-camera-row{display:flex;gap:10px;align-items:center;margin:10px 0 8px;}
.scanner-camera-label{font-size:13px;opacity:0.8;white-space:nowrap;}
#scanner-camera-select{
  flex:1;
  min-width:0;
  background:rgba(0,0,0,0.3);
  color:var(--chalk,#f6f4ec);
  border:1px solid var(--gold-dim,#665);
  border-radius:6px;
  padding:8px 10px;
  font-size:14px;
}
#scanner-model-badge{
  flex-shrink:0;
  font-size:11px;
  font-weight:bold;
  padding:3px 8px;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  border:1px solid var(--gold-dim,#665);
  white-space:nowrap;
}
.scanner-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  opacity:0.85;
  margin-bottom:10px;
  cursor:pointer;
}
.scanner-option input{width:16px;height:16px;}
#scanner-collections{font-size:13px;font-weight:600;margin:0 0 8px;opacity:0.9;}
#scanner-cooldown{font-size:14px;font-weight:700;margin:0 0 8px;color:var(--gold,#e0b93c);}
.scanner-topbar{display:flex;align-items:stretch;gap:clamp(10px,1.2vw,20px);margin:0 0 12px;}
.scanner-topbar #scanner-modal-title{flex:0 0 auto;align-self:center;margin:0;font-size:clamp(28px,3.2vw,52px);line-height:1;white-space:nowrap;}
#scanner-stats{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1.5fr);gap:clamp(6px,0.7vw,12px);margin:0;}
.scanner-summary-box{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:clamp(10px,1.1vw,18px) clamp(10px,1.2vw,20px);border:1px solid rgba(246,244,236,0.2);border-radius:10px;background:rgba(246,244,236,0.06);}
.scanner-summary-box span{font-size:clamp(12px,1.05vw,17px);line-height:1.15;text-transform:uppercase;letter-spacing:0.03em;color:var(--chalk-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scanner-summary-box strong{font-family:'Anton',sans-serif;font-size:clamp(34px,3.6vw,60px);line-height:1.05;color:var(--gold-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scanner-summary-box small{font-size:clamp(12px,1vw,16px);line-height:1.15;color:var(--chalk-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:1500px){
  .scanner-topbar{flex-direction:column;gap:6px;}
  .scanner-topbar #scanner-modal-title{align-self:flex-start;font-size:clamp(26px,3vw,40px);}
  .scanner-summary-box{padding:10px;}
  .scanner-summary-box span{letter-spacing:0;font-size:clamp(11px,1.1vw,15px);}
  .scanner-summary-box strong{font-size:clamp(30px,3.5vw,52px);}
  .scanner-summary-box small{font-size:clamp(11px,1vw,14px);}
}
@media (max-width:900px){
  #scanner-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:560px){
  #scanner-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
#scanner-meters{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px;}
.meter{
  flex:1;min-width:150px;display:flex;flex-direction:column;gap:4px;
  padding:14px 16px;border-radius:10px;
  background:rgba(246,244,236,0.05);border:1px solid rgba(246,244,236,0.12);
}
#scanner-budget{flex:1.7;min-width:230px;}
.meter[hidden]{display:none;}
.meter-label{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--chalk-dim);
}
.meter-value{
  font-family:'Anton',sans-serif;font-size:34px;line-height:1.1;
  color:var(--gold-bright);letter-spacing:0.02em;
}
.meter-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--chalk-dim);min-height:14px;}
.meter-bar{height:6px;border-radius:3px;overflow:hidden;background:rgba(246,244,236,0.12);margin-top:4px;}
#scanner-budget-fill{height:100%;background:var(--gold);transition:width .4s;}
#scanner-budget-fill.low{background:#e2665e;}
.meter.over{border-color:#e2665e;background:rgba(165,48,48,0.18);}
.meter.over .meter-value{color:#ff8a80;}
#scanner-video{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-height:100%;
  object-fit:cover;
  border-radius:8px;
}
#scanner-canvas{display:none;}
#scanner-preview{display:block;width:100%;height:100%;min-height:260px;max-height:min(55dvh,460px);object-fit:cover;background:#000;border-radius:8px;}
#scanner-result{margin-top:12px;}
#scanner-modal-backdrop .modal-actions{
  position:sticky;
  bottom:calc(-1 * clamp(14px,3vw,24px));
  z-index:2;
  padding:10px 0 0;
  background:linear-gradient(180deg,rgba(17,48,31,0.9),rgba(10,26,16,0.99));
}
#scanner-result:empty{display:none;}
.modal-card h2{
  font-family:'Anton',sans-serif;
  font-size:20px;
  color:var(--chalk);
  margin:0 0 10px;
  letter-spacing:0.02em;
}
.modal-sub{
  font-size:13px;
  color:var(--chalk-dim);
  line-height:1.5;
  margin:0 0 14px;
  font-family:'Oswald',sans-serif;
}
.modal-sub.scanner-close-blocked{
  padding:14px 16px;
  border:2px solid #ff6b6b;
  border-radius:8px;
  background:rgba(120,24,24,0.45);
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
}
.modal-sub b{color:var(--gold-bright);font-family:'IBM Plex Mono',monospace;}
#bulk-trade-input{
  width:100%;
  min-height:110px;
  padding:11px 13px;
  border-radius:6px;
  border:1px solid rgba(246,244,236,0.18);
  background:rgba(246,244,236,0.06);
  color:var(--chalk);
  font-size:14px;
  font-family:'IBM Plex Mono',monospace;
  outline:none;
  resize:vertical;
  transition:border-color .15s;
}
#bulk-trade-input:focus{border-color:var(--gold);}
.modal-divider{
  display:flex;align-items:center;gap:10px;
  margin:14px 0;
  color:var(--chalk-dim);
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.modal-divider::before,.modal-divider::after{
  content:"";flex:1;height:1px;
  background:rgba(246,244,236,0.15);
}
.modal-actions{
  display:flex;gap:10px;margin-top:16px;
}
.modal-btn{width:auto;flex:1;margin-top:0;}
.numbered-inputs{
  display:flex;align-items:flex-end;gap:10px;margin-bottom:6px;
}
.numbered-field{flex:1;}
.numbered-field label{
  display:block;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold-bright);
  margin-bottom:6px;
  font-family:'IBM Plex Mono',monospace;
}
.numbered-field input{
  width:100%;
  padding:11px 13px;
  border-radius:6px;
  border:1px solid rgba(246,244,236,0.18);
  background:rgba(246,244,236,0.06);
  color:var(--chalk);
  font-size:16px;
  font-family:'IBM Plex Mono',monospace;
  outline:none;
  transition:border-color .15s;
}
.numbered-field input:focus{border-color:#7fb3ff;}
.numbered-sep{
  padding-bottom:11px;
  color:var(--chalk-dim);
  font-family:'IBM Plex Mono',monospace;
  font-size:20px;
}
.rk.numbered-tag{
  background:#3d6fa8;
  color:#fff;
}
.keycap{
  flex:0 0 auto;
  min-width:20px;height:20px;padding:0 5px;
  border-radius:5px;
  background:rgba(246,244,236,0.1);
  border:1px solid rgba(246,244,236,0.28);
  border-bottom:2px solid rgba(246,244,236,0.28);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--chalk);
}
.shortcuts-desc{
  font-size:11.5px;color:var(--chalk-dim);line-height:1.3;
  font-family:'Oswald',sans-serif;
}
@media(max-width:600px){
  .topbar{padding:10px 12px;gap:8px;grid-template-columns:minmax(0,1fr) auto;}
  .topbar .title-block{grid-column:1;grid-row:1;}
  .topbar-tools{grid-column:2;grid-row:1;}
  .topbar-pages{grid-column:1 / -1;grid-row:2;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 5px;}
  .topbar-pages .nav-btn{flex:0 0 auto;}
  .topbar-account{grid-column:1 / -1;grid-row:3;justify-content:space-between;}
  .user-chip{max-width:calc(100vw - 150px);}
  .topbar-tools-menu{right:0;}
  .scoreboard,.controls,#sets-container{padding-left:16px;padding-right:16px;}
  .scoreboard{margin-top:16px;gap:12px;}
  .controls{margin-top:14px;gap:8px;}
  #sets-container{margin-top:16px;gap:10px;}
  #scanner-modal-backdrop .modal-card{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);}
  .shortcuts-panel{
    position:static;
    max-width:none;
    margin:18px 22px 30px;
  }
}
@media (min-width:601px) and (max-width:1200px){
  .topbar{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;}
  .topbar .title-block{grid-column:1;grid-row:1;}
  .topbar-account{grid-column:2;grid-row:1;}
  .topbar-pages{grid-column:1;grid-row:2;justify-content:flex-start;}
  .topbar-tools{grid-column:2;grid-row:2;justify-self:end;}
}


/* Public account, legal and billing UI */
.auth-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.auth-actions button{flex:1;min-width:150px}
.login-mode-heading{font-family:Oswald,sans-serif;font-size:17px;font-weight:500;margin:12px 0;color:var(--gold-bright,#e8c04a)}
.login-disclaimer a,.legal-page a{color:var(--gold-bright,#e8c04a)}
.legal-page{max-width:900px;margin:24px auto;padding:24px;background:var(--panel,#10251a);border:1px solid var(--gold-dim,#665);border-radius:12px;color:var(--text,#eee);line-height:1.65}
.legal-page h1,.legal-page h2,.legal-page h3{font-family:Oswald,sans-serif}
.legal-page .btn{margin:8px 8px 8px 0}
.tutorial-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:9999;display:none;align-items:center;justify-content:center;padding:18px}
.tutorial-card{width:min(560px,100%);max-height:90vh;overflow:auto;background:#10251a;color:#f7f5ee;border:1px solid #c9a227;border-radius:14px;padding:24px;box-shadow:0 18px 60px #0009}
.tutorial-card h2{font-family:Oswald,sans-serif;color:#e8c04a;margin-top:0}
.tutorial-card li{margin:10px 0;line-height:1.5}
.tutorial-card button{margin-top:12px}

/* In-scanner help and keyboard shortcut guide */
.scanner-tutorial{margin:14px 0;padding:16px;background:#10251a;border:1px solid #c9a227;border-radius:10px;color:#f7f5ee;max-height:42vh;overflow:auto}
.scanner-tutorial[hidden]{display:none}
.scanner-tutorial h3{color:#e8c04a;margin:4px 0 8px;font-family:Oswald,sans-serif}
.scanner-tutorial li,.scanner-tutorial p{line-height:1.5;margin:7px 0}

/* Customer settings: profile and subscription in one easy-to-find place */
.settings-page{margin-bottom:40px}
.settings-section{margin:22px 0;padding:18px;background:rgba(0,0,0,.16);border:1px solid var(--gold-dim,#665);border-radius:10px}
.settings-section h3{margin:0 0 12px;color:var(--gold-bright,#e8c04a)}
.settings-details{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-details>div{min-width:0;padding:12px;background:rgba(0,0,0,.14);border-radius:7px}
.settings-details dt{font-size:12px;opacity:.75;margin-bottom:5px}
.settings-details dd{margin:0;overflow-wrap:anywhere;font-weight:600}
.settings-note{font-size:13px;opacity:.8}
#settings-subscription-status{padding:12px;border-left:3px solid var(--gold-bright,#e8c04a);background:rgba(0,0,0,.15);border-radius:4px}
@media(max-width:600px){.settings-details{grid-template-columns:1fr}.settings-section{padding:13px}}

/* Account deletion is deliberately separated from everyday account actions. */
.settings-danger-section{border-color:rgba(210,75,75,.55);background:rgba(110,20,20,.12)}
.settings-danger-section h3{color:#f08a8a}
.settings-delete-btn{background:transparent!important;color:#ffaaaa!important;border:1px solid #b94a4a!important;font-weight:700}
.settings-delete-btn:hover:not(:disabled){background:rgba(185,74,74,.18)!important}
.settings-delete-btn:disabled{opacity:.6;cursor:wait}

/* Child safety and parent portal additions */
.login-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg,#0b1711);overflow:auto}
#signup-safety-fields .field small{display:block;margin-top:6px;line-height:1.45;color:var(--muted,#aab5ac);font-size:12px}
#age-onboarding .login-card,#pending-parent-screen .login-card{max-width:480px;width:100%}
.feature-request-actions{display:flex;gap:8px;flex-wrap:wrap}
.parent-child-card{border:1px solid var(--line,#34463b);border-radius:12px;padding:14px;margin:12px 0}
.parent-child-card h3{margin-top:0}
.parent-permissions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.parent-request-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line,#34463b)}
.parent-request-row .request-actions{display:flex;gap:6px}

/* Sound legend shown in the required AI scanner tutorial */
.scanner-sound-guide{display:grid;gap:9px;margin:10px 0 14px}
.scanner-sound-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.045)}
.scanner-sound-row p{margin:4px 0 0;line-height:1.45}
.scanner-sound-demo{flex-shrink:0;white-space:nowrap}
@media(max-width:560px){.scanner-sound-row{align-items:flex-start;flex-direction:column}.scanner-sound-demo{width:100%}}

/* Access paywall and AI-scanner plan pages.
   These sit in normal page flow under the sticky top bar (like Settings and
   Parent Controls) so they can never cover the navigation. */
#access-paywall,
#subscription-page{
  width:calc(100% - 32px);
  max-width:900px;
  margin:24px auto 40px;
  overflow-wrap:anywhere;
}
#access-paywall h2,
#subscription-page h2{
  margin-top:0;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.2;
}
#access-paywall .btn,
#subscription-page .btn{
  min-height:44px;
  max-width:100%;
  white-space:normal;
}
#subscription-page label{
  line-height:1.5;
}
@media(max-width:600px){
  #access-paywall,
  #subscription-page{
    width:calc(100% - 20px);
    margin-top:14px;
    padding:18px 16px;
    border-radius:12px;
  }
  #access-paywall .btn,
  #subscription-page .btn{
    width:100%;
    margin:6px 0;
  }
}

/* The floating keyboard-shortcuts / export panel belongs to the collection page only. */
body:has(#collection-page[style*="display: none"]) .shortcuts-panel,
body:has(#collection-page[style*="display: none"]) .shortcuts-show-btn{
  display:none !important;
}

/* Bug report form */
#bug-report-form { display: grid; gap: 10px; }
#bug-report-form label { color: var(--gold-bright); font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em; }
#bug-report-description { width: 100%; min-height: 120px; resize: vertical; padding: 12px; border: 1px solid rgba(246,244,236,.22); border-radius: 7px; background: rgba(246,244,236,.06); color: var(--chalk); font: inherit; }
#bug-report-screenshot { width: 100%; max-width: 100%; color: var(--chalk-dim); }
#bug-report-status { min-height: 1.4em; overflow-wrap: anywhere; }
#bug-report-submit:disabled { opacity: .65; cursor: wait; }


/* Prominent red shortcut for reporting a problem from any app page. */
.report-bug-nav-btn{background:#b4232f!important;border:1px solid #e35d68!important;color:#fff!important;font-weight:800!important}
.report-bug-nav-btn:hover{background:#d12d3b!important}
.report-bug-nav-btn:focus-visible{outline:3px solid #ffb4bb;outline-offset:2px}


/* ---------- QUALITY-OF-LIFE MOTION ---------- */

/* Short, low-distance entrance when an in-app page is shown. */
#collection-page,
#selling-page,
#hobby-page,
#business-tracker-page,
#settings-page,
#parent-controls-page,
#subscription-page,
#access-paywall,
#login-screen,
#age-onboarding,
#pending-parent-screen {
  animation: fw-page-enter var(--fw-motion-page) var(--fw-motion-ease) both;
}
@keyframes fw-page-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cards lift gently on hover; owned cards get a restrained gold edge/glow. */
.card-tile {
  transition: background var(--fw-motion-fast) ease,
    border-color var(--fw-motion-fast) ease,
    transform var(--fw-motion-fast) var(--fw-motion-ease),
    box-shadow var(--fw-motion-fast) ease;
}
.card-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0,0,0,.18);
}
.card-tile.owned {
  box-shadow: inset 3px 0 0 rgba(232,196,74,.48);
}
.card-tile.owned:hover {
  border-color: var(--gold-bright);
  box-shadow: inset 3px 0 0 rgba(232,196,74,.65), 0 5px 16px rgba(201,162,39,.13);
}
.card-tile .check-badge {
  transition: opacity var(--fw-motion-fast) ease, transform var(--fw-motion-fast) var(--fw-motion-ease), background var(--fw-motion-fast) ease;
}

/* Reusable shimmer skeletons for asynchronous panels. */
.fw-skeleton-stack { display: grid; gap: 10px; padding: 4px 0; }
.fw-skeleton-card {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(246,244,236,.10);
  border-radius: 9px;
  background: rgba(246,244,236,.035);
}
.fw-skeleton-line {
  display: block;
  height: 10px;
  max-width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(246,244,236,.055) 20%, rgba(246,244,236,.13) 45%, rgba(246,244,236,.055) 70%);
  background-size: 220% 100%;
  animation: fw-skeleton-shimmer 1.15s ease-in-out infinite;
}
.fw-skeleton-line.short { width: 34%; }
.fw-skeleton-line.medium { width: 62%; }
.fw-skeleton-line.long { width: 88%; }
@keyframes fw-skeleton-shimmer { to { background-position: -220% 0; } }

/* Keep focus and ordinary controls feeling responsive without large movement. */
button, .btn, .btn-primary, .btn-ghost, .nav-btn, select, input, textarea {
  transition-property: color, background-color, border-color, box-shadow, opacity;
  transition-duration: var(--fw-motion-fast);
  transition-timing-function: ease;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 3px;
}

/* Accessibility: no animated movement or shimmer when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  #collection-page, #selling-page, #hobby-page, #settings-page,
  #business-tracker-page,
  #parent-controls-page, #subscription-page, #access-paywall,
  #login-screen, #age-onboarding, #pending-parent-screen {
    transform: none !important;
  }
  .card-tile:hover { transform: none; }
}

/* ---------- ANIMATIONS (section 2) ---------- */

/* A card that has just been added: tick pops in and a gold ring fades out. */
.card-tile.just-owned{animation:fw-card-added 650ms var(--fw-motion-ease) 1;}
.card-tile.just-owned .check-badge{animation:fw-tick-pop 460ms cubic-bezier(.3,1.6,.5,1) 1;}
@keyframes fw-card-added{
  0%{box-shadow:inset 3px 0 0 rgba(232,196,74,.48),0 0 0 0 rgba(232,196,74,.65);}
  100%{box-shadow:inset 3px 0 0 rgba(232,196,74,.48),0 0 0 14px rgba(232,196,74,0);}
}
@keyframes fw-tick-pop{
  0%{transform:scale(.3);opacity:0;}
  60%{transform:scale(1.28);opacity:1;}
  100%{transform:scale(1);}
}

/* Pop-ups: backdrop fades in, card rises into place. */
.modal-backdrop.show{animation:fw-fade-in 160ms ease both;}
.modal-backdrop.show .modal-card{animation:fw-pop-in 220ms var(--fw-motion-ease) both;}
.tutorial-overlay{animation:fw-fade-in 180ms ease both;}
.tutorial-card{animation:fw-pop-in 240ms var(--fw-motion-ease) both;}
@keyframes fw-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes fw-pop-in{
  from{opacity:0;transform:translateY(12px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* Scoreboard and controls settle in one after another when the collection page opens.
   These are static elements (not rebuilt with the card list), so this only plays on page show. */
.scoreboard .score-panel{animation:fw-rise 340ms var(--fw-motion-ease) both;}
.scoreboard .score-panel:nth-child(2){animation-delay:70ms;}
.controls{animation:fw-rise 340ms var(--fw-motion-ease) 120ms both;}
@keyframes fw-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* Login card eases in. */
.login-card{animation:fw-pop-in 320ms var(--fw-motion-ease) both;}

/* Buttons: a small lift on hover, a press on click. */
.btn-primary,.btn-ghost,.nav-btn,.signout-btn,.export-dupes-btn{
  transition-property:color,background-color,border-color,box-shadow,opacity,filter,transform;
  transition-duration:var(--fw-motion-fast);
}
.btn-primary:not(:disabled):hover,.nav-btn:not(:disabled):hover,.export-dupes-btn:not(:disabled):hover{transform:translateY(-1px);}
.btn-primary:not(:disabled):hover{box-shadow:0 6px 16px rgba(201,162,39,.22);}
.btn-primary:not(:disabled):active,.btn-ghost:not(:disabled):active,.nav-btn:not(:disabled):active,.export-dupes-btn:not(:disabled):active{transform:translateY(1px) scale(.98);}

/* Progress bar: a soft light sweeps across the fill so it feels alive. */
.pitch-bar .fill{position:relative;overflow:hidden;}
.pitch-bar .fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-100%);animation:fw-sweep 3.4s ease-in-out 1.2s infinite;
}
@keyframes fw-sweep{0%{transform:translateX(-100%);}55%,100%{transform:translateX(100%);}}

@media (prefers-reduced-motion: reduce){
  .pitch-bar .fill::after{display:none;}
  .btn-primary:hover,.nav-btn:hover,.export-dupes-btn:hover{transform:none !important;}
}

/* Settings has its own clear route back to the collection homepage. */
.settings-page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.settings-page-heading h2{margin:0}
.settings-home-btn{flex:0 0 auto}
@media(max-width:480px){.settings-page-heading{align-items:flex-start;flex-direction:column}.settings-home-btn{width:100%}}


/* ---------- POST-LOGIN LOADING SCREEN ---------- */
.auth-loading{
  position:fixed;inset:0;z-index:4000;
  display:none;align-items:center;justify-content:center;padding:24px;
  background:var(--pitch-dark);
}
.auth-loading-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:340px;}
.auth-loading-crest{
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 65%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;color:var(--ink);font-size:28px;
  box-shadow:0 0 0 6px rgba(201,162,39,.15);
}
.auth-loading-spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid rgba(246,244,236,.15);border-top-color:var(--gold-bright);
  animation:fw-spin .8s linear infinite;
}
.auth-loading p{margin:0;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.06em;color:var(--chalk-dim);line-height:1.6;}
@keyframes fw-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
  .auth-loading-spinner{animation:none;border-top-color:rgba(246,244,236,.15);border-right-color:var(--gold-bright);}
}