/* Authoritative application-chrome tokens. Canvas pixels, artwork and colour pickers are intentionally excluded. */ :root{ --ui-bg-app:#0a0a0a;--ui-bg-canvas-surround:#171717;--ui-bg-surface:#111111;--ui-bg-surface-raised:#181818; --ui-bg-control:#0a0a0a;--ui-bg-hover:#262626;--ui-bg-active:#f5f5f5; --ui-fg-primary:#f5f5f5;--ui-fg-secondary:#a3a3a3;--ui-fg-on-active:#0a0a0a;--ui-fg-disabled:#737373; --ui-border-default:#3f3f3f;--ui-border-strong:#737373;--ui-focus-ring:#fff; --ui-border-width:1px;--ui-radius:0px;--ui-control-height:36px;--ui-icon-size:18px;--ui-toolbar-height:52px; --ui-side-panel-width:356px;--ui-label-width:92px;--ui-gap:8px;--ui-panel-padding:12px; --ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px; --ui-font-body:Inter,system-ui,sans-serif;--ui-font-heading:var(--ui-font-body);--ui-font-control:var(--ui-font-body); --ui-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;--ui-font-size:13px;--ui-small-font-size:11px; --ui-heading-font-size:16px;--ui-control-font-size:11px;--ui-font-weight:400;--ui-font-weight-emphasis:500; --ui-surface-opacity:1;--ui-shadow-panel:none;--ui-motion-duration:120ms; /* Compatibility aliases: consumers migrate without introducing a second authority. */ --theme-app-bg:var(--ui-bg-app);--theme-canvas-surround:var(--ui-bg-canvas-surround);--theme-surface:var(--ui-bg-surface); --theme-surface-2:var(--ui-bg-surface-raised);--theme-surface-3:var(--ui-bg-hover);--theme-input-bg:var(--ui-bg-control); --theme-text:var(--ui-fg-primary);--theme-muted:var(--ui-fg-secondary);--theme-border:var(--ui-border-default); --theme-accent:var(--ui-fg-primary);--theme-accent-strong:var(--ui-fg-primary);--theme-accent-soft:var(--ui-bg-hover); --theme-success:var(--ui-fg-primary);--theme-danger:var(--ui-fg-primary);--theme-warning:var(--ui-fg-secondary);--theme-shadow:transparent; --bg-dark:var(--ui-bg-app);--panel-bg:var(--ui-bg-surface);--panel-raised:var(--ui-bg-surface-raised); --accent-primary:var(--ui-fg-primary);--accent-hover:var(--ui-fg-secondary);--border-subtle:var(--ui-border-default); --text-primary:var(--ui-fg-primary);--text-secondary:var(--ui-fg-secondary);--header-height:var(--ui-toolbar-height);--inspector-width:var(--ui-side-panel-width) } html[data-anachrist-theme="default-monochrome"]{color-scheme:dark} html[data-anachrist-theme="default-monochrome"] body{font-family:var(--ui-font-body);font-weight:var(--ui-font-weight);background:var(--ui-bg-app)!important;color:var(--ui-fg-primary)!important} html[data-anachrist-theme="default-monochrome"] #canvas-container{background:var(--ui-bg-canvas-surround)!important} html[data-anachrist-theme="default-monochrome"] :where(#main-toolbar,#settings-container,.settings-hub-panel,.modifier-panel,.layers-panel,.timeline-panel,.ui-designer-panel,.theme-engine-panel,.font-manager-shell,.effect-studio-shell,.fragmentator-studio,.autodraw-studio,.canvas-fx-drawer,dialog,[role="dialog"]){background:var(--ui-bg-surface)!important;color:var(--ui-fg-primary)!important;border-color:var(--ui-border-default)!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:var(--ui-shadow-panel)!important} html[data-anachrist-theme="default-monochrome"] :where(button,input,select,textarea,[role="button"],dialog,aside,header,footer,section,.rounded,.rounded-md,.rounded-lg,.rounded-xl,.rounded-full){border-radius:var(--ui-radius)!important;box-shadow:none!important} html[data-anachrist-theme="default-monochrome"] :where(button,input,select,textarea){min-height:var(--ui-control-height);border:var(--ui-border-width) solid var(--ui-border-default)!important;background:var(--ui-bg-control)!important;color:var(--ui-fg-primary)!important;background-image:none!important;font-family:var(--ui-font-control);font-size:var(--ui-control-font-size);font-weight:var(--ui-font-weight)} html[data-anachrist-theme="default-monochrome"] :where(button,[role="button"]){font-weight:var(--ui-font-weight-emphasis);transition:background-color var(--ui-motion-duration),color var(--ui-motion-duration),border-color var(--ui-motion-duration)} html[data-anachrist-theme="default-monochrome"] :where(button,[role="button"]):hover{background:var(--ui-bg-hover)!important;border-color:var(--ui-border-strong)!important;color:var(--ui-fg-primary)!important;filter:none!important;transform:none!important} html[data-anachrist-theme="default-monochrome"] :where(button,[role="button"]).is-active, html[data-anachrist-theme="default-monochrome"] :where(button,[role="button"])[aria-pressed="true"], html[data-anachrist-theme="default-monochrome"] :where(button,[role="button"])[aria-selected="true"], html[data-anachrist-theme="default-monochrome"] [data-toolbar-active="true"]{background:var(--ui-bg-active)!important;color:var(--ui-fg-on-active)!important;border-color:var(--ui-bg-active)!important;outline:0!important;box-shadow:none!important;filter:none!important} html[data-anachrist-theme="default-monochrome"] :where(button,input,select,textarea,a):focus-visible{outline:2px solid var(--ui-focus-ring)!important;outline-offset:2px!important} html[data-anachrist-theme="default-monochrome"] :where(button,input,select,textarea):disabled{opacity:.48;color:var(--ui-fg-disabled)!important;cursor:not-allowed} html.ui-high-contrast{--ui-border-default:#a3a3a3;--ui-fg-secondary:#d4d4d4} html.ui-reduce-motion *,html.ui-reduce-motion *::before,html.ui-reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} /* Toolbar: project identity, command group, view group, Settings, Preview. */ html[data-anachrist-theme="default-monochrome"] #main-toolbar{display:grid!important;grid-template-columns:minmax(150px,1fr) minmax(0,auto)!important;height:var(--ui-toolbar-height)!important;min-height:var(--ui-toolbar-height)!important;max-height:none!important;padding:var(--ui-space-2) var(--ui-space-3)!important;gap:var(--ui-space-3)!important;background:var(--ui-bg-surface)!important;border-bottom:1px solid var(--ui-border-default)!important;overflow:visible!important} html[data-anachrist-theme="default-monochrome"] #main-toolbar .toolbar-primary{display:none!important} html[data-anachrist-theme="default-monochrome"] #main-toolbar .toolbar-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--ui-space-1)!important;min-width:0;overflow-x:auto!important;scrollbar-width:none} html[data-anachrist-theme="default-monochrome"] #main-toolbar .toolbar-actions::-webkit-scrollbar{display:none} html[data-anachrist-theme="default-monochrome"] #main-toolbar .toolbar-actions>button, html[data-anachrist-theme="default-monochrome"] #main-toolbar .toolbar-actions>#toolbar-zoom{display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;min-height:var(--ui-control-height)!important;height:var(--ui-control-height)!important;padding:0 var(--ui-space-2)!important;border:1px solid var(--ui-border-default)!important;background:var(--ui-bg-control)!important;color:var(--ui-fg-primary)!important} /* The rule above force-shows every direct-child button in .toolbar-actions (display:inline-flex!important) — that was silently re-showing the 11 module-launcher buttons (btn-hla, btn-circuit, …) that the Modules-folder declutter pass moved into the Modules panel and marked class="hidden" aria-hidden="true". Needs the extra .hidden in the selector to out-specify the rule above (same html[]+#id+.class prefix, one more class). */ html[data-anachrist-theme="default-monochrome"] #main-toolbar .toolbar-actions>button.hidden{display:none!important} html[data-anachrist-theme="default-monochrome"] #main-toolbar #btn-file-menu, html[data-anachrist-theme="default-monochrome"] #main-toolbar #btn-preview-mode{background:var(--ui-bg-control)!important;color:var(--ui-fg-primary)!important;border-color:var(--ui-border-default)!important} html[data-anachrist-theme="default-monochrome"] #main-toolbar #btn-preview-mode{order:99;margin-left:var(--ui-space-2)} html[data-anachrist-theme="default-monochrome"] #main-toolbar h1.app-title{color:var(--ui-fg-primary)!important;font-weight:500!important;letter-spacing:.08em!important} html[data-anachrist-theme="default-monochrome"] #main-toolbar #project-name-label{color:var(--ui-fg-secondary)!important;font-weight:400!important} /* Panels and navigation share geometry and alignment. */ html[data-anachrist-theme="default-monochrome"] :where(.settings-hub-controls,.properties-accordion,.ui-control-group,.modifier-card,.layer-item,.theme-current,.ui-designer-section,.font-manager-row){border:1px solid var(--ui-border-default)!important;background:var(--ui-bg-surface-raised)!important;color:var(--ui-fg-primary)!important;padding:var(--ui-space-2);gap:var(--ui-gap)} html[data-anachrist-theme="default-monochrome"] :where(.settings-hub-head,.modifier-head,.layers-head,.timeline-head,.ui-designer-head,.theme-engine-head,.font-manager-shell header,.font-manager-shell footer){background:var(--ui-bg-surface-raised)!important;color:var(--ui-fg-primary)!important;border-color:var(--ui-border-default)!important} html[data-anachrist-theme="default-monochrome"] :where(h1,h2,h3,h4,strong,b){font-weight:var(--ui-font-weight-emphasis)} html[data-anachrist-theme="default-monochrome"] :where(small,.text-gray-600,.text-gray-500,.text-slate-500,.text-slate-600,.ui-designer-help){color:var(--ui-fg-secondary)!important} html[data-anachrist-theme="default-monochrome"] input[type=range]{accent-color:var(--ui-fg-primary)!important} html[data-anachrist-theme="default-monochrome"] input[type=checkbox]{accent-color:var(--ui-fg-primary)!important} html[data-anachrist-theme="default-monochrome"] :where([class*="bg-purple"],[class*="bg-violet"],[class*="bg-emerald"],[class*="bg-amber"],[class*="bg-cyan"],[class*="bg-rose"],[class*="bg-red"],[class*="bg-yellow"],[class*="bg-slate"],[class*="bg-gray"]){background-color:var(--ui-bg-control)!important} html[data-anachrist-theme="default-monochrome"] :where([class*="text-purple"],[class*="text-violet"],[class*="text-emerald"],[class*="text-amber"],[class*="text-cyan"],[class*="text-rose"],[class*="text-red"],[class*="text-yellow"]){color:var(--ui-fg-primary)!important} html[data-anachrist-theme="default-monochrome"] :where([class*="border-purple"],[class*="border-violet"],[class*="border-emerald"],[class*="border-amber"],[class*="border-cyan"],[class*="border-rose"],[class*="border-red"],[class*="border-yellow"]){border-color:var(--ui-border-default)!important} html[data-anachrist-theme="default-monochrome"] :where([class*="gradient"],[style*="gradient"]){background-image:none!important} html[data-anachrist-theme="default-monochrome"] .effect-studio-shell{--es-bg:var(--ui-bg-app);--es-surface:var(--ui-bg-surface);--es-surface-border:var(--ui-border-default);--es-text:var(--ui-fg-primary);--es-text-muted:var(--ui-fg-secondary);--es-primary:var(--ui-fg-primary);--es-primary-hover:var(--ui-fg-secondary);--es-accent:var(--ui-fg-primary)} html[data-anachrist-theme="default-monochrome"] .autosave-status{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--ui-space-2);border-left:1px solid var(--ui-border-default);color:var(--ui-fg-secondary);font-size:10px;white-space:nowrap} html[data-anachrist-theme="default-monochrome"] .autosave-status[data-state="error"]{color:var(--ui-fg-primary);border:1px double var(--ui-fg-primary)} html[data-anachrist-theme="default-monochrome"] .font-manager-drop{margin:var(--ui-space-3) var(--ui-space-4);padding:var(--ui-space-4);border:1px dashed var(--ui-border-default);color:var(--ui-fg-secondary);text-align:center} html[data-anachrist-theme="default-monochrome"] :where(.settings-hub-panel,.modifier-panel,.layers-panel,.timeline-panel,.ui-designer-panel,.theme-engine-panel,.font-manager-shell){background:color-mix(in srgb,var(--ui-bg-surface) calc(var(--ui-surface-opacity) * 100%),transparent)!important} .settings-hub-nav{display:flex;align-items:stretch;gap:0;padding:0;border-bottom:1px solid var(--ui-border-default);overflow-x:auto;scrollbar-width:none;background:var(--ui-bg-surface)} .settings-hub-nav::-webkit-scrollbar{display:none}.settings-hub-nav button{flex:1 0 auto;justify-content:flex-start!important;min-width:max-content;padding:0 var(--ui-space-3)!important;border:0!important;border-right:1px solid var(--ui-border-default)!important;background:var(--ui-bg-surface)!important;color:var(--ui-fg-secondary)!important;text-align:left;font-weight:400!important} .settings-hub-nav button[aria-selected="true"]{background:var(--ui-bg-active)!important;color:var(--ui-fg-on-active)!important} .settings-hub-body [data-settings-section]{min-width:0}.settings-hub-controls{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;padding:0!important;border:0!important;background:transparent!important} .settings-hub-controls>button,.settings-hub-controls>label{width:100%!important;min-width:0!important;justify-content:flex-start!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere} .ui-designer-footer{grid-template-columns:repeat(3,minmax(0,1fr))!important}.ui-designer-footer [data-save]{background:var(--ui-bg-active)!important;color:var(--ui-fg-on-active)!important}.ui-designer-footer .ui-designer-import{min-width:0;text-align:center} .ui-designer-field input[type=range]{touch-action:none}.ui-preview-icon{font-size:var(--ui-icon-size)!important} @media(max-width:1024px){html[data-anachrist-theme="default-monochrome"] #main-toolbar{grid-template-columns:auto minmax(0,1fr)!important}html[data-anachrist-theme="default-monochrome"] #main-toolbar #project-name-label{display:none}} @media(max-width:640px){html[data-anachrist-theme="default-monochrome"]{--ui-control-height:44px}html[data-anachrist-theme="default-monochrome"] #main-toolbar{padding:var(--ui-space-1) var(--ui-space-2)!important}html[data-anachrist-theme="default-monochrome"] #main-toolbar .toolbar-actions>button{width:44px!important;padding:0!important}html[data-anachrist-theme="default-monochrome"] #main-toolbar #btn-preview-mode{margin-left:0}.autosave-status{max-width:88px;overflow:hidden;text-overflow:ellipsis}.settings-hub-nav{display:grid;grid-template-columns:1fr 1fr}.settings-hub-nav button{min-width:0;white-space:normal}.ui-designer-footer{grid-template-columns:1fr 1fr!important}} /* This theme is the DEFAULT active one (theme-engine.js falls back to it), loaded last of all stylesheets — the two rules above (grid-template-columns with an "auto" action column + a plain `overflow-x:auto` on .toolbar-actions that never actually triggers, because the auto-sized grid track never shrinks it below content width) were silently overriding every mobile fix attempted in editor.css. .toolbar-actions also inherits editor.css's older unconditional `flex-wrap:wrap`, which is what produced the two-row overflow. Same fix as the base shell: collapse it into a ☰ dropdown so the header never has to fit more than a brand + one button. Desktop (>900px) is completely untouched — only these mobile rules are new. */ @media(max-width:900px){ html[data-anachrist-theme="default-monochrome"] #main-toolbar{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:space-between!important; } html[data-anachrist-theme="default-monochrome"] #main-toolbar .toolbar-brand{ flex:1 1 auto!important;min-width:0!important;overflow:hidden!important; } html[data-anachrist-theme="default-monochrome"] #main-toolbar .toolbar-actions{ display:none!important; } html[data-anachrist-theme="default-monochrome"] #btn-mobile-actions-menu{ display:flex!important;align-items:center!important;justify-content:center!important; flex:0 0 auto!important;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important; margin-left:var(--ui-space-2)!important;padding:0!important;font-size:18px!important; border:1px solid var(--ui-border-default)!important;background:var(--ui-bg-control)!important;color:var(--ui-fg-primary)!important; } } html[data-anachrist-theme="default-monochrome"] #main-toolbar.mobile-actions-open .toolbar-actions{ display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important; align-items:stretch!important; gap:var(--ui-space-2)!important; position:fixed!important; top:calc(var(--ui-toolbar-height) + 6px)!important; right:8px!important; left:8px!important; bottom:auto!important; width:auto!important; overflow-x:visible!important; max-height:calc(100dvh - var(--ui-toolbar-height) - 20px)!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; z-index:1350!important; padding:var(--ui-space-2)!important; border:1px solid var(--ui-border-default)!important; background:var(--ui-bg-surface)!important; box-shadow:0 22px 60px rgba(0,0,0,.5)!important; } html[data-anachrist-theme="default-monochrome"] #main-toolbar.mobile-actions-open .toolbar-actions>button, html[data-anachrist-theme="default-monochrome"] #main-toolbar.mobile-actions-open .toolbar-actions>#toolbar-zoom, html[data-anachrist-theme="default-monochrome"] #main-toolbar.mobile-actions-open .toolbar-actions>label{ width:100%!important; min-width:0!important; justify-content:flex-start!important; padding:0 var(--ui-space-3)!important; } /* v31 — mobile quick-access row (Undo/Redo/Play/Record left, Save PNG/Record screen/Preview right) pinned straight into the header — js/app.js moves the real buttons into #mobile-quick-left/#mobile-quick-right at ≤900px. Desktop is untouched: containers stay empty and hidden, buttons stay inside .toolbar-actions exactly where they already were. */ html[data-anachrist-theme="default-monochrome"] .mobile-quick-group{display:none} @media(max-width:900px){ html[data-anachrist-theme="default-monochrome"] .mobile-quick-group{ display:flex!important; align-items:center!important; gap:4px!important; flex:0 0 auto!important; } html[data-anachrist-theme="default-monochrome"] .mobile-quick-group button{ flex:0 0 auto!important; min-width:34px!important; min-height:34px!important; height:34px!important; padding:0 8px!important; font-size:13px!important; white-space:nowrap!important; } html[data-anachrist-theme="default-monochrome"] #mobile-quick-right #btn-preview-mode{padding:0 10px!important} } /* Zoom already lives on-canvas (top-right zoom pill) — no need to repeat it inside the ☰ dropdown too. Overrides the "show it centered" rule above. */ html[data-anachrist-theme="default-monochrome"] #main-toolbar.mobile-actions-open .toolbar-actions #toolbar-zoom{display:none!important} /* v33 — New Project dialog (canvas presets) is a light-card component that was never adapted for this dark theme. .canvas-preset-card and .canvas-category-btn are