:root {
  color-scheme: dark;
  --ink: #e8f5f3;
  --muted: #82959d;
  --cream: #0c1218;
  --line: #24313a;
  --gold: #789497;
  --coral: #789497;
  --teal: #8cb2b3;
  --purple: #789497;
  --lab-bg: #090e13;
  --lab-panel: #111920;
  --lab-raised: #151f27;
  --lab-deep: #080d12;
  --lab-border: rgba(162, 210, 211, .10);
  --lab-highlight: rgba(255, 255, 255, .035);
  --lab-shadow: 14px 14px 32px rgba(2, 5, 8, .72), -10px -10px 26px rgba(28, 40, 49, .42);
  --lab-inset: inset 3px 3px 8px rgba(2, 5, 8, .68), inset -3px -3px 8px rgba(35, 49, 58, .32);
}

* { scrollbar-width: thin; scrollbar-color: #34464f #0b1117; }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 8%, rgba(45, 111, 116, .14), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(104, 123, 126, .08), transparent 28%),
    linear-gradient(145deg, #0c1319 0%, var(--lab-bg) 52%, #070b0f 100%);
  color: var(--ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(111, 168, 170, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 168, 170, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.app-shell { max-width: 1540px; padding: 22px 34px 24px; position: relative; }

.topbar {
  height: 64px;
  padding: 0 18px;
  border: 1px solid var(--lab-border);
  border-radius: 18px;
  background: rgba(16, 24, 31, .82);
  box-shadow: var(--lab-shadow), inset 0 1px 0 var(--lab-highlight);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: 150px; height: 32px; object-fit: contain; object-position: left center; }

.top-actions { gap: 12px; }
.text-button, .export-button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--lab-border);
  border-radius: 11px;
  color: #bfd0d2;
  background: var(--lab-raised);
  box-shadow: 6px 6px 14px rgba(2, 5, 8, .58), -4px -4px 12px rgba(31, 44, 53, .34), inset 0 1px 0 var(--lab-highlight);
  transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.export-button { color: #081213; background: linear-gradient(145deg, #52e8db, #2ebeb4); border-color: rgba(106, 246, 234, .42); box-shadow: 0 8px 22px rgba(29, 176, 165, .18), inset 0 1px 0 rgba(255, 255, 255, .28); }
.text-button:hover, .export-button:hover { transform: translateY(-1px); }
.text-button:hover { color: #fff; border-color: rgba(81, 209, 200, .32); }
.text-button:active, .export-button:active { transform: translateY(1px); box-shadow: var(--lab-inset); }

.workspace { grid-template-columns: minmax(570px, 1fr) 390px; gap: 34px; padding-top: 28px; }

.scene-card {
  border: 1px solid rgba(149, 197, 200, .13);
  border-radius: 22px;
  background: #0e151b;
  box-shadow: 18px 18px 42px rgba(1, 4, 7, .72), -10px -10px 28px rgba(27, 39, 47, .30), inset 0 1px 0 var(--lab-highlight);
}
.canvas-wrap { background: #101820; border-block: 1px solid rgba(130, 181, 184, .09); }
.scene-topline, .scene-foot { background: #0f171e; color: #738b91; }
.scene-topline { height: 42px; }
.scene-foot { height: 35px; }
.scene-topline .frame-rate { color: #52676d; }
.live-dot { background: #46dfcf; box-shadow: 0 0 0 4px rgba(70, 223, 207, .10), 0 0 16px rgba(70, 223, 207, .65); }
.scene-badge { color: #c4d7d6; background: rgba(11, 18, 23, .76); border: 1px solid rgba(196, 236, 233, .15); border-radius: 9px; box-shadow: 0 10px 28px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: blur(12px); }

.control-panel {
  padding: 24px;
  border: 1px solid var(--lab-border);
  border-radius: 22px;
  background: linear-gradient(145deg, #131c23, #0e151b);
  box-shadow: var(--lab-shadow), inset 0 1px 0 var(--lab-highlight);
}
.eyebrow { color: #8ba8aa; letter-spacing: 2px; }
.panel-heading h1 { color: #edf8f6; font-family: "DM Sans", sans-serif; font-size: 37px; line-height: 1.02; letter-spacing: -1.8px; }
.panel-heading h1 em { color: #a8babb; font-style: normal; font-weight: 500; }
.panel-intro { color: #81949a; font-size: 13px; }

.control-group { border-top-color: rgba(145, 183, 186, .10); }
.control-label label, .control-label>span { color: #cbd9d9; font-size: 12px; letter-spacing: .1px; }
.control-label output { color: #ecf9f7; font-size: 17px; }
.control-label small { color: #60767c; }
.range-meta { color: #5c7076; }

.gold, .coral, .teal, .purple { --accent: #78989a; }
.range {
  height: 10px;
  margin: 5px 0;
  padding: 2px;
  border: 1px solid rgba(143, 190, 191, .08);
  background: linear-gradient(to right, var(--accent) 0 var(--value), #202b32 var(--value) 100%);
  box-shadow: var(--lab-inset), 0 1px 0 rgba(255, 255, 255, .025);
}
.range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #111920;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 4px 14px rgba(80, 120, 122, .30);
}
.range:focus-visible { outline: 2px solid rgba(140, 178, 179, .45); outline-offset: 5px; }

.segmented { border-color: rgba(146, 190, 193, .09); background: #0b1117; box-shadow: var(--lab-inset); padding: 5px; border-radius: 12px; }
.segmented span { color: #667b81; border-radius: 8px; }
.segmented input:checked+span { color: #e8f8f5; background: linear-gradient(145deg, #1c2931, #121b22); box-shadow: 5px 5px 12px rgba(2, 5, 8, .58), -3px -3px 9px rgba(33, 47, 56, .28), inset 0 1px 0 rgba(255, 255, 255, .04); }

.panel-transport { border-top-color: rgba(145, 183, 186, .10); }
.stage-transport {
  height: 68px;
  margin: 14px 0 0;
  padding: 10px 16px;
  border: 1px solid var(--lab-border);
  border-radius: 16px;
  background: linear-gradient(145deg, #121b22, #0d141a);
  box-shadow: 10px 10px 24px rgba(1, 4, 7, .58), -7px -7px 20px rgba(27, 39, 47, .24), inset 0 1px 0 var(--lab-highlight);
}
.stage-transport .play-button { flex: 0 0 42px; width: 42px; height: 42px; }
.stage-transport .icon-button, .stage-transport .full-screen { flex: 0 0 34px; }
.icon-button, .play-button, .full-screen { color: #93a8ac; }
.icon-button:hover, .full-screen:hover { color: var(--teal); }
.play-button { border: 1px solid rgba(64, 216, 203, .24); background: #111a21; color: var(--teal); box-shadow: 6px 6px 13px rgba(2, 5, 8, .55), -4px -4px 11px rgba(34, 47, 56, .30); }
.play-button:active { box-shadow: var(--lab-inset); }
.scrubber-track:before { background: #222e35; box-shadow: var(--lab-inset); }
.scrubber-progress { background: linear-gradient(90deg, #1e8f89, var(--teal)); box-shadow: 0 0 10px rgba(64, 216, 203, .22); }
.time-readout { color: #5e747a; }

.automatic-card {
  margin: 8px 0;
  padding: 14px;
  border: 1px solid rgba(145, 183, 186, .08);
  border-radius: 14px;
  background: #111920;
  box-shadow: 7px 7px 16px rgba(2, 5, 8, .50), -4px -4px 12px rgba(32, 45, 54, .28), inset 0 1px 0 rgba(255, 255, 255, .025);
}
.auto-icon { color: var(--teal); background: #0d151b; box-shadow: var(--lab-inset); }
.automatic-card p { color: #d1dfdf; }
.automatic-card span { color: #71868b; }
.automatic-card b { color: var(--coral); }
.switch span { background: #202b32; box-shadow: var(--lab-inset); }
.switch span:after { background: #788b8e; box-shadow: 0 2px 7px rgba(0, 0, 0, .45); }
.switch input:checked+span { background: #173e3c; }
.switch input:checked+span:after { background: var(--teal); box-shadow: 0 0 12px rgba(64, 216, 203, .35); }

.schedule-head { color: #60757b; }
.schedule-head span:last-child { color: var(--teal); }
.schedule-item { border-left-color: #299e97; }
.schedule-item .num { color: #5c7076; }
.schedule-item .at { color: #758b90; }
.sign-text { border-color: rgba(142, 188, 190, .10); border-radius: 9px; background: #0c1318; color: #cddcdb; box-shadow: var(--lab-inset); }
.sign-text:focus { border-color: rgba(64, 216, 203, .45); box-shadow: var(--lab-inset), 0 0 0 2px rgba(64, 216, 203, .08); }

footer { border-top-color: rgba(145, 183, 186, .09); color: #53676c; }

.settings-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 10px;
  padding: 5px;
  border: 1px solid rgba(145, 183, 186, .08);
  border-radius: 13px;
  background: #0a1015;
  box-shadow: var(--lab-inset);
}
.settings-tab {
  min-width: 0;
  padding: 9px 5px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #61767b;
  font: 600 10px "DM Sans";
  letter-spacing: .35px;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.settings-tab:hover { color: #b7c7c7; }
.settings-tab.is-active { color: #ecf7f6; background: #182229; box-shadow: 4px 4px 10px rgba(2, 5, 8, .52), -2px -2px 7px rgba(34, 47, 56, .25), inset 0 1px 0 rgba(255, 255, 255, .035); }
.settings-tab:focus-visible { outline: 2px solid rgba(140, 178, 179, .45); outline-offset: 2px; }

.settings-file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.settings-file-actions button {
  padding: 10px 12px;
  border: 1px solid rgba(145, 183, 186, .09);
  border-radius: 10px;
  color: #9eb1b3;
  background: #111920;
  box-shadow: 5px 5px 12px rgba(2, 5, 8, .45), -3px -3px 9px rgba(32, 45, 54, .22);
  font: 600 10px "DM Sans";
  letter-spacing: .25px;
  cursor: pointer;
}
.settings-file-actions button:hover { color: #eef8f7; border-color: rgba(145, 183, 186, .2); }
.settings-file-actions button:active { box-shadow: var(--lab-inset); }

.settings-item { display: none !important; }
.settings-item.is-active.control-group, .settings-item.is-active.schedule { display: block !important; }
.settings-item.is-active.automatic-card { display: flex !important; }
body:not(.mode-mode7) .settings-item.mode7-only { display: none !important; }

@media (max-width: 960px) {
  .app-shell { padding: 16px; }
  .workspace { grid-template-columns: 1fr; }
  .control-panel { max-width: none; }
}

@media (max-width: 580px) {
  .topbar { padding: 0 12px; }
  .control-panel { padding: 18px; }
  .panel-heading h1 { font-size: 32px; }
}

/* Dreamerr-inspired dark editorial layer */
:root {
  --ink: #f4f3f8;
  --muted: #8e8c98;
  --cream: #09090c;
  --line: #25242d;
  --teal: #7bcdf2;
  --purple: #9a71ee;
  --lab-bg: #07070a;
  --lab-panel: #0d0d12;
  --lab-raised: #131319;
  --lab-deep: #060608;
  --lab-border: rgba(255,255,255,.10);
  --lab-highlight: rgba(255,255,255,.055);
  --lab-shadow: 0 28px 70px rgba(0,0,0,.42);
  --lab-inset: inset 0 0 0 1px rgba(255,255,255,.035);
}

body {
  background:
    radial-gradient(circle at 78% -8%, rgba(142, 95, 238, .10), transparent 34%),
    radial-gradient(circle at 10% 18%, rgba(94, 197, 239, .065), transparent 27%),
    #07070a;
  font-family: "DM Sans", sans-serif;
}

body::before {
  inset: -8vh -8vw auto auto;
  width: min(760px, 58vw);
  height: min(620px, 62vh);
  opacity: .26;
  background-image: radial-gradient(circle, rgba(134, 124, 238, .7) 1px, transparent 1.35px);
  background-size: 10px 10px;
  mask-image: radial-gradient(ellipse at 58% 40%, #000 0, rgba(0,0,0,.82) 34%, transparent 74%);
  transform: rotate(-8deg) skewY(7deg);
}

.app-shell { max-width: 1600px; padding: 18px 40px 32px; }

.topbar {
  height: 76px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.brand img { width: 158px; height: 34px; }
.top-actions { gap: 10px; }
.text-button, .export-button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #d5d3dc;
  background: rgba(12,12,16,.72);
  box-shadow: none;
  font-size: 12px;
}
.export-button {
  color: #09090c;
  background: #f5f3f8;
  border-color: #f5f3f8;
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
}
.text-button:hover { color: #fff; border-color: rgba(255,255,255,.34); background: #111117; }
.export-button:hover { background: linear-gradient(105deg, #81d7f4, #b07af2); border-color: transparent; }
.text-button:active, .export-button:active { box-shadow: none; }

.workspace { grid-template-columns: minmax(570px, 1fr) 400px; gap: 30px; padding-top: 28px; }

.scene-card {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 28px;
  background: #0c0c10;
  box-shadow: 0 30px 80px rgba(0,0,0,.50);
}
.canvas-wrap { border: 0; }
.scene-badge {
  color: rgba(255,255,255,.88);
  background: rgba(8,8,11,.60);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.stage-transport {
  height: 72px;
  margin-top: 14px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(13,13,18,.88);
  box-shadow: 0 18px 48px rgba(0,0,0,.30);
  backdrop-filter: blur(18px);
}
.icon-button, .full-screen { color: #8e8c98; }
.icon-button:hover, .full-screen:hover { color: #fff; }
.play-button {
  border: 1px solid rgba(255,255,255,.16);
  background: #f5f3f8;
  color: #08080b;
  box-shadow: none;
}
.play-button:hover { background: linear-gradient(105deg, #81d7f4, #b07af2); }
.scrubber-track:before { height: 3px; background: #282731; box-shadow: none; }
.scrubber-progress { height: 3px; background: linear-gradient(90deg, #6fcff3, #a66ff0); box-shadow: none; }
.time-readout { color: #74727e; }

.control-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  background: rgba(13,13,18,.94);
  box-shadow: 0 30px 80px rgba(0,0,0,.42);
  backdrop-filter: blur(20px);
}
.control-panel::before {
  content: "";
  position: absolute;
  inset: 0 20px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,204,242,.65), rgba(168,105,239,.65), transparent);
}

.settings-tabs {
  gap: 3px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: #08080b;
  box-shadow: none;
}
.settings-tab {
  min-height: 38px;
  border-radius: 999px;
  color: #73717d;
  font-size: 10px;
  letter-spacing: .25px;
}
.settings-tab:hover { color: #d8d6df; }
.settings-tab.is-active {
  color: #09090c;
  background: #f1eff5;
  box-shadow: none;
}

.settings-file-actions { gap: 8px; margin-bottom: 12px; }
.settings-file-actions button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: #a8a6b0;
  background: transparent;
  box-shadow: none;
}
.settings-file-actions button:hover { color: #fff; border-color: rgba(255,255,255,.27); background: #121217; }
.settings-file-actions button:active { box-shadow: none; }

.control-group { padding: 17px 0; border-top-color: rgba(255,255,255,.075); }
.control-label { margin-bottom: 13px; }
.control-label label, .control-label>span { color: #d7d5dd; font-size: 12px; font-weight: 600; }
.control-label output { color: #f5f3f8; font-size: 15px; }
.control-label small, .range-meta { color: #686671; }

.gold, .coral, .teal, .purple { --accent: #a176ee; }
.range {
  height: 6px;
  margin: 8px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right, #74d1f3 0, #a473ef var(--value), #2b2a33 var(--value), #2b2a33 100%);
  box-shadow: none;
}
.range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 5px solid #f2f0f5;
  background: #8b78ed;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 5px 16px rgba(0,0,0,.34);
}
.range:focus-visible { outline-color: rgba(158,112,239,.65); }

.segmented {
  border-color: rgba(255,255,255,.09);
  border-radius: 999px;
  background: #08080b;
  box-shadow: none;
}
.segmented span { border-radius: 999px; color: #777580; }
.segmented input:checked+span { color: #09090c; background: #f1eff5; box-shadow: none; }

.automatic-card {
  margin: 10px 0;
  padding: 14px 15px;
  border-color: rgba(255,255,255,.085);
  border-radius: 18px;
  background: #101015;
  box-shadow: none;
}
.auto-icon { color: #9e78ee; background: #17161e; box-shadow: none; }
.automatic-card p { color: #e4e2e9; }
.automatic-card span { color: #777581; }
.automatic-card b { color: #a985ef; }
.switch span { background: #292832; box-shadow: none; }
.switch span:after { background: #8d8a96; box-shadow: none; }
.switch input:checked+span { background: linear-gradient(90deg, #65caef, #9b71ec); }
.switch input:checked+span:after { background: #fff; box-shadow: none; }

.schedule-head { color: #716f7b; }
.schedule-head span:last-child { color: #9e7bef; }
.schedule-item { border-left-color: #9876ea; }
.sign-text {
  border-color: rgba(255,255,255,.09);
  border-radius: 12px;
  background: #09090d;
  color: #dcd9e2;
  box-shadow: none;
}
.sign-text:focus { border-color: rgba(158,116,238,.58); box-shadow: 0 0 0 3px rgba(151,109,233,.09); }
.sign-text[readonly] { color: #8f8c98; background: #0b0b0f; }

@media (max-width: 960px) {
  .app-shell { padding: 14px 18px 28px; }
  .workspace { grid-template-columns: 1fr; }
  .control-panel { border-radius: 24px; }
}

@media (max-width: 580px) {
  .topbar { height: 66px; }
  .brand img { width: 132px; }
  .text-button { display: none; }
  .export-button { min-height: 40px; padding: 0 14px; }
  .scene-card { border-radius: 20px; }
  .stage-transport { border-radius: 20px; padding-inline: 12px; }
  .control-panel { padding: 16px; border-radius: 20px; }
}