/* JUKEBOX — a jukebox-lit stage.
   Drifting gradient backdrop (music: cobalt / raspberry / tangerine, film: velvet crimson / projector teal + Cinema Paradiso stills),
   community rail on the left, main stage on the right. White Malgun Gothic with a 3px subtitle shadow. */
:root{
  color-scheme:dark;
  --bg:#3a2f9e; --glass:rgba(255,255,255,.11); --glass-2:rgba(255,255,255,.07); --glass-3:rgba(255,255,255,.2);
  --sunk:rgba(12,14,40,.30); --line:rgba(255,255,255,.24); --ink:#FFFFFF; --muted:rgba(255,255,255,.86); --dim:rgba(255,255,255,.66);
  --music:#FFD43B; --film:#99E9F2; --accent:var(--music); --on-accent:#16182E;
  --good:#B2F2BB; --bad:#FFC9C9; --star:#FFD43B;
  --sh:3px 3px 3px rgba(0,0,0,.72); --sh-sm:2px 2px 3px rgba(0,0,0,.6);
  --f:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --r:16px; --top:64px; --side:340px;
}
body[data-mode="film"]{--accent:var(--film);--bg:#5a1a40}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.7;text-shadow:var(--sh);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
button,input,textarea,select{font:inherit;color:inherit;text-shadow:inherit}
input,textarea,select{text-shadow:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{margin:0;line-height:1.3}
a{color:inherit}
[hidden]{display:none!important}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-shadow:var(--sh-sm)}
.hint{font-size:13px;color:var(--dim);margin:0;line-height:1.55}

/* backdrop */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg>div{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
body[data-mode="music"] .bg-music, body[data-mode="film"] .bg-film{opacity:1}
.blobs{position:absolute;inset:-22%;filter:blur(34px);animation:drift 20s ease-in-out infinite alternate;will-change:transform}
.bg-music{background:linear-gradient(125deg,#2141C0 0%,#4B2FB0 34%,#A8205E 68%,#D2541C 100%)}
.bg-music .blobs{background:
  radial-gradient(34% 40% at 14% 18%, rgba(16,152,173,.85) 0, transparent 70%),
  radial-gradient(30% 36% at 86% 14%, rgba(240,62,62,.70) 0, transparent 72%),
  radial-gradient(32% 38% at 78% 84%, rgba(247,159,31,.55) 0, transparent 70%),
  radial-gradient(38% 44% at 20% 86%, rgba(59,91,219,.95) 0, transparent 72%),
  radial-gradient(26% 30% at 50% 46%, rgba(190,75,219,.55) 0, transparent 70%)}
.bg-film{background:linear-gradient(140deg,#5A0E2C 0%,#8E1C3E 34%,#3D2A80 68%,#0B6E7D 100%)}
.bg-film .blobs{background:
  radial-gradient(36% 42% at 18% 20%, rgba(214,51,108,.75) 0, transparent 70%),
  radial-gradient(32% 38% at 86% 22%, rgba(21,170,191,.70) 0, transparent 72%),
  radial-gradient(30% 34% at 70% 84%, rgba(232,89,12,.55) 0, transparent 70%),
  radial-gradient(36% 40% at 14% 86%, rgba(132,94,247,.60) 0, transparent 72%)}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,30,.10),rgba(10,10,30,.28))}
@keyframes drift{0%{transform:translate(-7%,-5%) rotate(0deg) scale(1)}50%{transform:translate(7%,4%) rotate(14deg) scale(1.14)}100%{transform:translate(-3%,7%) rotate(-12deg) scale(1.06)}}
.still{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;mix-blend-mode:screen}
.still-young{background-image:url("bg-young.jpg");background-position:50% 30%;opacity:calc((1 - var(--p,0)) * .6)}
.still-old{background-image:url("bg-old.jpg");background-position:30% 35%;opacity:calc(var(--p,0) * .6)}
.grain{position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* header */
.top{position:sticky;top:0;z-index:20;height:var(--top);background:rgba(18,18,48,.34);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line)}
.top-in{height:100%;display:flex;align-items:center;gap:16px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.brand{display:flex;align-items:center;gap:16px;margin-right:auto;min-width:0}
.brand h1{font-size:24px;font-weight:800;letter-spacing:.28em;white-space:nowrap}
.brand h1 .o{display:inline-block;width:.78em;height:.78em;border-radius:50%;vertical-align:-.04em;margin:0 .02em;background:radial-gradient(circle,#1a1b2e 0 13%,var(--accent) 15% 30%,#111 32% 34%,#1d1f26 36% 100%);box-shadow:var(--sh-sm),0 0 0 1px var(--line)}
body[data-busy="1"] .brand h1 .o{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand p{margin:0;white-space:nowrap}
.switch{display:flex;gap:4px;background:var(--glass-2);border:1px solid var(--line);padding:4px;border-radius:999px}
.switch a{display:flex;align-items:center;gap:8px;text-decoration:none;padding:7px 20px;border-radius:999px;font-weight:700;font-size:14px;color:var(--dim)}
.switch a:hover{color:var(--ink)}
.switch a[aria-current="page"]{background:var(--glass-3);color:var(--ink)}
.switch a[aria-current="page"]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.btn.side-toggle{display:none;width:42px;height:42px;padding:0;font-size:20px;line-height:1}

/* shell */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--side) minmax(0,1fr);align-items:start}
.side{position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow:auto;border-right:1px solid var(--line);background:rgba(14,14,40,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:18px 16px 28px max(16px,env(safe-area-inset-left,0px));display:grid;gap:14px;align-content:start;scrollbar-width:thin}
.main{min-width:0;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 24px}
.main>section{max-width:1240px;margin:0 auto}
.scrim{display:none}
@media (max-width:1080px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .main{padding-left:max(16px,env(safe-area-inset-left,0px))}
  .side{position:fixed;left:0;top:var(--top);bottom:0;height:auto;width:min(360px,92vw);z-index:30;transform:translateX(-102%);transition:transform .25s ease;background:rgba(26,22,70,.92)}
  body.side-open .side{transform:none}
  .scrim{display:block;position:fixed;inset:var(--top) 0 0 0;z-index:25;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s}
  body.side-open .scrim{opacity:1;pointer-events:auto}
  .btn.side-toggle{display:inline-flex}
}
@media (max-width:640px){.brand p{display:none}.brand h1{font-size:18px;letter-spacing:.16em}.switch a{padding:6px 12px;font-size:13px}.top-in{gap:10px}}

/* generic controls */
.panel{background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:16px;min-width:0}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.panel-head h3{font-size:26px;font-weight:800}
.field{display:grid;gap:6px;min-width:0}
.lbl,.field>label{font-size:14px;font-weight:700;color:var(--muted)}
input[type=text],input[type=number],input[type=password],input[type=search],textarea,select{width:100%;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0;color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}
select option{background:#23264d;color:#fff}
textarea{resize:vertical;min-height:90px;line-height:1.5}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.5)}
.seg{justify-self:start;display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:7px;font-size:14px;font-weight:700;color:var(--dim);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--glass-3);color:var(--ink)}
.btn{border:1px solid var(--line);background:var(--glass-2);border-radius:10px;padding:9px 15px;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;justify-content:center;color:var(--ink);text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent);background:var(--glass-3)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);text-shadow:none}
.btn-primary:hover{background:var(--accent);filter:brightness(1.06)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted);padding:6px 8px}
.btn-ghost:hover{color:var(--ink);border-color:transparent;background:transparent}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn-big{width:100%;padding:16px;font-size:17px;border-radius:12px}
.linkish{border:0;background:none;padding:0;color:var(--accent);font-weight:700;font-size:14px;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chip-toggle{border:1px solid var(--line);background:var(--sunk);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;color:var(--dim)}
.chip-toggle[aria-pressed="true"]{border-color:var(--accent);background:var(--glass-3);color:var(--ink);font-weight:700}
.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer;line-height:1.55}
.check input{accent-color:var(--accent);margin-top:4px}
.tag{font-size:12.5px;padding:2px 10px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line);color:var(--muted)}

/* intro */
.intro{padding-block:44px 26px;display:grid;gap:12px}
.headline{font-size:min(48px,4.6vw);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.headline em{font-style:normal;color:var(--accent)}
.intro p{margin:0;color:var(--muted);font-size:17px}
@media (max-width:1080px){.headline{font-size:min(48px,5.4vw)}}
@media (max-width:640px){.intro{padding-block:28px 18px}.intro p{font-size:15px}.headline{font-size:calc((100vw - 40px) / 21)}}

/* entry + autocomplete */
.studio{display:grid;gap:16px}
.entry{position:relative;display:grid;gap:10px}
.entry-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.entry-row>.field{flex:1 1 240px}
.entry-row>.field.type{flex:0 0 auto}
.entry-row input[type=text],.entry-row input[type=number]{height:60px;font-size:19px;padding:0 18px;border-radius:12px}
.entry-row .seg{height:60px;align-items:center;border-radius:12px;padding:5px}
.entry-row .seg button{font-size:16px;padding:10px 16px}
.entry-row>.btn{height:60px;padding:0 26px;font-size:17px;border-radius:12px}
.ac{position:absolute;left:0;right:0;top:100%;margin-top:8px;z-index:15;background:#221f5c;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);padding:8px;display:grid;gap:4px;max-height:min(560px,70vh);overflow:auto}
.ac-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 8px 6px;font-size:12.5px;color:var(--dim)}
.ac-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px;border-radius:10px;cursor:pointer;border:1px solid transparent;background:none;text-align:left;width:100%}
.ac-item.film{grid-template-columns:52px minmax(0,1fr) auto}
.ac-item:hover,.ac-item.on{background:var(--glass-3);border-color:var(--line)}
.ac-cover{position:relative;width:72px;height:72px;border-radius:6px;overflow:hidden;background:var(--sunk)}
.ac-item.film .ac-cover{width:52px;height:78px}
.ac-t{min-width:0;display:grid;gap:1px}
.ac-t b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-t span{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-add{font-size:13px;font-weight:700;color:var(--accent)}
.ac-empty{padding:14px 10px;color:var(--dim);font-size:14px}
details.bulk summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--accent);list-style:none}
details.bulk summary::-webkit-details-marker{display:none}
details.bulk summary::before{content:"+ "}
details.bulk[open] summary::before{content:"− "}
details.bulk>div{display:grid;gap:8px;margin-top:8px}
.example-note{display:flex;gap:8px;align-items:center;justify-content:space-between;background:var(--glass-2);border:1px dashed var(--line);border-radius:10px;padding:9px 12px;font-size:14px}

/* my list */
.counter{display:grid;gap:6px}
.meter{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:3px;transition:width .3s}
.meter b{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;opacity:.7}
.counter-txt{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.counter-txt strong{color:var(--ink)}
.mylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,470px),1fr));gap:14px}
.mi{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center;padding:14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.mi.film{grid-template-columns:120px minmax(0,1fr)}
.mi-cover{position:relative;width:150px;aspect-ratio:1;border-radius:8px;overflow:hidden;box-shadow:4px 4px 10px rgba(0,0,0,.35)}
.mi.film .mi-cover{width:120px;aspect-ratio:2/3}
.mi-t{min-width:0;display:grid;gap:4px;padding-right:28px}
.mi-t h4{font-size:23px;font-weight:800;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mi-t .a{margin:0;font-size:18px;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-t .m{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.kind{font-size:12px;font-weight:800;letter-spacing:.08em;padding:2px 9px;border-radius:6px;border:1px solid var(--accent);color:var(--accent);text-shadow:none}
.mi .x{position:absolute;right:10px;top:10px;border:0;background:none;color:var(--dim);cursor:pointer;padding:4px 8px;border-radius:6px;font-size:20px;line-height:1}
.mi .x:hover{color:var(--bad);background:var(--glass-2)}
.mi-why{margin:0;font-size:13.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stars{display:inline-flex;margin-top:2px}
.star{border:0;background:none;padding:0 2px;font-size:24px;line-height:1;cursor:pointer;color:rgba(255,255,255,.3);text-shadow:none}
.star.on{color:var(--star)}
.star.half{background:linear-gradient(90deg,var(--star) 50%,rgba(255,255,255,.3) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.star:hover{transform:scale(1.12)}
.rate{display:flex;align-items:center;gap:8px}
.rv{font-size:14px;color:var(--star);font-weight:700;font-variant-numeric:tabular-nums}
.list-empty{grid-column:1/-1;color:var(--dim);font-size:15px;padding:12px 4px}
@media (max-width:560px){
  .mi{grid-template-columns:104px minmax(0,1fr);gap:14px}
  .mi-cover{width:104px}
  .mi.film{grid-template-columns:84px minmax(0,1fr)}
  .mi.film .mi-cover{width:84px}
  .mi-t h4{font-size:19px}.mi-t .a{font-size:16px}.star{font-size:21px}
}

/* art placeholder + real image */
.art{position:absolute;inset:0;text-shadow:none;background:
  radial-gradient(70% 70% at 18% 20%, var(--c1) 0, transparent 62%),
  radial-gradient(60% 60% at 85% 28%, var(--c2) 0, transparent 60%),
  radial-gradient(80% 70% at 55% 100%, var(--c1) 0, transparent 66%), var(--c0)}
.art::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.art.loading::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);background-size:200% 100%;animation:shine 1.2s linear infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-80% 0}}
.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* action bar + settings */
.action-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px);gap:18px;align-items:end;border-top:1px solid var(--line);padding-top:18px}
@media (max-width:760px){.action-bar{grid-template-columns:minmax(0,1fr)}}
details.settings{padding:0;gap:0}
details.settings>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 22px;flex-wrap:wrap}
details.settings>summary::-webkit-details-marker{display:none}
details.settings>summary h3{font-size:19px;font-weight:800}
details.settings>summary .sum-desc{color:var(--dim);font-size:13.5px;flex:1 1 200px}
details.settings>summary .chev{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:14px;transition:transform .25s;flex:none}
details.settings[open]>summary .chev{transform:rotate(180deg)}
details.settings[open]>summary{border-bottom:1px solid var(--line)}
details.settings>.set-body{padding:18px 22px 22px}
.set-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:14px}
.set-group{display:grid;gap:12px;align-content:start;background:var(--glass-2);border:1px solid var(--line);border-radius:12px;padding:14px}
.group-title{margin:0;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.group-title::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.range-wrap{display:grid;gap:2px}
.range-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.range-top output{font-size:13px;color:var(--accent);font-weight:700}
.ticks{display:flex;justify-content:space-between;padding:0 3px;margin-top:4px}
.ticks span{width:14px;text-align:center;font-size:12px;font-weight:700;color:var(--dim)}
.ticks span.on{color:var(--accent);transform:scale(1.25)}
input[type=range]{width:100%;accent-color:var(--accent);margin:0}
.range-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}
.era{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.era span{color:var(--dim);font-size:13px}

/* results */
.results{display:grid;gap:24px;min-width:0;padding-block:32px 56px}
.status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:12px 16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.status:empty{display:none}
.status .msg{font-size:15px}
.loadbar{flex:1 1 160px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden;position:relative}
.loadbar::after{content:"";position:absolute;inset:0;width:35%;background:var(--accent);animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.profile{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:grid;gap:18px;border-top:3px solid var(--accent)}
.profile .summary{font-size:21px;line-height:1.75;font-weight:700;margin:0;text-align:justify}
.prof-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:760px){.prof-grid{grid-template-columns:minmax(0,1fr)}}
.gbars{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.gbars li{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr);gap:12px;align-items:center;font-size:15px;font-weight:700}
.gbars .bar{height:9px;border-radius:5px;background:rgba(255,255,255,.16);overflow:hidden}
.gbars .bar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.chips.big .tag{font-size:15px;padding:6px 14px;font-weight:700;color:var(--ink)}
.people{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.people li{display:flex;gap:12px;align-items:baseline;font-size:17px}
.people li span{color:var(--accent);font-size:13px;font-weight:700;min-width:72px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.sec-head h3{font-size:30px;font-weight:800;white-space:nowrap}
.sec-tools{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:20px}
.card{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;align-content:start;min-width:0}
.card.fresh{animation:rise .45s ease both}
@keyframes rise{from{transform:translateY(8px);opacity:.4}to{transform:none;opacity:1}}
.cover{position:relative;aspect-ratio:1/1;max-width:100%;border-bottom:1px solid var(--line)}
.card.film .cover{aspect-ratio:2/3}
.cover .flags{position:absolute;left:10px;top:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:6px;z-index:2}
.pill{font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(14,16,40,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);white-space:nowrap}
.pill.match{color:var(--accent)}
.pill.v-ok{color:var(--good)} .pill.v-miss{color:var(--bad)}
.card-body{padding:18px 20px 20px;display:grid;gap:12px}
.titles{display:grid;gap:2px}
.titles h4{font-size:26px;font-weight:800;line-height:1.25}
.titles .l2{margin:0;font-size:19px;font-weight:700}
.titles .l3{margin:0;font-size:16px;color:var(--muted);font-variant-numeric:tabular-nums}
.titles .l3 small{font-size:13px}
.genre{margin:0;font-size:14px;font-weight:700;color:var(--accent)}
.why{margin:0;font-size:16px;line-height:1.75}
.axis{margin:0;font-size:14px;padding:8px 12px;border-radius:10px;background:var(--glass-2);border:1px solid var(--line);line-height:1.5}
.axis b{color:var(--accent);margin-right:8px}
.start{margin:0;font-size:14.5px;color:var(--muted)}
.start b{color:var(--ink);margin-left:6px}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.outlinks{display:flex;gap:4px;flex-wrap:wrap}
.outlinks a{font-size:12.5px;font-weight:700;text-decoration:none;padding:4px 9px;border-radius:7px;border:1px solid var(--line);color:var(--muted)}
.outlinks a:hover{color:var(--accent);border-color:var(--accent)}
.outlinks a.apple{border-color:var(--ink);color:var(--ink)}
.fb{display:flex;gap:4px}
.fb button{border:1px solid var(--line);background:transparent;border-radius:7px;padding:4px 10px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--dim)}
.fb button[aria-pressed="true"].up{border-color:var(--good);color:var(--good);background:rgba(178,242,187,.14)}
.fb button[aria-pressed="true"].down{border-color:var(--bad);color:var(--bad);background:rgba(255,201,201,.14)}
.card.disliked{opacity:.5}
.sample-flag{font-size:11px;font-weight:800;letter-spacing:.12em;padding:3px 9px;border-radius:999px;background:rgba(14,16,40,.62);border:1px dashed rgba(255,255,255,.6)}
.card.person .card-body{padding-top:20px}
.more-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;padding:8px 0}
.empty{border:1px dashed var(--line);background:var(--glass-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--r);padding:24px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:start}
@media (max-width:720px){.empty{grid-template-columns:minmax(0,1fr)}}
.empty h3{font-size:22px;font-weight:800}
.empty-p{margin:0;color:var(--muted);font-size:16px}

/* community rail */
.acct{display:grid;gap:10px;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:14px}
.acct h3{font-size:17px;font-weight:800}
.acct form{display:grid;gap:8px}
.acct .pin-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.acct input{height:44px;font-size:16px}
.acct input.pin{letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums}
.acct .err{margin:0;font-size:13px;color:var(--bad)}
.me{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.me .who{min-width:0;display:grid}
.me .who b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .who span{font-size:12.5px;color:var(--dim)}
.me .btns{flex-basis:100%;display:flex;gap:6px}
.me .btns .btn{flex:1}
.av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;text-shadow:var(--sh-sm);border:1px solid rgba(255,255,255,.35)}
.av.sm{width:30px;height:30px;font-size:13px}
.av.lg{width:56px;height:56px;font-size:22px}
.rail-tabs{display:flex;gap:4px;background:var(--glass-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.rail-tabs button{flex:1;border:0;background:none;padding:8px;border-radius:8px;font-weight:700;font-size:14px;color:var(--dim);cursor:pointer}
.rail-tabs button[aria-pressed="true"]{background:var(--glass-3);color:var(--ink)}
#rail-body{display:grid;gap:12px;align-content:start}
.fi-strip{display:flex;gap:6px}
.fi-strip .fi-cover{width:54px;height:54px}
.fi-strip.film .fi-cover{width:42px;height:63px}
.fi-more{align-self:center;font-size:12.5px;color:var(--dim);font-weight:700}
.rail-sub{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--dim)}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fi{display:grid;gap:8px;background:var(--glass-2);border:1px solid var(--line);border-radius:12px;padding:10px}
.fi-top{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
.fi-top .nick{border:0;background:none;padding:0;color:var(--ink);font-weight:800;font-size:14px;cursor:pointer}
.fi-top .nick:hover{color:var(--accent)}
.fi-top time{margin-left:auto;font-size:12px}
.fi-body{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:10px;align-items:center}
.fi-body.film{grid-template-columns:44px minmax(0,1fr) auto}
.fi-cover{position:relative;width:60px;height:60px;border-radius:6px;overflow:hidden}
.fi-body.film .fi-cover{width:44px;height:66px}
.fi-t{min-width:0;display:grid}
.fi-t b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-t span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act{font-size:12px;color:var(--accent);font-weight:700}
.people-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pl{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid transparent;background:none;width:100%;text-align:left;cursor:pointer}
.pl:hover{background:var(--glass-2);border-color:var(--line)}
.pl .who{min-width:0;display:grid}
.pl .who b{font-size:15px}
.pl .who span{font-size:12.5px;color:var(--dim)}
.prof-head{display:flex;align-items:center;gap:12px}
.prof-head h3{font-size:22px;font-weight:800}
.prof-head span{font-size:12.5px;color:var(--dim)}
.prof-sec{display:grid;gap:8px}
.prof-sec h4{font-size:15px;font-weight:800;display:flex;justify-content:space-between}
.prof-sec h4 small{font-weight:700;color:var(--dim);font-size:12.5px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gi{display:grid;gap:4px;min-width:0}
.gi-cover{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden}
.gi.film .gi-cover{aspect-ratio:2/3}
.gi-cover .take{position:absolute;right:4px;bottom:4px;z-index:2;opacity:0;transition:opacity .2s}
.gi:hover .take,.gi:focus-within .take{opacity:1}
.gi b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gi span{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-4px}
.msgs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.msg{background:var(--glass-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;gap:2px}
.msg-top{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim)}
.msg-top b{color:var(--ink);font-size:13px}
.msg-top .del{margin-left:auto;border:0;background:none;color:var(--dim);cursor:pointer;font-size:12px}
.msg p{margin:0;font-size:14px}
.msg-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.rail-empty{font-size:13.5px;color:var(--dim);padding:6px 2px;margin:0}

/* misc */
.copybox textarea{min-height:160px;font-size:13px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:rgba(24,26,58,.96);border:1px solid var(--line);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:700;z-index:50;max-width:calc(100% - 32px)}
.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding:18px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px));color:var(--dim);font-size:12.5px;background:rgba(14,16,40,.28)}
.foot p{margin:0 auto;max-width:1240px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}