/* Final shared visual layer for every signed-in app surface. */
body.console-ui {
  --ssp-canvas: #01040f;
  --ssp-panel: #030c20;
  --ssp-panel-deep: #010718;
  --ssp-panel-raised: #06152f;
  --ssp-border: #1b3d72;
  --ssp-border-soft: rgba(31, 68, 121, .68);
  --ssp-primary: #287cff;
  --ssp-primary-hi: #4c90ff;
  --ssp-cyan: #39ddf5;
  --ssp-violet: #8a5cff;
  --ssp-pink: #f04fc8;
  --ssp-text: #f2f7ff;
  --ssp-muted: #b4c2d7;
  --ssp-subtle: #8fa2bf;
  --ssp-field: #020a1c;
  --ssp-elevation: inset 0 1px rgba(255,255,255,.09), 0 18px 42px rgba(0,3,15,.42), 0 0 28px rgba(28,101,255,.07);
}

/* One panel recipe across Dashboard, TTS, Sound Alerts and Actions. */
.console-card,
.sound-alerts-page,
.event-actions-page,
.settings-drawer {
  border-color: var(--ssp-border-soft);
  color: var(--ssp-text);
  background:
    linear-gradient(125deg, rgba(255,255,255,.055), transparent 25%),
    linear-gradient(145deg, rgba(9,28,61,.98), rgba(3,12,31,.995) 74%);
  box-shadow: var(--ssp-elevation);
}

.panel-head,
.sound-alerts-header,
.event-actions-header,
.settings-drawer .drawer-head {
  border-bottom-color: rgba(41, 84, 150, .68);
  background:
    linear-gradient(180deg, rgba(21,58,112,.4), rgba(5,18,43,.58)),
    rgba(4,14,34,.86);
}

.panel-head h2,
.sound-alerts-title h1,
.event-actions-title h1,
.drawer-head h2 {
  color: var(--ssp-text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .025em;
}

.sound-alerts-title h1,
.event-actions-title h1 { text-transform: uppercase; }

.sound-alerts-title p,
.event-actions-title p,
.drawer-head p,
.event-actions-toolbar small,
.sound-alert-empty p,
.event-actions-empty p {
  color: var(--ssp-muted);
}

.sound-alerts-title > i,
.event-actions-title > i,
.sound-alert-empty > i,
.event-actions-empty > i {
  border-color: rgba(57,221,245,.48);
  color: var(--ssp-cyan);
  background: linear-gradient(145deg, rgba(20,109,185,.25), rgba(94,45,184,.17));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 18px rgba(43,172,255,.12);
}

.sound-alerts-title svg,
.event-actions-title svg,
.sound-alert-empty svg,
.event-actions-empty svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Shared call-to-action and utility control language. */
.sound-alert-primary,
.event-actions-primary,
.sound-alert-empty button,
.event-actions-empty button,
.event-action-dialog footer button.primary {
  border-color: #438dff;
  color: #fff;
  background: linear-gradient(135deg, var(--ssp-primary), #5264f2);
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 8px 22px rgba(29,91,232,.28);
}

.sound-alert-primary:hover,
.event-actions-primary:hover,
.sound-alert-empty button:hover,
.event-actions-empty button:hover,
.event-action-dialog footer button.primary:hover {
  border-color: #68a7ff;
  background: linear-gradient(135deg, var(--ssp-primary-hi), #665fff);
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 10px 28px rgba(37,106,255,.38);
  transform: translateY(-1px);
}

.sound-alert-search,
.event-actions-search,
.sound-alert-summary > span,
.sound-alert-summary button,
.event-actions-summary > span,
.event-actions-toolbar button {
  border-color: var(--ssp-border);
  color: var(--ssp-muted);
  background: rgba(5,18,43,.9);
  box-shadow: inset 0 1px rgba(255,255,255,.055);
}

.sound-alert-search:focus-within,
.event-actions-search:focus-within {
  border-color: var(--ssp-primary-hi);
  box-shadow: 0 0 0 2px rgba(40,124,255,.14), 0 0 20px rgba(40,124,255,.12);
}

.sound-alert-columns,
.event-actions-columns,
.event-actions-toolbar {
  border-color: rgba(40, 80, 139, .55);
  color: var(--ssp-subtle);
  background: rgba(5,18,43,.74);
}

.sound-alert-row,
.event-action-row,
.event-actions-activity {
  border-color: var(--ssp-border-soft);
  background:
    linear-gradient(112deg, rgba(255,255,255,.065), transparent 32%),
    linear-gradient(135deg, rgba(11,33,69,.94), rgba(5,16,39,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.075), 0 9px 23px rgba(0,4,18,.28);
}

.sound-alert-row:hover,
.event-action-row:hover { border-color: #3977bd; }

/* Matching vector control buttons; colour communicates state, not icon style. */
.sound-alert-actions button,
.event-action-controls button {
  border-color: #2b4d79;
  color: #b7c8df;
  background: linear-gradient(145deg, #0b2143, #07142d);
  box-shadow: inset 0 1px rgba(255,255,255,.07);
}

.sound-alert-actions button svg,
.event-action-controls button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-alert-actions button:hover,
.event-action-controls button:hover {
  border-color: var(--ssp-cyan);
  color: var(--ssp-cyan);
  background: rgba(19,87,139,.27);
}

.sound-alert-actions button.enabled,
.event-action-controls button.enabled {
  border-color: rgba(57,221,245,.52);
  color: var(--ssp-cyan);
  background: linear-gradient(145deg, rgba(13,71,124,.78), rgba(9,34,72,.9));
}

.sound-alert-actions button.delete:hover,
.event-action-controls button.delete:hover {
  border-color: #d94872;
  color: #ff7698;
  background: rgba(116,20,50,.25);
}

/* The settings workspace now belongs to the same design system. */
.settings-drawer .tts-tabs,
.settings-drawer .toggles,
.settings-drawer .audience-permissions,
.settings-drawer .selected-user-manager,
.settings-drawer .anti-spam-settings,
.settings-drawer .voice-equalizer,
.settings-drawer .voice-directory,
.settings-drawer .voice-lock-settings,
.settings-drawer .assigned-voices,
.settings-drawer .elevenlabs-settings,
.settings-drawer .translator-settings {
  border-color: var(--ssp-border-soft);
  background:
    linear-gradient(135deg, rgba(12,38,77,.76), rgba(5,17,39,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.settings-drawer .tts-tab,
.settings-drawer .tts-tabs button,
.drawer-head button {
  border-color: #294873;
  color: var(--ssp-muted);
  background: linear-gradient(145deg, #0b2142, #07142c);
}

.settings-drawer .tts-tab.active,
.settings-drawer .tts-tabs button.active {
  border-color: #438dff;
  color: #fff;
  background: linear-gradient(135deg, rgba(34,112,240,.72), rgba(86,69,207,.7));
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 0 18px rgba(40,124,255,.16);
}

.settings-drawer input:not([type=range]):not([type=checkbox]),
.settings-drawer select,
.settings-drawer textarea,
.sound-alert-form-body input:not([type=range]):not([type=checkbox]),
.sound-alert-form-body select,
.sound-alert-form-body textarea,
.event-action-form-body input:not([type=checkbox]),
.event-action-form-body select,
.event-action-form-body textarea {
  border-color: #2b4e7d;
  color: var(--ssp-text);
  background: var(--ssp-field);
  box-shadow: inset 0 1px rgba(255,255,255,.055);
}

.settings-drawer input:focus,
.settings-drawer select:focus,
.settings-drawer textarea:focus,
.sound-alert-form-body input:focus,
.sound-alert-form-body select:focus,
.sound-alert-form-body textarea:focus,
.event-action-form-body input:focus,
.event-action-form-body select:focus,
.event-action-form-body textarea:focus {
  border-color: var(--ssp-primary-hi);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(40,124,255,.14), 0 0 18px rgba(40,124,255,.1);
}

/* Both creation dialogs use the same shell, sections, labels and footer. */
.sound-alert-dialog,
.event-action-dialog {
  border-color: #3166aa;
  color: var(--ssp-text);
  background:
    linear-gradient(125deg, rgba(255,255,255,.055), transparent 27%),
    linear-gradient(145deg, #0a2147, #04132e 76%);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 30px 90px rgba(0,3,17,.8), 0 0 35px rgba(36,104,255,.1);
}

.sound-alert-dialog form > header,
.event-action-dialog header,
.sound-alert-dialog form > footer,
.event-action-dialog footer {
  border-color: rgba(44,89,156,.7);
  background: rgba(4,15,37,.9);
}

.alert-builder-panel,
.alert-builder-summary,
.event-action-form-section,
.sound-gift-picker .gift-picker-panel,
.sound-emote-picker-panel,
.myinstants-picker-panel {
  border-color: var(--ssp-border-soft);
  background: rgba(4,16,39,.82);
  box-shadow: inset 0 1px rgba(255,255,255,.055);
}

.alert-builder-progress button.active,
.sound-source-picker input:checked + span {
  border-color: #438dff;
  color: #aeefff;
  background: linear-gradient(135deg, rgba(28,111,230,.34), rgba(94,65,199,.27));
}

/* Predictable keyboard treatment throughout the signed-in app. */
.console-ui :is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(84,154,255,.92);
  outline-offset: 2px;
}

.console-ui button:disabled {
  filter: saturate(.45);
  opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
  .sound-alert-primary,
  .event-actions-primary,
  .sound-alert-row,
  .event-action-row { transition: none; }
}

/* Flat finish: retain the Stream Sync Pro palette without glass or gloss. */
body.console-ui,
.auth-shell {
  background: #01040f;
  background-image: none;
}

body.console-ui::before,
.console-header::before,
.console-header::after,
.app-navigation::before,
.console-card::before,
.console-card::after {
  display: none;
}

.console-header,
.app-navigation,
.console-card,
.sound-alerts-page,
.event-actions-page,
.settings-drawer,
.auth-card {
  background: #030c20;
  background-image: none;
  backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0,3,15,.32);
}

.console-card:hover {
  background: #05132b;
  background-image: none;
  box-shadow: 0 12px 27px rgba(0,3,15,.38);
}

.panel-head,
.sound-alerts-header,
.event-actions-header,
.settings-drawer .drawer-head,
.sound-alert-dialog form > header,
.event-action-dialog header,
.sound-alert-dialog form > footer,
.event-action-dialog footer {
  background: #06142e;
  background-image: none;
  backdrop-filter: none;
  box-shadow: none;
}

.sound-alert-row,
.event-action-row,
.event-actions-activity,
.queue-console .queue-status,
.queue-current,
.queue-console .queue-current.empty,
.quick-control,
.settings-drawer .tts-tabs,
.settings-drawer .toggles,
.settings-drawer .audience-permissions,
.settings-drawer .selected-user-manager,
.settings-drawer .anti-spam-settings,
.settings-drawer .voice-equalizer,
.settings-drawer .voice-directory,
.settings-drawer .voice-lock-settings,
.settings-drawer .assigned-voices,
.settings-drawer .elevenlabs-settings,
.settings-drawer .translator-settings,
.alert-builder-panel,
.alert-builder-summary,
.event-action-form-section,
.sound-gift-picker .gift-picker-panel,
.sound-emote-picker-panel,
.myinstants-picker-panel,
.alert-builder-test-card,
.sound-gift-selected,
.profile-console {
  background: #041027;
  background-image: none;
  backdrop-filter: none;
  box-shadow: none;
}

.sound-alert-row:hover,
.event-action-row:hover,
.quick-control:hover {
  background: #061731;
  background-image: none;
}

.quick-control.purple { background: #10112e; }
.quick-control.pink { background: #1d0d25; }
.quick-control.amber { background: #1d150b; }
.quick-control.cyan.paused { background: #06283b; }
.quick-control.start-ready { background: #0a2d26; }

.sound-alert-primary,
.event-actions-primary,
.sound-alert-empty button,
.event-actions-empty button,
.event-action-dialog footer button.primary,
.connect-console .primary,
.auth-primary {
  background: #287cff;
  background-image: none;
  box-shadow: none;
}

.sound-alert-primary:hover,
.event-actions-primary:hover,
.sound-alert-empty button:hover,
.event-actions-empty button:hover,
.event-action-dialog footer button.primary:hover,
.connect-console .primary:hover,
.auth-primary:hover {
  background: #3e8aff;
  background-image: none;
  box-shadow: none;
}

.sound-alert-search,
.event-actions-search,
.sound-alert-summary > span,
.sound-alert-summary button,
.event-actions-summary > span,
.event-actions-toolbar,
.event-actions-toolbar button,
.settings-drawer .tts-tab,
.settings-drawer .tts-tabs button,
.drawer-head button,
.sound-alert-actions button,
.event-action-controls button,
.tts-test-examples button {
  background: #030d22;
  background-image: none;
  box-shadow: none;
}

.settings-drawer .tts-tab.active,
.settings-drawer .tts-tabs button.active,
.alert-builder-progress button.active,
.sound-source-picker input:checked + span,
.app-navigation-item.active {
  background: #0d3573;
  background-image: none;
  box-shadow: none;
}

.sound-alert-actions button.enabled,
.event-action-controls button.enabled {
  background: #082b4a;
  background-image: none;
  box-shadow: none;
}

.settings-drawer input:not([type=range]):not([type=checkbox]),
.settings-drawer select,
.settings-drawer textarea,
.sound-alert-form-body input:not([type=range]):not([type=checkbox]),
.sound-alert-form-body select,
.sound-alert-form-body textarea,
.event-action-form-body input:not([type=checkbox]),
.event-action-form-body select,
.event-action-form-body textarea,
.connect-console input {
  background: #020a1c;
  background-image: none;
  box-shadow: none;
}

.sound-alert-dialog,
.event-action-dialog,
.profile-dialog {
  background: #030d22;
  background-image: none;
  box-shadow: 0 24px 65px rgba(0,3,15,.72);
}

.sound-alert-dialog::backdrop,
.event-action-dialog::backdrop,
.profile-dialog::backdrop {
  backdrop-filter: none;
}

.sound-alerts-title > i,
.event-actions-title > i,
.sound-alert-empty > i,
.event-actions-empty > i,
.sound-alert-icon,
.event-action-trigger > i {
  background: #072440;
  background-image: none;
  box-shadow: none;
}

/* Matte 3D depth: directional lighting and physical edges without glass. */
.console-header,
.app-navigation,
.console-card,
.sound-alerts-page,
.event-actions-page,
.settings-drawer,
.auth-card {
  border-top-color: #28538a;
  border-left-color: #214774;
  border-right-color: #0c2241;
  border-bottom-color: #081a33;
  box-shadow:
    inset 1px 1px 0 rgba(82,132,198,.1),
    inset -2px -2px 0 rgba(0,0,0,.28),
    0 5px 0 rgba(0,2,10,.48),
    0 17px 30px rgba(0,2,12,.42);
}

.console-card:hover,
.sound-alerts-page:hover,
.event-actions-page:hover {
  box-shadow:
    inset 1px 1px 0 rgba(92,144,212,.12),
    inset -2px -2px 0 rgba(0,0,0,.3),
    0 7px 0 rgba(0,2,10,.48),
    0 21px 34px rgba(0,2,12,.48);
}

.panel-head,
.sound-alerts-header,
.event-actions-header,
.settings-drawer .drawer-head {
  box-shadow:
    inset 0 1px 0 rgba(67,112,177,.12),
    inset 0 -2px 0 rgba(0,3,14,.46);
}

.quick-control,
.sound-alert-row,
.event-action-row,
.event-actions-activity,
.queue-console .queue-status,
.queue-current,
.settings-drawer .tts-tabs,
.settings-drawer .toggles,
.settings-drawer .audience-permissions,
.settings-drawer .selected-user-manager,
.settings-drawer .anti-spam-settings,
.settings-drawer .voice-equalizer,
.settings-drawer .voice-directory,
.settings-drawer .voice-lock-settings,
.settings-drawer .assigned-voices,
.settings-drawer .elevenlabs-settings,
.settings-drawer .translator-settings,
.alert-builder-panel,
.alert-builder-summary,
.event-action-form-section,
.alert-builder-test-card {
  border-top-color: #214979;
  border-left-color: #1b3f6c;
  border-right-color: #0b2446;
  border-bottom-color: #071a34;
  box-shadow:
    inset 1px 1px 0 rgba(65,112,176,.09),
    inset -2px -2px 0 rgba(0,0,0,.27),
    0 4px 0 rgba(0,2,10,.35),
    0 9px 18px rgba(0,2,12,.24);
}

.quick-control {
  transform: translateY(-1px);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.quick-control:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow:
    inset 1px 1px 0 rgba(78,132,203,.12),
    inset -2px -2px 0 rgba(0,0,0,.3),
    0 6px 0 rgba(0,2,10,.4),
    0 13px 21px rgba(0,2,12,.3);
}

.quick-control:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,.32),
    0 1px 0 rgba(0,2,10,.5);
}

.sound-alert-primary,
.event-actions-primary,
.sound-alert-empty button,
.event-actions-empty button,
.event-action-dialog footer button.primary,
.connect-console .primary,
.auth-primary {
  border-top-color: #69a8ff;
  border-left-color: #4e94ff;
  border-right-color: #1856bc;
  border-bottom-color: #103d91;
  box-shadow: 0 4px 0 #0e3b87, 0 9px 17px rgba(0,7,30,.34);
  transform: translateY(-1px);
  transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.sound-alert-primary:hover,
.event-actions-primary:hover,
.sound-alert-empty button:hover,
.event-actions-empty button:hover,
.event-action-dialog footer button.primary:hover,
.connect-console .primary:hover,
.auth-primary:hover {
  box-shadow: 0 5px 0 #0d397e, 0 12px 20px rgba(0,7,30,.4);
  transform: translateY(-2px);
}

.sound-alert-primary:active,
.event-actions-primary:active,
.sound-alert-empty button:active,
.event-actions-empty button:active,
.event-action-dialog footer button.primary:active,
.connect-console .primary:active,
.auth-primary:active {
  box-shadow: 0 1px 0 #0d397e, inset 0 2px 3px rgba(0,10,45,.24);
  transform: translateY(2px);
}

.sound-alert-search,
.event-actions-search,
.settings-drawer input:not([type=range]):not([type=checkbox]),
.settings-drawer select,
.settings-drawer textarea,
.sound-alert-form-body input:not([type=range]):not([type=checkbox]),
.sound-alert-form-body select,
.sound-alert-form-body textarea,
.event-action-form-body input:not([type=checkbox]),
.event-action-form-body select,
.event-action-form-body textarea,
.connect-console input {
  border-top-color: #102b52;
  border-left-color: #13315b;
  border-right-color: #214775;
  border-bottom-color: #285080;
  box-shadow:
    inset 3px 3px 6px rgba(0,2,12,.52),
    inset -1px -1px 0 rgba(53,95,151,.08);
}

.sound-alert-actions button,
.event-action-controls button,
.settings-drawer .tts-tab,
.settings-drawer .tts-tabs button,
.drawer-head button,
.tts-test-examples button {
  border-top-color: #315782;
  border-left-color: #294b75;
  border-right-color: #102b4e;
  border-bottom-color: #0b213e;
  box-shadow:
    inset 1px 1px 0 rgba(76,123,184,.1),
    0 3px 0 rgba(0,2,10,.35),
    0 6px 11px rgba(0,2,12,.2);
}

.sound-alert-actions button:active,
.event-action-controls button:active,
.settings-drawer .tts-tabs button:active,
.drawer-head button:active {
  transform: translateY(2px);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,.34);
}

.sound-alert-dialog,
.event-action-dialog,
.profile-dialog {
  border-top-color: #3566a2;
  border-left-color: #2c568e;
  border-right-color: #102a50;
  border-bottom-color: #091d3b;
  box-shadow:
    inset 1px 1px 0 rgba(82,135,204,.1),
    inset -2px -2px 0 rgba(0,0,0,.32),
    0 8px 0 rgba(0,2,10,.55),
    0 32px 75px rgba(0,2,13,.76);
}

/* Stronger background drop and deeper bases for pronounced 3D separation. */
.console-grid { gap: 18px; }

.console-header,
.app-navigation {
  box-shadow:
    inset 1px 1px 0 rgba(86,137,204,.11),
    inset -3px -3px 0 rgba(0,0,0,.34),
    0 7px 0 #010714,
    0 15px 25px rgba(0,0,0,.62),
    8px 17px 35px rgba(0,0,0,.34),
    0 0 24px rgba(22,82,173,.07);
}

.console-card,
.sound-alerts-page,
.event-actions-page,
.settings-drawer,
.auth-card {
  box-shadow:
    inset 1px 1px 0 rgba(91,142,209,.12),
    inset -3px -3px 0 rgba(0,0,0,.38),
    0 8px 0 #010713,
    0 12px 0 rgba(0,2,9,.42),
    0 23px 38px rgba(0,0,0,.68),
    11px 18px 31px rgba(0,0,0,.36),
    -4px -4px 17px rgba(25,79,158,.055);
}

.console-card:hover,
.sound-alerts-page:hover,
.event-actions-page:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 1px 1px 0 rgba(105,157,222,.14),
    inset -3px -3px 0 rgba(0,0,0,.4),
    0 10px 0 #010713,
    0 14px 0 rgba(0,2,9,.44),
    0 29px 45px rgba(0,0,0,.72),
    13px 22px 36px rgba(0,0,0,.4),
    -4px -4px 19px rgba(25,91,190,.07);
}

.quick-control,
.sound-alert-row,
.event-action-row,
.event-actions-activity,
.queue-console .queue-status,
.queue-current,
.settings-drawer .tts-tabs,
.settings-drawer .toggles,
.settings-drawer .audience-permissions,
.settings-drawer .selected-user-manager,
.settings-drawer .anti-spam-settings,
.settings-drawer .voice-equalizer,
.settings-drawer .voice-directory,
.settings-drawer .voice-lock-settings,
.settings-drawer .assigned-voices,
.settings-drawer .elevenlabs-settings,
.settings-drawer .translator-settings,
.alert-builder-panel,
.alert-builder-summary,
.event-action-form-section,
.alert-builder-test-card {
  box-shadow:
    inset 1px 1px 0 rgba(72,121,185,.1),
    inset -3px -3px 0 rgba(0,0,0,.31),
    0 5px 0 #010713,
    0 12px 20px rgba(0,0,0,.48),
    6px 9px 16px rgba(0,0,0,.25);
}

.quick-control:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow:
    inset 1px 1px 0 rgba(91,146,211,.13),
    inset -3px -3px 0 rgba(0,0,0,.34),
    0 8px 0 #010713,
    0 17px 24px rgba(0,0,0,.56),
    7px 12px 19px rgba(0,0,0,.28);
}

.sound-alert-primary,
.event-actions-primary,
.sound-alert-empty button,
.event-actions-empty button,
.event-action-dialog footer button.primary,
.connect-console .primary,
.auth-primary {
  box-shadow:
    0 6px 0 #0a347c,
    0 9px 0 #061d48,
    0 16px 23px rgba(0,0,0,.56);
}

.sound-alert-primary:hover,
.event-actions-primary:hover,
.sound-alert-empty button:hover,
.event-actions-empty button:hover,
.event-action-dialog footer button.primary:hover,
.connect-console .primary:hover,
.auth-primary:hover {
  box-shadow:
    0 8px 0 #0a347c,
    0 11px 0 #061d48,
    0 20px 28px rgba(0,0,0,.62);
}

.sound-alert-dialog,
.event-action-dialog,
.profile-dialog {
  box-shadow:
    inset 1px 1px 0 rgba(93,148,216,.12),
    inset -3px -3px 0 rgba(0,0,0,.4),
    0 10px 0 #010713,
    0 18px 0 rgba(0,2,10,.42),
    0 40px 90px rgba(0,0,0,.84),
    16px 27px 48px rgba(0,0,0,.46);
}

/* Directional light: every external shadow falls down and to the right. */
.console-header,
.app-navigation {
  box-shadow:
    inset 1px 1px 0 rgba(86,137,204,.11),
    inset -3px -3px 0 rgba(0,0,0,.34),
    5px 7px 0 #010713,
    11px 15px 0 rgba(0,2,9,.3),
    18px 25px 38px rgba(0,0,0,.62);
}

.console-card,
.sound-alerts-page,
.event-actions-page,
.settings-drawer,
.auth-card {
  box-shadow:
    inset 1px 1px 0 rgba(91,142,209,.12),
    inset -3px -3px 0 rgba(0,0,0,.38),
    6px 8px 0 #010713,
    13px 17px 0 rgba(0,2,9,.34),
    22px 30px 44px rgba(0,0,0,.68);
}

.console-card:hover,
.sound-alerts-page:hover,
.event-actions-page:hover {
  box-shadow:
    inset 1px 1px 0 rgba(105,157,222,.14),
    inset -3px -3px 0 rgba(0,0,0,.4),
    8px 10px 0 #010713,
    16px 21px 0 rgba(0,2,9,.36),
    27px 37px 50px rgba(0,0,0,.72);
}

.quick-control,
.sound-alert-row,
.event-action-row,
.event-actions-activity,
.queue-console .queue-status,
.queue-current,
.settings-drawer .tts-tabs,
.settings-drawer .toggles,
.settings-drawer .audience-permissions,
.settings-drawer .selected-user-manager,
.settings-drawer .anti-spam-settings,
.settings-drawer .voice-equalizer,
.settings-drawer .voice-directory,
.settings-drawer .voice-lock-settings,
.settings-drawer .assigned-voices,
.settings-drawer .elevenlabs-settings,
.settings-drawer .translator-settings,
.alert-builder-panel,
.alert-builder-summary,
.event-action-form-section,
.alert-builder-test-card {
  box-shadow:
    inset 1px 1px 0 rgba(72,121,185,.1),
    inset -3px -3px 0 rgba(0,0,0,.31),
    4px 5px 0 #010713,
    9px 12px 18px rgba(0,0,0,.5);
}

.quick-control:hover:not(:disabled) {
  box-shadow:
    inset 1px 1px 0 rgba(91,146,211,.13),
    inset -3px -3px 0 rgba(0,0,0,.34),
    6px 8px 0 #010713,
    13px 17px 23px rgba(0,0,0,.58);
}

.sound-alert-primary,
.event-actions-primary,
.sound-alert-empty button,
.event-actions-empty button,
.event-action-dialog footer button.primary,
.connect-console .primary,
.auth-primary {
  box-shadow:
    4px 6px 0 #0a347c,
    8px 11px 0 #061d48,
    13px 18px 22px rgba(0,0,0,.56);
}

.sound-alert-primary:hover,
.event-actions-primary:hover,
.sound-alert-empty button:hover,
.event-actions-empty button:hover,
.event-action-dialog footer button.primary:hover,
.connect-console .primary:hover,
.auth-primary:hover {
  box-shadow:
    5px 8px 0 #0a347c,
    10px 14px 0 #061d48,
    16px 23px 27px rgba(0,0,0,.62);
}

.app-navigation-item.active {
  box-shadow:
    inset 3px 0 #25e4ff,
    4px 6px 0 #06152c,
    9px 12px 18px rgba(0,0,0,.48);
}

.sound-alert-dialog,
.event-action-dialog,
.profile-dialog {
  box-shadow:
    inset 1px 1px 0 rgba(93,148,216,.12),
    inset -3px -3px 0 rgba(0,0,0,.4),
    8px 11px 0 #010713,
    17px 23px 0 rgba(0,2,10,.42),
    30px 42px 82px rgba(0,0,0,.84);
}

/* Match the active profile selector to the dashboard controls. */
.profile-console label > span {
  color: #91a8c8;
}

.profile-console select {
  width: 132px;
  height: 28px;
  padding: 0 29px 0 9px;
  border: 1px solid #28558d;
  border-radius: 7px;
  outline: 0;
  appearance: none;
  color: #e7f2ff;
  color-scheme: dark;
  background-color: #061731;
  background-image:
    linear-gradient(45deg,transparent 50%,#42dff1 50%),
    linear-gradient(135deg,#42dff1 50%,transparent 50%);
  background-position:
    calc(100% - 14px) 11px,
    calc(100% - 10px) 11px;
  background-size: 4px 4px,4px 4px;
  background-repeat: no-repeat;
  box-shadow:
    inset 1px 1px 0 rgba(112,169,232,.08),
    inset -2px -2px 0 rgba(0,0,0,.25);
  font-size: 10px;
  cursor: pointer;
}

.profile-console select:hover {
  border-color: #347bc1;
  background-color: #081e3e;
}

.profile-console select:focus {
  border-color: #35ddeb;
  box-shadow:
    0 0 0 2px rgba(44,221,235,.13),
    0 0 14px rgba(35,209,232,.12);
}

.profile-console select:disabled {
  opacity: .55;
  cursor: wait;
}

.profile-console select option {
  color: #e7f2ff;
  background: #071731;
}

/* Keep the TikTok username input inside its single shared outline. */
.connect-console .console-username {
  min-width: 0;
  overflow: hidden;
}

.connect-console .console-username > span {
  flex: 0 0 auto;
  padding-right: 0;
  line-height: 1;
}

.connect-console .console-username > input#username {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  padding: 0 11px 0 8px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.settings-drawer .random-voice-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid #213f6b;
  border-radius: 10px;
  background: #041027;
}

.settings-drawer .random-voice-settings[hidden] {
  display: none;
}

.settings-drawer .random-voice-settings > span {
  min-width: 0;
}

.settings-drawer .random-voice-settings strong,
.settings-drawer .random-voice-settings small {
  display: block;
}

.settings-drawer .random-voice-settings strong {
  color: #e9f3ff;
  font-size: 11px;
}

.settings-drawer .random-voice-settings small {
  margin-top: 3px;
  color: #aebed2;
  font-size: 9px;
  line-height: 1.45;
}

.settings-drawer .random-voice-settings .translator-switch {
  flex: 0 0 auto;
}

.settings-drawer .random-voice-control {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.settings-drawer .random-voice-control > small {
  min-width: 24px;
  color: #9fb1c8;
  font: 700 9px/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-align: right;
}

.settings-drawer .random-voice-control:has(input:checked) > small {
  color: #45f4e9;
  text-shadow: 0 0 8px rgba(69,244,233,.35);
}

/* Keep the queue title, count badge and action separated at every card width. */
.queue-console .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.queue-console .panel-head h2 {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  line-height: 1.2;
  white-space: nowrap;
}

.queue-console #queueTabCount,
.queue-console #clearQueueLink {
  flex: 0 0 auto;
  white-space: nowrap;
}

.queue-console #queueTabCount {
  line-height: 1.25;
}

/* Subtle moving neon trace around card outlines. */
@property --ssp-card-neon-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:is(
  .console-header,
  .app-navigation,
  .console-card,
  .quick-control,
  .sound-alert-row,
  .event-action-row,
  .event-actions-activity,
  .queue-console .queue-status,
  .queue-current,
  .settings-drawer .tts-tabs,
  .settings-drawer .toggles,
  .settings-drawer .audience-permissions,
  .settings-drawer .selected-user-manager,
  .settings-drawer .anti-spam-settings,
  .settings-drawer .voice-equalizer,
  .settings-drawer .voice-directory,
  .settings-drawer .voice-lock-settings,
  .settings-drawer .assigned-voices,
  .settings-drawer .elevenlabs-settings,
  .settings-drawer .translator-settings,
  .alert-builder-panel,
  .alert-builder-summary,
  .event-action-form-section
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:is(
  .console-header,
  .app-navigation,
  .console-card,
  .quick-control,
  .sound-alert-row,
  .event-action-row,
  .event-actions-activity,
  .queue-console .queue-status,
  .queue-current,
  .settings-drawer .tts-tabs,
  .settings-drawer .toggles,
  .settings-drawer .audience-permissions,
  .settings-drawer .selected-user-manager,
  .settings-drawer .anti-spam-settings,
  .settings-drawer .voice-equalizer,
  .settings-drawer .voice-directory,
  .settings-drawer .voice-lock-settings,
  .settings-drawer .assigned-voices,
  .settings-drawer .elevenlabs-settings,
  .settings-drawer .translator-settings,
  .alert-builder-panel,
  .alert-builder-summary,
  .event-action-form-section
)::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 100;
  inset: 0;
  height: auto;
  padding: 1.35px;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--ssp-card-neon-angle),
      transparent 0deg 270deg,
      rgba(34,222,244,.16) 284deg,
      rgba(47,174,255,.78) 306deg,
      rgba(143,91,255,.68) 329deg,
      rgba(242,66,211,.36) 344deg,
      transparent 360deg
    ),
    linear-gradient(rgba(47,136,235,.16),rgba(109,75,211,.12));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .66;
  filter: drop-shadow(0 0 5px rgba(49,151,255,.3));
  animation: sspCardNeonOrbit 10s linear infinite;
  transition: opacity .2s ease, filter .2s ease;
}

:is(
  .console-header,
  .app-navigation,
  .console-card,
  .quick-control,
  .sound-alert-row,
  .event-action-row,
  .event-actions-activity,
  .queue-console .queue-status,
  .queue-current,
  .settings-drawer .toggles,
  .settings-drawer .audience-permissions,
  .settings-drawer .selected-user-manager,
  .settings-drawer .anti-spam-settings,
  .settings-drawer .voice-equalizer,
  .settings-drawer .voice-directory,
  .settings-drawer .voice-lock-settings,
  .settings-drawer .assigned-voices,
  .settings-drawer .elevenlabs-settings,
  .settings-drawer .translator-settings,
  .alert-builder-panel,
  .alert-builder-summary,
  .event-action-form-section
):hover::after {
  opacity: .82;
  filter: drop-shadow(0 0 6px rgba(49,151,255,.4));
}

@keyframes sspCardNeonOrbit {
  to { --ssp-card-neon-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .console-header,
    .app-navigation,
    .console-card,
    .quick-control,
    .sound-alert-row,
    .event-action-row,
    .event-actions-activity,
    .queue-console .queue-status,
    .queue-current,
    .settings-drawer .tts-tabs,
    .settings-drawer .toggles,
    .settings-drawer .audience-permissions,
    .settings-drawer .selected-user-manager,
    .settings-drawer .anti-spam-settings,
    .settings-drawer .voice-equalizer,
    .settings-drawer .voice-directory,
    .settings-drawer .voice-lock-settings,
    .settings-drawer .assigned-voices,
    .settings-drawer .elevenlabs-settings,
    .settings-drawer .translator-settings,
    .alert-builder-panel,
    .alert-builder-summary,
    .event-action-form-section
  )::after {
    --ssp-card-neon-angle: 315deg;
    opacity: .45;
    animation: none;
  }
}

/* The neon surface rule must not replace navigation layout behaviour. */
.app-navigation {
  position: sticky;
  top: 0;
  align-self: start;
  margin-top: 0;
  transform: none;
}

@media (max-width: 760px) {
  .app-navigation {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Overlay navigation opens as a floating menu beside the left navigation. */
@media (min-width: 761px) {
  .console-shell > .app-navigation { z-index: 100; overflow: visible !important; }
  .app-navigation-group { position: relative; }
  .app-navigation-submenu {
    position: absolute;
    z-index: 80;
    top: 0;
    left: calc(100% + 14px);
    width: 218px;
    padding: 9px;
    border: 1px solid rgba(35,118,207,.9);
    border-radius: 11px;
    background: #07152d;
    box-shadow: 7px 10px 0 rgba(0,3,13,.48),14px 20px 28px rgba(0,0,0,.5);
  }
  .app-navigation-submenu::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 100%;
    width: 14px;
    height: 18px;
    background: linear-gradient(135deg,transparent 49%,rgba(35,118,207,.9) 50% 54%,#07152d 55%);
    clip-path: polygon(100% 0,0 50%,100% 100%);
  }
  .app-navigation-submenu button { min-height: 48px; }
  .app-navigation-submenu strong { font-size: 11px; }
  .app-navigation-submenu small { font-size: 9px; }
}