:root {
  --bg: #0b0d10;
  --panel: #15191f;
  --panel2: #1d222a;
  --text: #f7f8fa;
  --muted: #9ea7b3;
  --line: #2c333d;
  --accent: #4fa3ff;
  --danger: #ff6b6b;
  --ok: #65d68a;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); background:#101318; position:sticky; top:0; z-index:20; }
.brand { font-weight:700; }
.muted { color:var(--muted); }
.app { padding:18px; max-width:1500px; margin:0 auto; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; }
.card h2,.card h3 { margin:0 0 12px; }
.btn { border:1px solid var(--line); color:var(--text); background:var(--panel2); border-radius:9px; padding:10px 14px; }
.btn:hover { border-color:#55606e; }
.btn.primary { background:var(--accent); color:#07111d; border-color:var(--accent); font-weight:700; }
.btn.danger { color:#fff; background:#4b2227; border-color:#77353d; }
.btn.small { padding:6px 9px; font-size:14px; }
.controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
input[type=text], input[type=password], input[type=datetime-local], textarea { width:100%; background:#0d1014; color:var(--text); border:1px solid var(--line); border-radius:9px; padding:10px 12px; }
textarea { min-height:100px; resize:vertical; }
label { display:block; color:var(--muted); font-size:14px; margin-bottom:6px; }
.field { margin-bottom:12px; }
.status { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:14px; }
.dot { width:9px; height:9px; border-radius:999px; background:var(--danger); display:inline-block; }
.dot.ok { background:var(--ok); }
.preview { position:relative; background:#000; aspect-ratio:16/9; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.preview img,.preview video { width:100%; height:100%; object-fit:contain; }
.preview .special { text-align:center; padding:6%; width:100%; }
.preview .special .big { font-size:clamp(28px,5vw,66px); font-weight:800; }
.preview .special .sub { margin-top:12px; color:#cdd2d8; }
.preview .question-text { font-size:clamp(22px,3.4vw,50px); font-weight:700; line-height:1.18; }
.slide-label { font-size:13px; color:var(--muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.08em; }
.question-list { display:flex; flex-direction:column; gap:8px; }
.question { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); background:#10141a; border-radius:10px; padding:12px; }
.question.active { border-color:var(--accent); background:#11263b; }
.question.answered { opacity:.55; }
.question-main { flex:1; cursor:pointer; line-height:1.35; }
.question-actions { display:flex; gap:6px; }
.slide-row { display:grid; grid-template-columns:56px 120px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.slide-row:last-child { border-bottom:0; }
.thumb { width:120px; aspect-ratio:16/9; background:#000; border-radius:7px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; }
.thumb img,.thumb video { width:100%; height:100%; object-fit:contain; }
.login-wrap { max-width:420px; margin:14vh auto; padding:18px; }
.login-wrap h1 { margin-top:0; }
.fullscreen-viewer { position:fixed; inset:0; overflow:hidden; background:#000; }
.viewer-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#000; }
.viewer-stage > img,.viewer-stage > video { width:100%; height:100%; object-fit:contain; }
.viewer-special { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:7vw; background:radial-gradient(circle at 50% 38%, #1c2633 0%, #0b0d10 58%, #050607 100%); }
.viewer-special .eyebrow { text-transform:uppercase; letter-spacing:.22em; color:#b7c1cc; font-size:clamp(14px,1.7vw,28px); margin-bottom:2.5vh; }
.viewer-special .count { font-size:clamp(76px,15vw,240px); font-weight:800; line-height:.9; font-variant-numeric:tabular-nums; }
.viewer-special .subtitle { margin-top:3vh; color:#c9d0d8; font-size:clamp(20px,2.5vw,42px); }
.viewer-special .qa-mark { font-size:clamp(80px,16vw,240px); line-height:.8; font-weight:800; opacity:.22; }
.viewer-special .qa-question { max-width:1400px; font-size:clamp(38px,5.5vw,92px); font-weight:750; line-height:1.13; }
.viewer-status { position:absolute; left:16px; bottom:14px; background:rgba(0,0,0,.55); color:#bfc7d1; border-radius:999px; padding:7px 11px; font-size:13px; z-index:10; transition:opacity .3s; }
.viewer-status.hidden { opacity:0; }
.navlinks { display:flex; gap:12px; flex-wrap:wrap; }
.navlinks a { text-decoration:none; color:#cad2dc; }
@media (max-width:900px) { .grid2,.grid3 { grid-template-columns:1fr; } .slide-row { grid-template-columns:40px 86px minmax(0,1fr); } .slide-row .row-actions { grid-column:1/-1; } .thumb { width:86px; } }

.control-statusbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.connection-count { display:inline-flex; min-width:22px; height:22px; align-items:center; justify-content:center; margin-left:6px; padding:0 6px; border-radius:999px; background:#0d1014; color:var(--muted); font-size:12px; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); }
.modal-backdrop.open { display:flex; }
.modal { width:min(680px,100%); max-height:80vh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.modal-header h2 { margin:0 0 4px; }
.connection-list { display:flex; flex-direction:column; }
.connection-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); color:var(--text); }
.connection-row:last-child { border-bottom:0; }

.manage-tabs { display:flex; gap:4px; padding:0 18px; border-bottom:1px solid var(--line); background:#101318; }
.manage-tab { appearance:none; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); padding:12px 16px 10px; font-weight:700; cursor:pointer; }
.manage-tab:hover { color:var(--text); }
.manage-tab.active { color:var(--text); border-bottom-color:var(--accent); }
.manage-tabpanel { display:none; }
.manage-tabpanel.active { display:block; }
.color-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; margin-top:16px; }
.color-field { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:#10141a; color:var(--text); }
.color-field input[type=color] { width:46px; height:32px; padding:0; border:1px solid var(--line); border-radius:6px; background:transparent; cursor:pointer; }
.settings-preview { min-height:260px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px; border-radius:12px; overflow:hidden; background:radial-gradient(circle at 50% 38%,#1c2633 0%,#050607 100%); }
.settings-preview .eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:14px; margin-bottom:16px; }
.settings-preview .count { font-size:64px; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; }
.settings-preview .subtitle { margin-top:16px; font-size:18px; }
.settings-preview .qa-mark { font-size:82px; line-height:.8; font-weight:800; opacity:.28; margin-bottom:18px; }
@media (max-width:650px) { .color-grid { grid-template-columns:1fr; } }

/* Fixed 16:9 dynamic slide canvas and layout editor */
.fullscreen-viewer { display:flex; align-items:center; justify-content:center; }
.viewer-stage { position:relative; inset:auto; width:min(100vw,177.777778vh); height:min(100vh,56.25vw); aspect-ratio:16/9; flex:0 0 auto; container-type:inline-size; overflow:hidden; }
.viewer-stage > img,.viewer-stage > video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.special-canvas { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; container-type:inline-size; background-position:center; background-size:cover; background-repeat:no-repeat; }
.special-el { position:absolute; transform:translate(-50%,-50%); width:max-content; max-width:88%; text-align:center; line-height:1.08; white-space:normal; }
.special-heading { text-transform:uppercase; letter-spacing:.18em; font-weight:600; }
.special-timer { font-weight:800; font-variant-numeric:tabular-nums; line-height:.9; }
.special-subtitle { font-weight:400; }
.special-mark { font-weight:800; line-height:.8; opacity:.28; }
.special-question { font-weight:750; line-height:1.13; width:84%; }
.preview .special-canvas { position:absolute; inset:0; }
.settings-stack { display:grid; gap:18px; }
.layout-preview { position:relative; width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--line); border-radius:12px; overflow:hidden; container-type:inline-size; margin:12px 0 16px; }
.layout-preview .special-canvas { position:absolute; inset:0; }
.background-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; align-items:end; margin-bottom:14px; }
.background-controls input[type=file] { max-width:100%; }
.layout-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.element-editor { border:1px solid var(--line); border-radius:10px; padding:12px; background:#10141a; }
.element-editor-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.inline-check { display:flex; align-items:center; gap:7px; margin:0; color:var(--text); }
.element-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.element-grid label { margin:0; }
.element-grid input[type=number] { width:100%; margin-top:5px; background:#0d1014; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 9px; }
.sticky-save { position:sticky; bottom:0; margin-top:18px; padding:12px 0; background:linear-gradient(transparent,var(--bg) 30%); }
@media(max-width:900px){.layout-controls{grid-template-columns:1fr}.background-controls{grid-template-columns:1fr}.element-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.element-grid{grid-template-columns:1fr}.special-heading{letter-spacing:.1em}}

/* Countdown MP3 + live audio visualizer */
.audio-settings { display:grid; gap:12px; margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#10141a; }
.visualizer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.visualizer-grid label { margin:0; }
.visualizer-grid input[type=number] { width:100%; margin-top:5px; background:#0d1014; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 9px; }
.audio-visualizer { position:absolute; transform:translate(-50%,-50%); display:block; pointer-events:none; }
.preview-audio-bars { display:flex; align-items:flex-end; justify-content:space-between; gap:1.2%; }
.preview-audio-bars i { display:block; flex:1 1 0; min-width:1px; height:35%; background:currentColor; border-radius:999px 999px 2px 2px; animation:previewAudioBar 1.05s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -0.055s); opacity:.9; }
.preview-audio-bars i:nth-child(3n) { animation-duration:.73s; }
.preview-audio-bars i:nth-child(4n) { animation-duration:1.31s; }
@keyframes previewAudioBar { 0%{height:12%} 35%{height:82%} 68%{height:38%} 100%{height:96%} }
.audio-unlock { position:absolute; z-index:30; left:50%; bottom:28px; transform:translateX(-50%); background:rgba(10,13,17,.9); border:1px solid rgba(255,255,255,.25); color:#fff; padding:12px 18px; border-radius:10px; font:inherit; cursor:pointer; }
.audio-unlock.hidden { display:none; }
@media(max-width:700px){.visualizer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.visualizer-grid{grid-template-columns:1fr}}

/* Presenter layout: dominant current slide, compact next slide */
.presenter-app { max-width:1600px; }
.presenter-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:18px; align-items:start; }
.presenter-nav { margin-top:18px; display:grid; grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr) auto; gap:12px; align-items:center; }
.presenter-nav-btn:first-child { justify-self:start; }
.presenter-nav-btn:nth-of-type(2) { justify-self:end; }
.presenter-counter { min-width:110px; text-align:center; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.arrow-toggle { min-width:72px; transition:opacity .15s ease,border-color .15s ease; }
.arrow-toggle.active { opacity:1; border-color:#55606e; }
.arrow-toggle.inactive { opacity:.45; }
.presenter-hint { margin-top:12px; min-height:20px; }
@media(max-width:900px){
  .presenter-grid { grid-template-columns:1fr; }
  .presenter-nav { grid-template-columns:1fr auto 1fr; }
  .arrow-toggle { grid-column:1/-1; justify-self:end; }
}