:root { color-scheme: light dark; }
html,body { height:100%; }
body { margin:0; font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; background: #0f1115; color: #e7f6f0; overflow-y:auto; }
.wrap { max-width: 960px; margin: 0 auto; padding: 12px 16px 24px; box-sizing:border-box; }
header { margin: 4px 0 8px; }
h1 { margin: 0 0 8px; font-size: clamp(22px, 4vw, 36px); }
p.lead { margin: 0; opacity: .9; }
section { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 16px; margin: 16px 0; }
.section-title { font-size: 18px; margin: 0 0 12px; }
.row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.control { display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); }
.control label { font-weight: 600; }
.hint { font-size: 12px; opacity: .8; }
.radios { display:flex; gap: 12px; }
.actions { display:flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
button.primary { background: #2aa198; color: #fff; border: 1px solid #6ff; padding: 10px 14px; border-radius: 8px; cursor: pointer; }
button.secondary { background: rgba(255,255,255,.06); color:#fff; border: 1px solid rgba(255,255,255,.15); padding: 10px 14px; border-radius: 8px; cursor: pointer; }

/* Jump UI styles */
.jump-container { display:none; max-width: 980px; margin: 8px auto; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); padding:16px; border-radius:12px; box-sizing:border-box; }
.top-tabs { display:flex; gap:12px; margin: 0 0 12px; }
.tab { padding:8px 12px; background: rgba(0,0,0,.25); border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.06); transition: background 0.2s ease, border-color 0.2s ease; }
.tab:hover { border-color: rgba(255,255,255,.4); }
.tab.active { background: #1b5d49; border-color: #1b5d49; color: #e2fff9; box-shadow: 0 0 0 1px rgba(255,255,255,0.4); }
.video-tabs { display:flex; gap:12px; margin:4px 0 6px; justify-content:center; }
.jump-body { display:flex; gap:16px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.media-layout { display:flex; gap:16px; align-items:stretch; flex:1; width:100%; }
.video-area { flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; }
.tab-info {
    position:absolute;
    top:8px;
    right:8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
    color: #d8ffef;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.video-wrapper { width: min(640px, 100%); aspect-ratio: 4 / 3; background:#000; display:flex; align-items:center; justify-content:center; position:relative; }
video#jumpVideo { width:100%; height:100%; background:#000; object-fit: fill; }
.controls-row { display:flex; gap:12px; align-items:center; margin-top:-2px; width:100%; justify-content:space-between; }
.jump-actions { display:flex; justify-content:flex-end; margin-top:16px; }

.sync-controls { display:flex; flex-direction:column; gap:12px; width:100%; align-items:center; }
.sync-row { display:flex; align-items:center; gap:8px; width:100%; justify-content:center; }
.sync-row .arrow-btn { flex:0 0 auto; }
.sync-row .sync-slider { width:100%; max-width:500px; }
.mouse-legend { width:100%; display:flex; gap:12px; align-items:center; justify-content:center; }
.mouse-icon { width:78px; height:auto; }
.volume-column { width:120px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:12px; justify-content:space-between; align-self:stretch; }
.volume-slider-wrapper { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; width:100%; }
.volume-slider-vertical { -webkit-appearance: slider-vertical; writing-mode: bt-lr; width:36px; height:220px; }
.volume-display { font-size: 12px; opacity: .8; text-align:center; }
.volume-label { font-weight:600; }
.arrow-btn.vertical { width:32px; height:32px; padding:0; }
.video-select { display:flex; gap:8px; margin-left:8px; }
.hidden { display:none !important; }
.permission-modal { position:fixed; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); }
.permission-box { background:#0f1115; border:1px solid rgba(255,255,255,.08); padding:18px; border-radius:10px; max-width:560px; }

/* Visualizer */
.visualizer-container { width:150px; height:480px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; }
.viz-meter { display:flex; align-items:stretch; gap:6px; }
.viz-scale { display:flex; flex-direction:column; justify-content:space-between; height:420px; font-size:11px; opacity:.75; }
.viz-mark { display:flex; align-items:center; gap:6px; }
.viz-rule { width:18px; height:1px; background:rgba(255,255,255,.25); }
canvas#visualizer { width:28px; height:420px; background:transparent; display:block; }
.viz-readout { font-size:12px; opacity:.85; }

/* Settings overlay inside jump container */
.settings-panel { margin-top:12px; }
.settings-overlay-btn { position:fixed; right:18px; top:18px; background:transparent; border:1px solid rgba(255,255,255,.06); padding:8px; border-radius:8px; cursor:pointer; }
.settings-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); }
.settings-modal.open { display:flex; }
.settings-box { background:#0f1115; border:1px solid rgba(255,255,255,.06); padding:16px; border-radius:10px; width:720px; max-width:95%; }
.settings-tab { padding:8px 12px; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.04); }
.settings-tab.active { background:rgba(42,161,152,.12); }