:root{
  --bg:#0c0c0e; --panel:#141417; --panel2:#1b1b20; --line:#26262e;
  --text:#f2f2f0; --muted:#9b9ba4; --accent:#c9a45c;
  --btn:#f2f2f0; --btn-text:#111113; --danger:#cf7a68; --danger-line:#5f362d;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;line-height:1.45;font-size:15px}
h1,h2,h3{font-weight:600;letter-spacing:-.01em}
button{font:inherit;color:inherit;cursor:pointer;border:0}
input{font:inherit;color:var(--text)}
[hidden]{display:none!important}

.brand{display:flex;align-items:baseline;gap:10px;font-size:.95rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.brand small{font-weight:500;color:var(--muted);font-size:.78rem;letter-spacing:.05em;text-transform:none}

.btn{background:var(--btn);color:var(--btn-text);font-weight:600;padding:12px 20px;border-radius:8px;font-size:.95rem}
.btn:active{opacity:.85}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger-line)}
.btn.small{padding:7px 12px;font-size:.82rem;border-radius:7px}

.field{width:100%;background:#101013;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:.95rem}
.field:focus{outline:none;border-color:#4b4b57}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.muted{color:var(--muted)}
.code{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.28em;color:var(--accent);font-weight:600}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--btn);color:var(--btn-text);
  padding:11px 18px;border-radius:8px;font-weight:600;font-size:.9rem;z-index:50;max-width:90vw;text-align:center;
  box-shadow:0 10px 34px rgba(0,0,0,.5)}
.toast.err{background:#a83c2b;color:#fff}

/* queue lists */
.list{list-style:none;display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.item.now{background:var(--panel2);border-color:var(--accent)}
.item img{width:80px;height:45px;object-fit:cover;border-radius:5px;flex:none;background:#000}
.item .meta{flex:1;min-width:0}
.item .title{font-weight:500;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.item .sub{font-size:.78rem;color:var(--muted)}
.item .num{font-family:ui-monospace,'SF Mono',Menlo,monospace;color:var(--accent);width:22px;text-align:center;flex:none;font-size:.85rem}
.item .act{display:flex;gap:6px;flex:none}
.icon{background:var(--panel2);border:1px solid var(--line);width:36px;height:36px;border-radius:7px;font-size:.95rem}
.item.now .icon{background:var(--bg)}
.grip{flex:none;cursor:grab;color:var(--muted);padding:8px 2px 8px 4px;font-size:1.05rem;line-height:1;
  touch-action:none;user-select:none;-webkit-user-select:none}
.grip:active{cursor:grabbing}
.item.dragging{background:var(--panel2);border-color:var(--accent);
  box-shadow:0 12px 28px rgba(0,0,0,.5);position:relative;z-index:4}

/* landing + phone page */
.page{max-width:560px;margin:0 auto;padding:22px 16px 90px;display:flex;flex-direction:column;gap:18px}
.hero{text-align:center;padding:44px 0 12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero h1{font-size:2rem}
.row{display:flex;gap:10px}
.row .field{flex:1}

/* host */
.overlay{position:fixed;inset:0;background:var(--bg);z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}
.overlay h1{font-size:2.4rem}
.host{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;height:100vh;padding:18px}
.left{display:flex;flex-direction:column;gap:14px;min-width:0}
.stage{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;width:100%}
.stage iframe{position:absolute;inset:0;width:100%;height:100%}
#idle{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,var(--panel2),var(--bg));
  display:flex;align-items:center;justify-content:center;gap:40px;padding:24px;z-index:5}
#idle h2{font-size:1.9rem;line-height:1.15}
#idle .qr{background:#fff;padding:12px;border-radius:10px}
#tapplay{position:absolute;inset:0;z-index:6;background:rgba(12,12,14,.82);display:flex;
  align-items:center;justify-content:center}
#tapplay .btn{font-size:1.4rem;padding:18px 38px}
.controls{display:flex;gap:10px;flex-wrap:wrap}
.nowplaying{font-size:1.15rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side{display:flex;flex-direction:column;gap:14px;min-height:0}
.side .join{display:flex;gap:14px;align-items:center}
.side .qr{background:#fff;padding:8px;border-radius:8px;flex:none}
.side .list{overflow-y:auto;flex:1;min-height:0}
.side h3{font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
.jurl{font-size:.78rem;word-break:break-all}

@media (max-width:900px){
  .host{grid-template-columns:1fr;height:auto}
  #idle{flex-direction:column;gap:14px;text-align:center}
  #idle h2{font-size:1.4rem}
}