/* Deepfish-inspired neutral surfaces. Color belongs to actions, statuses and builds. */
:root {
  color-scheme:light;
  --paper:#ffffff;--white:#ffffff;--offwhite:#ffffff;--chrome:#f5f5f5;
  --ink:#141414;--black:#141414;--muted:#646464;--line:#d2d2d2;--line-soft:#e7e7e7;
  --surface-hover:#ededed;--surface-selected:#f1f1f1;
  --line-active:#aeb4bd;--icon-ink:#636a74;--focus-ring:#7e8998;
  --tab-track:#eef0f3;--tab-selected:#ffffff;--tab-selected-border:#aebbd3;--tab-mark:#6f8fe8;
  --action:var(--ink);--action-fill:#265be8;--action-fill-hover:#194bd1;--action-edge:var(--line);--action-text:#fff;
  --action-soft:#f4f4f4;--action-shadow:transparent;--action-hover:var(--ink);
  --accent-yellow:#ffcf00;--accent-blue:#235cff;--accent-purple:#9855ff;--accent-green:#008747;
  --sky:var(--surface-selected);--blue:var(--surface-selected);--blue-soft:var(--surface-selected);
  --butter:var(--chrome);--yellow:var(--chrome);--sand:var(--chrome);--cream:var(--chrome);--pink:var(--chrome);--green:var(--chrome);
  --grass:var(--accent-purple);--coral:#ff6534;
  --shadow:none;--shadow-sm:none;--radius:4px;--radius-sm:3px;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --paper:#0a0a0a;--white:#111111;--offwhite:#0a0a0a;--chrome:#151515;
  --ink:#fafafa;--black:#fafafa;--muted:#a3a3a3;--line:#383838;--line-soft:#252525;
  --surface-hover:#242424;--surface-selected:#202020;
  --line-active:#535d6c;--icon-ink:#b2bac6;--focus-ring:#77859a;
  --tab-track:#121419;--tab-selected:#282d35;--tab-selected-border:#59677f;--tab-mark:#86a6ff;
  --action:var(--ink);--action-soft:#202020;--action-hover:var(--ink);
  --accent-blue:#638bff;--accent-purple:#bb88ff;--accent-green:#45da8b;
}
body,.landing-open,.landing-main,.workshop-open,.auth-page {background:var(--paper);background-image:none;color:var(--ink)}
::selection{background:#dfcaff;color:#241339}
input,textarea,select{color:var(--ink);background:var(--white)}
input::placeholder,textarea::placeholder{color:var(--muted)}
.topbar{background:var(--paper);border-color:var(--line);border-radius:4px;padding-right:66px}
.topbar nav>.nav-active{background:var(--surface-selected);border-color:var(--line);box-shadow:none}
.topbar nav>button:hover,.topbar nav>a:hover{background:var(--surface-hover)}
.brand-mark>i{background:#ff719d;border:0;box-shadow:none}
.brand-mark>i:nth-child(2){background:var(--accent-yellow);border:0}
.brand-mark>i:nth-child(3){background:var(--accent-blue);border:0}
.brand-mark>i:nth-child(4){background:var(--accent-purple);border:0}
.theme-toggle{position:fixed;right:23px;top:16px;z-index:70;display:grid;place-items:center;width:34px;height:34px;padding:0;background:var(--white);border:1px solid var(--line);color:var(--ink);border-radius:4px}
.theme-toggle:hover{background:var(--surface-hover);border-color:var(--line-active)}
.nb-btn,.generate-button,.primary-button,.small-button,.icon-button,.topbar .small-button{box-shadow:none;border-radius:4px}
.nb-btn:hover:not(:disabled),.generate-button:hover:not(:disabled),.primary-button:hover:not(:disabled){box-shadow:none}
.nb-btn:active:not(:disabled),.generate-button:active:not(:disabled),.primary-button:active:not(:disabled){transform:none;box-shadow:none}
.nb-label:before,.panel-pixel,.auth-window-bar>span:first-child{background:var(--accent-purple);border:0;box-shadow:none}
.designer,.projects-modal,.admin-review,.custom-auth-page>.auth-window{border-radius:4px;box-shadow:none}
.stage:before{display:none}.stage{background:var(--paper)}
.generation-track>.active{background:var(--surface-selected);box-shadow:inset 0 -2px var(--line-active)}
.generation-track>.done,.generation-track>.done>span{color:var(--accent-green)}
.view-tabs>.selected,.admin-tabs,.admin-tabs>.selected{box-shadow:none;background:var(--surface-selected)}
.quote-card,.build-estimate,.request-message,.admin-totals,.admin-message,.previous-model-notice,.toast{background:var(--chrome);border-color:var(--line);color:var(--ink);box-shadow:none}
.build-estimate{border-top:3px solid #20d5ac}
.request-message{border-left:2px solid var(--action-fill)}
.build-estimate p,.build-estimate small{color:var(--muted)}
.projects-modal::backdrop{background:#0009;backdrop-filter:none}
.profile-trigger{background:var(--chrome);color:var(--ink)}
.profile-popover{box-shadow:0 12px 36px #0003}
.auth-form-content .auth-error,.profile-popover .auth-error{background:var(--chrome);border-color:#d51d32;color:#d51d32}
.auth-form-content .auth-notice{background:var(--chrome);border-color:var(--accent-green);color:var(--accent-green)}
.auth-page>section a:not(.primary-button){color:var(--action)}
@media(max-width:700px){.topbar{padding-right:51px}.theme-toggle{right:15px;top:13px;width:32px;height:32px}.topbar nav{gap:2px}}
/* The downloadable standalone fal viewer uses the same tokens. */
.project-header,.chapterbar,.camera-tools,.transport,.tabs,footer{background:var(--chrome);color:var(--ink);border-color:var(--line)}
.chapterbar .current,.view-options button[aria-pressed=true]{background:var(--surface-selected);color:var(--ink);border-color:var(--line-active)}
.camera-tools,.transport #play,.try-step,.primary-link{box-shadow:none}
.guide-card,.assembly-label{background:var(--chrome);border-color:var(--line)}
.part,.inventory-row,.stepinput input,#part-search,.view-options button{background:var(--white);color:var(--ink);border-color:var(--line)}

/* Main actions use a small, purposeful palette and a physical 4px bottom edge. */
.tactile-button[data-tone=violet]{--button-face:#7544e8;--button-hover:#6837d8;--button-edge:#422486;--button-text:#fff}
.tactile-button[data-tone=blue]{--button-face:#265be8;--button-hover:#194bd1;--button-edge:#16358c;--button-text:#fff}
.tactile-button[data-tone=mint]{--button-face:#20d5ac;--button-hover:#13c49d;--button-edge:#087762;--button-text:#082b25}
.tactile-button[data-tone]{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--button-face);color:var(--button-text);border:1px solid var(--button-edge);border-radius:5px;box-shadow:0 4px 0 var(--button-edge);transform:translateY(0);transition:background .12s,box-shadow .12s,transform .12s;text-decoration:none}
.tactile-button[data-tone]:hover:not(:disabled){background:var(--button-hover);color:var(--button-text);box-shadow:0 4px 0 var(--button-edge);transform:translateY(0);text-decoration:none}
.tactile-button[data-tone]:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--button-edge);background:var(--button-hover)}
.tactile-button[data-tone]:disabled{transform:none;box-shadow:none;opacity:.45}
.tactile-button[data-tone]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
@media(prefers-reduced-motion:reduce){.tactile-button[data-tone]{transition:none}}

/* A shared, restrained motion language for interface feedback. */
:where(button,a,input,textarea,select,summary){transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,opacity 160ms ease,transform 160ms ease}
.theme-toggle{transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease}
.theme-toggle svg{transition:transform 200ms ease}
.theme-toggle:hover svg{transform:rotate(-12deg)}
.theme-toggle:active{transform:scale(.94)}
.profile-trigger{transition:box-shadow 160ms ease,transform 160ms ease}
.profile-trigger:hover{box-shadow:0 0 0 3px var(--surface-hover)}
.profile-trigger:active{transform:scale(.96)}
/* Discrete display/overlay transitions preserve native dialog focus and Escape handling. */
.projects-modal{opacity:0;transform:translateY(12px) scale(.985);transition:opacity 180ms ease,transform 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete}
.projects-modal[open]{opacity:1;transform:translateY(0) scale(1)}
.projects-modal::backdrop{background:#0000;transition:background-color 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete}
.projects-modal[open]::backdrop{background:#0009}
.profile-popover{opacity:1;transform:translateY(0) scale(1);transform-origin:top right;transition:opacity 150ms ease,transform 150ms ease,display 150ms allow-discrete}
.profile-popover[hidden]{display:none;opacity:0;transform:translateY(-6px) scale(.98)}
@starting-style{
  .projects-modal[open]{opacity:0;transform:translateY(12px) scale(.985)}
  .projects-modal[open]::backdrop{background:#0000}
  .profile-popover:not([hidden]){opacity:0;transform:translateY(-6px) scale(.98)}
}
.toast{animation:interface-enter 180ms ease both}
@keyframes interface-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  :where(button,a,input,textarea,select,summary),.tactile-button[data-tone],.theme-toggle,.theme-toggle svg,.profile-trigger,.profile-popover,.projects-modal,.projects-modal::backdrop{transition:none}
  .toast{animation:none}
  .theme-toggle:hover svg,.theme-toggle:active,.profile-trigger:active{transform:none}
}

/* Quiet control edges, with a separate visible keyboard-focus treatment. */
.theme-toggle,.icon-button{color:var(--icon-ink);border-color:var(--line);box-shadow:none}
.icon-button:hover,.small-button:hover{background:var(--surface-hover);border-color:var(--line-active)}
.view-tabs>.selected,.admin-tabs>.selected{border-color:var(--line-active)}
.profile-trigger[aria-expanded=true]{outline:1px solid var(--line-active)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:var(--focus-ring)}

/* The design action echoes the upright brick-set headline. */
.tactile-button[data-tone=brick]{--button-face:#d71932;--button-hover:#bf142b;--button-edge:#a22a39;--button-text:#fff;font-weight:900;font-size:16px;font-style:normal}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.brick-lettering{display:inline-block;font-family:'Lilita One','Outfit',sans-serif;font-weight:400;font-style:italic;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.brick-lettering-art{display:inline-grid;isolation:isolate;white-space:nowrap}
.brick-lettering-art>span{grid-row:1;grid-column:1;display:inline-block;pointer-events:none;font:inherit;letter-spacing:inherit;white-space:inherit;paint-order:stroke fill;text-shadow:none}
.brick-lettering-yellow{z-index:0;color:#ffcf00;-webkit-text-stroke:var(--brick-yellow-stroke,6px) #ffcf00}
.brick-lettering-black{z-index:1;color:#111;-webkit-text-stroke:var(--brick-black-stroke,3px) #111}
.brick-lettering-fill{z-index:2;color:#fff;-webkit-text-stroke:0}
.tactile-button[data-tone=brick] .brick-lettering{--brick-black-stroke:2.5px;--brick-yellow-stroke:5px}