:root{
  --bg:#0b0b0f; --panel:#16161e; --line:#272730; --txt:#ecedf2; --dim:#8b8c98;
  --accent:#d4ab55; --accent2:#6ea8ff; --on:#20202a;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{overflow-x:hidden;}
html,body{background:var(--bg);color:var(--txt);max-width:100%;
  font:16px/1.4 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;}
body{padding-bottom:calc(172px + env(safe-area-inset-bottom));
  background:radial-gradient(150% 70% at 50% -8%, #15151f 0%, var(--bg) 55%) no-repeat fixed;
  -webkit-font-smoothing:antialiased;}
#app{max-width:640px;margin:0 auto;padding:22px 18px 8px;visibility:hidden;}
header{margin-bottom:20px;}
.adminlink{float:right;color:var(--dim);font-size:13px;text-decoration:none;
  border:1px solid var(--line);padding:6px 13px;border-radius:999px;}
.adminlink:active{transform:scale(.97);} .adminlink:hover{color:var(--txt);border-color:var(--accent);}
.brand{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
h1{font-size:28px;font-weight:680;letter-spacing:-.02em;}
.sub{color:var(--dim);margin-top:5px;font-size:14.5px;line-height:1.45;}
section{margin:22px 0;}
section[data-step="vibes"]{margin-top:14px;}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);
  font-weight:600;margin:0 0 12px;}

/* ---- ONE-TAP VIBES ---- */
.vibes{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.vibe{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  aspect-ratio:1/.96;border-radius:18px;border:1px solid var(--line);cursor:pointer;padding:12px 8px;
  background:radial-gradient(125% 100% at 50% 0%, rgba(var(--vc),.18), rgba(var(--vc),.05) 58%, transparent),var(--panel);
  transition:transform .08s, border-color .15s, box-shadow .15s;}
.vibe:active{transform:scale(.95);}
.vibe:hover{border-color:rgba(var(--vc),.65);}
.vibe .ve{font-size:31px;line-height:1;filter:drop-shadow(0 2px 9px rgba(var(--vc),.55));}
.vibe .vl{font-size:14.5px;font-weight:620;color:var(--txt);letter-spacing:-.01em;}
.vibe.on{border-color:rgb(var(--vc));box-shadow:0 0 0 1px rgb(var(--vc)) inset, 0 9px 24px rgba(var(--vc),.2);}

.chips{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chips.wrap{flex-wrap:wrap;overflow:visible;}
.chip{flex:0 0 auto;padding:11px 16px;border-radius:999px;background:var(--panel);
  border:1px solid var(--line);color:var(--txt);font-size:15px;cursor:pointer;
  transition:transform .08s, border-color .15s, background .15s;white-space:nowrap;}
.chip:active{transform:scale(.96);}
.chip.on{background:var(--on);border-color:var(--accent);color:#fff;
  box-shadow:0 0 0 1px var(--accent) inset;}
.chip .emo{margin-right:6px;}
.tv{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border-radius:14px;
  padding:13px 16px;}
.addlink{margin-top:12px;background:none;border:none;color:var(--accent);font-size:14px;font-weight:550;cursor:pointer;padding:4px 0;}
.why{color:var(--accent);font-size:13px;margin:10px 0 2px;font-weight:500;line-height:1.45;}
.livedot{color:var(--good,#5ad19a);margin-right:5px;font-size:10px;vertical-align:middle;}
.livedot.live{color:var(--good,#5ad19a);animation:livepulse 2.2s ease-in-out infinite;}
.livedot.idle{color:#c9a24a;animation:none;}
.livedot.assigned{color:var(--dim,#8a8a93);animation:none;}
@keyframes livepulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.tv .room.live{color:var(--good,#5ad19a);}
.tv .room.idle{color:#c9a24a;}
.tv .nowplaying{display:block;margin-top:3px;font-size:11px;line-height:1.2;color:var(--good,#5ad19a);opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.presetbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.presetbtns .addlink{margin-top:0;}
#savepanel{margin-top:12px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px;}
#savepanel>input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--txt);font-size:15px;}
.savesub{color:var(--dim);font-size:13px;margin:12px 0 8px;}
.savecustom{width:100%;}
#savego{margin-top:12px;width:100%;padding:13px;border:none;border-radius:10px;background:var(--accent);color:#0b0b0f;font-weight:650;font-size:15px;cursor:pointer;}
#toast{position:fixed;bottom:calc(184px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#000;color:#fff;
  padding:11px 18px;border-radius:12px;font-size:14px;border:1px solid var(--line);opacity:0;max-width:86%;
  text-align:center;transition:opacity .2s;pointer-events:none;z-index:70;box-shadow:0 8px 24px rgba(0,0,0,.5);}
#toast.show{opacity:1;}
.livefb-wrap{margin:20px 0 4px;padding-top:18px;border-top:1px solid var(--line);}
.livefb-q{font-size:14.5px;font-weight:560;color:var(--txt);margin-bottom:11px;}
.livefb{display:flex;gap:9px;}
.lf{flex:1;padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--txt);font-size:14.5px;font-weight:520;cursor:pointer;transition:background .15s,transform .08s;}
.lf:active{transform:scale(.97);} .lf.hit{background:var(--accent);color:#0b0b0f;border-color:var(--accent);}
.livefb-note{color:var(--dim);font-size:12.5px;margin-top:9px;line-height:1.4;}
.insights{display:flex;flex-direction:column;gap:3px;}
.ins-h{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin:12px 0 4px;}
.ins-h:first-child{margin-top:0;}
.ins-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px solid var(--line);}
.ins-row .dim{color:var(--dim);white-space:nowrap;}
.pdel{margin-left:9px;color:var(--dim);font-weight:700;}
.pdel:hover{color:var(--bad,#ff6b6b);}
#addpanel{margin-top:12px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px;}
.addrow{display:flex;gap:8px;flex-wrap:wrap;}
.addrow input{flex:1;min-width:120px;padding:11px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--txt);font-size:15px;}
.addrow input#paircode{flex:0 0 150px;text-transform:uppercase;letter-spacing:.1em;}
.addrow button{padding:11px 18px;border:none;border-radius:10px;background:var(--accent);color:#0b0b0f;font-weight:600;cursor:pointer;}
.addsub{color:var(--dim);font-size:13px;margin:14px 0 8px;}
.tv .room{font-size:12px;color:var(--dim);}
.tv.on .room{color:var(--accent);}

/* ---- ADVANCED collapsibles ---- */
.adv{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin:11px 0;overflow:hidden;}
.adv>summary{list-style:none;cursor:pointer;padding:15px 16px;font-size:14.5px;font-weight:560;color:var(--txt);
  display:flex;align-items:center;justify-content:space-between;}
.adv>summary::-webkit-details-marker{display:none;}
.adv>summary::after{content:"＋";color:var(--accent);font-size:18px;font-weight:400;margin-left:12px;}
.adv[open]>summary::after{content:"－";}
.adv[open]>summary{border-bottom:1px solid var(--line);}
.advbody{padding:15px 16px 17px;}
.advbody>.sub{margin-top:0;margin-bottom:13px;}

/* ---- fixed footer (solid — never overlaps content) ---- */
footer{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -12px 32px rgba(0,0,0,.6);}
#go{width:100%;max-width:604px;margin:0 auto;display:block;padding:16px;border:none;border-radius:14px;
  font-size:17px;font-weight:680;color:#0b0b0f;background:var(--accent);cursor:pointer;
  transition:opacity .15s, transform .08s;}
#go:disabled{opacity:.35;}
#go:active:not(:disabled){transform:scale(.99);}
#end{width:100%;max-width:604px;margin:9px auto 0;display:block;padding:12px;border:1px solid var(--line);
  border-radius:13px;font-size:14.5px;font-weight:500;color:var(--dim);background:transparent;cursor:pointer;}
#end:disabled{opacity:.3;}
#end:active:not(:disabled){transform:scale(.99);}

#result{margin:14px 0;}
#result:empty{display:none;}
.done{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;animation:fadein .3s ease;}
.done h3{font-size:16px;margin-bottom:4px;}
.done .meta{color:var(--dim);font-size:13px;margin-bottom:12px;}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;}
.thumbs img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;background:#000;display:block;}
.fbhint{color:var(--dim);font-size:12px;margin:10px 0 8px;}
.fb{padding:0;border:2px solid transparent;border-radius:9px;background:none;cursor:pointer;overflow:hidden;transition:border-color .12s,transform .08s;}
.fb:active{transform:scale(.95);}
.fb.love{border-color:var(--accent);} .fb.love::after{content:"♥";position:absolute;}
.fb.nope{border-color:var(--bad,#ff6b6b);opacity:.5;}
.spin{color:var(--dim);font-size:14px;padding:6px 2px;}
@keyframes fadein{from{opacity:.2;}to{opacity:1;}}

/* ---- talk-to-it box ---- */
#intent{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--bg);color:var(--txt);font:16px/1.45 inherit;resize:vertical;min-height:62px;}
#intent:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
#intent::placeholder{color:var(--dim);}
.talkbtns{display:flex;gap:10px;margin-top:11px;}
button.primary{flex:1;padding:14px;border:none;border-radius:13px;background:var(--accent);color:#0b0b0f;
  font-weight:650;font-size:15px;cursor:pointer;transition:transform .08s,opacity .15s;}
button.primary:active{transform:scale(.98);} button.primary:disabled{opacity:.55;}
button.ghost{padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--bg);
  color:var(--txt);font-size:15px;cursor:pointer;transition:transform .08s,border-color .15s;}
button.ghost:active{transform:scale(.98);} button.ghost:hover{border-color:var(--accent);}
#finetune{margin-top:13px;border:1px solid var(--line);border-radius:13px;background:var(--bg);overflow:hidden;}
#finetune>summary{list-style:none;cursor:pointer;padding:12px 15px;font-size:13px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
#finetune>summary::-webkit-details-marker{display:none;}
#finetune>summary::after{content:"＋";float:right;color:var(--accent);}
#finetune[open]>summary::after{content:"－";}
.ftgrid{padding:4px 14px 14px;display:flex;flex-direction:column;gap:12px;}
.ftgrid label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin-bottom:7px;}

/* ---- curated result ---- */
.curation:empty{display:none;}
.curspin{padding:20px 2px;}
.curhead{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 17px;margin-bottom:12px;}
.curread{font-size:18px;line-height:1.4;font-weight:550;letter-spacing:-.01em;color:#fff;}
.curarc{color:var(--dim);font-size:14px;margin-top:8px;line-height:1.5;}
.curmeta{font-size:12px;color:var(--dim);margin-top:11px;}
.brainon{color:var(--accent);font-weight:600;}
.braindim{color:#7a6a3a;}
.curgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.curcard{position:relative;display:flex;flex-direction:column;text-align:left;background:var(--panel);
  border:2px solid var(--line);border-radius:13px;overflow:hidden;}
.curcard img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block;animation:fadein .35s ease;}
.curwhy{padding:10px 11px 12px;font-size:13px;line-height:1.42;color:var(--txt);}
.curcard.love{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.curcard.nope{border-color:var(--bad,#ff6b6b);opacity:.55;}

/* Which screens? — organized by location (one card per location) */
.tvgroups{display:flex;flex-direction:column;gap:10px;}
.tvsummary{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--dim);margin:2px 0 2px;}
.tvsumbtn{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;padding:4px 0;flex:0 0 auto;}
.tvsumbtn:active{transform:scale(.97);}
.locgroup{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.lochdr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 14px;}
.loctoggle{display:flex;align-items:center;gap:9px;flex:1;min-width:0;background:none;border:none;color:var(--txt);cursor:pointer;padding:0;text-align:left;}
.loctoggle .chev{color:var(--dim);font-size:11px;transition:transform .15s;flex:0 0 auto;}
.locgroup.collapsed .chev{transform:rotate(-90deg);}
.locname{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.loctoggle.hassel .locname{color:var(--txt);}
.loccount{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--accent);background:var(--on);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;}
.locall{flex:0 0 auto;background:none;border:none;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;}
.locall:active{transform:scale(.96);}
.locbody{padding:0 13px 13px;}
.locgroup.collapsed .locbody{display:none;}

/* Across-screens coordination (mirror / choreographed collage) */
.acrosswrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.acrosslabel{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin-bottom:10px;}
.acrosshint{color:var(--dim);font-size:13px;margin-top:9px;line-height:1.45;}

/* ---- narrow phones (iPhone SE / mini) ---- */
@media (max-width:384px){
  #app{padding:18px 14px 8px;}
  h1{font-size:25px;}
  .vibes{gap:9px;}
  .vibe{border-radius:16px;gap:7px;padding:10px 6px;}
  .vibe .ve{font-size:27px;}
  .vibe .vl{font-size:13px;}
  .chip{padding:10px 14px;font-size:14px;}
  footer{padding:12px 14px calc(12px + env(safe-area-inset-bottom));}
  #go{padding:15px;font-size:16px;}
}

/* ---- music sync block ---- */
.syncblock{margin-top:16px;padding-top:15px;border-top:1px solid var(--line);}
button.full{width:100%;margin-top:4px;}
.sensorlink{display:block;margin-top:12px;padding:14px;border-radius:13px;text-align:center;
  background:rgba(110,168,255,.12);border:1px solid var(--accent2);color:var(--accent2);
  font-size:15px;font-weight:600;text-decoration:none;}
.sensorlink[hidden]{display:none;}
.sensorlink:active{transform:scale(.99);}

/* ---- autopilot toggle ---- */
.autopilot{display:flex;align-items:center;gap:14px;justify-content:space-between;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px 16px;}
.ap-text{flex:1;min-width:0;}
.ap-title{font-size:15.5px;font-weight:650;letter-spacing:-.01em;}
.ap-sub{color:var(--dim);font-size:13px;margin-top:3px;line-height:1.42;}
.switch{flex:0 0 auto;width:52px;height:31px;border-radius:999px;border:1px solid var(--line);
  background:var(--on);position:relative;cursor:pointer;transition:background .18s,border-color .18s;}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:25px;height:25px;border-radius:50%;
  background:#fff;transition:transform .18s;box-shadow:0 1px 4px rgba(0,0,0,.5);}
.switch[aria-checked="true"]{background:var(--accent);border-color:var(--accent);}
.switch[aria-checked="true"]::after{transform:translateX(21px);}
.switch:active::after{width:28px;}