/*
  Warm Signal Console
  Default Rostra theme layer. Loaded last so it can standardize the app-wide
  visual language without changing the existing render or behavior contract.
*/

:root {
  color-scheme: dark;

  --studio-bar-height: 64px;
  --rail-width: 224px;
  --content-max: 1640px;

  --font-sans: "Rostra Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-display: "Rostra Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-label: "Rostra Oswald", "DIN Alternate", "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  --font-mono: "SF Mono", "Andale Mono", "Cascadia Mono", ui-monospace, monospace;
  --font-numeric: var(--font-mono);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --motion-fast: 120ms;
  --motion-standard: 200ms;
  --motion-panel: 260ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-press: cubic-bezier(.2, 0, .1, 1);

  --bg: #080a0d;
  --bg-soft: #0d1117;
  --surface: #121720;
  --surface-2: #18202b;
  --surface-3: #202a36;
  --surface-warm: #1e1a15;
  --surface-raised: #1b2330;
  --elevated: #202936;

  --ink: #f7f3ea;
  --ink-soft: #d7d0c4;
  --ink-muted: #9aa4b2;
  --ink-subtle: #6f7a88;
  --line: rgba(215, 208, 196, 0.13);
  --line-strong: rgba(215, 208, 196, 0.23);
  --line-hot: rgba(47, 214, 186, 0.34);

  --accent: #2fd6ba;
  --accent-strong: #5be4d0;
  --accent-soft: rgba(47, 214, 186, 0.14);
  --accent-warm: #f2a93b;
  --blue: #64a8ff;
  --blue-soft: rgba(100, 168, 255, 0.15);
  --amber: #f2b84b;
  --amber-soft: rgba(242, 184, 75, 0.16);
  --coral: #ff6767;
  --coral-soft: rgba(255, 103, 103, 0.15);
  --red: #ff6767;
  --green: #42d782;
  --green-soft: rgba(66, 215, 130, 0.15);
  --cyan: #2fd6ba;
  --magenta: #c084fc;
  --focus-ring: #a7f3d0;

  --nav: rgba(18, 23, 32, 0.86);
  --nav-2: rgba(27, 35, 48, 0.82);
  --nav-3: #202a36;
  --nav-ink: var(--ink);
  --nav-muted: var(--ink-muted);

  --monitor: #0b0e13;
  --monitor-2: #111722;
  --monitor-ink: #f7f3ea;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 24px 64px rgba(0, 0, 0, 0.32);
  --shadow-glass: 0 20px 60px rgba(0, 0, 0, 0.28);
  --inset-highlight: inset 0 1px rgba(255, 255, 255, 0.08);
  --control-shadow: var(--inset-highlight), 0 1px 2px rgba(0, 0, 0, 0.24);
  --control-shadow-active: inset 0 1px 2px rgba(0, 0, 0, 0.48);
  --module-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0));
  --module-shadow: var(--inset-highlight), var(--shadow-sm);

  --activity-wins: var(--green);
  --activity-discussion: var(--blue);
  --activity-think-fast: var(--amber);
  --activity-never-met: var(--magenta);
  --activity-extra-credit: #7dd3fc;
  --activity-presentations: #f7f3ea;
  --activity-takeaways: #34d399;
  --activity-report: #aab4c3;

  --remodel-bg: var(--bg);
  --remodel-surface: var(--surface);
  --remodel-surface-2: var(--surface-2);
  --remodel-surface-3: var(--surface-3);
  --remodel-raised: var(--surface-raised);
  --remodel-surface-raised: var(--surface-raised);
  --remodel-ink: var(--ink);
  --remodel-ink-soft: var(--ink-soft);
  --remodel-ink-muted: var(--ink-muted);
  --remodel-line: var(--line);
  --remodel-line-strong: var(--line-strong);
  --remodel-green: var(--green);
  --remodel-amber: var(--amber);
  --remodel-red: var(--red);
  --remodel-blue: var(--blue);
  --remodel-cyan: var(--cyan);
  --remodel-magenta: var(--magenta);
  --remodel-panel-shadow: var(--module-shadow);
  --remodel-control-shadow: var(--control-shadow);
  --remodel-stage-shadow: var(--shadow-md);
  --remodel-inset: var(--inset-highlight);

  --analog-bg: var(--bg);
  --analog-bg-deep: var(--bg-soft);
  --analog-panel: var(--surface);
  --analog-panel-2: var(--surface-2);
  --analog-panel-3: var(--surface-3);
  --analog-ink: var(--ink);
  --analog-cream: var(--ink);
  --analog-soft: var(--ink-soft);
  --analog-muted: var(--ink-muted);
  --analog-line: var(--line);
  --analog-line-strong: var(--line-strong);
  --analog-green: var(--green);
  --analog-green-deep: var(--green-soft);
  --analog-amber: var(--amber);
  --analog-red: var(--red);
  --analog-blue: var(--blue);
  --analog-black: var(--monitor);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #080a0d;
  --bg-soft: #0d1117;
  --surface: #121720;
  --surface-2: #18202b;
  --surface-3: #202a36;
  --surface-warm: #1e1a15;
  --surface-raised: #1b2330;
  --elevated: #202936;

  --ink: #f7f3ea;
  --ink-soft: #d7d0c4;
  --ink-muted: #9aa4b2;
  --ink-subtle: #6f7a88;
  --line: rgba(215, 208, 196, 0.13);
  --line-strong: rgba(215, 208, 196, 0.23);
  --line-hot: rgba(47, 214, 186, 0.34);

  --accent: #2fd6ba;
  --accent-strong: #5be4d0;
  --accent-soft: rgba(47, 214, 186, 0.14);
  --accent-warm: #f2a93b;
  --blue: #64a8ff;
  --blue-soft: rgba(100, 168, 255, 0.15);
  --amber: #f2b84b;
  --amber-soft: rgba(242, 184, 75, 0.16);
  --coral: #ff6767;
  --coral-soft: rgba(255, 103, 103, 0.15);
  --red: #ff6767;
  --green: #42d782;
  --green-soft: rgba(66, 215, 130, 0.15);
  --cyan: #2fd6ba;
  --magenta: #c084fc;
  --focus-ring: #a7f3d0;

  --nav: rgba(18, 23, 32, 0.86);
  --nav-2: rgba(27, 35, 48, 0.82);
  --nav-3: #202a36;
  --nav-ink: var(--ink);
  --nav-muted: var(--ink-muted);

  --monitor: #0b0e13;
  --monitor-2: #111722;
  --monitor-ink: #f7f3ea;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 24px 64px rgba(0, 0, 0, 0.32);
  --shadow-glass: 0 20px 60px rgba(0, 0, 0, 0.28);
  --inset-highlight: inset 0 1px rgba(255, 255, 255, 0.08);
  --control-shadow: var(--inset-highlight), 0 1px 2px rgba(0, 0, 0, 0.24);
  --control-shadow-active: inset 0 1px 2px rgba(0, 0, 0, 0.48);
  --module-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0));
  --module-shadow: var(--inset-highlight), var(--shadow-sm);

  --remodel-bg: var(--bg);
  --remodel-surface: var(--surface);
  --remodel-surface-2: var(--surface-2);
  --remodel-surface-3: var(--surface-3);
  --remodel-raised: var(--surface-raised);
  --remodel-surface-raised: var(--surface-raised);
  --remodel-ink: var(--ink);
  --remodel-ink-soft: var(--ink-soft);
  --remodel-ink-muted: var(--ink-muted);
  --remodel-line: var(--line);
  --remodel-line-strong: var(--line-strong);
  --remodel-green: var(--green);
  --remodel-amber: var(--amber);
  --remodel-red: var(--red);
  --remodel-blue: var(--blue);
  --remodel-cyan: var(--cyan);
  --remodel-magenta: var(--magenta);
  --remodel-panel-shadow: var(--module-shadow);
  --remodel-control-shadow: var(--control-shadow);
  --remodel-stage-shadow: var(--shadow-md);
  --remodel-inset: var(--inset-highlight);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f7f5f0;
  --bg-soft: #efeae1;
  --surface: #ffffff;
  --surface-2: #fbfaf7;
  --surface-3: #e8e0d4;
  --surface-warm: #fff7ea;
  --surface-raised: #ffffff;
  --elevated: #ffffff;

  --ink: #1f2933;
  --ink-soft: #3f4b58;
  --ink-muted: #667085;
  --ink-subtle: #8a94a6;
  --line: rgba(31, 41, 51, 0.12);
  --line-strong: rgba(31, 41, 51, 0.2);
  --line-hot: rgba(15, 118, 110, 0.34);

  --accent: #0f766e;
  --accent-strong: #0b5f59;
  --accent-soft: rgba(15, 118, 110, 0.12);
  --accent-warm: #c77716;
  --blue: #246bd1;
  --blue-soft: rgba(36, 107, 209, 0.12);
  --amber: #b87613;
  --amber-soft: rgba(184, 118, 19, 0.13);
  --coral: #c83f3f;
  --coral-soft: rgba(200, 63, 63, 0.12);
  --red: #c83f3f;
  --green: #168a53;
  --green-soft: rgba(22, 138, 83, 0.12);
  --cyan: #0f766e;
  --magenta: #8a42c7;
  --focus-ring: #0f766e;

  --nav: rgba(255, 255, 255, 0.84);
  --nav-2: rgba(251, 250, 247, 0.88);
  --nav-3: #e8e0d4;
  --nav-ink: var(--ink);
  --nav-muted: var(--ink-muted);

  --monitor: #10141b;
  --monitor-2: #151b24;
  --monitor-ink: #f7f5f0;

  --shadow-xs: 0 1px 2px rgba(31, 41, 51, 0.08);
  --shadow-sm: 0 10px 28px rgba(31, 41, 51, 0.1);
  --shadow-md: 0 24px 64px rgba(31, 41, 51, 0.14);
  --shadow-glass: 0 20px 60px rgba(31, 41, 51, 0.12);
  --inset-highlight: inset 0 1px rgba(255, 255, 255, 0.78);
  --control-shadow: var(--inset-highlight), 0 1px 2px rgba(31, 41, 51, 0.08);
  --control-shadow-active: inset 0 1px 2px rgba(31, 41, 51, 0.14);
  --module-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  --module-shadow: var(--inset-highlight), var(--shadow-sm);
}

html,
body {
  background: var(--bg);
  color: var(--ink);
}

body,
:root[data-theme="dark"] body,
:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 30rem),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--accent-warm) 12%, transparent), transparent 32rem),
    radial-gradient(circle at 72% 88%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 36rem),
    linear-gradient(180deg, var(--bg-soft), var(--bg) 34rem);
  font-family: var(--font-sans);
}

body::before,
:root[data-theme="dark"] body::before,
:root[data-theme="light"] body::before {
  display: none;
  background: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.small-button,
.system-button,
.rating-button,
.participation-toggle,
.presence-current,
.presence-disclosure,
.nav-button,
.icon-button,
.cloud-account-summary,
.theme-toggle-switch {
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-press);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus-ring) 78%, white);
  outline-offset: 3px;
}

button:active:not(:disabled),
.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.ghost-button:active:not(:disabled),
.danger-button:active:not(:disabled),
.small-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

.studio-bar,
.console-chrome {
  position: fixed;
  left: clamp(10px, 1.3vw, 18px);
  right: clamp(10px, 1.3vw, 18px);
  top: 10px;
  width: auto;
  min-height: var(--studio-bar-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nav-2) 94%, var(--surface)), color-mix(in srgb, var(--nav) 97%, var(--surface))),
    var(--surface);
  box-shadow: var(--shadow-glass), var(--inset-highlight);
  backdrop-filter: none;
}

.studio-signal {
  gap: 12px;
}

.tally-light {
  width: 10px;
  height: 10px;
  background: var(--green);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent),
    0 0 20px color-mix(in srgb, var(--green) 40%, transparent);
}

.studio-label,
.brand-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 840;
}

.studio-label {
  font-size: 0.86rem;
}

.studio-mode,
.save-status,
.context-chip,
.count-pill,
.status-pill,
.console-chip,
.chip {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
  color: var(--ink-soft);
  font-weight: 720;
}

.studio-mode {
  padding-inline: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}

.top-context {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  box-shadow: var(--inset-highlight);
}

.top-context strong,
.context-chip strong {
  color: var(--ink);
}

.theme-toggle-switch,
.save-state-button,
.studio-bar .home-button,
.studio-bar .icon-button,
.top-icon-actions .icon-button,
.cloud-account-summary {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--ink-soft);
  box-shadow: var(--control-shadow);
}

.save-state-button:hover,
.theme-toggle-switch:hover,
.studio-bar .icon-button:hover,
.cloud-account-summary:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  color: var(--ink);
}

.theme-switch-track {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 17%, var(--surface-3));
}

.theme-switch-knob {
  background: var(--accent);
}

.app-shell {
  padding-top: calc(var(--studio-bar-height) + 22px);
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100dvh;
}

.left-rail {
  margin: 0 0 16px clamp(10px, 1.3vw, 18px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent)),
    var(--surface);
  box-shadow: var(--module-shadow);
}

.brand-block {
  padding: 4px 2px 12px;
}

.brand-mark {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-warm) 10%, transparent)),
    var(--surface-raised);
  color: var(--ink);
}

.brand-subtitle {
  color: var(--ink-muted);
}

.activity-nav {
  gap: 8px;
}

.nav-button {
  min-height: 44px;
  position: relative;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
}

.nav-button::after {
  content: "";
  position: absolute;
  inset: 9px auto 9px 0;
  width: 3px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.nav-button:hover {
  background: color-mix(in srgb, var(--surface-3) 62%, transparent);
  color: var(--ink);
}

.nav-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
  border-color: var(--line);
}

.nav-button.active {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 25%, var(--line));
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 12%, var(--surface-2));
  color: var(--ink);
}

.nav-button.active::after {
  background: var(--active-accent, var(--accent));
}

.nav-button.active .nav-icon {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 42%, var(--line));
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 18%, var(--surface));
  color: var(--active-accent, var(--accent));
}

.nav-button-wins.active { --active-accent: var(--activity-wins); }
.nav-button-discussion.active { --active-accent: var(--activity-discussion); }
.nav-button-think-fast.active { --active-accent: var(--activity-think-fast); }
.nav-button-never-met.active { --active-accent: var(--activity-never-met); }
.nav-button-extra-credit.active { --active-accent: var(--activity-extra-credit); }
.nav-button-presentations.active { --active-accent: var(--activity-presentations); }
.nav-button-takeaways.active { --active-accent: var(--activity-takeaways); }
.nav-button-report.active { --active-accent: var(--activity-report); }

.workspace {
  width: min(var(--content-max), 100%);
  padding: clamp(20px, 2.2vw, 36px);
}

.screen-class-home .app-shell,
.screen-active .app-shell {
  padding-top: calc(var(--studio-bar-height) + 18px);
}

.screen-class-home .workspace {
  width: min(1280px, 100%);
  padding-top: clamp(18px, 2vw, 28px);
}

.screen-class-home .main-panel {
  padding: clamp(16px, 1.7vw, 26px);
}

.main-panel,
.side-panel,
.log-panel,
.library-toolbar,
.cloud-auth-panel,
.cloud-beta-panel,
.roster-import-panel,
.new-session-card,
.progress-card,
.report-panel,
.settings-card,
.settings-stat-card,
.class-file-row,
.session-file-row,
.class-stat-card,
.archive-summary,
.roster-import-card,
.app-modal,
.setup-strip.preflight-strip,
.screen-active .program-card,
.screen-active .tf-program-monitor,
.screen-active .tf-instrument,
.screen-active .speaker-tracking-card,
.screen-active .presence-console-card,
.screen-active .operator-queue,
.screen-active .discussion-command-row,
.screen-active .discussion-brief-card,
.screen-active .timer-card,
.screen-active .roster-drawer,
.screen-active .roster-summary-board,
.screen-active .discussion-grid.operator-table,
.screen-active .roster-operator-sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--module-gradient), var(--surface);
  box-shadow: var(--module-shadow);
}

.main-panel,
.side-panel,
.log-panel {
  padding: clamp(18px, 1.6vw, 28px);
}

.library-toolbar,
.cloud-auth-panel {
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 22rem),
    radial-gradient(circle at 100% 10%, color-mix(in srgb, var(--accent-warm) 14%, transparent), transparent 20rem),
    var(--module-gradient),
    var(--surface);
}

.library-title-block h1,
.cloud-auth-title h1,
.class-home .activity-title h1,
.class-dashboard-title h1 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 850;
  letter-spacing: 0;
}

.library-title-block .muted,
.cloud-auth-title p,
.cloud-auth-form p,
.class-home .activity-title .muted,
.roster-import-copy .muted,
.new-session-card .muted,
.app-modal-body,
.muted,
.muted-count {
  color: var(--ink-muted);
}

.activity-kicker,
.setup-option-label,
.session-list-title,
.class-stat-card span,
.report-activity-card span,
.report-activity-card small,
.report-export-grid legend,
.cloud-auth-field span,
.settings-field span,
.compact-date-control span,
.stage-card-label {
  color: color-mix(in srgb, var(--accent-warm) 72%, var(--ink-muted));
  font-family: var(--font-label);
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.primary-button,
.go-live-button,
.cloud-auth-form > .primary-button,
.cloud-beta-actions .primary-button {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 74%, transparent);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #061312;
  font-weight: 820;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.28),
    0 10px 28px color-mix(in srgb, var(--accent) 18%, transparent);
}

:root[data-theme="light"] .primary-button,
:root[data-theme="light"] .go-live-button,
:root[data-theme="light"] .cloud-auth-form > .primary-button,
:root[data-theme="light"] .cloud-beta-actions .primary-button {
  color: #ffffff;
}

.primary-button:hover:not(:disabled),
.go-live-button:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.32),
    0 14px 34px color-mix(in srgb, var(--accent) 24%, transparent);
}

.secondary-button,
.cloud-auth-oauth > button,
.cloud-auth-actions > button,
.class-settings-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-3) 72%, var(--accent) 8%);
  color: var(--ink);
  font-weight: 760;
  box-shadow: var(--control-shadow);
}

.secondary-button:hover:not(:disabled),
.cloud-auth-oauth > button:hover:not(:disabled),
.class-settings-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--surface-3) 64%, var(--accent) 13%);
}

.ghost-button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-soft);
  font-weight: 720;
}

.ghost-button:hover:not(:disabled) {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-3) 54%, transparent);
  color: var(--ink);
}

.danger-button {
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--red) 34%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--red) 9%, var(--surface-2));
  color: color-mix(in srgb, var(--red) 78%, var(--ink));
  font-weight: 760;
}

input,
textarea,
select,
.cloud-auth-field input,
.settings-field input,
.settings-card textarea,
.manual-import-card textarea,
.date-control input,
.select-option select,
.report-export-grid input,
.app-modal input,
.app-modal textarea,
.app-modal select {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 84%, var(--bg));
  color: var(--ink);
  box-shadow: var(--inset-highlight);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-subtle);
}

.empty-state,
.recovery-state {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-2) 86%, var(--surface-warm) 14%);
}

.class-file-row,
.session-file-row,
.roster-settings-row,
.report-student-table .grid-row,
.discussion-grid.operator-table .discussion-row,
.side-panel .roster-row {
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.class-file-row:hover,
.session-file-row:hover,
.roster-settings-row:hover,
.discussion-grid.operator-table .discussion-row:hover,
.side-panel .roster-row:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--surface-3) 76%, var(--accent) 5%);
}

.file-leading,
.cloud-account-avatar,
.settings-stat-card::before {
  border-radius: var(--radius-md);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-warm) 9%, transparent)),
    var(--surface-raised);
  color: var(--accent);
}

.cloud-account-avatar {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  line-height: 1;
}

.session-file-row,
.progress-card,
.class-stat-card,
.report-activity-card {
  overflow: hidden;
}

.session-file-row::before,
.progress-card::before,
.class-stat-card::before,
.report-activity-card::before {
  left: 14px;
  right: auto;
  top: 14px;
  bottom: 14px;
  width: 3px;
  height: auto;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--active-accent, var(--accent));
  opacity: 0.78;
  box-shadow: 0 0 16px color-mix(in srgb, var(--active-accent, var(--accent)) 28%, transparent);
}

.session-file-row {
  gap: 18px;
  padding-left: 28px;
}

.session-file-row .file-leading {
  margin-left: 8px;
}

.progress-card,
.class-stat-card,
.report-activity-card {
  padding-left: clamp(28px, 2vw, 36px);
}

.progress-card-head,
.progress-chart {
  min-width: 0;
}

.roster-import-panel {
  border-radius: var(--radius-xl);
}

.roster-import-card {
  border-radius: var(--radius-lg);
  min-height: 300px;
}

.file-import-card {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.manual-import-card {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
}

.class-stat-card,
.progress-card,
.report-activity-card,
.report-export-grid fieldset,
.settings-card,
.settings-stat-card {
  border-radius: var(--radius-lg);
}

.setup-strip.preflight-strip {
  border-radius: var(--radius-lg);
}

.cloud-auth-shell {
  min-height: calc(100vh - var(--studio-bar-height) - 96px);
}

body.screen-cloud-auth .main-panel,
body.screen-cloud-loading .main-panel,
:root[data-theme="dark"] body.screen-cloud-auth .main-panel,
:root[data-theme="dark"] body.screen-cloud-loading .main-panel,
:root[data-theme="light"] body.screen-cloud-auth .main-panel,
:root[data-theme="light"] body.screen-cloud-loading .main-panel {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.cloud-auth-panel {
  max-width: 680px;
  padding: clamp(28px, 4vw, 48px);
}

.cloud-auth-form,
.cloud-auth-oauth,
.cloud-auth-actions,
.cloud-auth-status {
  gap: 12px;
}

.cloud-auth-divider {
  color: var(--ink-muted);
}

.cloud-account-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(18px);
}

.cloud-beta-panel {
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 46%),
    var(--module-gradient),
    var(--surface);
}

.class-settings-window {
  gap: clamp(18px, 2vw, 28px);
}

.class-settings-header,
.roster-settings-titlebar {
  align-items: center;
}

.settings-card,
.settings-stat-card {
  background: var(--module-gradient), var(--surface);
}

.roster-settings-tools,
.settings-file-drop,
.roster-settings-list {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.screen-active {
  --rail-width: 204px;
  --active-accent: var(--accent);
  --active-accent-soft: color-mix(in srgb, var(--active-accent) 14%, transparent);
  --active-viewport-top-gap: 12px;
  --active-viewport-bottom-gap: 34px;
}

.screen-active[data-activity="wins"] { --active-accent: var(--activity-wins); }
.screen-active[data-activity="discussion"] { --active-accent: var(--activity-discussion); }
.screen-active[data-activity="thinkFast"] { --active-accent: var(--activity-think-fast); }
.screen-active[data-activity="neverMet"] { --active-accent: var(--activity-never-met); }
.screen-active[data-activity="extraCredit"] { --active-accent: var(--activity-extra-credit); }
.screen-active[data-activity="presentations"] { --active-accent: var(--activity-presentations); }
.screen-active[data-activity="takeaways"] { --active-accent: var(--activity-takeaways); }
.screen-active[data-activity="report"] { --active-accent: var(--activity-report); }

body[data-activity="wins"] { --active-accent: var(--activity-wins); }
body[data-activity="discussion"] { --active-accent: var(--activity-discussion); }
body[data-activity="thinkFast"] { --active-accent: var(--activity-think-fast); }
body[data-activity="neverMet"] { --active-accent: var(--activity-never-met); }
body[data-activity="extraCredit"] { --active-accent: var(--activity-extra-credit); }
body[data-activity="presentations"] { --active-accent: var(--activity-presentations); }
body[data-activity="takeaways"] { --active-accent: var(--activity-takeaways); }
body[data-activity="report"] { --active-accent: var(--activity-report); }

.screen-active .main-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.screen-active .workspace {
  width: min(1420px, 100%);
}

.screen-active .content-grid {
  gap: clamp(14px, 1.3vw, 20px);
}

.screen-active .tf-program-monitor,
.screen-active .program-card,
.screen-active .live-deck,
.screen-active .timer-card {
  border-radius: var(--radius-xl);
  border-color: color-mix(in srgb, var(--active-accent) 28%, var(--line));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--active-accent) 13%, transparent), transparent 20rem),
    var(--module-gradient),
    var(--surface);
}

.screen-active .timer-readout,
.screen-active .tf-speaker-name,
.screen-active .speaker-name {
  color: var(--ink);
  letter-spacing: 0;
}

.screen-active .timer-readout.done {
  color: var(--green);
}

.screen-active .timer-readout.warning {
  color: var(--amber);
}

.screen-active .flow-actions,
.screen-active .timer-actions,
.screen-active .timer-turn-nav,
.screen-active .filler-instrument,
.screen-active .prompt-dock,
.screen-active .field-row.prompt-command-row {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.screen-active .rating-button.active,
.screen-active .participation-toggle.active,
.screen-active .small-button.active,
.screen-active .presence-current.set {
  border-color: color-mix(in srgb, var(--active-accent) 52%, var(--line));
  background: color-mix(in srgb, var(--active-accent) 18%, var(--surface-2));
  color: var(--ink);
}

.screen-report .report-panel,
.screen-report .report-activity-card,
.screen-report .report-export-grid fieldset,
.report-student-table .grid-row {
  box-shadow: var(--inset-highlight);
}

.report-student-table .table-header,
.discussion-grid.operator-table .table-header,
.roster-operator-sheet .table-header {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-3) 76%, transparent);
  color: var(--ink-soft);
}

.app-modal-backdrop {
  background: rgba(3, 5, 8, 0.62);
  backdrop-filter: blur(8px);
}

:root[data-theme="light"] .app-modal-backdrop {
  background: rgba(31, 41, 51, 0.28);
}

.app-modal {
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent)),
    var(--surface);
}

.app-modal .app-modal-close {
  border-radius: var(--radius-md);
  box-shadow: var(--control-shadow);
}

/* Canvas-inspired class dashboard. This borrows the course-card rhythm and
   clean dashboard scan path without copying Canvas visual assets. */
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) {
  --rail-width: 92px;
  --course-card-bg: #ffffff;
  --course-card-ink: #1f2933;
  --course-card-muted: #667085;
  --course-card-line: rgba(31, 41, 51, 0.16);
  --course-card-shadow: 0 2px 8px rgba(31, 41, 51, 0.16);
  --course-accent: var(--blue);
  --course-accent-2: #8ac4ef;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent-warm) 9%, transparent), transparent 28rem),
    linear-gradient(180deg, #fbfbf8, #f7f5f0);
}

:root[data-theme="dark"] body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) {
  --course-card-bg: #151b24;
  --course-card-ink: var(--ink);
  --course-card-muted: var(--ink-muted);
  --course-card-line: rgba(215, 208, 196, 0.16);
  --course-card-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
  background:
    radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 32rem),
    linear-gradient(180deg, #0f141b, #080a0d);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .studio-bar {
  left: clamp(10px, 1.3vw, 18px);
  right: clamp(10px, 1.3vw, 18px);
  top: 10px;
  min-height: 58px;
  border-width: 1px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 94%, var(--surface)), color-mix(in srgb, var(--surface) 98%, var(--bg))),
    var(--surface);
  box-shadow: var(--shadow-glass), var(--inset-highlight);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .app-shell {
  padding-top: calc(58px + 18px);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .left-rail {
  min-height: calc(100vh - 58px);
  margin: 0;
  padding: 14px 8px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: #2f4352;
  box-shadow: none;
}

:root[data-theme="dark"] body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .left-rail {
  background: #22313d;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .brand-block {
  justify-items: center;
  padding: 0 0 14px;
  text-align: center;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .brand-mark {
  width: 48px;
  height: 48px;
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .brand-name,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .brand-subtitle {
  display: none;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .nav-button {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 58px;
  padding: 6px 4px;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .nav-button:hover,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .nav-button.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .nav-button::after {
  inset: 6px auto 6px 0;
  background: transparent;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .nav-icon {
  width: 28px;
  height: 28px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: currentColor;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .nav-label {
  max-width: 76px;
  font-size: 0.7rem;
  line-height: 1.05;
  white-space: normal;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .workspace {
  width: min(1480px, 100%);
  padding: clamp(26px, 3vw, 48px) clamp(28px, 3.4vw, 56px);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .main-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .launcher.library-manager {
  gap: clamp(22px, 2.2vw, 34px);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .library-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 18px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .library-title-block {
  gap: 8px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .library-title-block h1 {
  color: var(--ink);
  font-size: clamp(2.25rem, 4vw, 3.7rem);
  line-height: 0.98;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .library-title-block .muted {
  max-width: 48rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .command-cluster {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .library-section > .section-heading {
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .library-section > .section-heading h2 {
  color: var(--ink);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 720;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .file-manager-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(246px, 1fr));
  gap: clamp(22px, 2.2vw, 34px);
  align-items: stretch;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .file-manager-list.compact {
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row {
  --course-accent: #2379bd;
  --course-accent-2: #83bfe6;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 122px minmax(92px, 1fr) auto;
  min-height: 276px;
  overflow: visible;
  border: 1px solid var(--course-card-line);
  border-radius: var(--radius-sm);
  background: var(--course-card-bg);
  box-shadow: var(--course-card-shadow);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .file-manager-list > .class-file-row:nth-child(4n + 2) {
  --course-accent: #3d6075;
  --course-accent-2: #9aa88f;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .file-manager-list > .class-file-row:nth-child(4n + 3) {
  --course-accent: #6d49a8;
  --course-accent-2: #bd78c5;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .file-manager-list > .class-file-row:nth-child(4n + 4) {
  --course-accent: #ad4a82;
  --course-accent-2: #e57091;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 122px;
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background:
    radial-gradient(circle at 82% 72%, rgba(255, 255, 255, 0.24), transparent 15%),
    linear-gradient(116deg, color-mix(in srgb, var(--course-accent) 92%, #000) 0 36%, color-mix(in srgb, var(--course-accent) 70%, transparent) 36% 54%, transparent 54%),
    linear-gradient(90deg, var(--course-accent), var(--course-accent-2));
  box-shadow: none;
  opacity: 1;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row::after {
  content: none;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu > summary {
  list-style: none;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu > summary::-webkit-details-marker {
  display: none;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-trigger {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-trigger span,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-trigger::before,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-trigger::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 9px currentColor, 0 -9px currentColor;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-trigger::before,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-trigger::after {
  display: none;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-trigger:hover,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu[open] .class-card-menu-trigger {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.13);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-panel {
  position: absolute;
  top: 38px;
  right: 0;
  display: grid;
  width: min(232px, calc(100vw - 48px));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--course-card-line);
  border-radius: var(--radius-md);
  background: var(--course-card-bg);
  color: var(--course-card-ink);
  box-shadow: 0 18px 42px rgba(31, 41, 51, 0.22);
}

:root[data-theme="dark"] body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-panel {
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.46);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-field,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-color-field {
  display: grid;
  min-width: 0;
  gap: 7px;
  border: 0;
  margin: 0;
  padding: 0;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-field span,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-color-field legend {
  color: var(--course-card-ink);
  font-size: 0.78rem;
  font-weight: 820;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-field input,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-color-input {
  min-height: 34px;
  border-color: var(--course-card-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--course-card-bg) 90%, var(--surface-2));
  color: var(--course-card-ink);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  min-height: 28px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--swatch-color);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.22);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-color-swatch.active,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-color-swatch:focus-visible {
  border-color: var(--course-card-ink);
  outline: 2px solid color-mix(in srgb, var(--course-accent) 34%, transparent);
  outline-offset: 2px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-actions {
  display: flex;
  justify-content: end;
  gap: 8px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-actions .primary-button,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-actions .ghost-button {
  min-height: 32px;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 0.82rem;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-card-menu-actions .primary-button {
  background: var(--course-accent);
  border-color: var(--course-accent);
  font-family: var(--font-mono);
  color: #ffffff;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row:hover {
  border-color: color-mix(in srgb, var(--course-accent) 34%, var(--course-card-line));
  box-shadow: 0 5px 16px rgba(31, 41, 51, 0.2);
  transform: translateY(-1px);
}

:root[data-theme="dark"] body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-leading {
  position: absolute;
  z-index: 1;
  top: 36px;
  left: 18px;
  width: 54px;
  height: 54px;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-leading svg,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-leading [data-rostra-icon] {
  color: currentColor;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .project-card-main {
  z-index: 1;
  grid-row: 1 / 3;
  align-self: start;
  padding: 140px 20px 8px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .project-card-main h2 {
  color: var(--course-accent);
  font-size: 1.02rem;
  font-weight: 760;
  line-height: 1.18;
}

:root[data-theme="dark"] body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .project-card-main h2 {
  color: color-mix(in srgb, var(--course-accent-2) 72%, var(--ink));
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .mini-stats {
  display: grid;
  gap: 4px;
  margin-top: 7px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .count-pill {
  min-height: auto;
  justify-content: start;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--course-card-muted);
  font-size: 0.86rem;
  font-weight: 520;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-actions {
  z-index: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  border-top: 1px solid color-mix(in srgb, var(--course-card-line) 70%, transparent);
  padding: 7px 18px 10px;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-actions .primary-button,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-actions .secondary-button,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-actions .ghost-button,
body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-actions .danger-button {
  min-height: 32px;
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 0 10px;
  font-size: 0.82rem;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-actions .primary-button {
  border-color: color-mix(in srgb, var(--course-accent) 28%, transparent);
  background: color-mix(in srgb, var(--course-accent) 10%, transparent);
  color: var(--course-accent);
}

:root[data-theme="dark"] body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .class-file-row .file-actions .primary-button {
  color: color-mix(in srgb, var(--course-accent-2) 78%, var(--ink));
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .archive-drawer {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .archive-summary {
  border-radius: var(--radius-sm);
  box-shadow: none;
}

@media (max-width: 980px) {
  :root {
    --studio-bar-height: 58px;
    --rail-width: 72px;
  }

  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) {
    --rail-width: 72px;
  }

  .studio-bar,
  .console-chrome,
  .left-rail {
    border-radius: var(--radius-lg);
  }

  .nav-button {
    justify-content: center;
  }

  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .studio-bar {
    left: clamp(8px, 2vw, 14px);
    right: clamp(8px, 2vw, 14px);
  }

  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .left-rail {
    padding: 10px 6px;
  }

  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .brand-mark {
    width: 42px;
    height: 42px;
  }

  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .nav-label {
    display: none;
  }

  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .workspace {
    padding: 24px 20px;
  }

  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .library-toolbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .command-cluster {
    justify-content: start;
  }

  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .file-manager-list,
  body.screen-launcher:not(.screen-cloud-auth):not(.screen-cloud-loading) .file-manager-list.compact {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 226px), 1fr));
  }
}