:root{
  --bg:#10141B;
  --surface:#1A2029;
  --surface-2:#212836;
  --edge:#2B3242;
  --text:#EDE9DF;
  --text-dim:#8B93A3;
  --gold:#E3A438;
  --gold-dim:#8A6A2E;
  --teal:#4FA3A3;
  --rose:#D9607A;
  --green:#6FBF8B;
  --font-display: "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{margin:0; padding:0; height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
}
#app{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  background:var(--bg);
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  padding:18px 18px 12px;
  border-bottom:1px solid var(--edge);
}
.sprockets{
  display:flex; justify-content:space-between;
  padding:0 2px 10px;
}
.sprockets span{
  width:6px; height:6px; border-radius:50%;
  background:var(--edge);
}
.topbar-row{ display:flex; align-items:baseline; justify-content:space-between; }
.brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:28px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}
.brand small{
  display:block;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-top:2px;
  font-weight:400;
}
.add-btn{
  width:44px; height:44px; border-radius:50%;
  background:var(--gold); color:var(--bg);
  border:none; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(227,164,56,0.25);
}
.add-btn:active{ transform:scale(0.92); }

/* ---------- TMDB search ---------- */
.tmdb-row{ display:flex; gap:8px; margin-bottom:12px; }
.tmdb-row input{ flex:1; background:var(--surface-2); border:1px solid var(--edge); color:var(--text); border-radius:8px; padding:10px 12px; font-size:14px; font-family:var(--font-body); }
.tmdb-row input:focus{ outline:none; border-color:var(--gold); }
.tmdb-btn{
  background:var(--teal); color:var(--bg); border:none; border-radius:8px;
  padding:0 16px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
  font-family:var(--font-body);
}
.tmdb-btn:active{ opacity:0.8; }
.tmdb-results{ max-height:130px; overflow-y:auto; margin:-8px 0 12px; display:none; }
.tmdb-results.open{ display:block; }
.tmdb-result{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  border-bottom:1px solid var(--edge);
}
.tmdb-result:last-child{ border-bottom:none; }
.tmdb-result:active{ background:var(--surface-2); }
.tmdb-result img{ width:36px; height:54px; border-radius:4px; object-fit:cover; background:var(--surface-2); }
.tmdb-result-info{ flex:1; min-width:0; }
.tmdb-result-info .t{ font-size:14px; font-weight:600; }
.tmdb-result-info .s{ font-size:12px; color:var(--text-dim); }
.tmdb-loading{ text-align:center; padding:12px; color:var(--text-dim); font-size:13px; }

/* ---------- Search ---------- */
.search-bar{
  margin-top:12px;
  position:relative;
}
.search-bar input{
  width:100%;
  background:var(--surface);
  border:1px solid var(--edge);
  color:var(--text);
  border-radius:8px;
  padding:10px 12px 10px 36px;
  font-size:14px;
  font-family:var(--font-body);
}
.search-bar input::placeholder{ color:var(--text-dim); }
.search-bar input:focus{ outline:none; border-color:var(--gold); }
.search-icon{
  position:absolute;
  left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px;
  color:var(--text-dim);
  pointer-events:none;
}

/* ---------- Filter bar ---------- */
.filter-bar{
  display:flex; align-items:center; gap:8px;
  margin-bottom:12px; flex-wrap:wrap;
}
.filter-chip{
  font-size:12px; font-weight:600; padding:5px 12px;
  border-radius:20px; border:1px solid var(--edge);
  background:transparent; color:var(--text-dim); cursor:pointer;
  font-family:var(--font-body); white-space:nowrap;
}
.filter-chip.active{ background:var(--gold); color:var(--bg); border-color:var(--gold); }
.filter-chip:active{ opacity:0.7; }
.sort-select{
  margin-left:auto;
  background:var(--surface); border:1px solid var(--edge);
  color:var(--text); border-radius:8px;
  padding:5px 10px; font-size:12px;
  font-family:var(--font-body); cursor:pointer;
}

/* ---------- Content ---------- */
.content{
  flex:1;
  padding:16px 14px 90px;
}
.section-label{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:13px;
  color:var(--text-dim);
  margin:18px 4px 8px;
}
.section-label:first-child{ margin-top:2px; }

.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--text-dim);
}
.empty-state .glyph{ font-size:38px; margin-bottom:10px; opacity:0.6; }
.empty-state p{ margin:4px 0; font-size:14px; line-height:1.5; }

/* ---------- Ticket card ---------- */
.ticket{
  position:relative;
  background:var(--surface);
  border-radius:10px;
  margin-bottom:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  border:1px solid var(--edge);
}
.ticket:active{ background:var(--surface-2); }
.ticket::before, .ticket::after{
  content:"";
  position:absolute;
  width:14px; height:14px;
  background:var(--bg);
  border-radius:50%;
  top:50%; transform:translateY(-50%);
}
.ticket::before{ left:-7px; }
.ticket::after{ right:-7px; }
.ticket-stub{
  width:4px; align-self:stretch;
  background-image:repeating-linear-gradient(to bottom, var(--edge) 0 6px, transparent 6px 12px);
  border-radius:2px;
  flex-shrink:0;
}
.ticket-poster{
  width:44px; height:66px; border-radius:6px; object-fit:cover;
  flex-shrink:0; background:var(--surface-2);
}
.ticket-body{ flex:1; min-width:0; }
.ticket-title{
  font-size:16px; font-weight:600;
  margin:0 0 3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ticket-meta{
  font-size:12.5px; color:var(--text-dim);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.badge{
  display:inline-block;
  font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:20px;
  letter-spacing:0.3px;
}
.badge.watched{ background:rgba(111,191,139,0.15); color:var(--green); }
.badge.watching{ background:rgba(79,163,163,0.18); color:var(--teal); }
.badge.plan{ background:rgba(227,164,56,0.16); color:var(--gold); }
.badge.dropped, .badge.hold{ background:rgba(217,96,122,0.15); color:var(--rose); }

.rating-pill{
  font-family:var(--font-display);
  font-size:13px; font-weight:700;
  color:var(--gold);
}

.progress-track{
  height:5px; border-radius:3px; background:var(--edge);
  margin-top:8px; overflow:hidden;
}
.progress-fill{ height:100%; background:var(--gold); border-radius:3px; }

/* ---------- Episodes grouped list ---------- */
.ep-group{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:10px;
  margin-bottom:14px;
  overflow:hidden;
}
.ep-group-header{
  padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--edge);
  cursor:pointer;
}
.ep-group-header-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.ep-group-title{ font-weight:600; font-size:15px; }
.ep-group-sub{ font-size:12px; color:var(--text-dim); }
.ep-chevron{
  flex-shrink:0; color:var(--text-dim);
  transition:transform 0.18s ease;
  display:flex; align-items:center;
}
.ep-chevron svg{ width:16px; height:16px; }
.ep-chevron.collapsed{ transform:rotate(-90deg); }
.ep-group-body{ overflow:hidden; }
.ep-group-body.collapsed{ display:none; }
.season-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--edge);
  cursor:pointer;
}
.season-body.collapsed{ display:none; }
.season-header-left{ display:flex; align-items:center; gap:9px; }
.season-label{ font-size:12.5px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }
.season-sub{ font-size:11.5px; color:var(--text-dim); }
.season-mark-btn{
  font-size:11.5px; font-weight:600;
  background:none; border:1px solid var(--edge);
  color:var(--gold); border-radius:20px;
  padding:5px 11px; cursor:pointer;
}
.season-mark-btn.done{ color:var(--green); border-color:var(--green); }
.ep-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  border-bottom:1px solid var(--edge);
}
.ep-row:last-child{ border-bottom:none; }
.ep-check{
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--edge);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:14px;
  color:transparent;
}
.ep-check.checked{
  background:var(--green); border-color:var(--green); color:var(--bg);
}
.ep-info{ flex:1; min-width:0; }
.ep-info .num{ color:var(--text-dim); font-size:12.5px; }
.ep-info .name{ font-size:14.5px; }
.ep-del{
  background:none; border:none; color:var(--text-dim);
  font-size:18px; cursor:pointer; padding:4px 6px;
}

/* ---------- Backup tab ---------- */
.backup-card{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:12px;
  padding:20px;
  margin-bottom:14px;
}
.backup-card h3{
  font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:1px;
  font-size:15px; margin:0 0 6px; color:var(--gold);
}
.backup-card p{ font-size:13.5px; color:var(--text-dim); line-height:1.6; margin:0 0 14px; }
.btn{
  display:block; width:100%;
  padding:13px; border-radius:8px;
  border:none; font-size:15px; font-weight:600;
  cursor:pointer; text-align:center;
  font-family:var(--font-body);
}
.btn.primary{ background:var(--gold); color:var(--bg); }
.btn.secondary{ background:var(--surface-2); color:var(--text); border:1px solid var(--edge); margin-top:10px; }
.btn:active{ opacity:0.85; }
#import-file{ display:none; }
.status-msg{
  font-size:13px; text-align:center; margin-top:10px; min-height:18px; color:var(--teal);
}

/* ---------- Bottom nav ---------- */
.bottomnav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px;
  background:var(--surface);
  border-top:1px solid var(--edge);
  display:flex;
  z-index:20;
  padding-bottom:env(safe-area-inset-bottom);
}
.navbtn{
  flex:1; background:none; border:none; color:var(--text-dim);
  padding:11px 4px 9px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:var(--font-body); font-size:10.5px; letter-spacing:0.3px;
}
.navbtn svg{ width:21px; height:21px; }
.navbtn.active{ color:var(--gold); }
.navbtn.active svg{ stroke:var(--gold); }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(8,10,14,0.7);
  z-index:50; display:none; align-items:flex-end;
}
.modal-overlay.open{ display:flex; }
.modal-sheet{
  background:var(--surface);
  width:100%;
  max-width:520px; margin:0 auto;
  border-radius:18px 18px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:65vh; overflow-y:auto;
}
.modal-handle{
  width:36px; height:4px; background:var(--edge); border-radius:2px;
  margin:0 auto 16px;
}
.modal-title{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:1px;
  font-size:18px; margin:0 0 16px; color:var(--gold);
}
.field{ margin-bottom:14px; }
.field label{
  display:block; font-size:12px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--edge);
  color:var(--text); border-radius:8px; padding:11px 12px;
  font-size:15px; font-family:var(--font-body);
}
.field textarea{ resize:vertical; min-height:56px; }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.modal-actions{ display:flex; gap:10px; margin-top:6px; }
.modal-actions .btn{ flex:1; }
.btn.danger{ background:rgba(217,96,122,0.15); color:var(--rose); }

::-webkit-scrollbar{ width:0; }