@font-face { font-family: "Anta"; src: url('/fonts/Anta-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --page: #05070c;
  --shell: #0b0e17;
  --shell-2: #111624;
  --surface: #151a28;
  --surface-2: #1c2231;
  --canvas: #111624;
  --canvas-2: #171d2c;
  --ink: #f8faf6;
  --ink-dark: #f8faf6;
  --muted: #9298a8;
  --muted-dark: #9298a8;
  --line: rgba(255, 255, 255, .09);
  --line-dark: rgba(255, 255, 255, .09);
  --accent: #a8ff35;
  --accent-deep: #10661d;
  --accent-gradient: url('/assets/green-yellow-gradient.png') center / cover no-repeat;
  --accent-ink: #0a1507;
  --purple: #7460f5;
  --danger: #ff6b71;
  --warning: #ffc65c;
  --success: #83e6b5;
  --shadow: 0 28px 80px rgba(12, 14, 23, .24);
  --button-glint: rgba(255, 255, 255, .2);
  --button-edge: rgba(0, 0, 0, .3);
  --button-shadow: rgba(0, 0, 0, .24);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

[data-theme="light"] {
  color-scheme: light;
  --page: #f4f7fb;
  --shell: #ffffff;
  --shell-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #edf4ff;
  --canvas: #ffffff;
  --canvas-2: #edf4ff;
  --ink: #080b12;
  --ink-dark: #080b12;
  --muted: #536071;
  --muted-dark: #536071;
  --line: rgba(8, 11, 18, .11);
  --line-dark: rgba(8, 11, 18, .11);
  --accent: #1769ff;
  --accent-deep: #061d4f;
  --accent-gradient: #1769ff;
  --accent-ink: #ffffff;
  --success: #087a45;
  --shadow: 0 24px 70px rgba(22, 76, 158, .16);
  --button-glint: rgba(255, 255, 255, .68);
  --button-edge: rgba(27, 58, 105, .16);
  --button-shadow: rgba(28, 55, 95, .12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.fi { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-style: normal; font-weight: 400; line-height: 1; vertical-align: middle; }
.cw-icon { display: block; width: 1em; height: 1em; flex: none; pointer-events: none; }
.source-role { color: var(--muted); font-size: .78rem; margin: 8px 0 14px; }
.display-load-progress { width: 100%; height: 6px; accent-color: var(--accent); }

.admin-body {
  min-height: 100vh;
  padding: 34px;
  background: var(--page);
  color: var(--ink);
}

.app-shell {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 18px 22px 24px;
  overflow: hidden;
  border: 10px solid #070910;
  border-radius: 32px;
  background: var(--shell);
  box-shadow: var(--shadow);
}

.app-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; min-height: 56px; }
.brand-lockup { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-lockup > span:last-child { display: grid; }
.brand-lockup strong { font-size: .82rem; letter-spacing: .12em; }
.brand-lockup small { margin-top: 2px; color: var(--muted); font-size: .61rem; }
.brand-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; overflow: hidden; }
.brand-icon img { width: 100%; height: 100%; object-fit: contain; }

.nav-pills { justify-self: center; display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.nav-pills a { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 650; }
.nav-pills a.active, .nav-pills a:hover { background: var(--accent-gradient); color: var(--accent-ink); }
.nav-pills .fi { font-size: .8rem; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .68rem; font-weight: 760; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.theme-toggle:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-1px); }
.theme-toggle .fi { color: var(--accent); font-size: .85rem; }
.connection-chip, .count-chip, .secure-chip, .state-pill { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .04em; }
.connection-chip { padding: 10px 13px; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--warning); }
.online .status-dot, .preview-badge .status-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.display-tile.ready .status-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, white);
  outline-offset: 3px;
}

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 34px 4px 24px; }
.section-kicker { display: block; margin-bottom: 8px; color: var(--accent); font-size: .66rem; font-weight: 850; letter-spacing: .17em; }
.page-heading h1 { margin: 0; color: var(--ink); font-size: clamp(2.1rem, 4vw, 4rem); font-weight: 560; letter-spacing: -.055em; line-height: .98; }
.page-heading p { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.tutorial-link { text-decoration: none; white-space: nowrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; font-weight: 750; }
.button.subtle { background: var(--surface); color: var(--ink); }
.button.accent { border-color: var(--accent); background: var(--accent-gradient); color: var(--accent-ink); }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metric-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.metric-card.featured-metric { background: var(--accent-gradient); color: var(--accent-ink); }
.metric-card.featured-metric .metric-head, .metric-card.featured-metric small { color: color-mix(in srgb, var(--accent-ink) 65%, transparent); }
.metric-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .68rem; font-weight: 700; }
.metric-icon { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 8px; }
.metric-card strong { display: block; overflow: hidden; margin-top: 18px; font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 520; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.metric-card small { display: block; overflow: hidden; margin-top: 7px; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.ready-segments { display: flex; gap: 5px; margin-top: 12px; }
.ready-segments span { height: 4px; flex: 1; border-radius: 999px; background: var(--surface-2); }
.ready-segments span.ready { background: var(--accent); }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); gap: 10px; margin-top: 10px; }
.panel { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.wall-panel, .source-panel { padding: 19px; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.panel-heading h2, .workspace-header h2 { margin: 0; color: var(--ink); font-size: 1.15rem; font-weight: 620; letter-spacing: -.025em; }
.panel-heading .section-kicker { margin-bottom: 5px; }
.panel-heading-icon { color: var(--muted); font-size: 1.1rem; }
.count-chip { padding: 8px 11px; }

.wall-map { display: grid; gap: 8px; margin-top: 18px; }
.display-tile { min-width: 0; min-height: 140px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--shell); }
.display-tile.ready { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.display-tile-head { display: flex; align-items: center; justify-content: space-between; }
.display-number { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: var(--surface-2); color: var(--ink); font-weight: 800; }
.display-tile.ready .display-number { background: var(--accent-gradient); color: var(--accent-ink); }
.display-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .63rem; font-weight: 750; text-transform: uppercase; }
.display-tile h3 { margin: 23px 0 5px; color: var(--ink); font-size: .82rem; }
.display-tile p { margin: 0; overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.display-time { margin-top: 15px; color: var(--ink); font-size: .7rem; font-variant-numeric: tabular-nums; }
.warning { display: none; margin-top: 12px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); border-radius: 12px; color: var(--warning); font-size: .72rem; }
.warning.show { display: block; }

.source-state { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 20px 0; }
.remove-asset-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--shell); color: var(--muted); }
.remove-asset-button:hover:not(:disabled) { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--shell)); color: var(--danger); }
.remove-asset-button:disabled { cursor: wait; opacity: .45; }
.remove-asset-button:focus-visible, .source-selector button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.source-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--shell); color: var(--accent); font-size: 1.1rem; }
.source-state strong { display: block; overflow: hidden; color: var(--ink); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.source-state p { margin: 5px 0 0; color: var(--muted); font-size: .69rem; line-height: 1.45; }
.file-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 12px 14px; border-radius: 999px; background: var(--accent-gradient); color: var(--accent-ink); cursor: pointer; font-size: .74rem; font-weight: 800; }
.file-button input { display: none; }
.upload-progress-wrap { margin-top: 15px; }
.upload-progress-wrap[hidden] { display: none; }
.upload-copy { display: flex; justify-content: space-between; color: var(--muted); font-size: .68rem; }
.upload-progress { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--shell); }
.upload-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .16s ease; }

.player-console { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.4fr); min-height: 330px; margin-top: 10px; overflow: hidden; border-radius: 23px; background: var(--canvas); color: var(--ink-dark); }
.preview-stage { position: relative; min-height: 330px; overflow: hidden; background: #05070c; }
.preview-stage video { width: 100%; height: 100%; min-height: 330px; display: block; object-fit: cover; }
.preview-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: #f8faf6; text-align: center; }
.preview-empty .fi { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; font-size: 1.4rem; }
.preview-empty strong { margin-top: 14px; font-size: .88rem; }
.preview-empty small { margin-top: 5px; color: #8e96a7; font-size: .67rem; }
.preview-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(7,9,15,.78); color: #d8dce6; font-size: .6rem; font-weight: 800; letter-spacing: .09em; }
.player-deck { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 54px); }
.now-playing-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 13px; align-items: center; }
.track-art { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-gradient); color: var(--accent-ink); }
.track-copy { min-width: 0; display: grid; }
.track-copy span { color: var(--muted-dark); font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.track-copy strong { overflow: hidden; margin-top: 5px; color: var(--ink-dark); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.state-pill { padding: 8px 11px; border-color: var(--line-dark); background: var(--canvas-2); color: var(--muted-dark); }
.timeline-row { display: grid; grid-template-columns: 54px 1fr 54px; gap: 13px; align-items: center; margin-top: 33px; color: var(--muted-dark); font-size: .68rem; font-variant-numeric: tabular-nums; }
.timeline-row span:last-child { text-align: right; }
input[type="range"] { width: 100%; height: 5px; accent-color: var(--accent); cursor: pointer; }
input[type="range"]:disabled { cursor: not-allowed; opacity: .4; }
.transport { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 24px; }
.control-button, .play-button { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-dark); border-radius: 50%; background: var(--canvas-2); color: var(--ink-dark); }
.control-button small { position: absolute; bottom: -2px; font-size: .47rem; font-weight: 900; }
.control-button:disabled, .play-button:disabled { cursor: not-allowed; opacity: .35; }
.play-button { width: 62px; height: 62px; border-color: var(--accent); background: var(--accent-gradient); color: var(--accent-ink); font-size: 1.3rem; }
.shortcut-hint { display: flex; justify-content: center; flex-wrap: wrap; gap: 17px; margin-top: 25px; color: var(--muted-dark); font-size: .62rem; }
kbd { padding: 3px 6px; border: 1px solid var(--line-dark); border-bottom-width: 2px; border-radius: 5px; background: var(--canvas-2); color: var(--ink-dark); font-size: .58rem; }

.workspace-panel { margin-top: 10px; padding: 22px; border-radius: 23px; background: var(--canvas); color: var(--ink-dark); }
.workspace-header { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.workspace-header .section-kicker { color: var(--accent); }
.workspace-header h2 { color: var(--ink-dark); }
.workspace-header p { margin: 7px 0 0; color: var(--muted-dark); font-size: .72rem; }
.secure-chip { padding: 9px 12px; border-color: var(--line-dark); background: var(--canvas-2); color: var(--muted-dark); }
.display-link-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.display-link-tools .button { white-space: nowrap; }
.display-link-tools .button:disabled { cursor: not-allowed; opacity: .42; }
.screen-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 20px; }
.screen-link-card { min-width: 0; padding: 15px; border: 1px solid var(--line-dark); border-radius: 17px; background: var(--canvas-2); }
.screen-link-card.inactive { opacity: .48; }
.link-card-head { display: flex; justify-content: space-between; align-items: center; }
.link-card-meta { display: flex; align-items: center; gap: 6px; }
.remove-screen-button { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line-dark)); border-radius: 9px; background: color-mix(in srgb, var(--danger) 12%, var(--canvas)); color: var(--danger); }
.remove-screen-button:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, var(--canvas)); color: #fff; }
.screen-role { display: flex; align-items: center; gap: 10px; }
.screen-role-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--canvas); color: var(--accent); }
.screen-role strong { display: block; color: var(--ink-dark); font-size: .76rem; }
.screen-role small { display: block; margin-top: 3px; color: var(--muted-dark); font-size: .6rem; }
.screen-link-card code { display: block; overflow: hidden; margin: 15px 0 10px; color: var(--muted-dark); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.link-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.link-actions a, .link-actions button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 11px; border: 1px solid var(--line-dark); border-radius: 999px; background: var(--canvas); color: var(--ink-dark); text-decoration: none; font-size: .66rem; font-weight: 750; }
.link-actions a { background: var(--accent-gradient); color: var(--accent-ink); }
.alternate-links { min-height: 1em; margin: 13px 2px 0; color: var(--muted-dark); font-size: .65rem; }

.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.top-settings .mixer-panel { grid-column: 1 / -1; }
body[data-session-mode="audio"] .top-settings { grid-template-columns: 1fr; }
.compact-panel { min-width: 0; }
.setting-title { display: grid; grid-template-columns: 40px 1fr; gap: 11px; align-items: center; }
.setting-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--canvas-2); color: var(--accent); }
.setting-title h3 { margin: 0; color: var(--ink-dark); font-size: .82rem; }
.setting-title p { margin: 4px 0 0; color: var(--muted-dark); font-size: .63rem; line-height: 1.35; }
.segmented { display: flex; gap: 3px; margin-top: 17px; padding: 4px; border-radius: 13px; background: var(--canvas-2); }
.segmented button { min-width: 0; flex: 1; padding: 9px 7px; border: 0; border-radius: 10px; background: transparent; color: var(--muted-dark); font-size: .65rem; font-weight: 720; }
.segmented button.active { background: var(--accent-gradient); color: var(--accent-ink); box-shadow: 0 5px 15px color-mix(in srgb, var(--accent) 18%, transparent); }
.audio-panel { grid-column: auto; }

/* Mode launcher */
.mode-body { min-height: 100vh; margin: 0; padding: 34px; background: var(--page); color: var(--ink); }
.mode-shell { width: min(1360px, 100%); min-height: calc(100vh - 68px); margin: 0 auto; padding: 22px 26px 24px; border: 10px solid #070910; border-radius: 32px; background: var(--shell); box-shadow: var(--shadow); }
.mode-nav { display: flex; align-items: center; justify-content: space-between; }
.mode-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: 380px; margin: 32px 0 24px; padding: 48px 16px; overflow: hidden; border-radius: 24px; background: #fdfffc; color: #080b12; }
.mode-hero-photo { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 66%; height: 100%; object-fit: cover; object-position: center; transform: translateX(3%); pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%); }
.mode-hero .section-kicker { color: #1769ff; margin-bottom: 16px; }
.mode-hero h1 { max-width: 45%; margin: 16px 0 0 0; font-family: "Anta", "Segoe UI", sans-serif; font-size: clamp(2.8rem, 4.6vw, 4.4rem); font-weight: 400; font-style: normal; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.mode-hero-gradient-word { color: #1757cf; background: linear-gradient(110deg, #1757cf 5%, #713fd4 32%, #a02c9e 59%, #1757cf 88%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hero-word-shift 7s ease-in-out infinite alternate; }
@keyframes hero-word-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .mode-hero-gradient-word { animation: none; } }
.mode-hero p { max-width: 620px; margin: 24px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mode-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 410px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: 0 12px 28px rgba(15, 27, 50, .08); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.mode-card-visual { display: block; flex: 0 0 210px; width: 100%; overflow: hidden; background: var(--surface-2); }
.mode-card-art { display: block; width: 100%; height: 100%; background-position: center; background-size: cover; transition: transform .55s cubic-bezier(.2,.75,.2,1); }
.mode-card[data-session-mode="video"] .mode-card-art { background-image: url('/assets/MOVIES.webp'); }
.mode-card[data-session-mode="audio"] .mode-card-art { background-image: url('/assets/AUDIO.webp'); background-position: center 30%; }
.mode-card[data-bg="screen-sharing"] { text-decoration: none; }
.mode-card[data-bg="screen-sharing"] .mode-card-art { background-image: url('/assets/screen-sharing-team.webp'); background-size: cover; background-position: center 15%; background-repeat: no-repeat; }
.mode-card[data-bg="youtube"] .mode-card-art { background-image: url('/assets/YOUTUBE.webp'); }
.mode-card[data-bg="mic"] { text-decoration: none; }
.mode-card[data-bg="mic"] .mode-card-art { background-image: url('/assets/mic-speakers.svg'); background-color: #112727; }
.mode-card.featured { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.mode-card:hover .mode-card-art, .mode-card:focus-visible .mode-card-art { transform: scale(1.06); }
.mode-card:not(.coming-soon):hover, .mode-card:not(.coming-soon):focus-visible { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 22px 40px rgba(15, 27, 50, .16); }
.mode-card-number, .mode-card-icon { position: absolute; top: 18px; z-index: 1; display: grid; place-items: center; height: 42px; border: 1px solid rgba(255,255,255,.72); background: rgba(255,255,255,.92); color: #102448; box-shadow: 0 6px 18px rgba(12, 24, 44, .14); backdrop-filter: blur(8px); }
.mode-card-number { right: 18px; min-width: 42px; padding: 0 9px; border-radius: 13px; font-size: .82rem; font-weight: 800; letter-spacing: .04em; }
.mode-card-icon { left: 18px; width: 42px; border-radius: 13px; color: #1769ff; font-size: 1.18rem; }
.mode-card-content { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 22px; min-width: 0; padding: 22px; }
.mode-card-copy { display: grid; gap: 7px; }
.mode-card-copy strong { font-size: clamp(1.45rem, 1.85vw, 1.8rem); line-height: 1.12; font-weight: 720; letter-spacing: -.035em; }
.mode-card-copy small { color: var(--muted); font-size: .94rem; line-height: 1.4; }
.mode-card-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--accent); font-size: .92rem; font-weight: 750; }
.mode-card-action i { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1rem; transition: transform .25s ease; }
.mode-card:hover .mode-card-action i, .mode-card:focus-visible .mode-card-action i { transform: translateX(3px); }
.mode-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .mode-card, .mode-card-art, .mode-card-action i { transition: none; } }
.mode-footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 4px 0; color: var(--muted); font-size: .67rem; }
.mode-footer span { display: inline-flex; align-items: center; gap: 8px; }
.support-button { border-color: var(--line); background: var(--surface); color: var(--ink); }
.support-button .fi { color: var(--accent); }
.modal-open { overflow: hidden; }
.support-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(5,7,12,.76); backdrop-filter: blur(14px); }
[data-theme="light"] .support-modal { background: rgba(22, 55, 108, .38); }
.support-dialog { position: relative; width: min(480px, 100%); max-height: calc(100vh - 44px); overflow-y: auto; padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.support-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); }
.support-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); font-size: 1.35rem; }
.support-dialog .button.accent { background: var(--accent); color: var(--accent-ink); }
.support-dialog .button.subtle { background: var(--surface-2); color: var(--ink); }
.support-close:hover { border-color: var(--accent); color: var(--accent); }
.support-dialog h2 { margin: 0; font-size: 2rem; font-weight: 600; letter-spacing: -.045em; }
.support-dialog > p { margin: 12px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.support-dialog > p strong { color: var(--ink); }
.support-form { margin-top: 24px; }
.support-form label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .68rem; font-weight: 750; }
.support-amount { display: grid; grid-template-columns: auto 1fr; align-items: center; margin-bottom: 12px; padding: 0 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.support-amount:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.support-amount span { color: var(--accent); font-size: 1.25rem; font-weight: 800; }
.support-amount input { min-width: 0; padding: 15px 12px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.support-form .button { width: 100%; }
.support-qr-result { display: grid; justify-items: center; gap: 12px; margin-top: 24px; text-align: center; }
.support-qr-result img { width: min(280px, 100%); aspect-ratio: 1; padding: 10px; border: 1px solid var(--line); border-radius: 22px; background: #fff; object-fit: contain; }
.support-qr-result > div { display: grid; gap: 3px; }
.support-qr-result > div span { color: var(--accent); font-size: .6rem; font-weight: 850; letter-spacing: .14em; }
.support-qr-result > div strong { font-size: 1.45rem; }
.support-qr-result > div small, .support-note { color: var(--muted); font-size: .65rem; }
.support-qr-result .button { width: min(280px, 100%); text-decoration: none; }
.support-note { display: block; margin-top: 20px; line-height: 1.45; text-align: center; font-size: .78rem; }
.launcher-busy { position: fixed; z-index: 50; inset: 0; display: grid; place-content: center; justify-items: center; background: rgba(5, 7, 12, .93); color: var(--ink); }
.launcher-busy strong { margin-top: 14px; font-size: .82rem; }
.spinner { width: 38px; height: 38px; border: 3px solid var(--surface-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Light dashboard surfaces */
[data-theme="light"] .app-shell,
[data-theme="light"] .mode-shell,
[data-theme="light"] .setup-window { border-color: #dce6f4; }
[data-theme="light"] .preview-stage,
[data-theme="light"] .presentation-frame,
[data-theme="light"] .presentation-image { background: #ffffff; }
[data-theme="light"] .preview-empty { color: var(--ink); }
[data-theme="light"] .preview-empty .fi { border-color: var(--line); background: var(--surface-2); }
[data-theme="light"] .preview-empty small { color: var(--muted); }
[data-theme="light"] .preview-badge { border-color: var(--line); background: rgba(255,255,255,.94); color: var(--ink); }
[data-theme="light"] .launcher-busy { background: rgba(244,247,251,.96); }

/* Adaptive dashboard */
.mode-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: .68rem; font-weight: 750; }
.mode-switch .fi { color: var(--accent); }
.wall-map { grid-template-columns: repeat(3, 1fr); }
.player-console { border: 1px solid var(--line); }
.player-deck { color: var(--ink); }
.presentation-frame, .presentation-image { width: 100%; height: 100%; min-height: 420px; border: 0; background: #080b12; object-fit: contain; }
.audio-visual { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 30px; color: var(--ink); text-align: center; }
.audio-orbit { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 50%; color: var(--accent); font-size: 2rem; box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 36px color-mix(in srgb, var(--accent) 3%, transparent); }
.audio-bars { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; margin-top: 46px; }
.audio-bars i { width: 5px; height: 18px; border-radius: 999px; background: var(--accent); animation: audioBar 1.15s ease-in-out infinite alternate paused; transform-origin: center; }
.audio-visual.playing .audio-bars i { animation-play-state: running; }
.audio-bars i:nth-child(2n) { animation-delay: -.65s; }
.audio-bars i:nth-child(3n) { animation-delay: -.35s; }
.audio-bars i:nth-child(4n) { animation-delay: -.9s; }
.audio-visual strong { margin-top: 8px; font-size: 1rem; }
.audio-visual small { margin-top: 6px; color: var(--muted); font-size: .67rem; }
@keyframes audioBar { from { height: 10px; opacity: .45; } to { height: 52px; opacity: 1; } }
.gesture-surface, .screen-gesture { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: default; }
.gesture-feedback { position: absolute; z-index: 25; top: 50%; display: none; align-items: center; justify-content: center; min-width: 118px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(8, 11, 18, .88); color: white; font-size: .74rem; font-weight: 800; transform: translateY(-50%); }
.gesture-feedback.left { left: 9%; }
.gesture-feedback.right { right: 9%; }
.gesture-feedback.show { display: flex; animation: feedbackPop .65s ease both; }
@keyframes feedbackPop { 0% { opacity: 0; transform: translateY(-50%) scale(.86); } 25% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1.02); } }
.preview-badge { z-index: 7; }
.admin-volume-row { display: grid; grid-template-columns: auto auto minmax(80px, 180px) 42px; justify-content: center; align-items: center; gap: 9px; margin-top: 20px; color: var(--muted-dark); font-size: .63rem; }
.admin-volume-row output { text-align: right; font-variant-numeric: tabular-nums; }
.mini-icon-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-dark); border-radius: 10px; background: var(--canvas-2); color: var(--ink-dark); }
.mini-icon-button.active { border-color: var(--accent); background: var(--accent-gradient); color: var(--accent-ink); }
.presentation-page-row { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 34px; color: var(--muted-dark); font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.presentation-page-row input { width: 72px; padding: 9px; border: 1px solid var(--line-dark); border-radius: 10px; background: var(--canvas-2); color: var(--ink-dark); text-align: center; }
.wide-control { width: 52px; }
.mixer-panel { grid-column: 1 / -1; }
.mixer-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.speaker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 17px; }
.speaker-card { min-width: 0; padding: 13px; border: 1px solid var(--line-dark); border-radius: 15px; background: var(--canvas-2); }
.speaker-card.muted { opacity: .62; }
.speaker-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.speaker-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-gradient); color: var(--accent-ink); font-size: .72rem; font-weight: 850; }
.speaker-card-head strong, .speaker-card-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speaker-card-head strong { color: var(--ink-dark); font-size: .69rem; }
.speaker-card-head small { margin-top: 3px; color: var(--muted-dark); font-size: .56rem; }
.speaker-slider { display: grid; grid-template-columns: 1fr 38px; gap: 8px; align-items: center; margin-top: 13px; }
.speaker-slider output { color: var(--muted-dark); text-align: right; font-size: .58rem; font-variant-numeric: tabular-nums; }
.presenter-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; color: var(--muted-dark); font-size: .62rem; }
.presenter-shortcuts span { padding: 8px 10px; border: 1px solid var(--line-dark); border-radius: 999px; background: var(--canvas-2); }

/* Display experience */
.screen-body { width: 100vw; height: 100vh; overflow: hidden; background: #000; color: #f8faf6; }
.wall-viewport, .wall-stage { position: fixed; inset: 0; overflow: hidden; background: #000; }
.wall-stage { width: calc(var(--wall-screens, 3) * 100vw); height: 100vh; inset: 0 auto 0 0; transform: translateX(calc(var(--screen-index, 0) * -100vw)); }
.wall-stage video { width: 100%; height: 100%; display: block; background: #000; }
.wall-stage.mode-fit video { object-fit: contain; }
.wall-stage.mode-crop video { object-fit: cover; }
.wall-stage.mode-stretch video { object-fit: fill; }
.speaker-stage { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; overflow: hidden; background: #070a10; text-align: center; }
.speaker-orbit { position: relative; display: grid; place-items: center; width: min(32vw, 280px); aspect-ratio: 1; border: 2px solid color-mix(in srgb, var(--accent) 44%, transparent); border-radius: 50%; color: var(--accent); font-size: min(12vw, 7rem); font-weight: 780; box-shadow: 0 0 0 55px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 110px color-mix(in srgb, var(--accent) 2%, transparent); }
.speaker-orbit i { position: absolute; inset: -24px; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 50%; animation: speakerPulse 2.4s ease-out infinite paused; opacity: 0; }
.speaker-stage.playing .speaker-orbit i { animation-play-state: running; }
.speaker-orbit i:nth-child(2) { animation-delay: .8s; }
.speaker-orbit i:nth-child(3) { animation-delay: 1.6s; }
.speaker-bars { display: flex; align-items: center; justify-content: center; gap: 6px; height: 90px; margin-top: 90px; }
.speaker-bars i { width: 7px; height: 12px; border-radius: 999px; background: var(--accent); animation: speakerBar .8s ease-in-out infinite alternate paused; opacity: .32; }
.speaker-stage.playing .speaker-bars i { animation-play-state: running; opacity: 1; }
.speaker-bars i:nth-child(2n) { animation-delay: -.25s; }
.speaker-bars i:nth-child(3n) { animation-delay: -.55s; }
.speaker-stage strong { max-width: min(760px, 85vw); margin-top: 18px; font-size: clamp(1.35rem, 3vw, 2.5rem); line-height: 1.2; overflow-wrap: anywhere; }
.speaker-stage small { margin-top: 8px; color: #9298a8; font-size: .8rem; }
@keyframes speakerBar { from { height: 12px; } to { height: 82px; } }
@keyframes speakerPulse { 0% { opacity: .55; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.35); } }
.document-wall { position: fixed; inset: 0 auto 0 0; width: calc(var(--wall-screens, 1) * 100vw); height: 100vh; overflow: hidden; background: #080b12; transform: translateX(calc(var(--screen-index, 0) * -100vw)); }
.document-frame, .document-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #080b12; }
.document-image { object-fit: contain; }
.pdf-canvas { position: absolute; display: block; max-width: none; background: #fff; }
.document-wall.mode-crop .document-image { object-fit: cover; }
.document-wall.mode-crop .document-image { object-position: center top; }
.document-wall.mode-stretch .document-image { object-fit: fill; }
.screen-gesture { position: fixed; z-index: 6; }
.screen-hud { position: fixed; z-index: 10; inset: 18px 20px auto; display: flex; justify-content: space-between; align-items: center; opacity: 1; transition: opacity .35s ease; pointer-events: none; }
.screen-hud.fade { opacity: 0; }
.screen-brand { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(8,11,18,.8); font-size: .68rem; letter-spacing: .1em; }
.screen-brand .fi { color: var(--accent); }
.screen-status-group { display: flex; gap: 7px; }
.screen-theme-toggle { min-height: 36px; border-color: rgba(255,255,255,.12); background: rgba(8,11,18,.8); color: #f8faf6; pointer-events: auto; }
.screen-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(8,11,18,.8); color: #d8dce5; font-size: .67rem; }
.network-pill.online .status-dot { background: #83e6b5; }
.waiting-movie { position: fixed; z-index: 4; inset: 0; display: none; place-content: center; justify-items: center; background: #070a10; text-align: center; }
.waiting-movie.show { display: grid; }
.waiting-movie .fi { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(255,255,255,.14); border-radius: 21px; color: var(--accent); font-size: 1.5rem; }
.waiting-movie strong { margin-top: 18px; font-size: 1.1rem; }
.waiting-movie small { max-width: min(650px, calc(100vw - 48px)); margin-top: 7px; color: #afb7c6; font-size: .78rem; line-height: 1.55; }
.waiting-movie a { margin-top: 18px; padding: 9px 13px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: .76rem; font-weight: 700; text-decoration: none; }

.screen-controls { position: fixed; z-index: 12; left: 50%; bottom: 22px; width: min(760px, calc(100% - 36px)); padding: 13px 16px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(8,11,18,.9); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .28s ease, transform .28s ease; }
.screen-controls.available.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.screen-control-track { display: grid; grid-template-columns: 48px 1fr 48px; gap: 10px; align-items: center; color: #9ba3b3; font-size: .62rem; font-variant-numeric: tabular-nums; }
.screen-control-track span:last-child { text-align: right; }
.screen-transport { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 9px; }
.screen-control-button, .screen-play-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: #151a27; color: #f8faf6; text-decoration: none; }
.screen-play-button { width: 44px; height: 44px; border-color: var(--accent); background: var(--accent-gradient); color: var(--accent-ink); }
.screen-shortcuts { display: block; margin-top: 7px; color: #747c8c; text-align: center; font-size: .55rem; }
.screen-volume-row { display: grid; grid-template-columns: auto minmax(80px, 180px) 40px; justify-content: center; align-items: center; gap: 9px; margin-top: 9px; color: #9298a8; font-size: .6rem; }
.screen-volume-row button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #151a27; color: #f8faf6; }
.screen-volume-row button.active { border-color: var(--accent); background: var(--accent-gradient); color: var(--accent-ink); }
.screen-volume-row output { text-align: right; font-variant-numeric: tabular-nums; }
.screen-presentation-page { display: flex; justify-content: center; align-items: baseline; gap: 8px; color: #9298a8; font-size: .62rem; letter-spacing: .1em; }
.screen-presentation-page strong { color: #f8faf6; font-size: 1.2rem; }

.setup-overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 28px; background: var(--page); color: var(--ink); }
.setup-overlay.hidden { display: none; }
.setup-window { width: min(760px, 100%); padding: 24px; border: 10px solid #070910; border-radius: 30px; background: var(--shell); box-shadow: var(--shadow); }
.setup-brand { display: flex; align-items: center; gap: 10px; }
.setup-brand > div { display: grid; }
.setup-brand strong { font-size: .74rem; letter-spacing: .12em; }
.setup-brand small { margin-top: 2px; color: var(--muted); font-size: .58rem; }
.setup-copy { margin: 42px 4px 26px; }
.setup-copy h1 { margin: 0; font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 560; line-height: .94; letter-spacing: -.06em; }
.setup-copy h1 em { color: var(--accent); font-style: normal; }
.setup-copy p { max-width: 570px; margin: 16px 0 0; color: var(--muted); font-size: .79rem; line-height: 1.55; }
.screen-picker { display: grid; gap: 8px; }
.screen-choice { min-height: 94px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--muted); text-align: left; }
.screen-choice strong { display: block; margin-bottom: 18px; color: var(--ink); font-size: 1.45rem; }
.screen-choice.selected { border-color: var(--accent); background: var(--accent-gradient); color: var(--accent-ink); }
.screen-choice.selected strong { color: var(--accent-ink); }
.setup-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.setup-checks span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .62rem; }
.setup-checks .fi { color: var(--accent); }
.ready-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px; border: 0; border-radius: 999px; background: var(--accent-gradient); color: var(--accent-ink); font-weight: 820; }
.ready-button:disabled { cursor: not-allowed; opacity: .35; }
.setup-hint { margin: 11px 0 0; color: var(--muted); text-align: center; font-size: .62rem; }
.identify { position: fixed; z-index: 40; inset: 0; display: none; place-items: center; background: var(--accent-gradient); color: var(--accent-ink); font-size: min(45vw, 45vh); font-weight: 860; }
.identify.show { display: grid; }
.connection-lost { position: fixed; z-index: 35; inset: 0; display: none; place-content: center; justify-items: center; padding: 30px; background: rgba(7,10,16,.97); text-align: center; }
.connection-lost.show { display: grid; }
.connection-lost > .fi { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; color: #ff6b71; font-size: 1.45rem; }
.connection-lost strong { margin-top: 17px; font-size: 1.4rem; }
.connection-lost small { max-width: 520px; margin-top: 8px; color: #9298a8; font-size: .77rem; line-height: 1.5; }
.play-blocked { position: fixed; z-index: 32; left: 50%; bottom: 22px; display: none; align-items: center; gap: 9px; padding: 13px 18px; border: 0; border-radius: 999px; background: var(--accent-gradient); color: var(--accent-ink); font-weight: 800; transform: translateX(-50%); }
.play-blocked.show { display: flex; }

@media (hover: hover) {
  button, a, label { transition: transform .16s ease, opacity .16s ease, background-color .16s ease; }
  button:hover:not(:disabled), .button:hover, .file-button:hover, .link-actions a:hover, .link-actions button:hover { transform: translateY(-1px); }
}

@media (max-width: 1050px) {
  .admin-body { padding: 16px; }
  .app-nav { grid-template-columns: 1fr auto; }
  .nav-pills { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-grid { grid-template-columns: 1fr; }
  .player-console { grid-template-columns: 1fr; }
  .preview-stage, .preview-stage video { min-height: 260px; }
  .settings-grid { grid-template-columns: 1fr 1fr; }
  .audio-panel { grid-column: 1 / -1; }
  .mode-grid { grid-template-columns: 1fr 1fr; }
  .speaker-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .admin-body { padding: 0; background: var(--shell); }
  .app-shell { padding: 13px; border: 0; border-radius: 0; }
  .app-nav { gap: 12px; }
  .connection-chip { padding: 10px; }
  .connection-chip span:last-child { display: none; }
  .nav-pills { justify-content: start; overflow-x: auto; }
  .nav-pills a { white-space: nowrap; }
  .page-heading { align-items: start; flex-direction: column; padding-top: 28px; }
  .heading-actions { width: 100%; }
  .heading-actions .button { flex: 1; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { padding: 14px; }
  .metric-card strong { font-size: 1.08rem; }
  .wall-map, .screen-links, .settings-grid { grid-template-columns: 1fr !important; }
  .workspace-header { flex-direction: column; }
  .player-deck { padding: 25px 18px; }
  .shortcut-hint { display: none; }
  .settings-grid { display: grid; }
  .audio-panel { grid-column: auto; }
  .mode-body { padding: 0; }
  .mode-shell { min-height: 100vh; padding: 18px 14px; border: 0; border-radius: 0; }
  .mode-hero { justify-content: flex-start; min-height: 0; margin-top: 28px; padding: 32px 12px calc(58vw + 30px); }
  .mode-hero-photo { inset: auto 0 0 auto; width: 100%; height: 58vw; object-fit: cover; object-position: center; transform: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%); mask-image: linear-gradient(to bottom, transparent, #000 16%); }
  .mode-hero h1 { max-width: 100%; font-size: clamp(2.6rem, 12vw, 4.8rem); }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card, .mode-card:last-child { grid-column: auto; min-height: 365px; }
  .mode-card-visual { flex-basis: 180px; }
  .mode-card-content { padding: 20px; }
  .mode-footer { align-items: flex-start; flex-direction: column; }
  .mode-switch span:last-child { display: none; }
  .support-button span:last-child { display: none; }
  .support-button { width: 38px; height: 38px; padding: 0; border-radius: 50%; }
  .support-dialog { padding: 24px 18px; border-radius: 22px; }
  .speaker-grid { grid-template-columns: 1fr; }
  .mixer-heading { align-items: stretch; flex-direction: column; }
  .admin-volume-row { grid-template-columns: auto auto 1fr 42px; }
  .setup-overlay { padding: 0; }
  .setup-window { min-height: 100vh; border: 0; border-radius: 0; }
}

/* YouTube source styling */
.source-selector { margin: 18px 0 0; }
.source-selector button { flex: 1; padding: 9px 7px; border: 0; border-radius: 10px; background: transparent; color: var(--muted-dark); text-align: center; font-size: .65rem; font-weight: 720; }
.source-selector button.active { background: var(--accent-gradient); color: var(--accent-ink); }
.youtube-source-form { margin-top: 0; }
.youtube-source-form label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.youtube-url-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.youtube-url-row input { padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--shell); color: var(--ink); font-size: .75rem; }
.youtube-url-row input:focus { border-color: var(--accent); }
.youtube-url-row .button { white-space: nowrap; }
.youtube-source-form small { display: block; margin-top: 6px; color: var(--muted); font-size: .65rem; }
.source-thumbnail { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; }
.youtube-preview { position: relative; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.youtube-preview img { width: 100%; max-width: 480px; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.youtube-preview > div { margin-top: 28px; }
.youtube-preview .fi { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 50%; background: var(--accent-gradient); color: var(--accent-ink); font-size: 1rem; }
.youtube-preview strong { display: block; font-size: .92rem; }
.youtube-preview small { display: block; margin-top: 5px; color: #8e96a7; font-size: .67rem; }
.mixer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.compact-segmented { min-width: 230px; margin-top: 0; }

@media (max-width: 720px) {
  .youtube-url-row { grid-template-columns: 1fr; }
}

/* YouTube wall styling */
.youtube-viewport { position: fixed; inset: 0; overflow: hidden; background: #000; }
.youtube-wall { position: absolute; inset: 0 auto 0 0; width: calc(var(--wall-screens, 3) * 100vw); height: 100vh; overflow: hidden; background: #000; transform: translateX(calc(var(--screen-index, 0) * -100vw)); }
.youtube-player-frame { position: absolute; overflow: hidden; background: #000; }
.youtube-player-frame > div, .youtube-player-frame iframe { display: block; width: 100% !important; height: 100% !important; border: 0; }

/* Unavailable modes stay visible without looking clickable. */
.mode-card.coming-soon { cursor: default; }
.coming-soon-badge { align-self: flex-start; justify-content: flex-start; gap: 8px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font-size: .88rem; font-weight: 760; letter-spacing: .01em; }
.coming-soon-badge span { font-size: 1.05rem; line-height: 1; }

/* Playlist button styling */
.playlist-button {
  margin-top: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.playlist-button:hover {
  background: var(--surface);
}

/* Active loop button */
.control-button.active {
  border-color: var(--accent);
  background: var(--accent-gradient);
  color: var(--accent-ink);
}

/* Drag and Drop Zone */
.drop-zone {
  margin-top: 15px;
  padding: 30px 20px;
  border: 2px dashed var(--line);
  border-radius: 17px;
  background: var(--surface-2);
  text-align: center;
  transition: all 0.3s ease;
}

.drop-zone.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  transform: scale(1.02);
}

.drop-zone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 auto 12px;
  font-size: 2rem;
  color: var(--muted);
}

.drop-zone strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 0.85rem;
}

.drop-zone small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
}

.drop-zone.drag-over .drop-zone-icon {
  color: var(--accent);
  animation: dropBounce 0.6s ease infinite;
}

@keyframes dropBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Make source panel a drop target */
.source-upload-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.upload-progress-wrap.preparing .upload-progress { overflow: hidden; }
#cancelPreparation { margin-top: 10px; font-size: .7rem; }
.file-button:has(input:disabled) { cursor: wait; opacity: .65; }
.upload-progress-wrap.preparing .upload-progress span { width: 35% !important; animation: upload-preparing 1.4s ease-in-out infinite; }
@keyframes upload-preparing { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .upload-progress-wrap.preparing .upload-progress span { animation: none; transform: none; width: 100% !important; opacity: .5; } }
.source-upload-row > .file-button { flex: 1 1 180px; min-width: 0; }
.format-info { position: relative; flex: 0 0 44px; align-self: center; }
.format-info summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--accent); cursor: pointer; font-size: 1rem; font-weight: 800; list-style: none; }
.format-info summary::-webkit-details-marker { display: none; }
.format-info summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.format-info[open] summary { border-color: var(--accent); }
.format-info-card { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; width: min(310px, calc(100vw - 64px)); padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: .78rem; line-height: 1.6; }
.format-info-card p { margin: 10px 0 0; color: var(--muted); }
.format-info-card b { color: var(--ink); }
.fullscreen-prompt { position: fixed; z-index: 35; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1px solid #ffffff40; border-radius: 999px; background: #111827e6; color: white; font-size: .8rem; box-shadow: 0 6px 24px #0004; }
.youtube-download-panel { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.download-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.download-panel-heading h3 { margin: 0; font-size: .9rem; }
.download-panel-heading span { color: var(--muted); font-size: .65rem; }
.youtube-download-panel label { display: block; color: var(--muted); font-size: .7rem; font-weight: 600; }
.youtube-download-panel input, .youtube-download-panel select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: var(--shell); color: var(--ink); font: inherit; }
.download-link-row { display: flex; gap: 8px; margin-top: 6px; }
.download-link-row input { flex: 1; }
.download-link-row .button { flex-shrink: 0; }
.download-video-title { display: block; margin: 18px 0 12px; font-size: .8rem; line-height: 1.5; }
.download-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.download-selectors select { margin-top: 6px; }
#downloadSizeHint { display: block; margin: 10px 0; color: var(--muted); font-size: .65rem; }
#prepareYoutubeDownload { width: 100%; justify-content: center; }
.download-status { margin: 12px 0; color: var(--muted); font-size: .72rem; line-height: 1.55; overflow-wrap: anywhere; }
.download-status.error { color: #dc3545; }
#youtubeDownloadProgress { width: 100%; height: 8px; accent-color: var(--accent); }
.download-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.download-actions .button { text-decoration: none; }
@media (max-width: 600px) { .download-link-row { flex-direction: column; } .download-selectors { grid-template-columns: 1fr; } }
.source-panel {
  position: relative;
}
.source-editor { border: 0; margin: 0; padding: 0; min-width: 0; }
.viewer-source { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 240px; text-align: center; }
.viewer-source h2 { margin: 0; font-size: 1.2rem; color: var(--ink); }
.viewer-source p { margin: 0; color: var(--muted); font-size: .8rem; }
.viewer-source label { font-size: .75rem; color: var(--muted); }
.viewer-source select { width: min(100%, 260px); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
.viewer-source .button { min-height: 44px; }

.source-panel.drag-active {
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
}

#replayPreview { position: absolute; bottom: 18px; left: 18px; z-index: 2; border: 1px solid #ffffff35; border-radius: 999px; padding: 9px 13px; color: white; background: #111827cc; cursor: pointer; font: inherit; font-size: .7rem; }
#assetStatus:empty, #previewEmptyCopy:empty { display: none; }

/* A soft polished bevel, without changing the existing theme colours. */
:is(.button, .icon-button, .theme-toggle, .file-button, .control-button, .play-button, .mini-icon-button, .remove-asset-button, .remove-screen-button, .ready-button, .screen-control-button, .screen-play-button, .fullscreen-prompt, .link-actions a, .link-actions button, .segmented button.active, .source-selector button.active, .format-info summary, .screen-volume-row button) {
  isolation: isolate;
  box-shadow: inset 0 1px 0 var(--button-glint), inset 1px 0 0 color-mix(in srgb, var(--button-glint) 40%, transparent), inset 0 -2px 0 var(--button-edge), 0 3px 6px var(--button-shadow);
}
:is(.button, .icon-button, .theme-toggle, .file-button, .control-button, .play-button, .mini-icon-button, .remove-asset-button, .remove-screen-button, .ready-button, .screen-control-button, .screen-play-button, .link-actions a, .link-actions button, .segmented button.active, .source-selector button.active, .format-info summary, .screen-volume-row button) { position: relative; }
:is(.button, .icon-button, .theme-toggle, .file-button, .control-button, .play-button, .mini-icon-button, .remove-asset-button, .remove-screen-button, .ready-button, .screen-control-button, .screen-play-button, .fullscreen-prompt, .link-actions a, .link-actions button, .segmented button.active, .source-selector button.active, .format-info summary, .screen-volume-row button)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg, var(--button-glint), transparent 38%, transparent 70%, var(--button-edge));
  z-index: -1;
}
:is(.button, .icon-button, .theme-toggle, .file-button, .control-button, .play-button, .mini-icon-button, .ready-button, .link-actions a, .link-actions button):active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 3px var(--button-edge), inset 0 -1px 0 var(--button-glint), 0 1px 2px var(--button-shadow);
}
:is(.button, .icon-button, .control-button, .play-button, .mini-icon-button, .ready-button):disabled {
  box-shadow: none;
}
.removed-screen { position: fixed; z-index: 40; inset: 0; display: grid; align-content: center; justify-items: center; padding: 28px; background: var(--page); color: var(--ink); text-align: center; }
.removed-screen > .fi { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--muted); font-size: 1.5rem; }
.removed-screen h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.2rem); letter-spacing: -.04em; }
.removed-screen p { margin: 12px 0 0; color: var(--muted); font-size: .9rem; }
.instant-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.instant-status .status-dot { background: var(--muted); }
.instant-status[data-connection='connected'], .instant-status[data-connection='local'] { color: var(--success); }
.instant-status[data-connection='connected'] .status-dot, .instant-status[data-connection='local'] .status-dot { background: var(--success); }
.instant-status[data-connection='searching'] .status-dot { background: var(--warning); animation: connectionPulse 1.2s ease-in-out infinite alternate; }
.instant-status[data-connection='disconnected'] { color: var(--danger); }
.instant-status[data-connection='disconnected'] .status-dot { background: var(--danger); }
@keyframes connectionPulse { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .audio-bars i, .speaker-bars i, .speaker-orbit i, .instant-status .status-dot { animation: none !important; } }

/* Live 3D sound: position follows stereo balance, strength follows this output. */
.preview-3d-toggle { position: absolute; z-index: 8; top: 16px; right: 16px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px #0002; }
.preview-3d-toggle:hover:not(:disabled) { border-color: var(--accent); }
.preview-3d-toggle.active { border-color: var(--accent); background: var(--accent-gradient); color: var(--accent-ink); }
.preview-3d-toggle:disabled { opacity: .5; cursor: default; }
.speaker-stage { overflow: hidden; isolation: isolate; }
.audio-gradient {
  --sound-level: 0;
  --sound-height: .18;
  --sound-x: 50%;
  --sound-span: 1;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(130px, 33vh, 320px);
  opacity: var(--sound-level);
  transform: scaleY(var(--sound-height));
  transform-origin: bottom;
  background:
    radial-gradient(ellipse calc(58% * var(--sound-span)) 105% at var(--sound-x) 110%, #9d5bff 0%, #576aff99 35%, #26dcf244 65%, transparent 88%),
    linear-gradient(0deg, #554cff99, #3cdcef33 35%, transparent 88%);
  filter: blur(12px);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) { .audio-gradient { transform: none; } }