/* SPYNR subpage components. Loads after spynr.css and inherits its tokens. */

/* ---------- compact page hero ---------- */
.phero{padding:54px 0 34px; border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.phero .wrap{position:relative; z-index:1}
.phero h1{font-family:var(--display); font-weight:400; text-transform:uppercase; margin:14px 0 0;
  font-size:clamp(34px,7.5vw,68px); line-height:.9; letter-spacing:-.015em}
.phero h1 .hl{color:var(--lime)}
.phero p{margin:16px 0 0; max-width:52ch; color:var(--dim); font-size:15.5px; line-height:1.62}
.crumbs{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim2);
  letter-spacing:.1em; text-transform:uppercase}
.crumbs a:hover{color:var(--paper)}

/* ---------- generic surface ---------- */
.panel{border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(170deg,var(--ink3),var(--ink2));
  overflow:hidden; position:relative}
.panel-pad{padding:22px}
.muted{color:var(--dim2); font-size:12.5px; line-height:1.6}
.tiny{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2)}

/* ---------- live room ---------- */
.livegrid{display:grid; gap:16px; grid-template-columns:minmax(0,1fr); padding:34px 0 0}
@media(min-width:940px){.livegrid{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); align-items:start}}

.player{position:relative}
.player .glow{position:absolute; inset:-30% -10% auto auto; width:340px; height:340px; border-radius:50%;
  filter:blur(70px); opacity:.22; background:var(--lime); pointer-events:none}
.pstage{padding:24px; position:relative; z-index:1}
.proom{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.av-lg{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--display); font-size:17px; color:#07080B; background:var(--lime)}
.pname{font-weight:600; font-size:15px; line-height:1.3}
.pmeta{font-size:11.5px; color:var(--dim2); letter-spacing:.08em; text-transform:uppercase; margin-top:3px}
.ptitle{font-family:var(--display); font-size:clamp(30px,6.2vw,52px); line-height:.94; margin:26px 0 0;
  text-transform:uppercase; letter-spacing:-.01em}
.psub{margin:12px 0 0; color:var(--dim); font-size:14px}
.psub b{color:var(--paper); font-weight:600}

.bars{display:flex; align-items:flex-end; gap:3px; height:96px; margin:26px 0 6px}
.bars span{flex:1; min-width:2px; border-radius:2px; background:linear-gradient(to top,rgba(200,245,63,.28),var(--lime));
  opacity:.9; animation:bar 1.3s ease-in-out infinite alternate}
.ptime{display:flex; justify-content:space-between; font-size:11.5px; color:var(--dim2); font-variant-numeric:tabular-nums}
.pctl{display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap}
.playbtn{width:52px; height:52px; border-radius:50%; border:none; background:var(--lime); color:#07080B;
  display:grid; place-items:center; cursor:pointer; transition:transform .15s ease, background .15s ease}
.playbtn:hover{background:#d6ff5c}
.playbtn:active{transform:scale(.95)}
.playbtn svg{width:20px; height:20px}
.pcount{font-size:12.5px; color:var(--dim)}
.pcount b{color:var(--paper)}
.spacer{flex:1}

/* ---------- chat ---------- */
.chat{display:flex; flex-direction:column; max-height:560px}
.chat-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:15px 18px; border-bottom:1px solid var(--line); flex:none}
.chatfeed{padding:16px 18px; display:flex; flex-direction:column; gap:13px; overflow-y:auto; flex:1; min-height:220px}
.msg{display:flex; gap:9px; font-size:13.2px; line-height:1.5}
.msg .who{font-weight:600; color:var(--paper); flex:none}
.msg .who.host{color:var(--lime)}
.msg .say{color:rgba(244,242,236,.74); min-width:0; overflow-wrap:anywhere}
.chat-in{display:flex; gap:8px; padding:13px 18px; border-top:1px solid var(--line); flex:none}
.chat-in input{flex:1; min-width:0; background:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:11px 16px; color:var(--paper); font-family:var(--body); font-size:13px; outline:none}
.chat-in input:focus{border-color:rgba(200,245,63,.5)}
.chat-in button{flex:none; border:none; background:var(--lime); color:#07080B; font-weight:600; font-size:13px;
  padding:0 18px; border-radius:999px; cursor:pointer; font-family:var(--body)}
.chat-in button:active{transform:scale(.97)}

/* ---------- up next ---------- */
.unext{display:grid; gap:10px; grid-template-columns:minmax(0,1fr); margin-top:16px}
@media(min-width:700px){.unext{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nrow{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; background:var(--ink2); transition:border-color .18s ease, transform .18s ease}
.nrow:hover{border-color:rgba(200,245,63,.3); transform:translateY(-2px)}
.nrow .av{width:30px; height:30px; font-size:11px}
.nrow .t{min-width:0; flex:1}
.nrow .t b{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nrow .t span{display:block; font-size:11px; color:var(--dim2); letter-spacing:.06em; text-transform:uppercase; margin-top:2px}
.nrow .go{font-size:11.5px; color:var(--lime); font-weight:600; flex:none}

/* ---------- host directory ---------- */
.chiprow{display:flex; gap:8px; flex-wrap:wrap; margin:26px 0 22px}
.chip{background:transparent; border:1px solid var(--line); color:var(--dim); font-family:var(--body);
  font-size:12.5px; padding:9px 15px; border-radius:999px; cursor:pointer; transition:all .16s ease}
.chip:hover{color:var(--paper); border-color:rgba(244,242,236,.28)}
.chip[aria-pressed="true"]{background:var(--lime); border-color:var(--lime); color:#07080B; font-weight:600}
.hgrid{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
@media(min-width:680px){.hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.hgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hostcard{display:flex; flex-direction:column; padding:20px}
.hc-top{display:flex; align-items:center; gap:11px}
.hc-top .av{width:38px; height:38px; font-size:14px}
.hc-top b{display:block; font-size:14px; font-weight:600}
.hc-top span{display:block; font-size:11px; color:var(--dim2); letter-spacing:.07em; text-transform:uppercase; margin-top:2px}
.hc-line{margin:16px 0 0; font-size:13.2px; color:rgba(244,242,236,.72); line-height:1.55; flex:1}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin:15px 0 0}
.tag{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); border-radius:6px; padding:4px 7px}
.hc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:18px; padding-top:15px; border-top:1px solid var(--line)}
.rate{font-family:var(--display); font-size:21px; line-height:1}
.rate small{font-family:var(--body); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim2); display:block; margin-top:4px; font-weight:500}
.hc-foot .btn{padding:9px 15px; font-size:12.5px}
.empty{padding:40px 20px; text-align:center; color:var(--dim2); font-size:14px; display:none}

/* ---------- submit wizard ---------- */
.wiz{max-width:760px; margin:34px auto 0}
.wsteps{display:flex; align-items:center; gap:0; margin-bottom:28px}
.wstep{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.wstep .dot{width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:12px; font-weight:700; border:1px solid var(--line); color:var(--dim2);
  background:var(--ink2); transition:all .2s ease}
.wstep .lbl{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wstep.on .dot{background:var(--lime); border-color:var(--lime); color:#07080B}
.wstep.on .lbl{color:var(--paper)}
.wstep.done .dot{background:rgba(200,245,63,.16); border-color:rgba(200,245,63,.5); color:var(--lime)}
.wbar{height:1px; flex:1; background:var(--line); min-width:10px; margin:0 10px}

.dropzone{border:1.5px dashed rgba(244,242,236,.24); border-radius:var(--r); padding:44px 24px;
  text-align:center; cursor:pointer; transition:all .18s ease; background:rgba(244,242,236,.012)}
.dropzone:hover,.dropzone.over{border-color:var(--lime); background:rgba(200,245,63,.045)}
.dropzone svg{width:34px; height:34px; color:var(--lime); margin-bottom:14px}
.dropzone b{display:block; font-size:15px; font-weight:600; margin-bottom:7px}
.dropzone .muted{max-width:34ch; margin:0 auto}
.filemeta{display:none; align-items:center; gap:12px; border:1px solid rgba(200,245,63,.35);
  border-radius:14px; padding:15px 17px; background:rgba(200,245,63,.05); margin-top:16px}
.filemeta.show{display:flex}
.filemeta .fm{min-width:0; flex:1}
.filemeta .fm b{display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.filemeta .fm span{display:block; font-size:11.5px; color:var(--dim2); margin-top:3px}
.err{display:none; color:#ff8f8f; font-size:12.5px; margin-top:12px}
.err.show{display:block}

.pickgrid{display:grid; gap:10px}
.pick{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px;
  padding:15px 17px; cursor:pointer; background:var(--ink2); transition:all .16s ease}
.pick:hover{border-color:rgba(244,242,236,.26)}
.pick[aria-checked="true"]{border-color:var(--lime); background:rgba(200,245,63,.055)}
.pick .av{width:32px; height:32px; font-size:12px}
.pick .pi{flex:1; min-width:0}
.pick .pi b{display:block; font-size:13.5px; font-weight:600}
.pick .pi span{display:block; font-size:11.5px; color:var(--dim2); margin-top:2px}
.pick .pr{font-family:var(--display); font-size:18px; flex:none}

.sumrow{display:flex; justify-content:space-between; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--line); font-size:14px}
.sumrow span{color:var(--dim)}
.sumrow b{text-align:right; min-width:0; overflow-wrap:anywhere}
.sumrow.total{border-bottom:none; padding-top:18px; font-size:17px}
.sumrow.total b{font-family:var(--display); font-size:24px; color:var(--lime)}
.wfoot{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap}
.wfoot .btn{flex:1; min-width:130px}
.confirm{text-align:center; padding:44px 24px}
.confirm .tick{width:58px; height:58px; border-radius:50%; background:rgba(200,245,63,.14);
  border:1px solid rgba(200,245,63,.45); display:grid; place-items:center; margin:0 auto 22px}
.confirm .tick svg{width:26px; height:26px; color:var(--lime)}
.confirm h2{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(26px,5vw,38px);
  margin:0 0 12px; line-height:.95}
.confirm p{color:var(--dim); font-size:14.5px; line-height:1.6; max-width:40ch; margin:0 auto 24px}
.hide{display:none !important}