*{box-sizing:border-box}
:root{
  --bg:#0b1220;
  --card:#121a2a;
  --text:#e8eefc;
  --muted:#94a3b8;
  --accent:#4f8cff;
  --accent-2:#1f6feb;
  --danger:#ef4444;
  --ok:#22c55e;
  --border:#1e293b;
}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b1220,#0d1528);color:var(--text);font:14px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial}
.app{min-height:100%;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0e1726;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.brand{font-weight:700;letter-spacing:1px}
.spacer{flex:1}
.userinfo{opacity:.9}
.layout{display:grid;grid-template-columns:1fr 360px;gap:16px;padding:16px;flex:1}
@media (max-width: 1000px){.layout{grid-template-columns:1fr} .comments-panel{position:fixed;right:16px;left:16px;bottom:74px;top:100px}}
.player-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.adminbar{display:flex;align-items:center;gap:8px;padding:10px;background:#0d1630;border-bottom:1px solid var(--border)}
.adminbar.hidden{display:none}
.select,.range{background:#0c1426;border:1px solid var(--border);color:var(--text);padding:6px;border-radius:8px}
.range{width:240px}
.timebox{font-variant-numeric:tabular-nums;opacity:.8}
.player-wrap{position:relative;background:#050b16;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:420px}
video{width:100%;max-height:70vh;background:#000;outline:none}
.toggle-comments{position:absolute;top:12px;right:12px;background:#0d1630;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:10px;cursor:pointer}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,8,16,.6);backdrop-filter:blur(2px);font-size:18px}
.user-controls{display:flex;gap:8px;align-items:center;padding:10px;border-top:1px solid var(--border);background:#0d1630;width:100%}
.btn{background:var(--accent);border:none;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.small{padding:6px 10px}
.btn.subtle{background:#0d1630;border:1px solid var(--border)}
.btn.wide{width:100%}
.footer{padding:14px;text-align:center;border-top:1px solid var(--border);background:#0e1726;color:var(--muted)}
.comments-panel{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.comments-panel.hidden{display:none}
.comments-header{padding:10px 12px;border-bottom:1px solid var(--border);font-weight:600}
.comments-list{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.comment{padding:8px 10px;background:#0e1832;border:1px solid var(--border);border-radius:10px}
.comment .meta{font-size:12px;color:var(--muted)}
.comments-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border)}
.comments-input input{flex:1;background:#0c1426;color:var(--text);border:1px solid var(--border);padding:8px;border-radius:10px;outline:none}
.login-mask{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.7));display:flex;align-items:center;justify-content:center}
.login-card{width:320px;background:#0f1629;border:1px solid var(--border);padding:18px;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.login-card h2{margin:0 0 12px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field input{background:#0c1426;color:var(--text);border:1px solid var(--border);padding:8px;border-radius:10px;outline:none}
.muted{color:var(--muted);margin-top:8px}
.hidden{display:none}
.time-label{font-variant-numeric:tabular-nums}