:root{
  --text:#f7f2f3;
  --muted:#c9a9ad;
  --gold:#e8c468;
  --accent:#ff3b5c;
  --green:#46d77f;
  --panel:rgba(20,6,9,.62);
  --panel-2:rgba(38,12,16,.72);
  --card:rgba(50,16,20,.85);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:#160407;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  overflow:hidden;display:flex;flex-direction:column;
}

/* ============ THEATER CURTAINS ============ */
.curtain{
  position:fixed;inset:0;z-index:-3;
  background:
    repeating-linear-gradient(90deg,
      #2a040a 0px, #4d0710 16px, #6f0c18 34px, #8c1020 52px,
      #6f0c18 70px, #4d0710 88px, #2a040a 104px);
  background-size:104px 100%;
  box-shadow:inset 0 0 200px rgba(0,0,0,.7);
}
/* soft sheen highlights down each fold */
.curtain::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    transparent 0px, rgba(255,140,160,.05) 26px, transparent 52px,
    rgba(0,0,0,.25) 78px, transparent 104px);
  background-size:104px 100%;
}
/* scalloped valance across the top */
.valance{
  position:fixed;top:0;left:0;right:0;height:90px;z-index:-2;
  background:
    repeating-radial-gradient(circle at 45px 0,
      #8c1020 0 44px, #5c0a14 45px 52px, transparent 53px) ,
    linear-gradient(#3a060e,#2a040a);
  background-size:90px 90px, 100% 100%;
  box-shadow:0 6px 20px rgba(0,0,0,.6);
  filter:saturate(1.1);
}
/* darkening so text stays readable over the velvet */
.stage-dim{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(120% 70% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.55) 100%);
}

/* ============ Top bar ============ */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-top) + 14px) 18px 8px;flex:0 0 auto;}
.logo{
  font-size:27px;font-weight:800;letter-spacing:1px;margin:0;
  font-family:"SF Pro Display",Georgia,serif;
  color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.6);
  text-transform:uppercase;
}
.icon-btn{background:var(--card);border:1px solid rgba(255,255,255,.08);color:var(--text);
  width:38px;height:38px;border-radius:50%;font-size:18px;}

/* ============ Search ============ */
.search-wrap{padding:4px 18px 10px;flex:0 0 auto;}
.search-wrap input{width:100%;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:var(--panel-2);color:var(--text);font-size:16px;backdrop-filter:blur(8px);}
.search-wrap input::placeholder{color:var(--muted);}

/* ============ Main ============ */
main{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0 100px;}
.section-title{font-size:19px;font-weight:800;margin:18px 18px 4px;text-shadow:0 1px 6px rgba(0,0,0,.7);}
.section-sub{color:var(--muted);font-size:12.5px;margin:0 18px 10px;}

.rail{display:flex;gap:12px;overflow-x:auto;padding:6px 18px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.poster{flex:0 0 auto;width:128px;}
.poster img,.poster .ph{width:128px;height:192px;border-radius:14px;object-fit:cover;
  background:var(--card);display:block;box-shadow:0 6px 18px rgba(0,0,0,.5);}
.poster .title{font-size:13px;margin-top:6px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.poster .meta{font-size:11px;color:var(--muted);margin-top:2px;}
.poster .when{font-size:10.5px;font-weight:700;color:var(--gold);margin-top:3px;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:8px 18px;}
.grid .poster{width:100%;}
.grid .poster img,.grid .poster .ph{width:100%;height:auto;aspect-ratio:2/3;}

.badge{display:inline-block;font-size:10px;font-weight:800;padding:3px 7px;border-radius:7px;margin-top:4px;}
.badge.streaming{background:rgba(70,215,127,.18);color:var(--green);}
.badge.soon{background:rgba(232,196,104,.2);color:var(--gold);}

.empty{text-align:center;color:var(--muted);padding:50px 30px;}
.empty .big{font-size:46px;margin-bottom:10px;}
.empty p{line-height:1.55;}
.empty b{color:var(--text);}
.loading{text-align:center;color:var(--muted);padding:40px;}

/* ============ SWIPE DECK (For You) ============ */
.deck-wrap{position:relative;height:calc(100dvh - 250px);min-height:380px;display:flex;flex-direction:column;align-items:center;padding:6px 16px 0;}
.deck{position:relative;width:100%;max-width:360px;flex:1 1 auto;margin-top:4px;}
.swipe-card{
  position:absolute;inset:0;border-radius:22px;overflow:hidden;
  background:var(--card);box-shadow:0 18px 50px rgba(0,0,0,.6);
  will-change:transform;touch-action:none;
}
.swipe-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.swipe-card .info{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.92),transparent);}
.swipe-card .info h3{margin:0 0 4px;font-size:22px;font-weight:800;}
.swipe-card .info p{margin:0;color:#d8c7c9;font-size:13px;}
.swipe-card .info .ov{margin-top:8px;font-size:12.5px;color:#c3b4b6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.stamp{position:absolute;top:26px;font-size:30px;font-weight:900;letter-spacing:2px;
  padding:6px 14px;border:4px solid;border-radius:12px;opacity:0;text-transform:uppercase;transform:rotate(-16deg);}
.stamp.like{left:22px;color:var(--green);border-color:var(--green);}
.stamp.nope{right:22px;color:var(--accent);border-color:var(--accent);transform:rotate(16deg);}
.stamp.love{left:50%;top:40px;transform:translateX(-50%);color:var(--gold);border-color:var(--gold);}
.stamp.seen{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);color:#3bc6ee;border-color:#3bc6ee;}

.star-save{position:absolute;top:14px;left:14px;z-index:6;width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:var(--gold);font-size:22px;
  backdrop-filter:blur(6px);}
.star-save.saved{background:var(--gold);color:#3a060e;}

.deck-actions{display:flex;gap:14px;justify-content:center;padding:14px 0 calc(var(--safe-bottom) + 86px);}
.deck-actions button{width:54px;height:54px;border-radius:50%;border:none;font-size:23px;
  box-shadow:0 8px 22px rgba(0,0,0,.5);}
.act-nope{background:#2a1216;color:var(--accent);}
.act-seen{background:#0e2230;color:#3bc6ee;font-size:21px;}
.act-love{background:#2a2210;color:var(--gold);font-size:21px;}
.act-like{background:#10261a;color:var(--green);}
.deck-hint{color:var(--muted);font-size:12px;text-align:center;margin:2px 0 0;}

/* ============ Tab bar ============ */
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;
  background:rgba(20,4,8,.82);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.07);
  padding:8px 0 calc(var(--safe-bottom) + 6px);z-index:20;}
.tab{background:none;border:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11px;font-weight:600;flex:1;}
.tab .tab-ico{font-size:20px;opacity:.55;}
.tab.active{color:var(--gold);}
.tab.active .tab-ico{opacity:1;}

/* ============ Sheets ============ */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;}
.sheet.hidden{display:none;}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);}
.sheet-card{position:relative;width:100%;max-height:92vh;overflow-y:auto;background:#1c060b;
  border-radius:24px 24px 0 0;border-top:1px solid rgba(232,196,104,.25);
  padding:10px 20px calc(var(--safe-bottom) + 28px);animation:slideUp .28s cubic-bezier(.2,.8,.2,1);
  overscroll-behavior:contain;will-change:transform;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-handle{width:44px;height:6px;border-radius:3px;background:#6a3640;margin:4px auto 14px;
  padding:10px 30px;background-clip:content-box;box-sizing:content-box;cursor:pointer;}

.detail-hero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:14px;background:#000;}
.detail-hero img,.detail-hero iframe{width:100%;display:block;border:0;}
.detail-hero iframe{aspect-ratio:16/9;}
.detail-hero .grad{position:absolute;inset:0;background:linear-gradient(to top,#1c060b,transparent 60%);pointer-events:none;}
.detail-title{font-size:24px;font-weight:800;margin:0 0 4px;}
.detail-meta{color:var(--muted);font-size:13px;margin-bottom:10px;}

.scores{display:flex;gap:10px;margin:0 0 14px;flex-wrap:wrap;}
.score-chip{display:flex;align-items:center;gap:7px;background:var(--card);border-radius:12px;padding:8px 12px;font-weight:800;font-size:15px;}
.score-chip small{display:block;font-size:10px;font-weight:600;color:var(--muted);}
.rt{color:#fa320a;}
.tmdb{color:#01b4e4;}

.detail-overview{font-size:15px;line-height:1.5;color:#e6d7d9;margin-bottom:16px;}
h2.sub{font-size:17px;font-weight:800;margin:16px 0 8px;}

.cast-rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;}
.cast-rail::-webkit-scrollbar{display:none;}
.cast{flex:0 0 auto;width:76px;text-align:center;}
.cast img,.cast .ph{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--card);margin:0 auto 6px;display:block;}
.cast .nm{font-size:11px;font-weight:700;line-height:1.2;}
.cast .ch{font-size:10px;color:var(--muted);line-height:1.2;}

.where-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.prov-logo{width:42px;height:42px;border-radius:10px;object-fit:cover;background:var(--card);}
.where-none{color:var(--muted);font-size:14px;}

.action-row{display:flex;gap:10px;margin:16px 0;}
.action-row button{flex:1;padding:13px;border-radius:13px;border:none;font-size:14px;font-weight:800;}
.btn-fav{background:var(--card);color:var(--text);}
.btn-fav.on{background:var(--gold);color:#3a060e;}
.btn-watch{background:var(--card);color:var(--text);}
.btn-watch.on{background:var(--green);color:#06280f;}

.field-label{display:block;font-weight:800;margin:16px 0 4px;}
.field-label .req{font-size:10px;color:var(--accent);font-weight:700;vertical-align:middle;}
.field-label .opt{font-size:10px;color:var(--muted);font-weight:700;vertical-align:middle;}
.hint{color:var(--muted);font-size:12px;line-height:1.45;margin:2px 0 8px;}
#settings input[type=text],#settings select{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:var(--card);color:var(--text);font-size:15px;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin:18px 0 4px;font-weight:700;}
.toggle-row input{width:46px;height:28px;}
.link-btn{background:none;border:none;color:var(--gold);font-size:13px;padding:6px 0;text-decoration:underline;}
.primary-btn{width:100%;margin-top:22px;padding:15px;border:none;border-radius:14px;
  background:linear-gradient(90deg,#b3122a,#ff3b5c);color:#fff;font-size:16px;font-weight:800;}
h2{font-size:22px;font-weight:800;margin:4px 0 6px;}

.toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 92px);transform:translateX(-50%);
  background:#2a0c12;color:var(--text);padding:12px 20px;border-radius:14px;font-size:14px;z-index:100;
  box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:82%;text-align:center;border:1px solid rgba(232,196,104,.25);}
.toast.hidden{display:none;}
