/* Legacy styles carry the light colors as fallbacks. The dark theme supplies
   these shared roles to the editor, galleries, shared views and device pages. */
:root[data-theme="dark"] {
 color-scheme: dark;
 --studio-page: #121314;
 --studio-canvas: #101112;
 --studio-panel: #232426;
 --studio-raised: #2d2e31;
 --studio-field: #191a1c;
 --studio-glass: #242527f0;
 --studio-chrome: #1b1c1e;
 --studio-chrome-raised: #323438;
 --studio-line: #424448;
 --studio-line-strong: #71747b;
 --studio-scrim: #090a0bcc;
 --studio-ink: #f6f6f7;
 --studio-muted: #c3c5ca;
 --studio-accent: #63e8d3;
 --studio-focus: #8ef4e3;
 --studio-cta: #c51d54;
 --studio-cta-hover: #ad1948;
 --studio-pink: #ff7db4;
 --studio-blue: #62caff;
 --studio-violet: #c4a4ff;
 --studio-lime: #b9f76c;
 --studio-amber: #ffd163;
 --studio-error: #ffa4ac;
 --studio-accent-tint: #1d3834;
 --studio-pink-tint: #412733;
 --studio-blue-tint: #26354b;
 --studio-violet-tint: #352e48;
 --studio-lime-tint: #2c3926;
 --studio-amber-tint: #413426;
 --studio-error-tint: #482d35;
 --studio-blue-line: #374b67;
 --studio-lime-line: #3c5031;
 --studio-amber-line: #5b4530;
 --studio-error-line: #76505a;
 --studio-blue-tint-soft: #242d3a;
 --studio-lime-tint-soft: #283128;
 --studio-amber-tint-soft: #362f28;
}

.workspace-theme-field { margin-top: 12px; }
.workspace-theme-field select { width: 100%; }
.workspace-theme-field small { display: block; margin-top: 5px; color: var(--studio-muted,#4b625d); }

[data-theme="dark"] .sidebar {
 background: linear-gradient(172deg, #27282a, var(--studio-chrome) 58%);
 border-inline-end: 1px solid var(--studio-line);
}
[data-theme="dark"] .workspace-topbar { background: var(--studio-chrome); border-color: var(--studio-line); }
[data-theme="dark"] .welcome-top,
[data-theme="dark"] .guide-hero {
 background: radial-gradient(ellipse at 8% 0%, #452b3b, transparent 70%), var(--studio-panel);
}
[data-theme="dark"] .workspace-help,
[data-theme="dark"] a:not(.btn,.brand) { color: var(--studio-accent); }
[data-theme="dark"] .nav-bottom > button:hover,
[data-theme="dark"] #steps button:hover { background: var(--studio-chrome-raised); }
[data-theme="dark"] .step-group238 { --step-accent: var(--studio-accent); --step-tint: var(--studio-accent-tint); }
[data-theme="dark"] .step-group238:nth-child(2) { --step-accent: var(--studio-violet); --step-tint: var(--studio-violet-tint); }
[data-theme="dark"] .step-group238:nth-child(3) { --step-accent: var(--studio-amber); --step-tint: var(--studio-amber-tint); }
[data-theme="dark"] #steps .step-no { color: var(--step-accent); }
[data-theme="dark"] #steps button.active {
 background: var(--step-tint);
 color: var(--studio-ink);
 box-shadow: inset 0 0 0 1px var(--step-accent);
}
[data-theme="dark"] #steps button.active .step-no { font-weight: 800; }
[data-theme="dark"] .btn { background: var(--studio-raised); }
[data-theme="dark"] .btn:hover { background: var(--studio-chrome-raised); border-color: var(--studio-line-strong); }
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .invitation-dialog237 button,
[data-theme="dark"] #enter,
[data-theme="dark"] #pair-submit {
 background: var(--studio-cta);
 border-color: var(--studio-cta);
 color: #fff;
}
[data-theme="dark"] .btn.primary:hover,
[data-theme="dark"] .invitation-dialog237 button:hover { background: var(--studio-cta-hover); border-color: var(--studio-cta-hover); }
[data-theme="dark"] .btn.secondary { background: var(--studio-accent-tint); color: var(--studio-accent); }
[data-theme="dark"] .btn.active:not(.primary),
[data-theme="dark"] .btn[aria-pressed="true"]:not(.primary),
[data-theme="dark"] .segmented button[aria-pressed="true"],
[data-theme="dark"] .segmented button.active {
 color: var(--studio-accent);
 background: var(--studio-accent-tint);
 border-color: var(--studio-accent);
}
[data-theme="dark"] .btn.danger { color: var(--studio-error); }
[data-theme="dark"] .liked { color: var(--studio-pink); background: var(--studio-pink-tint); }
[data-theme="dark"] .guest-like237[aria-pressed="true"] {
 color: var(--studio-pink);
 background: var(--studio-pink-tint);
 border-color: var(--studio-pink);
}
[data-theme="dark"] .toast { background: var(--studio-chrome-raised); color: var(--studio-ink); border: 1px solid var(--studio-accent); }
[data-theme="dark"] .toast.error { background: var(--studio-error-tint); border-color: var(--studio-error); }
[data-theme="dark"] .badge { color: var(--studio-lime); }
[data-theme="dark"] .badge.warn { color: var(--studio-amber); }
[data-theme="dark"] .badge.neutral { color: var(--studio-muted); }
[data-theme="dark"] .fz-mode213.active .fz-mode-check213 { color: var(--studio-canvas); }
[data-theme="dark"] .note { color: var(--studio-ink); }
[data-theme="dark"] .note.warn { color: var(--studio-amber); }
[data-theme="dark"] .note.error { color: var(--studio-error); }
[data-theme="dark"] :is(input,select,textarea):not([type="range"],[type="color"],[type="checkbox"],[type="radio"],[type="button"],[type="submit"]) {
 background-color: var(--studio-field);
 color: var(--studio-ink);
 border-color: var(--studio-line-strong);
}
[data-theme="dark"] :is(input, textarea)::placeholder { color: #a6a9b5; opacity: 1; }
[data-theme="dark"] :where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
 accent-color: var(--studio-accent);
}
[data-theme="dark"] :is(button, input, select, textarea, summary, a):focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 2px; }
[data-theme="dark"] .furnish-palette244:has(:checked) { box-shadow: inset 0 0 0 1px var(--studio-accent); border-color: var(--studio-accent); }
[data-theme="dark"] .furnish-palette244:has(:focus-visible) { outline-color: var(--studio-focus); }
[data-theme="dark"] .furnish-kicker244,
[data-theme="dark"] .furnish-mark244 { color: var(--studio-accent); }
[data-theme="dark"] .plan-shell,
[data-theme="dark"] .graph-canvas,
[data-theme="dark"] .furnish-viewport244,
[data-theme="dark"] .guest-project237 {
 background-color: var(--studio-canvas);
}
[data-theme="dark"] .furnish-viewport244 { background: radial-gradient(ellipse at 50% 35%, #282a2e, var(--studio-canvas) 82%); }
[data-theme="dark"] #small-grid path { stroke: #2a2b2d; }
[data-theme="dark"] #big-grid path { stroke: #414347; }
[data-theme="dark"] :is(#plan-svg,#projector-plan) > polygon[fill="#ffffff55"] { fill: #18191b80; stroke: #a6afbe; }
[data-theme="dark"] :is(#plan-svg,#projector-plan) .cad-reference-line { stroke: #8b919a; }
[data-theme="dark"] :is(#plan-svg,#projector-plan) #metric-walls :is(path,line) { stroke: #9a9fa6; }
[data-theme="dark"] :is(#plan-svg,#projector-plan) [data-opening] > path[stroke="white"] { stroke: var(--studio-canvas); }
[data-theme="dark"] :is(#plan-svg,#projector-plan) [data-opening] > path[stroke="#26755a"] { stroke: var(--studio-accent); }
[data-theme="dark"] :is(#plan-svg,#projector-plan) .room { fill-opacity: .54; stroke-opacity: 1; }
[data-theme="dark"] :is(#plan-svg,#projector-plan) .room.selected { fill-opacity: .68; stroke: var(--studio-focus); }
[data-theme="dark"] :is(#plan-svg,#projector-plan) text,
[data-theme="dark"] .building-svg28 text {
 fill: var(--studio-ink);
 paint-order: stroke;
 stroke: var(--studio-canvas);
 stroke-linejoin: round;
}
[data-theme="dark"] :is(#plan-svg,#projector-plan) text { stroke-width: .065; }
[data-theme="dark"] .building-svg28 > rect[fill="#f4f7f8"] { fill: var(--studio-canvas); }
[data-theme="dark"] .building-svg28 [data-surface="boundary"] { fill: #292b2f; }
[data-theme="dark"] .building-svg28 [data-surface="floor"] { fill-opacity: .8; }
[data-theme="dark"] .building-svg28 [data-surface="wall"] { filter: brightness(.63); }
[data-theme="dark"] .building-svg28 [data-surface="roof"] { fill: #a8b7c6; }
[data-theme="dark"] :is(.mini-plan,.suggestion-plan219,.guest-preview237 svg,.guest-plan-button237 svg) > polygon:first-child {
 fill: var(--studio-field);
 stroke: var(--studio-line-strong);
}
[data-theme="dark"] #graph-base212 > rect[fill="white"] { fill: var(--studio-canvas); }
[data-theme="dark"] #graph-base212 > polygon { stroke: #82909e; }
[data-theme="dark"] #graph-base212 > polygon[fill="#f8faf9"] { fill: #1a1d24; }
[data-theme="dark"] #graph-base212 > polygon[fill-opacity=".25"] { fill-opacity: .45; }
[data-theme="dark"] #graph-svg text:not([fill="white"],[fill="#fff"],[fill="#ffffff"]) { fill: var(--studio-ink); }
[data-theme="dark"] #graph-svg [data-node] > circle { stroke: #b8c9db; }
[data-theme="dark"] #graph-svg [data-connection] { stroke: var(--studio-accent); }
[data-theme="dark"] .fz-chart212 text { fill: var(--studio-ink); }
[data-theme="dark"] .fz-chart212 polygon[stroke="#d6e5dc"] { stroke: var(--studio-line-strong); }
[data-theme="dark"] .fz-chart212 rect[fill="#3c8878"] { fill: var(--studio-lime); }
[data-theme="dark"] .fz-chart212 rect[fill="#bc9569"] { fill: var(--studio-amber); }
[data-theme="dark"] .fz-chart212 :is(polygon[stroke="#388678"], text[fill="#388678"]) { color: var(--studio-accent); }
[data-theme="dark"] .fz-chart212 :is(polygon[stroke="#b58b62"], text[fill="#b58b62"]) { color: var(--studio-amber); }
[data-theme="dark"] .fz-chart212 :is(polygon[stroke="#6a8dc2"], text[fill="#6a8dc2"]) { color: var(--studio-blue); }
[data-theme="dark"] .fz-chart212 :is(polygon[stroke="#a17f9c"], text[fill="#a17f9c"]) { color: var(--studio-violet); }
[data-theme="dark"] .fz-chart212 polygon[stroke-width="2"] { stroke: currentColor; fill: currentColor; }
[data-theme="dark"] .fz-chart212 text[y="405"] { fill: currentColor; }
[data-theme="dark"] .emotion-chart line { stroke: var(--studio-line); }
[data-theme="dark"] .emotion-chart text { fill: var(--studio-muted); }
[data-theme="dark"] .sam-anchors img { filter: invert(.89); }
[data-theme="dark"] .ar-primary,
[data-theme="dark"] .viewer-shell223 #enter,
[data-theme="dark"] .viewer-shell223 #pair-submit { color: #fff; }
[data-theme="dark"] #ar-status,
[data-theme="dark"] .viewer-shell223 #status { color: var(--studio-ink); }
[data-theme="dark"] #ar-status.error { color: var(--studio-error); }
[data-theme="dark"] .ar-hero .eyebrow { color: var(--studio-pink); }

/* Panel families share a quiet surface color and a stronger edge accent. */
[data-theme="dark"] :is(.card:has(#spec-list,#brief-name), .guest-spaces237, .guest-brief237,
 .layout-gallery-row, #layout-gallery) {
 --panel-color: #202f3c;
 --panel-edge: #486984;
 --panel-label: #a9cfff;
}
[data-theme="dark"] :is(.card:has(.plan-shell), #workspace-deck, .guest-gallery237,
 .viewer-settings223, .ar-modes) {
 --panel-color: #203338;
 --panel-edge: #40666e;
 --panel-label: #9adce3;
}
[data-theme="dark"] :is(.justified228, .connection-plan228 > .card, .connection-analysis228 .card,
 .simulation-workspace230, #movement-section230 > .card, .heatmap216, .fz-workspace212 .card) {
 --panel-color: #302b40;
 --panel-edge: #665880;
 --panel-label: #d4c3ff;
}
[data-theme="dark"] :is(.feedback-plan-bar228, .survey-bar228, .survey-question228,
 .feedback-columns230 .side-panels > .card, .feedback-columns230 > :first-child > .card:not(:has(.plan-shell))) {
 --panel-color: #392c38;
 --panel-edge: #78516d;
 --panel-label: #f2badc;
}
[data-theme="dark"] :is(#furnish-card244, .furnish-finishes244, .furnish-inspect244) {
 --panel-color: #353025;
 --panel-edge: #75623d;
 --panel-label: #efce91;
}
[data-theme="dark"] :is(.card:has(#spec-list,#brief-name,.plan-shell), .guest-panel237, .layout-gallery-row,
 #layout-gallery, #workspace-deck, .viewer-settings223, .ar-modes,
 .justified228, .connection-plan228 > .card, .connection-analysis228 .card, .simulation-workspace230,
 #movement-section230 > .card, .heatmap216, .fz-workspace212 .card,
 .feedback-plan-bar228, .survey-bar228, .survey-question228, .feedback-columns230 .side-panels > .card,
 .feedback-columns230 > :first-child > .card:not(:has(.plan-shell)), #main #furnish-card244, .furnish-finishes244, .furnish-inspect244) {
 background: var(--panel-color, var(--studio-panel));
 border-color: var(--panel-edge, var(--studio-line));
}
[data-theme="dark"] :is(.guest-panel237, .card:has(#spec-list), #layout-gallery,
 .justified228, .feedback-plan-bar228, #furnish-card244) {
 border-inline-start: 3px solid var(--panel-edge);
}
[data-theme="dark"] :is(.guest-panel237 > h2, .card:has(#spec-list,#brief-name) .card-title h3,
 #layout-gallery .card-title h3, .justified228 .card-title h3, .feedback-plan-bar228 > strong,
 .furnish-kicker244, .furnish-mark244) {
 color: var(--panel-label, var(--studio-accent));
}
[data-theme="dark"] :is(.guest-space237, .program-space216, .layout-gallery-description) {
 background: var(--studio-field);
 border-color: var(--panel-edge, var(--studio-line));
}

/* Dark workspace palettes follow the design steps. Drawings keep their room colors. */
[data-theme=dark] :is(body[data-stage216="0"], #steps [data-stage="0"]) {
 --stage-accent:#c0f66b;
 --stage-complement:#4bded8;
}
[data-theme=dark] :is(body[data-stage216="1"], #steps [data-stage="1"]) {
 --stage-accent:#63c5ff;
 --stage-complement:#d29aff;
}
[data-theme=dark] :is(body[data-stage216="2"], #steps [data-stage="2"]) {
 --stage-accent:#ba9aff;
 --stage-complement:#64e1ff;
}
[data-theme=dark] :is(body[data-stage216="10"], #steps [data-stage="10"]) {
 --stage-accent:#ffdb61;
 --stage-complement:#ff996f;
}
[data-theme=dark] :is(body[data-stage216="6"], #steps [data-stage="6"]) {
 --stage-accent:#ff7db4;
 --stage-complement:#ffa45f;
}
[data-theme=dark] :is(body[data-stage216="7"], #steps [data-stage="7"]) {
 --stage-accent:#5cead0;
 --stage-complement:#bb9bff;
}
[data-theme=dark] :is(body[data-stage216="9"], #steps [data-stage="9"]) {
 --stage-accent:#ffad5b;
 --stage-complement:#63c5ff;
}
[data-theme=dark] :is(body[data-stage216="8"], #steps [data-stage="8"]) {
 --stage-accent:#ee91fc;
 --stage-complement:#b4ef6b;
}
[data-theme=dark] body[data-stage216]:has(#main .heading) {
 --studio-accent:var(--stage-accent);
 --studio-focus:var(--stage-accent);
 --studio-accent-tint:color-mix(in srgb,var(--stage-accent) 18%,var(--studio-field));
 --teal:var(--studio-accent);
}
[data-theme=dark] #steps button .step-no { color:var(--stage-accent,var(--step-accent)); }
[data-theme=dark] #steps button.active {
 background:color-mix(in srgb,var(--stage-accent) 19%,var(--studio-field));
 box-shadow:inset 0 0 0 1px var(--stage-accent);
}
[data-theme=dark] body[data-stage216] #main:has(.heading) {
 background:radial-gradient(ellipse 100% 28rem at 50% 0%,
  color-mix(in srgb,var(--stage-accent) 9%,var(--studio-page)),transparent);
}
[data-theme=dark] body[data-stage216] #main .heading .stage-title {
 border-inline-start:3px solid var(--stage-accent);
 padding-inline-start:.7rem;
}
[data-theme=dark] body[data-stage216] #main .heading .eyebrow { color:var(--stage-accent); }
[data-theme=dark] body[data-stage216] #main :is(.card, #furnish-card244, .feedback-plan-bar228, .survey-bar228, .decision-hero223) {
 --card-accent:var(--stage-accent);
 --panel-color:color-mix(in srgb,var(--card-accent) 8%,var(--studio-panel));
 --panel-edge:color-mix(in srgb,var(--card-accent) 48%,var(--studio-line));
 --panel-label:var(--card-accent);
 background:var(--panel-color);
 border-color:var(--panel-edge);
}
[data-theme=dark] body[data-stage216] #main :is(.side-panels > .card:nth-child(odd), .connection-analysis228 .card, .justified228, #furnish-card244) {
 --card-accent:var(--stage-complement);
}
[data-theme=dark] body[data-stage216] #main :is(.canvas-top,.graph-card > .card-title,.card-title h3) {
 color:var(--panel-label,var(--stage-accent));
}
[data-theme=dark] body[data-stage216] #main .btn.primary {
 background:var(--stage-accent);
 border-color:var(--stage-accent);
 color:#131820;
}
[data-theme=dark] body[data-stage216] #main .btn.primary:hover {
 background:color-mix(in srgb,var(--stage-accent) 82%,white);
}
[data-theme=dark] :is(#plan-svg,#projector-plan) .room {
 fill-opacity:.66;
 filter:saturate(1.4);
}
[data-theme=dark] :is(#plan-svg,#projector-plan) .room.selected { fill-opacity:.77; }
[data-theme=dark] :is(.mini-plan,#graph-base212) :is(rect,polygon)[fill-opacity] { filter:saturate(1.35); }
[data-theme=dark] .graph-north310 path { stroke:var(--stage-accent,var(--studio-accent)); }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 :where(button:not(:disabled), a, summary, label, [role=button]):is(:hover,:focus-visible)
  :where(svg:not(.mini-plan,.plan-svg), .step-check216,img[src$="/favicon.svg"]),
 :where(svg:has(> use[href^="#i-"]), .step-check216,img[src$="/favicon.svg"]):hover {
  animation:studio-icon-nudge 380ms ease-out;
 }
 @keyframes studio-icon-nudge {
  0%,100% { transform:translateY(0) rotate(0) scale(1); }
  38% { transform:translateY(-3px) rotate(-8deg) scale(1.11); }
  72% { transform:translateY(0) rotate(5deg) scale(1.04); }
 }
}

/* Editable values keep their original Unicode and native input validation. */
@font-face {
 font-family:Studio Persian Numerals;
 src:url('/static/studio-digits-fa.woff') format('woff');
 unicode-range:U+0030-0039,U+0660-0669,U+06F0-06F9;
 font-display:swap;
}
@font-face {
 font-family:Studio Latin Numerals;
 src:url('/static/studio-digits-en.woff') format('woff');
 unicode-range:U+0660-0669,U+06F0-06F9;
 font-display:swap;
}
:root[lang=fa] { --studio-input-numerals:Studio Persian Numerals; }
:root[lang=en] { --studio-input-numerals:Studio Latin Numerals; }
:root :is(input:is([type=number],[type=text],[type=search],[type=tel],[type=url],:not([type])),textarea) {
 font-family:var(--studio-input-numerals),Tahoma,"Segoe UI",Arial,sans-serif;
}
:root :is(code,pre) { font-family:var(--studio-input-numerals),monospace; }

@font-face {
 font-family:Studio Persian;
 src:url('/static/studio-persian-regular.woff2') format('woff2');
 font-weight:400;
 font-display:swap;
}
@font-face {
 font-family:Studio Persian;
 src:url('/static/studio-persian-bold.woff2') format('woff2');
 font-weight:700;
 font-display:swap;
}
:root[lang="fa"] {
 --studio-type-fa:Studio Persian,Tahoma,"Segoe UI",Arial,sans-serif;
 --studio-number-teal:#136f61;
 --studio-number-blue:#225a9e;
 --studio-number-violet:#7042a7;
 --studio-number-rose:#a33e67;
 --studio-number-amber:#88551d;
}
:root[lang="fa"][data-theme="dark"] {
 --studio-number-teal:#81ead5;
 --studio-number-blue:#91caff;
 --studio-number-violet:#ceb0ff;
 --studio-number-rose:#ffaccd;
 --studio-number-amber:#ffd58b;
}
:root[lang="fa"] :is(body,button,input,select,textarea,option,svg text):not([lang="en"],[translate="no"]) {
 font-family:var(--studio-type-fa);
}
:root[lang="fa"] :is(input:is([type=number],[type=text],[type=search],[type=tel],[type=url],:not([type])),textarea) {
 font-family:var(--studio-input-numerals),var(--studio-type-fa);
}
:root[lang="fa"] :is(.project-metrics227 bdi,.plan-summary226 bdi,.usage-meter230 bdi,.overlap-score223 strong,
 .survey-domain-heading227 small,.candidate-metrics223 b,.layout-gallery-card-title strong,.mcda-table .score,.user-options35.steps label>span) {
 color:var(--studio-number-teal);
 font-variant-numeric:tabular-nums;
}
:root[lang="fa"] :is(.project-metrics227>span:nth-child(2) bdi,.usage-meter230.budget bdi,.survey-domain-heading227 small) {
 color:var(--studio-number-blue);
}
:root[lang="fa"] :is(.project-metrics227>span:nth-child(3) bdi,.plan-summary226>div:nth-child(2) strong,.usage-meter230.over bdi) {
 color:var(--studio-number-amber);
}
:root[lang="fa"] :is(.layout-gallery-card-title strong,.candidate-metrics223 b,.user-options35.steps label:nth-child(odd)>span) {
 color:var(--studio-number-violet);
}
:root[lang="fa"] :is(.overlap-score223 strong,.user-options35.steps label:nth-child(4n)>span) {
 color:var(--studio-number-rose);
}
:root[lang="fa"] .movement-group230 {--group-number:var(--studio-number-teal);}
:root[lang="fa"] .movement-group230:nth-child(2) {--group-number:var(--studio-number-blue);}
:root[lang="fa"] .movement-group230:nth-child(3) {--group-number:var(--studio-number-amber);}
:root[lang="fa"] .movement-group230:nth-child(4) {--group-number:var(--studio-number-violet);}
:root[lang="fa"] .movement-group230 input[type="number"] {color:var(--group-number);}

.step-icon,.stage-icon { display:none; }

@font-face {
 font-family:'Vazirmatn Studio';src:url('/static/vazirmatn-arabic.woff2') format('woff2');
 font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face {
 font-family:'Vazirmatn Studio';src:url('/static/vazirmatn-latin.woff2') format('woff2');
 font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-200B,U+2010-206F,U+2212;
}
@font-face {
 font-family:'Nunito Studio';src:url('/static/nunito-latin.woff2') format('woff2');font-weight:200 1000;font-display:swap;
}