/* TV Tracker — dark theme, mobile first.
   Every colour lives in a custom property, so a light theme later means
   redefining this one block. */

:root{
  --bg:#0f1116; --bg-elev:#151822; --card:#1a1d26; --card-hi:#222634;
  --text:#e8eaf0; --muted:#8b90a0; --dim:#5d6270;
  --accent:#e5a00d; --accent-soft:rgba(229,160,13,.14);
  --border:#262a36; --good:#3ecf8e; --danger:#e5484d;
  --radius:12px;
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  padding-bottom:76px; min-height:100vh;
}
@media(min-width:720px){ body{padding-bottom:40px} }
img{max-width:100%; display:block}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer}
a{color:inherit; text-decoration:none}
[hidden]{display:none !important}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(15,17,22,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px; padding:12px 16px;
}
.brand{font-weight:700; font-size:17px; letter-spacing:-.2px; margin-right:auto}
.brand span{color:var(--accent)}
.topnav{display:none; gap:4px; margin-right:8px}
@media(min-width:720px){ .topnav{display:flex} .topbar{padding:14px 24px} }
.topnav a{padding:7px 14px; border-radius:999px; font-size:14px; font-weight:600;
  color:var(--muted); transition:.15s}
.topnav a:hover{color:var(--text); background:var(--card)}
.topnav a.on{color:#1a1200; background:var(--accent)}

.icon-btn{background:var(--card); border:1px solid var(--border); border-radius:10px;
  width:38px; height:38px; display:grid; place-items:center; padding:0}
.icon-btn:hover{background:var(--card-hi)}
@media(min-width:720px){ .icon-btn.only-mobile{display:none} }

/* profile avatar + menu */
.avatar{
  width:34px; height:34px; border-radius:50%; border:0; padding:0;
  display:grid; place-items:center; font-weight:750; font-size:14.5px;
  color:#12140f; flex:0 0 auto; overflow:hidden;
}
.avatar.lg{width:74px; height:74px; font-size:29px}
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.avatar.has-photo{box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.menu-wrap{position:relative}
.menu{
  position:absolute; right:0; top:44px; min-width:190px; z-index:70;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:12px;
  padding:6px; box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.menu button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:0; padding:9px 11px; border-radius:8px;
  font-size:13.5px; color:var(--text);
}
.menu button:hover{background:var(--card)}
.menu .who{display:flex; align-items:center; gap:10px;
  padding:9px 11px 11px; border-bottom:1px solid var(--border);
  margin-bottom:5px; font-size:12px; color:var(--dim)}
.menu .who > span{min-width:0}
.menu .who b{display:block; font-size:14.5px; color:var(--text); font-weight:650;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- layout ---------- */
main{padding:18px 16px 24px; max-width:1200px; margin:0 auto}
@media(min-width:720px){ main{padding:26px 24px 40px} }
.section-head{display:flex; align-items:baseline; gap:10px; margin:0 0 12px}
.section-head h2{font-size:15px; font-weight:700; margin:0; letter-spacing:.3px;
  text-transform:uppercase}
.section-head .count{font-size:13px; color:var(--dim); font-weight:600}
.section + .section{margin-top:30px}

/* ---------- poster wall behind the profile picker ---------- */
/* Posters at half strength and slightly soft, masked so they are strongest at
   the left and right edges and fade away towards the middle, where the
   profiles sit. On a phone the profiles fill the width instead, so the mask
   runs top-to-bottom there rather than side-to-side. */
.wall{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  display:grid; gap:8px; padding:8px; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  opacity:.5;
  filter:blur(1.5px) saturate(.9);
  --wall-mask:linear-gradient(180deg,
      rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 12%,
      rgba(0,0,0,.18) 38%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.18) 62%,
      rgba(0,0,0,.9) 88%, rgba(0,0,0,1) 100%);
  -webkit-mask-image:var(--wall-mask);
  mask-image:var(--wall-mask);
}
@media(min-width:720px){
  .wall{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    --wall-mask:linear-gradient(90deg,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 14%,
        rgba(0,0,0,.20) 38%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.20) 62%,
        rgba(0,0,0,.92) 86%, rgba(0,0,0,1) 100%);
  }
}
.wall img{width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:9px}

/* Only a whisper of shade now — the mask above does most of the work. */
.wall-fade{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 52% 46% at 50% 46%,
    rgba(15,17,22,.62) 0%, rgba(15,17,22,.30) 60%, rgba(15,17,22,0) 100%);
}
.center h1, .center .brand-lg{text-shadow:0 2px 14px rgba(0,0,0,.85)}
.center p.lead{text-shadow:0 1px 10px rgba(0,0,0,.9)}
.pname{text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* ---------- centred screens (PIN, profiles) ---------- */
.center{
  position:relative; z-index:2;
  min-height:78vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:24px 16px;
}
.center h1{font-size:24px; margin:0 0 8px; letter-spacing:-.3px}
.center p.lead{color:var(--muted); font-size:14px; margin:0 0 26px; max-width:34ch}
.brand-lg{font-weight:750; font-size:21px; margin-bottom:26px; letter-spacing:-.3px}
.brand-lg span{color:var(--accent)}

.pin{display:flex; gap:9px; margin-bottom:16px}
.pin input{
  width:46px; height:58px; text-align:center; font-size:24px; font-weight:700;
  background:var(--card); border:2px solid var(--border); border-radius:11px;
  color:var(--text); outline:none; font-family:inherit;
}
.pin input:focus{border-color:var(--accent)}
.pin input.bad{border-color:var(--danger); animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.err{color:var(--danger); font-size:13.5px; font-weight:600; min-height:20px}

.profiles{display:flex; flex-wrap:wrap; gap:26px; justify-content:center; margin-bottom:8px}
.profile{position:relative; width:96px}
.pick{background:none; border:0; padding:0; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:9px}
.pname{font-size:13.5px; color:var(--muted); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.pick:hover .pname{color:var(--text)}
.pick:hover .avatar{outline:3px solid var(--text); outline-offset:3px}
.pick .add{width:74px; height:74px; border-radius:50%; border:2px dashed var(--border);
  display:grid; place-items:center; font-size:29px; color:var(--dim)}
.pick:hover .add{border-color:var(--accent); color:var(--accent); outline:none}

/* pencil badge — edit a profile without leaving this screen */
.edit-badge{
  position:absolute; top:-2px; right:2px; width:30px; height:30px; border-radius:50%;
  background:var(--card); border:1px solid var(--border); color:var(--text);
  display:grid; place-items:center; padding:0; transition:.15s;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
  opacity:0; transform:scale(.85);
}
.edit-badge svg{width:14px; height:14px}
.profile:hover .edit-badge, .edit-badge:focus-visible{opacity:1; transform:scale(1)}
.edit-badge:hover{background:var(--accent); border-color:var(--accent); color:#1a1200}
/* touch screens have no hover, so keep it visible there */
@media(hover:none){ .edit-badge{opacity:1; transform:scale(1)} }
.picker-hint{margin:22px 0 0; font-size:12.5px; color:var(--dim);
  text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* ---------- Up Next strip ---------- */
.upnext{display:flex; gap:12px; overflow-x:auto; padding:2px 0 10px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:var(--border) transparent}
.upnext::-webkit-scrollbar{height:6px}
.upnext::-webkit-scrollbar-thumb{background:var(--border); border-radius:99px}
.un-card{flex:0 0 268px; scroll-snap-align:start; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius); padding:10px;
  display:flex; gap:11px; align-items:center; transition:.15s}
.un-card:hover{background:var(--card-hi); border-color:#333848}
.un-card img{width:50px; aspect-ratio:2/3; object-fit:cover; border-radius:7px; flex:0 0 auto}
.un-body{min-width:0; flex:1; cursor:pointer}
.un-show{font-weight:650; font-size:14px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.un-ep{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; margin-top:1px}
.un-behind{font-size:11px; color:var(--accent); font-weight:650; margin-top:3px}
.un-check{flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:transparent;
  border:2px solid var(--border); color:var(--muted); display:grid; place-items:center;
  transition:.15s; font-size:19px}
.un-check:hover{border-color:var(--good); color:var(--good); background:rgba(62,207,142,.1)}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:6px; margin:0 0 16px; flex-wrap:wrap}
.tab{background:var(--card); border:1px solid var(--border); border-radius:999px;
  padding:6px 15px; font-size:13.5px; font-weight:600; color:var(--muted)}
.tab:hover{color:var(--text)}
.tab.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

/* ---------- poster grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); gap:16px}
@media(min-width:720px){ .grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:22px} }
.card{position:relative; transition:.18s; cursor:pointer}
.card:hover{transform:translateY(-3px)}
.poster{position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--card); aspect-ratio:2/3; border:1px solid var(--border)}
.poster img{width:100%; height:100%; object-fit:cover}
.poster .noimg{width:100%; height:100%; display:grid; place-items:center;
  color:var(--dim); font-size:12px; padding:10px; text-align:center}
.card:hover .poster{border-color:#3a4052; box-shadow:0 10px 26px rgba(0,0,0,.5)}
.badge{position:absolute; top:8px; right:8px; z-index:2; background:var(--accent);
  color:#1a1200; font-size:11.5px; font-weight:750; padding:3px 8px; border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.45)}
.badge.done{background:var(--good); color:#08210f}
.pbar{position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.6)}
.pbar i{display:block; height:100%; background:var(--accent)}
.pbar i.full{background:var(--good)}
.card h3{font-size:13.5px; font-weight:650; margin:9px 0 3px; line-height:1.3}
.card .sub{font-size:11.5px; color:var(--dim); font-variant-numeric:tabular-nums}
.card .next{font-size:11.5px; color:var(--muted); margin-top:2px}

/* ---------- show detail ---------- */
.back{display:inline-flex; align-items:center; gap:6px; color:var(--muted);
  font-size:13.5px; font-weight:600; background:none; border:0; padding:6px 0;
  margin-bottom:12px}
.back:hover{color:var(--text)}
.hero{display:flex; gap:16px; margin-bottom:22px}
.hero > img, .hero > .noimg{width:106px; flex:0 0 auto; aspect-ratio:2/3;
  object-fit:cover; border-radius:var(--radius); border:1px solid var(--border)}
.hero > .noimg{background:var(--card); display:grid; place-items:center; color:var(--dim)}
@media(min-width:720px){ .hero{gap:26px} .hero > img, .hero > .noimg{width:186px} }
.hero h1{font-size:22px; margin:0 0 6px; line-height:1.2; letter-spacing:-.3px}
@media(min-width:720px){ .hero h1{font-size:31px} }
.hero .meta{font-size:12.5px; color:var(--muted); margin-bottom:10px}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.chip{background:var(--card); border:1px solid var(--border); border-radius:999px;
  padding:3px 10px; font-size:11.5px; color:var(--muted)}
.summary{font-size:13.5px; color:var(--muted); margin:0 0 14px; display:none}
@media(min-width:720px){ .summary{display:block; max-width:62ch} }
.summary-m{font-size:13px; color:var(--muted); margin:0 0 16px}
@media(min-width:720px){ .summary-m{display:none} }
.summary p, .summary-m p{margin:0 0 8px}
.progress-line{display:flex; align-items:center; gap:10px; margin-bottom:14px;
  font-size:12.5px; color:var(--muted)}
.progress-line .track{flex:1; max-width:260px; height:6px; background:var(--border);
  border-radius:99px; overflow:hidden}
.progress-line .track i{display:block; height:100%; background:var(--accent)}
.progress-line .track i.full{background:var(--good)}
.actions{display:flex; gap:9px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent);
  color:#1a1200; border:0; border-radius:10px; padding:11px 18px; font-weight:700;
  font-size:14px}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55; cursor:default; filter:none}
.btn.ghost{background:var(--card); color:var(--text); border:1px solid var(--border);
  font-weight:600}
.btn.ghost:hover{background:var(--card-hi)}
.btn.danger{background:none; border:1px solid var(--border); color:var(--danger);
  font-weight:600}
.btn.danger:hover{border-color:var(--danger); background:rgba(229,72,77,.08)}
.btn.sm{padding:8px 14px; font-size:13px}

/* seasons */
.season{border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-elev); margin-bottom:10px; overflow:hidden}
.season > summary{list-style:none; cursor:pointer; padding:13px 15px;
  display:flex; align-items:center; gap:10px; font-weight:650; font-size:14.5px}
.season > summary::-webkit-details-marker{display:none}
.season > summary:hover{background:var(--card)}
.season .caret{color:var(--dim); transition:.2s; font-size:11px}
.season[open] .caret{transform:rotate(90deg)}
.season .s-count{margin-left:auto; font-size:12px; color:var(--dim); font-weight:600;
  font-variant-numeric:tabular-nums}
.mark-season{background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:5px 11px; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer}
.mark-season:hover{color:var(--accent); border-color:var(--accent)}
.mark-season.undo{color:var(--dim)}
.mark-season.undo:hover{color:var(--danger); border-color:var(--danger)}
.not-tracked{background:var(--accent-soft); border:1px solid var(--accent);
  border-radius:var(--radius); padding:12px 15px; margin:0 0 16px;
  font-size:13.5px; color:var(--text)}
.eplist{border-top:1px solid var(--border)}
.ep{border-bottom:1px solid rgba(38,42,54,.6)}
.ep:last-child{border-bottom:0}
.ep:hover{background:var(--card)}
.ep.unaired{opacity:.5}
.ep-row{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:10px 15px}
.ep-main{background:none; border:0; padding:0; text-align:left; min-width:0; width:100%}
.ep-caret{color:var(--dim); font-size:10px; flex:0 0 auto; transition:.2s; margin-left:2px}
.ep-main.open .ep-caret{transform:rotate(180deg); color:var(--accent)}
.ep-main:hover .ep-title{color:var(--accent)}
.ep-desc{padding:0 15px 14px 49px; max-width:78ch}
.ep-desc p{margin:0 0 8px; font-size:13px; color:var(--muted); line-height:1.6}
.ep-desc p:last-child{margin-bottom:0}
.ep-desc p.none{color:var(--dim); font-style:italic}
.ep-line{display:flex; align-items:baseline; gap:9px; min-width:0}
.ep-code{font-size:11.5px; font-weight:700; color:var(--dim);
  font-variant-numeric:tabular-nums; flex:0 0 auto}
.ep-title{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ep.seen .ep-title{color:var(--muted)}
.ep-meta{font-size:11.5px; color:var(--dim); margin-top:1px}
.ep-upto{background:none; border:1px solid transparent; border-radius:8px;
  padding:4px 8px; color:var(--dim); font-size:13px; opacity:0; transition:.15s}
.ep:hover .ep-upto{opacity:1}
.ep-title{transition:color .15s}
.ep-upto:hover{color:var(--accent); border-color:var(--accent)}
@media(hover:none){ .ep-upto{opacity:.55} }
input[type=checkbox]{appearance:none; -webkit-appearance:none; margin:0;
  width:22px; height:22px; border:2px solid var(--dim); border-radius:6px;
  background:transparent; cursor:pointer; display:grid; place-items:center; transition:.12s}
input[type=checkbox]:hover{border-color:var(--good)}
input[type=checkbox]:checked{background:var(--good); border-color:var(--good)}
input[type=checkbox]:checked::after{content:'✓'; color:#08210f; font-size:14px;
  font-weight:900; line-height:1}
.ep .spacer{width:22px}

/* ---------- upcoming ---------- */
.day-group{margin-bottom:26px}
.day-head{font-size:12px; font-weight:750; letter-spacing:.7px; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px; padding-bottom:7px; border-bottom:1px solid var(--border)}
.up-row{display:flex; gap:13px; align-items:center; padding:11px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--border); margin-bottom:9px; cursor:pointer}
.up-row:hover{background:var(--card-hi)}
.up-row img{width:44px; aspect-ratio:2/3; object-fit:cover; border-radius:6px; flex:0 0 auto}
.up-body{min-width:0; flex:1}
.up-show{font-weight:650; font-size:14.5px}
.up-ep{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.up-when{text-align:right; flex:0 0 auto}
.up-date{font-size:12.5px; font-weight:650; font-variant-numeric:tabular-nums}
.up-count{font-size:11.5px; color:var(--accent); font-weight:650}

/* ---------- search ---------- */
.searchbar{display:flex; gap:9px; align-items:center; background:var(--card);
  border:1px solid var(--border); border-radius:12px; padding:0 14px; margin-bottom:20px}
.searchbar:focus-within{border-color:var(--accent)}
.searchbar input{flex:1; background:none; border:0; outline:none; color:var(--text);
  font-family:inherit; font-size:15px; padding:14px 0}
.searchbar input::placeholder{color:var(--dim)}
.search-note{margin:-10px 0 18px; font-size:12.5px; color:var(--muted);
  line-height:1.55; padding:0 2px}
.search-note b{color:var(--text); font-weight:650}
.res{display:flex; gap:14px; padding:13px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius); margin-bottom:11px;
  cursor:pointer; transition:.15s}
.res:hover{background:var(--card-hi); border-color:#3a4052}
.res:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.res img, .res .noimg{width:62px; aspect-ratio:2/3; object-fit:cover; border-radius:8px;
  flex:0 0 auto}
.res .noimg{background:var(--bg-elev); display:grid; place-items:center; color:var(--dim);
  font-size:11px}
.res-body{flex:1; min-width:0}
.res h3{margin:0 0 3px; font-size:15.5px; font-weight:650}
.res .meta{font-size:12px; color:var(--dim); margin-bottom:6px}
.res p{margin:0; font-size:12.5px; color:var(--muted); display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.res-act{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.res-open{font-size:11.5px; color:var(--dim); font-weight:600; opacity:0; transition:.15s}
.res:hover .res-open{opacity:1}
@media(hover:none){ .res-open{opacity:.7} }
.track-btn{background:var(--accent); color:#1a1200; border:0; border-radius:9px;
  padding:8px 14px; font-weight:700; font-size:13px; white-space:nowrap}
.track-btn.on{background:transparent; border:1px solid var(--good); color:var(--good)}

/* ---------- discover ---------- */
.pick-card .poster{transition:.15s}
.pick-card.chosen .poster{border-color:var(--good); box-shadow:0 0 0 2px var(--good)}
.pick-card.chosen h3{color:var(--good)}

.rec-bar{
  position:sticky; bottom:84px; z-index:40; margin:18px 0 0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius); padding:11px 14px;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
@media(min-width:720px){ .rec-bar{bottom:16px} }
.rec-count{font-size:13px; color:var(--muted); font-weight:600; margin-right:auto}
.rec-count small{display:block; font-size:11.5px; color:var(--dim); font-weight:500;
  margin-top:2px}

.rec-loading{
  text-align:center; padding:30px 20px; color:var(--muted);
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:26px;
}
.rec-loading p{margin:0; font-size:14px; line-height:1.7}
.rec-loading .spinner{margin:0 auto 14px}

.rec .rec-reason{
  margin:0 0 7px; padding:8px 11px; border-radius:9px;
  background:var(--accent-soft); border-left:3px solid var(--accent);
  color:var(--text); font-size:13.5px; line-height:1.65;
  display:block; -webkit-line-clamp:none;
}

/* ---------- settings ---------- */
.panel{background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; margin-bottom:16px; max-width:640px}
.panel h2{margin:0 0 4px; font-size:16px}
.panel .hint{margin:0 0 16px; font-size:13px; color:var(--muted)}
.row{display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--border)}
.row:last-of-type{border-bottom:0}
.row .who{flex:1; min-width:0; font-weight:650; font-size:14.5px}
.row .who small{display:block; font-weight:400; font-size:12px; color:var(--dim)}
.field{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.field input{flex:1; min-width:150px; background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:11px 13px; color:var(--text); font-family:inherit;
  font-size:14px; outline:none}
.field input:focus{border-color:var(--accent)}

/* ---------- add / edit profile dialog ---------- */
.backdrop{position:fixed; inset:0; z-index:80; background:rgba(6,7,10,.72);
  backdrop-filter:blur(3px)}
.dialog{
  position:fixed; z-index:81; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow-y:auto;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:16px;
  padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.dialog h2{margin:0 0 16px; font-size:18px; text-align:center}
.dialog .preview{display:flex; justify-content:center; margin-bottom:18px}
.dialog .lbl{display:block; font-size:11.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--dim); margin:16px 0 8px}
.dialog #pname{width:100%; background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:12px 13px; color:var(--text); font-family:inherit;
  font-size:15px; outline:none}
.dialog #pname:focus{border-color:var(--accent)}
/* picture chooser: emoji / poster / photo */
.ptabs{display:flex; gap:4px; background:var(--card); border-radius:10px; padding:4px;
  margin-bottom:10px}
.ptab{flex:1; background:none; border:0; border-radius:7px; padding:7px 4px;
  font-size:12px; font-weight:650; color:var(--muted)}
.ptab:hover{color:var(--text)}
.ptab.on{background:var(--accent-soft); color:var(--accent)}
.pane{min-height:104px}
.pane-hint{margin:0 0 10px; font-size:12.5px; color:var(--muted); line-height:1.5}
.upload-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.upload-row label{cursor:pointer}

.faces{display:grid; grid-template-columns:repeat(8,1fr); gap:6px}
.face{background:var(--card); border:2px solid transparent; border-radius:10px;
  padding:0; height:38px; font-size:19px; line-height:1; display:grid; place-items:center}
.face:hover{background:var(--card-hi)}
.face.on{border-color:var(--accent); background:var(--accent-soft)}

.poster-pick{display:grid; grid-template-columns:repeat(5,1fr); gap:7px;
  max-height:210px; overflow-y:auto; padding:2px}
.pp{background:none; border:2px solid transparent; border-radius:9px; padding:0;
  overflow:hidden; line-height:0}
.pp img{width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:7px; opacity:.85}
.pp:hover img{opacity:1}
.pp.on{border-color:var(--accent)}
.pp.on img{opacity:1}
.swatches{display:flex; gap:9px; flex-wrap:wrap}
.swatch{width:32px; height:32px; border-radius:50%; border:2px solid transparent; padding:0}
.swatch.on{border-color:var(--text); outline:2px solid var(--bg-elev); outline-offset:-5px}
.dialog-actions{display:flex; gap:9px; justify-content:flex-end; margin-top:22px;
  align-items:center}
.dialog-actions .delete-slot{margin-right:auto}

/* ---------- generic ---------- */
.empty{text-align:center; padding:56px 20px; color:var(--dim)}
.empty .sub-hint{display:inline-block; margin-top:8px; font-size:13px; color:var(--muted);
  max-width:42ch}
.empty .big{font-size:38px; margin-bottom:12px; opacity:.5}
.empty p{margin:0 0 16px; font-size:14px}
.skeleton{background:var(--card); border-radius:var(--radius); animation:pulse 1.3s infinite}
.skeleton.poster-sk{aspect-ratio:2/3}
@keyframes pulse{50%{opacity:.5}}
.spinner{width:26px; height:26px; border:3px solid var(--border);
  border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite;
  margin:44px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- bottom tab bar (mobile) ---------- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(21,24,34,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--border); display:flex;
  padding:6px 0 max(6px, env(safe-area-inset-bottom))}
@media(min-width:720px){ .tabbar{display:none} }
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 0; font-size:10.5px; font-weight:600; color:var(--dim); min-height:52px;
  -webkit-tap-highlight-color:transparent}
.tabbar a.on{color:var(--accent)}
.tabbar svg{width:22px; height:22px}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:88px; z-index:99;
  background:var(--good); color:#08210f; font-weight:700; font-size:13.5px;
  padding:10px 18px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:.22s; max-width:88vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)}
.toast.bad{background:var(--danger); color:#fff}
@media(min-width:720px){ .toast{bottom:32px} }