/* Tandoor Magic Radio — gunmetal, bright red and gold. No black anywhere. */
:root{--gun:#4b535c;--gun2:#5b646e;--ink:#2b3035;--bg:#eef0f2;--card:#ffffff;--line:#d5d9de;--red:#d9242e;--red2:#ff6b61;--gold:#e6b84f;--gold2:#f8df9b;--good:#2e9d57;--muted:#6b737c}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);overscroll-behavior:none}
.boot{padding:40vh 0;text-align:center;color:var(--muted)}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:13px}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:12px 16px;font-size:16px;font-weight:600;cursor:pointer;min-height:46px}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.block{display:block;width:100%}
.btn.small{padding:6px 10px;min-height:36px;font-size:14px}
.in{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:17px;background:#fff;color:var(--ink);min-height:48px}
label.f{display:block;margin:12px 0 4px;font-size:13px;color:var(--muted);font-weight:600}
.login{max-width:380px;margin:0 auto;padding:36px 18px}
.login .logo{display:block;width:96px;height:96px;border-radius:24px;margin:0 auto 12px;object-fit:cover}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(75,83,92,.12)}

/* the radio screen */
.radio{display:flex;flex-direction:column;height:100dvh;max-width:560px;margin:0 auto;background:var(--bg)}
.top{background:var(--gun);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
.top .row{display:flex;align-items:center;gap:8px}
.top h1{font-size:18px;margin:0;flex:1}
.top .who{font-size:12px;color:var(--gold2)}
.top .icon{background:var(--gun2);border:0;color:#fff;border-radius:10px;padding:7px 10px;font-size:14px;cursor:pointer}
.top .icon.on{background:var(--gold);color:var(--ink)}
.tabs{display:flex;gap:6px;overflow:auto;margin-top:8px;padding-bottom:2px}
.tabs button{border:0;background:var(--gun2);color:#fff;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.tabs button.on{background:var(--gold);color:var(--ink)}
.tabs .dot{display:inline-block;min-width:18px;height:18px;border-radius:9px;background:var(--red2);color:#fff;font-size:11px;line-height:18px;text-align:center;margin-left:6px;padding:0 5px}
.online{font-size:12px;color:var(--gold2);margin-top:6px;min-height:16px}
.sound{background:var(--gold);color:var(--ink);text-align:center;padding:10px;font-weight:700;cursor:pointer}
.list{flex:1;overflow:auto;padding:12px 12px 4px;display:flex;flex-direction:column;gap:8px}
.clip{max-width:86%;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px 12px;display:flex;align-items:center;gap:10px;align-self:flex-start;box-shadow:0 1px 4px rgba(75,83,92,.1)}
.clip.me{align-self:flex-end;background:var(--gold2);border-color:var(--gold)}
.clip .pl{width:42px;height:42px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:18px;cursor:pointer;flex:none}
.clip.playing .pl{background:var(--good)}
.clip .nm{font-weight:700;font-size:14px}
.clip .mt{font-size:12px;color:var(--muted)}
.day{align-self:center;font-size:12px;color:var(--muted);margin:6px 0}
.empty{margin:auto;color:var(--muted);text-align:center;padding:30px}
.talk{padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);text-align:center}
.ptt{width:100%;min-height:96px;border:0;border-radius:22px;background:linear-gradient(180deg,var(--red2),var(--red));color:#fff;font-size:22px;font-weight:800;letter-spacing:.3px;box-shadow:0 6px 0 #a21820;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.ptt.live{background:linear-gradient(180deg,#ffd45f,var(--gold));color:var(--ink);box-shadow:0 2px 0 #b98d1f;transform:translateY(4px)}
.ptt.cancel{background:var(--gun2);color:#fff;box-shadow:0 2px 0 var(--gun)}
.hint{font-size:12px;color:var(--muted);margin-top:8px;min-height:16px}
.toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%);background:var(--gun);color:#fff;padding:10px 16px;border-radius:12px;z-index:20;max-width:90%;text-align:center}