html[data-room-theme] {
  --room-accent-glow: rgba(var(--room-accent-rgb), .12);
  --room-accent-glow-strong: rgba(var(--room-accent-rgb), .2);
  --room-accent-border: rgba(var(--room-accent-rgb), .28);
  --room-accent-border-strong: rgba(var(--room-accent-rgb), .44);
  --room-secondary-glow: rgba(var(--room-accent-2-rgb), .12);
  --room-warm-glow: rgba(var(--room-warm-rgb), .12);
  --room-strong-text: var(--text);
  --room-accent-text: var(--accent);
  --room-muted-strong-text: var(--muted);
  --room-surface:
    radial-gradient(circle at top right, var(--room-accent-glow), transparent 36%),
    linear-gradient(180deg, var(--surface-gradient-start), var(--surface-gradient-end));
  --room-surface-soft:
    radial-gradient(circle at top right, var(--room-secondary-glow), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.022));
  --room-surface-strong:
    radial-gradient(circle at top right, var(--room-warm-glow), transparent 38%),
    linear-gradient(180deg, var(--popover-bg-start), var(--popover-bg-end));
  --room-surface-border: var(--border-strong, rgba(213,236,224,.24));
  --room-focus-outline: 2px solid rgba(var(--room-accent-rgb), .54);
}

html[data-room-theme="classic"] {
  color-scheme: dark;
  --bg:#07100f;
  --bg-deep:#050b0a;
  --panel:rgba(12,25,23,.82);
  --panel2:rgba(18,38,34,.86);
  --panel-soft:rgba(18,38,34,.86);
  --panel-strong:rgba(7,16,15,.94);
  --text:#f4fbf7;
  --muted:#a9bbb2;
  --border:rgba(213,236,224,.14);
  --border-strong:rgba(213,236,224,.24);
  --accent:#39d98a;
  --accent-2:#14b8a6;
  --gold:#f2c14e;
  --green:#39d98a;
  --yellow:#f2c14e;
  --red:#ff6b4a;
  --room-accent-rgb:57,217,138;
  --room-accent-2-rgb:20,184,166;
  --room-warm-rgb:242,193,78;
  --room-border-rgb:213,236,224;
  --room-muted-rgb:169,187,178;
  --page-background:
    radial-gradient(circle at 15% 10%, rgba(57,217,138,.15), transparent 28rem),
    radial-gradient(circle at 86% 2%, rgba(242,193,78,.12), transparent 22rem),
    linear-gradient(135deg, #07100f, #091514 48%, #11160d);
  --primary-bg:linear-gradient(135deg, #39d98a, #f2c14e);
  --primary-ink:#06100e;
  --button-bg:rgba(255,255,255,.055);
  --input-bg:rgba(7,16,15,.76);
  --card-bg:rgba(7,23,19,.92);
  --panel-card-bg:rgba(255,255,255,.035);
  --surface-glow:rgba(57,217,138,.08);
  --surface-gradient-start:rgba(255,255,255,.075);
  --surface-gradient-end:rgba(255,255,255,.028);
  --popover-glow:rgba(57,217,138,.12);
  --popover-bg-start:rgba(7,16,15,.96);
  --popover-bg-end:rgba(7,16,15,.9);
  --grid-line-color:rgba(255,255,255,.035);
}

html[data-room-theme="studio"] {
  color-scheme: dark;
  --bg:#090b10;
  --bg-deep:#06080d;
  --panel:rgba(18,22,29,.9);
  --panel2:rgba(25,31,40,.92);
  --panel-soft:rgba(25,31,40,.88);
  --panel-strong:rgba(11,15,22,.96);
  --text:#f3f6fb;
  --muted:#9aa6b5;
  --border:rgba(210,222,238,.14);
  --border-strong:rgba(210,222,238,.24);
  --accent:#38bdf8;
  --accent-2:#60a5fa;
  --gold:#f59e0b;
  --green:#22c55e;
  --yellow:#f59e0b;
  --red:#ef4444;
  --room-accent-rgb:56,189,248;
  --room-accent-2-rgb:96,165,250;
  --room-warm-rgb:245,158,11;
  --room-border-rgb:210,222,238;
  --room-muted-rgb:154,166,181;
  --page-background:
    radial-gradient(circle at 12% 8%, rgba(56,189,248,.16), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(96,165,250,.12), transparent 22rem),
    radial-gradient(circle at 82% 88%, rgba(245,158,11,.08), transparent 24rem),
    linear-gradient(135deg, #090b10, #0d1320 52%, #101116);
  --primary-bg:linear-gradient(135deg, #38bdf8, #60a5fa);
  --primary-ink:#071018;
  --button-bg:rgba(255,255,255,.058);
  --input-bg:rgba(9,13,20,.82);
  --card-bg:rgba(14,18,25,.88);
  --panel-card-bg:rgba(255,255,255,.04);
  --surface-glow:rgba(56,189,248,.1);
  --surface-gradient-start:rgba(255,255,255,.075);
  --surface-gradient-end:rgba(255,255,255,.028);
  --popover-glow:rgba(56,189,248,.13);
  --popover-bg-start:rgba(12,16,24,.97);
  --popover-bg-end:rgba(8,11,17,.95);
  --grid-line-color:rgba(210,222,238,.035);
}

html[data-room-theme="amber"] {
  color-scheme: dark;
  --bg:#0d0c10;
  --bg-deep:#08070b;
  --panel:rgba(24,22,28,.9);
  --panel2:rgba(34,31,39,.9);
  --panel-soft:rgba(34,31,39,.86);
  --panel-strong:rgba(16,14,20,.96);
  --text:#fff7ed;
  --muted:#aaa29a;
  --border:rgba(241,226,203,.15);
  --border-strong:rgba(241,226,203,.25);
  --accent:#f59e0b;
  --accent-2:#e879f9;
  --gold:#facc15;
  --green:#22c55e;
  --yellow:#f59e0b;
  --red:#ef4444;
  --room-accent-rgb:245,158,11;
  --room-accent-2-rgb:232,121,249;
  --room-warm-rgb:250,204,21;
  --room-border-rgb:241,226,203;
  --room-muted-rgb:170,162,154;
  --page-background:
    radial-gradient(circle at 14% 8%, rgba(245,158,11,.17), transparent 27rem),
    radial-gradient(circle at 86% 0%, rgba(232,121,249,.1), transparent 24rem),
    linear-gradient(135deg, #0d0c10, #15131b 50%, #1b1511);
  --primary-bg:linear-gradient(135deg, #f59e0b, #facc15);
  --primary-ink:#160f06;
  --button-bg:rgba(255,255,255,.056);
  --input-bg:rgba(13,12,16,.82);
  --card-bg:rgba(22,20,26,.88);
  --panel-card-bg:rgba(255,255,255,.04);
  --surface-glow:rgba(245,158,11,.1);
  --surface-gradient-start:rgba(255,255,255,.07);
  --surface-gradient-end:rgba(255,255,255,.026);
  --popover-glow:rgba(245,158,11,.13);
  --popover-bg-start:rgba(18,16,22,.97);
  --popover-bg-end:rgba(11,10,14,.95);
  --grid-line-color:rgba(241,226,203,.032);
}

html[data-room-theme="light"] {
  color-scheme: light;
  --bg:#f5f7fb;
  --bg-deep:#e9eef7;
  --panel:rgba(255,255,255,.9);
  --panel2:rgba(255,255,255,.94);
  --panel-soft:rgba(248,250,252,.94);
  --panel-strong:rgba(255,255,255,.98);
  --text:#172033;
  --muted:#667085;
  --border:rgba(24,39,75,.12);
  --border-strong:rgba(24,39,75,.22);
  --accent:#2563eb;
  --accent-2:#0891b2;
  --gold:#d97706;
  --green:#168552;
  --yellow:#d97706;
  --red:#dc2626;
  --room-accent-rgb:37,99,235;
  --room-accent-2-rgb:8,145,178;
  --room-warm-rgb:217,119,6;
  --room-border-rgb:24,39,75;
  --room-muted-rgb:102,112,133;
  --page-background:
    radial-gradient(circle at 12% 8%, rgba(37,99,235,.13), transparent 27rem),
    radial-gradient(circle at 88% 0%, rgba(8,145,178,.1), transparent 23rem),
    linear-gradient(135deg, #f8fbff, #eef4fb 48%, #fbf7ed);
  --primary-bg:#2563eb;
  --primary-ink:#fff;
  --button-bg:rgba(255,255,255,.82);
  --button-shadow:0 3px 0 rgba(24,39,75,.13);
  --input-bg:rgba(255,255,255,.9);
  --card-bg:rgba(255,255,255,.88);
  --panel-card-bg:rgba(255,255,255,.78);
  --surface-glow:rgba(37,99,235,.08);
  --surface-gradient-start:rgba(255,255,255,.92);
  --surface-gradient-end:rgba(247,250,255,.78);
  --popover-glow:rgba(37,99,235,.1);
  --popover-bg-start:rgba(255,255,255,.98);
  --popover-bg-end:rgba(247,250,255,.96);
  --grid-line-color:rgba(24,39,75,.055);
}

html[data-room-theme="coral"] {
  color-scheme: dark;
  --bg:#111014;
  --bg-deep:#09090c;
  --panel:rgba(28,25,32,.9);
  --panel2:rgba(38,33,44,.9);
  --panel-soft:rgba(38,33,44,.86);
  --panel-strong:rgba(17,15,21,.96);
  --text:#fff7f8;
  --muted:#aaa2ad;
  --border:rgba(245,219,226,.14);
  --border-strong:rgba(245,219,226,.24);
  --accent:#fb7185;
  --accent-2:#8b5cf6;
  --gold:#f59e0b;
  --green:#22c55e;
  --yellow:#f59e0b;
  --red:#ef4444;
  --room-accent-rgb:251,113,133;
  --room-accent-2-rgb:139,92,246;
  --room-warm-rgb:245,158,11;
  --room-border-rgb:245,219,226;
  --room-muted-rgb:170,162,173;
  --page-background:
    radial-gradient(circle at 13% 8%, rgba(251,113,133,.16), transparent 27rem),
    radial-gradient(circle at 86% 0%, rgba(139,92,246,.13), transparent 24rem),
    linear-gradient(135deg, #111014, #17131d 52%, #1b1117);
  --primary-bg:linear-gradient(135deg, #fb7185, #8b5cf6);
  --primary-ink:#17080d;
  --button-bg:rgba(255,255,255,.056);
  --input-bg:rgba(17,16,20,.82);
  --card-bg:rgba(25,22,30,.88);
  --panel-card-bg:rgba(255,255,255,.04);
  --surface-glow:rgba(251,113,133,.1);
  --surface-gradient-start:rgba(255,255,255,.07);
  --surface-gradient-end:rgba(255,255,255,.026);
  --popover-glow:rgba(251,113,133,.13);
  --popover-bg-start:rgba(20,17,25,.97);
  --popover-bg-end:rgba(11,10,14,.95);
  --grid-line-color:rgba(245,219,226,.032);
}

html[data-room-theme="graphite"] {
  color-scheme: dark;
  --bg:#080a0d;
  --bg-deep:#050608;
  --panel:rgba(18,20,24,.9);
  --panel2:rgba(27,30,35,.9);
  --panel-soft:rgba(27,30,35,.86);
  --panel-strong:rgba(10,12,15,.96);
  --text:#f4f7f5;
  --muted:#a4adb0;
  --border:rgba(225,232,230,.14);
  --border-strong:rgba(225,232,230,.24);
  --accent:#a3e635;
  --accent-2:#22d3ee;
  --gold:#fbbf24;
  --green:#84cc16;
  --yellow:#eab308;
  --red:#fb7185;
  --room-accent-rgb:163,230,53;
  --room-accent-2-rgb:34,211,238;
  --room-warm-rgb:251,191,36;
  --room-border-rgb:225,232,230;
  --room-muted-rgb:164,173,176;
  --page-background:
    radial-gradient(circle at 13% 8%, rgba(163,230,53,.15), transparent 27rem),
    radial-gradient(circle at 86% 0%, rgba(34,211,238,.12), transparent 23rem),
    radial-gradient(circle at 82% 88%, rgba(251,191,36,.08), transparent 24rem),
    linear-gradient(135deg, #080a0d, #101217 52%, #11140d);
  --primary-bg:linear-gradient(135deg, #a3e635, #22d3ee);
  --primary-ink:#061005;
  --button-bg:rgba(255,255,255,.058);
  --input-bg:rgba(8,10,13,.82);
  --card-bg:rgba(15,17,20,.9);
  --panel-card-bg:rgba(255,255,255,.04);
  --surface-glow:rgba(163,230,53,.1);
  --surface-gradient-start:rgba(255,255,255,.074);
  --surface-gradient-end:rgba(255,255,255,.026);
  --popover-glow:rgba(163,230,53,.13);
  --popover-bg-start:rgba(13,15,18,.97);
  --popover-bg-end:rgba(7,8,10,.95);
  --grid-line-color:rgba(225,232,230,.033);
}

html[data-room-theme="lagoon"] {
  color-scheme: dark;
  --bg:#061113;
  --bg-deep:#03090b;
  --panel:rgba(12,28,31,.9);
  --panel2:rgba(17,39,43,.9);
  --panel-soft:rgba(17,39,43,.86);
  --panel-strong:rgba(6,18,20,.96);
  --text:#f0fdfa;
  --muted:#9bb4b4;
  --border:rgba(199,241,237,.14);
  --border-strong:rgba(199,241,237,.24);
  --accent:#2dd4bf;
  --accent-2:#7dd3fc;
  --gold:#f59e0b;
  --green:#34d399;
  --yellow:#fbbf24;
  --red:#fb7185;
  --room-accent-rgb:45,212,191;
  --room-accent-2-rgb:125,211,252;
  --room-warm-rgb:245,158,11;
  --room-border-rgb:199,241,237;
  --room-muted-rgb:155,180,180;
  --page-background:
    radial-gradient(circle at 12% 8%, rgba(45,212,191,.16), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(125,211,252,.12), transparent 23rem),
    radial-gradient(circle at 80% 86%, rgba(251,113,133,.08), transparent 24rem),
    linear-gradient(135deg, #061113, #0b1d22 52%, #101616);
  --primary-bg:linear-gradient(135deg, #2dd4bf, #7dd3fc);
  --primary-ink:#031011;
  --button-bg:rgba(255,255,255,.056);
  --input-bg:rgba(6,17,19,.82);
  --card-bg:rgba(9,27,29,.9);
  --panel-card-bg:rgba(255,255,255,.04);
  --surface-glow:rgba(45,212,191,.1);
  --surface-gradient-start:rgba(255,255,255,.074);
  --surface-gradient-end:rgba(255,255,255,.026);
  --popover-glow:rgba(45,212,191,.13);
  --popover-bg-start:rgba(8,24,27,.97);
  --popover-bg-end:rgba(4,12,14,.95);
  --grid-line-color:rgba(199,241,237,.032);
}

html[data-room-theme="mono"] {
  color-scheme: dark;
  --bg:#0b0b0f;
  --bg-deep:#050507;
  --panel:rgba(21,21,25,.92);
  --panel2:rgba(31,31,36,.9);
  --panel-soft:rgba(31,31,36,.86);
  --panel-strong:rgba(12,12,16,.96);
  --text:#f8fafc;
  --muted:#a1a1aa;
  --border:rgba(244,244,245,.14);
  --border-strong:rgba(244,244,245,.24);
  --accent:#f43f5e;
  --accent-2:#38bdf8;
  --gold:#facc15;
  --green:#22c55e;
  --yellow:#eab308;
  --red:#ef4444;
  --room-accent-rgb:244,63,94;
  --room-accent-2-rgb:56,189,248;
  --room-warm-rgb:250,204,21;
  --room-border-rgb:244,244,245;
  --room-muted-rgb:161,161,170;
  --page-background:
    radial-gradient(circle at 13% 8%, rgba(244,63,94,.16), transparent 27rem),
    radial-gradient(circle at 86% 0%, rgba(56,189,248,.12), transparent 23rem),
    radial-gradient(circle at 82% 88%, rgba(250,204,21,.07), transparent 24rem),
    linear-gradient(135deg, #0b0b0f, #15151b 52%, #130f13);
  --primary-bg:linear-gradient(135deg, #f43f5e, #38bdf8);
  --primary-ink:#07080b;
  --button-bg:rgba(255,255,255,.058);
  --input-bg:rgba(11,11,15,.84);
  --card-bg:rgba(18,18,23,.9);
  --panel-card-bg:rgba(255,255,255,.04);
  --surface-glow:rgba(244,63,94,.1);
  --surface-gradient-start:rgba(255,255,255,.074);
  --surface-gradient-end:rgba(255,255,255,.026);
  --popover-glow:rgba(244,63,94,.13);
  --popover-bg-start:rgba(16,16,21,.97);
  --popover-bg-end:rgba(8,8,11,.95);
  --grid-line-color:rgba(244,244,245,.032);
}

html[data-room-theme="midnight"] {
  color-scheme: dark;
  --bg:#0b0f1e;
  --bg-deep:#070a15;
  --panel:rgba(22,27,45,.9);
  --panel2:rgba(30,36,58,.92);
  --panel-soft:rgba(30,36,58,.88);
  --panel-strong:rgba(14,18,32,.96);
  --text:#eef1fb;
  --muted:#9aa2c0;
  --border:rgba(210,216,240,.14);
  --border-strong:rgba(210,216,240,.24);
  --accent:#818cf8;
  --accent-2:#c084fc;
  --gold:#fbbf24;
  --green:#34d399;
  --yellow:#fbbf24;
  --red:#fb7185;
  --room-accent-rgb:129,140,248;
  --room-accent-2-rgb:192,132,252;
  --room-warm-rgb:251,191,36;
  --room-border-rgb:210,216,240;
  --room-muted-rgb:154,162,192;
  --page-background:
    radial-gradient(circle at 14% 8%, rgba(129,140,248,.18), transparent 28rem),
    radial-gradient(circle at 86% 0%, rgba(192,132,252,.12), transparent 23rem),
    radial-gradient(circle at 82% 90%, rgba(56,189,248,.08), transparent 24rem),
    linear-gradient(135deg, #0b0f1e, #111634 52%, #140f26);
  --primary-bg:linear-gradient(135deg, #818cf8, #c084fc);
  --primary-ink:#0a0b16;
  --button-bg:rgba(255,255,255,.055);
  --input-bg:rgba(11,15,30,.82);
  --card-bg:rgba(16,20,36,.9);
  --panel-card-bg:rgba(255,255,255,.04);
  --surface-glow:rgba(129,140,248,.1);
  --surface-gradient-start:rgba(255,255,255,.072);
  --surface-gradient-end:rgba(255,255,255,.026);
  --popover-glow:rgba(129,140,248,.13);
  --popover-bg-start:rgba(16,20,34,.97);
  --popover-bg-end:rgba(9,12,22,.95);
  --grid-line-color:rgba(210,216,240,.032);
}

html[data-room-theme="paper"] {
  color-scheme: light;
  --bg:#f7f2e9;
  --bg-deep:#efe7d8;
  --panel:rgba(255,253,248,.92);
  --panel2:rgba(255,255,255,.95);
  --panel-soft:rgba(250,245,236,.95);
  --panel-strong:rgba(255,255,255,.98);
  --text:#2a2620;
  --muted:#7a7266;
  --border:rgba(60,50,35,.12);
  --border-strong:rgba(60,50,35,.22);
  --accent:#c2410c;
  --accent-2:#b45309;
  --gold:#b45309;
  --green:#15803d;
  --yellow:#b45309;
  --red:#dc2626;
  --room-accent-rgb:194,65,12;
  --room-accent-2-rgb:180,83,9;
  --room-warm-rgb:180,83,9;
  --room-border-rgb:60,50,35;
  --room-muted-rgb:122,114,102;
  --page-background:
    radial-gradient(circle at 12% 8%, rgba(194,65,12,.10), transparent 27rem),
    radial-gradient(circle at 88% 0%, rgba(180,83,9,.08), transparent 23rem),
    linear-gradient(135deg, #f9f4ec, #f3ece0 48%, #f7efe2);
  --primary-bg:#c2410c;
  --primary-ink:#fff;
  --button-bg:rgba(255,255,255,.82);
  --button-shadow:0 3px 0 rgba(60,50,35,.13);
  --input-bg:rgba(255,255,255,.9);
  --card-bg:rgba(255,253,248,.9);
  --panel-card-bg:rgba(255,255,255,.72);
  --surface-glow:rgba(194,65,12,.08);
  --surface-gradient-start:rgba(255,255,255,.92);
  --surface-gradient-end:rgba(250,244,235,.78);
  --popover-glow:rgba(194,65,12,.1);
  --popover-bg-start:rgba(255,253,248,.98);
  --popover-bg-end:rgba(250,244,235,.96);
  --grid-line-color:rgba(60,50,35,.055);
}

html[data-room-theme="slate"] {
  color-scheme: light;
  --bg:#f4f5f7;
  --bg-deep:#e7e9ee;
  --panel:rgba(255,255,255,.92);
  --panel2:rgba(255,255,255,.96);
  --panel-soft:rgba(248,249,251,.95);
  --panel-strong:rgba(255,255,255,.98);
  --text:#1f2733;
  --muted:#64748b;
  --border:rgba(30,41,59,.12);
  --border-strong:rgba(30,41,59,.2);
  --accent:#4f46e5;
  --accent-2:#6366f1;
  --gold:#b45309;
  --green:#16a34a;
  --yellow:#ca8a04;
  --red:#dc2626;
  --room-accent-rgb:79,70,229;
  --room-accent-2-rgb:99,102,241;
  --room-warm-rgb:180,83,9;
  --room-border-rgb:30,41,59;
  --room-muted-rgb:100,116,139;
  --page-background:
    radial-gradient(circle at 12% 8%, rgba(79,70,229,.09), transparent 27rem),
    radial-gradient(circle at 88% 2%, rgba(99,102,241,.06), transparent 23rem),
    linear-gradient(135deg, #f6f7f9, #eef0f4 52%, #f4f5f7);
  --primary-bg:#4f46e5;
  --primary-ink:#fff;
  --button-bg:rgba(255,255,255,.85);
  --button-shadow:0 3px 0 rgba(30,41,59,.12);
  --input-bg:rgba(255,255,255,.92);
  --card-bg:rgba(255,255,255,.9);
  --panel-card-bg:rgba(255,255,255,.74);
  --surface-glow:rgba(79,70,229,.07);
  --surface-gradient-start:rgba(255,255,255,.92);
  --surface-gradient-end:rgba(246,247,249,.8);
  --popover-glow:rgba(79,70,229,.1);
  --popover-bg-start:rgba(255,255,255,.98);
  --popover-bg-end:rgba(246,247,249,.96);
  --grid-line-color:rgba(30,41,59,.05);
}

html[data-room-theme] body {
  background: var(--brand-page-watermark, none), var(--page-background);
  color: var(--text);
}

html[data-room-theme] button,
html[data-room-theme] .link-btn {
  background: var(--button-bg);
  color: var(--text);
  border-color: var(--border);
}

html[data-room-theme] .slide-select-button,
html[data-room-theme] .slide-select-button:not(:disabled):hover,
html[data-room-theme] .slide-select-button:not(:disabled):active {
  background: transparent;
  color: inherit;
  border-color: transparent;
  box-shadow: none;
}

html[data-room-theme] .room-style-shortcut {
  background:
    linear-gradient(135deg,
      #39d98a 0 9.09%,
      #38bdf8 9.09% 18.18%,
      #f59e0b 18.18% 27.27%,
      #f8fbff 27.27% 36.36%,
      #fb7185 36.36% 45.45%,
      #a3e635 45.45% 54.54%,
      #2dd4bf 54.54% 63.63%,
      #f43f5e 63.63% 72.72%,
      #818cf8 72.72% 81.81%,
      #c2410c 81.81% 90.9%,
      #4f46e5 90.9% 100%);
  border-color: rgba(255,255,255,.38);
  color: #07100f;
}

html[data-room-theme] .room-style-shortcut-text,
html[data-room-theme] .room-style-shortcut-swatch {
  background: rgba(255,255,255,.76);
  color: #07100f;
}

html[data-room-theme] .room-style-shortcut-dismiss {
  background: var(--panel-strong);
  border-color: var(--border-strong);
  color: var(--text);
}

html[data-room-theme] button.primary,
html[data-room-theme] .btn.primary,
html[data-room-theme] .primary {
  background: var(--primary-bg) !important;
  color: var(--primary-ink);
  border-color: transparent !important;
}

html[data-room-theme] button.info,
html[data-room-theme] .btn.info,
html[data-room-theme] .info {
  background: linear-gradient(135deg, rgba(var(--room-accent-2-rgb), .24), rgba(var(--room-accent-rgb), .13));
  border-color: var(--room-accent-border);
}

html[data-room-theme] input,
html[data-room-theme] textarea,
html[data-room-theme] select {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

html[data-room-theme] .panel,
html[data-room-theme] .room-boot-shell,
html[data-room-theme] .admin-feedback-card,
html[data-room-theme] .slide-output-type-card,
html[data-room-theme] .qr-modal-card,
html[data-room-theme] .toast,
html[data-room-theme] .room-onboarding-card {
  background:
    radial-gradient(circle at top right, var(--room-accent-glow), transparent 34%),
    linear-gradient(180deg, var(--popover-bg-start), var(--popover-bg-end));
  border-color: var(--border);
}

html[data-room-theme] .room-boot-brand,
html[data-room-theme] .room-empty-state b,
html[data-room-theme] .slide-output-type-label,
html[data-room-theme] .slide-output-type-title,
html[data-room-theme] .communication-settings-title {
  color: var(--text);
}

html[data-room-theme] .link-row,
html[data-room-theme] .connection-card-settings,
html[data-room-theme] .participant-connection-settings,
html[data-room-theme] .room-empty-state,
html[data-room-theme] .room-skeleton-card,
html[data-room-theme] .pdf-info-card,
html[data-room-theme] .participant-password-setting,
html[data-room-theme] .overlay-mute-control,
html[data-room-theme] .communication-settings-block,
html[data-room-theme] .chat-speakers-section {
  background: var(--room-surface-soft);
  border-color: rgba(var(--room-accent-rgb), .16);
}

html[data-room-theme] .slide-output-type-panel {
  border-color: rgba(var(--room-accent-rgb), .22);
  background:
    radial-gradient(circle at top right, rgba(var(--room-accent-rgb), .14), transparent 34%),
    var(--card-bg);
}

html[data-room-theme] .link-row:hover,
html[data-room-theme] .slide-item:hover,
html[data-room-theme] .room-account-button:not(:disabled):hover {
  border-color: var(--room-accent-border);
}

html[data-room-theme] .link-row:focus-within {
  border-color: var(--room-accent-border-strong);
  box-shadow: 0 0 0 1px rgba(var(--room-accent-rgb), .18), 0 16px 34px rgba(0,0,0,.24);
}

html[data-room-theme] .link-row a {
  color: var(--accent);
}

html[data-room-theme] .room-drawer {
  background:
    radial-gradient(circle at top right, rgba(var(--room-accent-rgb), .16), transparent 24rem),
    radial-gradient(circle at bottom left, var(--room-warm-glow), transparent 22rem),
    linear-gradient(180deg, var(--popover-bg-start), var(--popover-bg-end));
  border-left-color: var(--border-strong);
}

html[data-room-theme] .room-drawer-tab.active,
html[data-room-theme] .room-mobile-tabs button.active,
html[data-room-theme] .participants-sort-buttons button.active {
  border-color: var(--room-accent-border-strong);
  background:
    linear-gradient(135deg, rgba(var(--room-accent-rgb), .2), var(--room-warm-glow)),
    var(--input-bg);
  color: var(--text);
}

html[data-room-theme] .answer-progress-fill,
html[data-room-theme] .session-report-bar-fill,
html[data-room-theme] .room-onboarding-progress span,
html[data-room-theme] .room-sidebar .slides-panel .slides-list::-webkit-scrollbar-thumb,
html[data-room-theme] .slide-options::-webkit-scrollbar-thumb {
  background: var(--primary-bg);
}

html[data-room-theme] .room-sidebar .slides-panel .slides-list,
html[data-room-theme] .slide-options,
html[data-room-theme] .session-report-body {
  scrollbar-color: rgba(var(--room-accent-rgb), .78) rgba(7,16,15,.4);
}

html[data-room-theme] .room-onboarding-target {
  outline-color: rgba(var(--room-accent-rgb), .9);
  box-shadow: 0 0 0 10px rgba(var(--room-accent-rgb), .16), 0 22px 58px rgba(0,0,0,.46) !important;
}

html[data-room-theme] .room-onboarding-kicker {
  color: var(--accent);
}

html[data-room-theme] .participant-avatar {
  background: linear-gradient(135deg, rgba(var(--room-accent-rgb), .24), var(--room-warm-glow));
}

html[data-room-theme] .participant-score {
  background: rgba(var(--room-accent-rgb), .14);
  color: var(--text);
}

html[data-room-theme] .account-theme-setting {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(var(--room-accent-rgb), .16);
  border-radius: 16px;
  background: var(--room-surface-soft);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.account-theme-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-theme-head b {
  color: var(--text);
  font-size: 14px;
}

.account-theme-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--font-weight-heavy, 700);
  text-transform: uppercase;
}

.room-theme-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.room-theme-choice {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  box-shadow: none;
  text-align: left;
  font-size: 12px;
  font-weight: var(--font-weight-heavy, 700);
  line-height: 1.15;
}

.room-theme-choice.active {
  border-color: var(--room-accent-border-strong);
  background:
    linear-gradient(135deg, rgba(var(--room-accent-rgb), .18), rgba(var(--room-accent-2-rgb), .08)),
    var(--input-bg);
  color: var(--text);
}

.room-theme-choice:disabled {
  cursor: wait;
}

.room-theme-choice span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-theme-swatch {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 22px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.room-theme-swatch::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}

.room-theme-swatch-classic { color:#39d98a; background:linear-gradient(135deg, #07100f 0 55%, #f2c14e 55%); }
.room-theme-swatch-studio { color:#38bdf8; background:linear-gradient(135deg, #090b10 0 55%, #60a5fa 55%); }
.room-theme-swatch-amber { color:#f59e0b; background:linear-gradient(135deg, #0d0c10 0 55%, #e879f9 55%); }
.room-theme-swatch-light { color:#2563eb; background:linear-gradient(135deg, #f8fbff 0 55%, #dbeafe 55%); }
.room-theme-swatch-coral { color:#fb7185; background:linear-gradient(135deg, #111014 0 55%, #8b5cf6 55%); }
.room-theme-swatch-graphite { color:#a3e635; background:linear-gradient(135deg, #080a0d 0 55%, #22d3ee 55%); }
.room-theme-swatch-lagoon { color:#2dd4bf; background:linear-gradient(135deg, #061113 0 55%, #7dd3fc 55%); }
.room-theme-swatch-mono { color:#f43f5e; background:linear-gradient(135deg, #0b0b0f 0 55%, #38bdf8 55%); }
.room-theme-swatch-midnight { color:#818cf8; background:linear-gradient(135deg, #0b0f1e 0 55%, #c084fc 55%); }
.room-theme-swatch-paper { color:#c2410c; background:linear-gradient(135deg, #f7f2e9 0 55%, #e8a87c 55%); }
.room-theme-swatch-slate { color:#4f46e5; background:linear-gradient(135deg, #f4f5f7 0 55%, #c7d2fe 55%); }

.room-theme-status {
  min-height: 16px;
  font-weight: var(--font-weight-heavy, 700);
}

.room-theme-status.success {
  color: var(--success-text, #bbf7d0);
}

.room-theme-status.error {
  color: var(--error-text, #fecaca);
}

html[data-theme="light"] .room-theme-status.success {
  color: #17623f;
}

html[data-theme="light"] .room-theme-status.error {
  color: #9f2f20;
}

html[data-theme="light"] .room-drawer-backdrop,
html[data-theme="light"] .qr-modal,
html[data-theme="light"] .admin-feedback-modal,
html[data-theme="light"] .slide-output-type-modal {
  background: rgba(15,23,42,.34);
}

html[data-theme="light"] .room-theme-swatch {
  border-color: rgba(24,39,75,.16);
}

@media (max-width: 720px) {
  .room-theme-choices {
    grid-template-columns: 1fr;
  }
}