/* Comic Compiler — ATELIER V4.1 / WARM LIGHT SHELL + DARK CREATIVE CANVAS
   Option B. Loaded AFTER the frozen Atelier V4 presentation layers.
   Visual-only successor: original HTML IDs, engine JS, and source
   authority remain untouched. No forced bright pixels in artboards.
*/
:root {
  color-scheme: light;
  --hy-shell: #f7f6f2;
  --hy-pane: #fffefa;
  --hy-tint: #efeee8;
  --hy-paper: #f5f1e9;
  --hy-text: #242a27;
  --hy-mid: #535e57;
  --hy-muted: #707b72;
  --hy-line: #e4e2d9;
  --hy-line-bold: #d1d3c9;
  --hy-olive: #526b5b;
  --hy-accent: #bd9461;
  --hy-accent-soft: #f2e8d7;
  --hy-stage: #1a201d;
  --hy-dark-ink: #f1eee5;
  --hy-shadow: 0 15px 45px rgba(32,38,32,.065);
}
body {
  background: var(--hy-shell)!important;
  color: var(--hy-text);
}
.creator-ui.focus-workspace {
  --v4-bg: var(--hy-shell);
  --v4-panel: var(--hy-pane);
  --v4-raised: var(--hy-tint);
  --v4-ink: var(--hy-text);
  --v4-muted: var(--hy-mid);
  --v4-line: var(--hy-line);
  --v4-strong: var(--hy-line-bold);
  --v4-gold: var(--hy-olive);
  --v4-cream: var(--hy-paper);
  --bg: var(--hy-shell);
  --chrome: var(--hy-pane);
  --panel: var(--hy-pane);
  --ink: var(--hy-text);
  --muted: var(--hy-mid);
  --dim: var(--hy-muted);
  --accent: var(--hy-olive);
  --accent-soft: var(--hy-accent-soft);
  --line: var(--hy-line-bold);
  --line-soft: var(--hy-line);
  --mint: #3e8061;
  color:var(--hy-text)!important;
  background: var(--hy-shell)!important;
}
.creator-ui.focus-workspace .topbar {
  background: rgba(255,254,251,.975)!important;
  border-bottom:1px solid var(--hy-line)!important;
  box-shadow:0 2px 16px rgba(34,39,31,.035)!important;
}
.creator-ui.focus-workspace .brand {color:var(--hy-text)!important}
.creator-ui.focus-workspace .mark {
  background:var(--hy-text)!important;
  color:#fffefa!important;
  box-shadow:0 4px 15px rgba(31,40,33,.15)!important;
}
.creator-ui.focus-workspace .brand-copy b {color:var(--hy-text)!important}
.creator-ui.focus-workspace .brand-copy small {color:var(--hy-muted)!important}
.creator-ui.focus-workspace .document-mode {color:var(--hy-muted)!important}
.creator-ui.focus-workspace .creative-document-title,
.creator-ui.focus-workspace .creative-document-title b {color:var(--hy-text)!important}
.creator-ui.focus-workspace .workflow-nav {
  background:#f0f0eb!important;
  border-color:var(--hy-line)!important;
  box-shadow:inset 0 1px 2px rgba(15,25,18,.035)!important;
}
.creator-ui.focus-workspace .workflow-step {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .workflow-step:hover {
  color:var(--hy-text)!important;
  background:#e5e7df!important;
}
.creator-ui.focus-workspace .workflow-step.active {
  background:var(--hy-pane)!important;
  color:var(--hy-text)!important;
  box-shadow:0 2px 8px rgba(44,54,43,.12)!important;
}
.creator-ui.focus-workspace .chrome-button {
  background:var(--hy-pane)!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line-bold)!important;
}
.creator-ui.focus-workspace .chrome-button:hover,
.creator-ui.focus-workspace .chrome-button.active {
  background:var(--hy-accent-soft)!important;
  color:#28382e!important;
  border-color:#b6bda9!important;
}
.creator-ui.focus-workspace .export-button {
  background:var(--hy-text)!important;
  color:#fffefa!important;
  border-color:var(--hy-text)!important;
  box-shadow:0 4px 16px rgba(28,38,31,.14)!important;
}
.creator-ui.focus-workspace .status {
  background:#edf3ec!important;
  border-color:#d6e4d6!important;
  color:#3c654c!important;
}
.creator-ui.focus-workspace .status .dot {
  background:#3a9162!important;
}
.creator-ui.focus-workspace .project-menu[open]>summary {
  background:var(--hy-accent-soft)!important;
  border-color:#c8b690!important;
  color:#473d30!important;
}
.creator-ui.focus-workspace .project-popover {
  background:var(--hy-pane)!important;
  border-color:var(--hy-line-bold)!important;
  color:var(--hy-text)!important;
  box-shadow:0 26px 76px rgba(28,36,29,.16)!important;
}
.creator-ui.focus-workspace .project-popover>b,
.creator-ui.focus-workspace .project-popover>small,
.creator-ui.focus-workspace .project-popover>span {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .project-popover>b{color:var(--hy-text)!important}
.creator-ui.focus-workspace .project-popover button {
  background:#f6f6f1!important;
  border-color:var(--hy-line)!important;
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .project-popover button:hover:not(:disabled) {
  background:var(--hy-accent-soft)!important;
}
.creator-ui.focus-workspace .project-file-actions,
.creator-ui.focus-workspace .project-popover>span{
  border-color:var(--hy-line)!important;
}
.creator-ui.focus-workspace .project-popover kbd,
.creator-ui.focus-workspace .project-saved-label{
  color:var(--hy-muted)!important;
  background:var(--hy-tint)!important;
}
.creator-ui.focus-workspace .workspace,
.creator-ui.focus-workspace .stage-panel {
  background:var(--hy-shell)!important;
}
/* The page surrounding the 3D viewport stays light, while the
   rendering region is deliberately left dark from Atelier V4. */
.creator-ui.focus-workspace .stage-head {
  background:var(--hy-shell)!important;
  border-bottom:1px solid var(--hy-line)!important;
}
.creator-ui.focus-workspace .creative-stage-title {
  background:var(--hy-pane)!important;
  border-color:var(--hy-line-bold)!important;
  box-shadow:var(--hy-shadow)!important;
}
.creator-ui.focus-workspace .stage-title h2 {
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .stage-kicker {
  color:var(--hy-olive)!important;
}
.creator-ui.focus-workspace .beat-readiness-line {
  color:var(--hy-muted)!important;
}
.creator-ui.focus-workspace .beat-nav {
  background:var(--hy-tint)!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line)!important;
}
.creator-ui.focus-workspace .beat-nav:hover:not(:disabled) {
  background:#e3e5dc!important;
  border-color:#b5c1b2!important;
}
.creator-ui.focus-workspace .artist-toolbar {
  background:var(--hy-pane)!important;
  border-color:var(--hy-line-bold)!important;
  box-shadow:var(--hy-shadow)!important;
}
.creator-ui.focus-workspace .camera-tools button {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .camera-tools button:hover:not(.active) {
  background:var(--hy-tint)!important;
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .camera-tools button.active {
  background:var(--hy-text)!important;
  color:#fffefa!important;
  box-shadow:0 3px 10px rgba(28,42,32,.14)!important;
}
.creator-ui.focus-workspace .artist-toolbar .secondary-tools {
  background:var(--hy-pane)!important;
  border-color:var(--hy-line-bold)!important;
  box-shadow:0 22px 60px rgba(28,36,29,.15)!important;
}
.creator-ui.focus-workspace .artist-toolbar .tool-label {
  color:var(--hy-olive)!important;
}
.creator-ui.focus-workspace .canvas-wrap {
  background:var(--hy-shell)!important;
}
/* Do not recolor #viewport, its HDR canvas, stage HUD, grid, prompt
   overlay or mask: they are intentionally dark/contrast-critical. */
.creator-ui.focus-workspace #viewport {
  border-color:#353e37!important;
  box-shadow:0 25px 54px rgba(24,35,28,.16),
    0 0 0 1px rgba(8,15,12,.08)!important;
}
.creator-ui.focus-workspace .canvas-footer {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .cast-legend span,
.creator-ui.focus-workspace .canvas-hint{
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .pipeline-disclosure {
  border-top-color:var(--hy-line)!important;
}
.creator-ui.focus-workspace .pipeline-disclosure>summary {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .execution-rail {color:var(--hy-text)!important}
.creator-ui.focus-workspace .rail-step {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .rail-step>i {
  border-color:var(--hy-line-bold)!important;
}
.creator-ui.focus-workspace .rail-step b {
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .rail-step small {
  color:var(--hy-muted)!important;
}
/* Light filmstrip / storyboard surface */
.creator-ui.focus-workspace .timeline-wrap {
  background:#f2f1eb!important;
  border-top:1px solid var(--hy-line-bold)!important;
}
.creator-ui.focus-workspace .timeline-head>div:first-child .dock-kicker {
  color:var(--hy-olive)!important;
}
.creator-ui.focus-workspace .timeline-head>div:first-child b {
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .timeline-head>div:first-child span:last-child,
.creator-ui.focus-workspace .timeline-key {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .beat-card {
  background:var(--hy-pane)!important;
  color:var(--hy-text)!important;
  border:1px solid var(--hy-line-bold)!important;
  border-left:3px solid #bdc4b9!important;
  box-shadow:0 4px 16px rgba(40,50,41,.055)!important;
}
.creator-ui.focus-workspace .beat-card.native {
  border-left-color:#60967d!important;
}
.creator-ui.focus-workspace .beat-card.review {
  border-left-color:#c3a06b!important;
}
.creator-ui.focus-workspace .beat-card:hover {
  background:#f0f3ed!important;
  border-color:#aebbae!important;
}
.creator-ui.focus-workspace .beat-card.active {
  background:#eef2e9!important;
  border-color:#718a78!important;
  border-left-color:var(--hy-olive)!important;
  box-shadow:0 8px 20px rgba(40,50,41,.09),
    inset 0 0 0 1px #a8bda7!important;
}
.creator-ui.focus-workspace .beat-card b {
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .beat-card small,
.creator-ui.focus-workspace .beat-copy>span:not(.beat-lock) {
  color:var(--hy-mid)!important;
}
/* Slide-in story & direction panels become clean white studio sheets. */
.creator-ui.focus-workspace .input-panel,
.creator-ui.focus-workspace .inspector {
  background:rgba(255,254,251,.985)!important;
  border-color:var(--hy-line-bold)!important;
  box-shadow:0 25px 85px rgba(28,36,29,.16)!important;
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .dock-heading h1,
.creator-ui.focus-workspace .dock-heading p,
.creator-ui.focus-workspace .inspector-heading {
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .dock-heading p {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace label,
.creator-ui.focus-workspace .inspector label {
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace label span {
  color:var(--hy-muted)!important;
}
.creator-ui.focus-workspace input,
.creator-ui.focus-workspace textarea,
.creator-ui.focus-workspace select {
  background:#fffefa!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line-bold)!important;
}
.creator-ui.focus-workspace input:focus,
.creator-ui.focus-workspace textarea:focus,
.creator-ui.focus-workspace select:focus{
  border-color:var(--hy-olive)!important;
  box-shadow:0 0 0 3px rgba(82,107,91,.11)!important;
}
.creator-ui.focus-workspace .icon-button {
  background:var(--hy-tint)!important;
  border-color:var(--hy-line-bold)!important;
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .compile-cta {
  background:var(--hy-text)!important;
  color:#fffefa!important;
}
.creator-ui.focus-workspace .compile-cta b {color:#fffefa!important}
.creator-ui.focus-workspace .export-actions small,
.creator-ui.focus-workspace .scope small,
.creator-ui.focus-workspace .readiness-note,
.creator-ui.focus-workspace .prototype-note p {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .dock-disclosure,
.creator-ui.focus-workspace .inspector-disclosure {
  border-color:var(--hy-line)!important;
}
.creator-ui.focus-workspace .dock-disclosure>summary,
.creator-ui.focus-workspace .inspector-disclosure>summary {
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .readiness-card,
.creator-ui.focus-workspace .review-card,
.creator-ui.focus-workspace .direction-card,
.creator-ui.focus-workspace .hero-inspector,
.creator-ui.focus-workspace .creator-state-card {
  background:#f6f7f1!important;
  border-color:var(--hy-line)!important;
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .info-block,
.creator-ui.focus-workspace .metric-row>div,
.creator-ui.focus-workspace .creator-state-card>div,
.creator-ui.focus-workspace .execution-grid>div,
.creator-ui.focus-workspace .comfy-release-stack,
.creator-ui.focus-workspace .primitive-pill,
.creator-ui.focus-workspace .chips span {
  background:#fffefa!important;
  border-color:var(--hy-line)!important;
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .readiness-card .eyebrow,
.creator-ui.focus-workspace .direction-card-head span,
.creator-ui.focus-workspace .hero-primitive span,
.creator-ui.focus-workspace .hero-route span,
.creator-ui.focus-workspace .creator-state-card span,
.creator-ui.focus-workspace .execution-grid span,
.creator-ui.focus-workspace .metric-row span,
.creator-ui.focus-workspace .info-block>span {
  color:var(--hy-muted)!important;
}
.creator-ui.focus-workspace .direction-card p,
.creator-ui.focus-workspace .info-block p,
.creator-ui.focus-workspace .review-copy small,
.creator-ui.focus-workspace .scope small {
  color:var(--hy-mid)!important;
}
.creator-ui.focus-workspace .hero-primitive b,
.creator-ui.focus-workspace .hero-route b,
.creator-ui.focus-workspace .execution-profile,
.creator-ui.focus-workspace .creator-state-card b,
.creator-ui.focus-workspace .execution-grid b,
.creator-ui.focus-workspace .metric-row b {
  color:var(--hy-text)!important;
}
.creator-ui.focus-workspace .review-icon,
.creator-ui.focus-workspace .review-card a,
.creator-ui.focus-workspace .comfy-release-badge{
  background:var(--hy-accent-soft)!important;
  color:#655035!important;
  border-color:#e2d1b1!important;
}
.creator-ui.focus-workspace .review-thumb {
  background:var(--hy-pane)!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line)!important;
}
.creator-ui.focus-workspace .scope .chips span.native,
.creator-ui.focus-workspace .execution-state.native {
  color:#366d55!important;
}
.creator-ui.focus-workspace .scope .chips span.review,
.creator-ui.focus-workspace .execution-state.review {
  color:#85633e!important;
}

/* Draw & Page: light studio chrome, dark anti-glare work surface.
   Paper artboard and artwork are intentionally not recolored. */
.draw-studio,.page-studio {
  --ink:var(--hy-text);
  --muted:var(--hy-mid);
  --line:var(--hy-line);
  --accent:var(--hy-olive);
  --paper:var(--hy-paper);
  color:var(--hy-text)!important;
  background:var(--hy-shell)!important;
}
.draw-topbar,.page-topbar {
  background:rgba(255,254,251,.98)!important;
  color:var(--hy-text)!important;
  border-bottom:1px solid var(--hy-line-bold)!important;
  box-shadow:0 2px 12px rgba(35,45,36,.04)!important;
}
.draw-topbar .draw-document span,
.page-topbar .page-document span,
.page-document-toolbar>div:first-child span {
  color:var(--hy-olive)!important;
}
.draw-topbar .draw-document b,
.page-topbar .page-document b,
.page-document-toolbar>div:first-child b {
  color:var(--hy-text)!important;
}
.draw-back,.draw-secondary,
.draw-toolstrip button,
.page-topbar-end button {
  background:var(--hy-pane)!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line-bold)!important;
}
.draw-back:hover,.draw-secondary:hover,
.draw-toolstrip button:hover:not(:disabled),
.page-topbar-end button:hover{
  background:#e8ebe2!important;
  color:var(--hy-text)!important;
}
.draw-done,
.page-export-menu>summary{
  background:var(--hy-text)!important;
  color:#fffefa!important;
  border-color:var(--hy-text)!important;
}
.draw-toolstrip,
.page-controls {
  background:#f0f0eb!important;
  border-color:var(--hy-line)!important;
}
.draw-toolstrip button {
  color:var(--hy-mid)!important;
  border-color:transparent!important;
  background:transparent!important;
}
.draw-toolstrip button.active {
  color:#fffefa!important;
  background:var(--hy-text)!important;
  box-shadow:0 3px 12px rgba(20,30,22,.13)!important;
}
.draw-toolstrip button:hover:not(.active) {
  color:var(--hy-text)!important;
  background:#e0e5db!important;
}
.draw-toolstrip #drawAdvancedToolsToggle {
  color:var(--hy-olive)!important;
  background:#e3e8de!important;
  border-color:#c0ccbf!important;
}
.draw-toolstrip.atelier-tools-expanded #drawAdvancedToolsToggle {
  background:var(--hy-text)!important;
  color:#fffefa!important;
}
.draw-size-control,.draw-preset-control,.draw-color-control,
.page-controls label {
  color:var(--hy-mid)!important;
}
.draw-preset-control select,.page-controls select {
  color:var(--hy-text)!important;
  background:var(--hy-pane)!important;
  border-color:var(--hy-line-bold)!important;
}
.draw-size-control input {accent-color:var(--hy-olive)!important}
/* An editing stage remains dark, with a true light paper artboard. */
.draw-workspace,.page-workspace {
  background:var(--hy-shell)!important;
}
.draw-stage,.page-stage{
  background:
    radial-gradient(ellipse at 50% 42%,rgba(205,217,196,.065),transparent 55%),
    var(--hy-stage)!important;
}
.draw-artboard,.page-paper-wrap {
  background:var(--hy-paper)!important;
  box-shadow:0 25px 70px rgba(8,15,11,.34)!important;
}
.draw-statusbar,.page-statusbar {
  color:var(--hy-muted)!important;
}
.draw-layers,.page-panel-dock,.page-authority-dock {
  background:rgba(255,254,251,.98)!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line-bold)!important;
  box-shadow:0 20px 55px rgba(14,20,16,.17)!important;
}
.draw-dock-heading span,
.draw-source-heading span,
.draw-source-layer-group>summary span,
.page-panel-dock .eyebrow,
.page-authority-dock .eyebrow {
  color:var(--hy-olive)!important;
}
.draw-dock-heading b,
.draw-source-heading b,
.page-panel-dock b,
.page-authority-dock b {
  color:var(--hy-text)!important;
}
.draw-layer-row,
.draw-source-layer-group,
.draw-layer-note,
.page-panel-choice,
.page-authority-card {
  color:var(--hy-text)!important;
  background:#f4f5ef!important;
  border-color:var(--hy-line)!important;
}
.draw-layer-row:hover,.page-panel-choice:hover {
  background:#e9eee6!important;
  border-color:#b1c0b1!important;
}
.draw-layer-row.active,
.draw-layer-row.active-layer,
.page-panel-choice.active{
  background:#e8eee3!important;
  border-color:#78947b!important;
  box-shadow:inset 0 0 0 1px #bacbb9!important;
}
.draw-layer-row span b,
.draw-source-layer-group b {
  color:var(--hy-text)!important;
}
.draw-layer-row span small,
.draw-source-heading small,
.draw-layer-note p,
.draw-opacity-control,
.draw-blend-control {
  color:var(--hy-mid)!important;
}
.draw-layer-eye,.draw-viewport-controls button {
  background:#e9ede6!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line)!important;
}
.draw-opacity-control input{accent-color:var(--hy-olive)!important}
.draw-viewport-controls {
  background:rgba(255,254,251,.96)!important;
  border-color:var(--hy-line-bold)!important;
  color:var(--hy-text)!important;
}
.draw-viewport-controls small {color:var(--hy-mid)!important}
.draw-layer-note b {color:var(--hy-text)!important}
.draw-selection-actions,
.draw-ai-fix-panel,
.draw-runtime-panel-picker,
.page-export-popover{
  background:var(--hy-pane)!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line-bold)!important;
  box-shadow:0 20px 60px rgba(22,30,23,.15)!important;
}
.draw-selection-actions span,
.draw-runtime-panel-picker-head span b,
.draw-runtime-generate-head span b {
  color:var(--hy-text)!important;
}
.draw-runtime-panel-picker-head span small,
.draw-runtime-panel-picker>p,
.draw-runtime-generate-head span small {
  color:var(--hy-mid)!important;
}
.draw-runtime-generate-area {
  background:#f6f7f2!important;
  border-color:var(--hy-line)!important;
}
.draw-runtime-panel-option,.draw-runtime-generate-option {
  background:#f9f9f5!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line)!important;
}
.draw-runtime-panel-option span b,
.draw-runtime-generate-option span b {
  color:var(--hy-text)!important;
}
.draw-runtime-panel-option span small,
.draw-runtime-generate-option span small {
  color:var(--hy-mid)!important;
}
.page-panel-dock select,.page-authority-dock select,
.draw-layers select,.draw-layers input {
  background:var(--hy-pane)!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line-bold)!important;
}
.page-document-actions button,
.page-panel-dock button,.page-authority-dock button,
.page-export-popover button{
  background:#edf0e8!important;
  border-color:var(--hy-line-bold)!important;
  color:var(--hy-text)!important;
}
.page-document-actions button:hover,
.page-panel-dock button:hover,.page-authority-dock button:hover,
.page-export-popover button:hover{
  background:#e1e8dc!important;
}
.page-authority-card span,
.page-authority-card small,
.page-authority-card code,
.page-panel-dock small {
  color:var(--hy-mid)!important;
}
/* Preserve readability for any floating controls INSIDE dark preview. */
.draw-stage .draw-zoom-hud,
.page-stage .page-zoom-hud {
  background:rgba(247,246,242,.95)!important;
  color:var(--hy-text)!important;
}
/* User preference to keep motion quiet is still respected. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}

/* Contact QA: light reference library + inspector, dark preview viewport. */
.shell {
  --bg:var(--hy-shell);
  --panel:var(--hy-pane);
  --panel2:var(--hy-tint);
  --line:var(--hy-line);
  --ink:var(--hy-text);
  --muted:var(--hy-mid);
  --soft:var(--hy-muted);
  --gold:var(--hy-olive);
  --warn:#87603e;
  --green:#35785a;
  color:var(--hy-text)!important;
  background:var(--hy-shell)!important;
}
.shell .topbar {
  background:rgba(255,254,251,.98)!important;
  border-color:var(--hy-line)!important;
}
.shell .identity strong {color:var(--hy-text)!important}
.shell .identity small,.shell .header-context{
  color:var(--hy-muted)!important;
}
.shell .brand-mark {
  background:var(--hy-text)!important;
  color:#fffefa!important;
}
.shell .audit-status{
  color:#80603e!important;
}
.shell .status-dot{background:#b38959!important}
.shell .primary{
  background:var(--hy-text)!important;
  color:#fffefa!important;
  border-color:var(--hy-text)!important;
}
.shell .sidebar,.shell .inspector{
  background:var(--hy-pane)!important;
  border-color:var(--hy-line)!important;
  color:var(--hy-text)!important;
}
.shell .sidebar-head h2,
.shell .inspector-head h2,
.shell .section-top h1{
  color:var(--hy-text)!important;
}
.shell .sidebar-head p,
.shell .inspector-head p,
.shell .section-top p{
  color:var(--hy-mid)!important;
}
.shell .eyebrow {
  color:var(--hy-olive)!important;
}
.shell .scenario {
  color:var(--hy-mid)!important;
}
.shell .scenario:hover{
  background:var(--hy-tint)!important;
}
.shell .scenario.active{
  background:#eaf0e7!important;
  border-color:#a6b9a3!important;
  color:var(--hy-text)!important;
}
.shell .scenario .count {
  color:var(--hy-text)!important;
  background:var(--hy-tint)!important;
}
.shell .scenario.active .count {
  color:#fffefa!important;
  background:var(--hy-olive)!important;
}
.shell .scenario b {color:var(--hy-text)!important}
.shell .scenario small,.shell .scenario .chev{
  color:var(--hy-mid)!important;
}
.shell .sidebar-footer{
  border-color:var(--hy-line)!important;
}
.shell .sidebar-footer p,.shell .tiny-summary {
  color:var(--hy-mid)!important;
}
.shell .review-canvas {
  background:var(--hy-shell)!important;
  color:var(--hy-text)!important;
}
.shell .view-actions {
  background:var(--hy-tint)!important;
  border-color:var(--hy-line-bold)!important;
}
.shell .view-btn {
  color:var(--hy-mid)!important;
}
.shell .view-btn.active {
  background:var(--hy-pane)!important;
  color:var(--hy-text)!important;
  box-shadow:0 2px 8px rgba(40,45,39,.09)!important;
}
.shell .image-stage{
  background:var(--hy-stage)!important;
  border-color:#3b463f!important;
  box-shadow:0 16px 45px rgba(30,39,33,.12)!important;
}
.shell .render-panel {
  background:#202723!important;
}
.shell .render-panel figcaption {
  color:#e5e7db!important;
}
.shell .render-panel img {
  background:#171d19!important;
}
.shell .overlay-control,
.shell .overlay-control output {
  color:#e5e7db!important;
}
.shell .evidence-note {
  background:#f2ebe0!important;
  border-color:#e6d7be!important;
  color:#594c3c!important;
}
.shell .evidence-note strong{color:#4b453b!important}
.shell .evidence-note p{color:#6b604d!important}
.shell .bottom-bar,
.shell #caseIndex {
  color:var(--hy-mid)!important;
}
.shell .bottom-bar button{
  background:var(--hy-pane)!important;
  border-color:var(--hy-line-bold)!important;
  color:var(--hy-text)!important;
}
.shell .interaction-list .edge-row {
  background:#f6f7f1!important;
  border-color:var(--hy-line)!important;
  color:var(--hy-text)!important;
}
.shell .interaction-list .edge-row.active {
  background:#eaf0e7!important;
  border-color:#96aa95!important;
}
.shell .edge-row b {color:var(--hy-text)!important}
.shell .edge-row small {color:var(--hy-mid)!important}
.shell .edge-row em {color:#84623e!important}
.shell .metrics,.shell .review-form {
  border-color:var(--hy-line)!important;
}
.shell .metric {
  background:#f4f5ef!important;
  border-color:var(--hy-line)!important;
}
.shell .metric span,.shell .metric small {
  color:var(--hy-mid)!important;
}
.shell .metric strong {
  color:var(--hy-text)!important;
}
.shell .metric.positive strong{color:#39795b!important}
.shell .metric.critical strong{color:#92653b!important}
.shell .flag{
  color:#855f41!important;
  border-color:#d0b38d!important;
}
.shell .review-form label {
  color:var(--hy-text)!important;
}
.shell .review-form input,
.shell .review-form select,
.shell .review-form textarea{
  background:var(--hy-pane)!important;
  color:var(--hy-text)!important;
  border-color:var(--hy-line-bold)!important;
}
.shell .review-form .save-button{
  background:var(--hy-text)!important;
  color:#fffefa!important;
  border-color:var(--hy-text)!important;
}
.shell .muted-text,
.shell #reviewNotice,.shell #edgeProgress{
  color:var(--hy-mid)!important;
}
.shell .footer{
  background:#f0efe9!important;
  border-color:var(--hy-line)!important;
  color:var(--hy-mid)!important;
}
/* Tablet and mobile retain the same split light chrome/dark preview. */
@media(max-width:900px){
  .shell .image-stage {background:var(--hy-stage)!important}
  .shell .sidebar,.shell .inspector {background:var(--hy-pane)!important}
}

/* Status badges on ivory surfaces need dark, readable ink. */
.creator-ui.focus-workspace a.chrome-button {text-decoration:none!important}
.creator-ui.focus-workspace .beat-card.native .beat-native-tag {
  background:#e4f1e8!important;
  color:#2e6b4b!important;
  border-color:#8db69b!important;
}
.creator-ui.focus-workspace .beat-card.review .beat-native-tag {
  background:#f8ebd7!important;
  color:#85552e!important;
  border-color:#d7b98a!important;
}
.creator-ui.focus-workspace .beat-card.unsupported .beat-native-tag,
.creator-ui.focus-workspace .beat-card.visual-fail .beat-native-tag {
  background:#f9e4e0!important;
  color:#9b493f!important;
  border-color:#dba8a0!important;
}
.creator-ui.focus-workspace .beat-status-badge.native,
.creator-ui.focus-workspace .execution-state.native{
  background:#e3f0e7!important;
  color:#2e6b4b!important;
  border-color:#a8c9af!important;
}
.creator-ui.focus-workspace .beat-status-badge.review,
.creator-ui.focus-workspace .execution-state.review{
  background:#f5ead7!important;
  color:#7d5630!important;
  border-color:#dbbd91!important;
}

/* V4.1 scroll bugfix (8 Oct 2026).
   The earlier full-screen blocking shell was hard-capped at 100vh and
   overflow:hidden; its entire storyboard below the fold became
   inaccessible to mouse wheel/trackpad/keyboard at desktop widths.
   Return ONLY the regular Blocking screen to a normal document flow.
   Drawing, page composition and explicit immersive Focus stay viewport-
   locked on purpose; side drawers retain independent overflow:auto. */
@media (min-width:981px) {
  html {
    scroll-behavior:auto;
    overflow-y:auto;
    overflow-x:clip;
  }
  body:not(.draw-studio-open):not(.page-studio-open){
    /* Do not create a second non-scrolling overflow ancestor:
       sticky navigation must use the document's actual scrollport. */
    overflow-y:visible;
    overflow-x:clip;
  }
  .creator-ui.focus-workspace:not(.immersive-workspace) {
    height:auto!important;
    min-height:100vh!important;
    overflow:visible!important;
    display:flex;
    flex-direction:column;
  }
  .creator-ui.focus-workspace:not(.immersive-workspace) .topbar {
    flex:0 0 auto!important;
  }
  .creator-ui.focus-workspace:not(.immersive-workspace) .workspace {
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
  }
  .creator-ui.focus-workspace:not(.immersive-workspace) .stage-panel {
    height:auto!important;
    min-height:0!important;
  }
  .creator-ui.focus-workspace:not(.immersive-workspace) .canvas-wrap {
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
  }
  .creator-ui.focus-workspace:not(.immersive-workspace) #viewport {
    flex:0 0 auto!important;
    height:clamp(540px,calc(100vh - 245px),860px)!important;
    min-height:540px!important;
  }
  .creator-ui.focus-workspace:not(.immersive-workspace) .timeline-wrap {
    flex:0 0 auto!important;
    height:auto!important;
    min-height:156px!important;
    overflow:visible!important;
  }
  .creator-ui.focus-workspace:not(.immersive-workspace) .timeline {
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
  }
  /* Sheets remain fixed to viewport but must not end too early now
     that storyboard sits in normal document flow. */
  .creator-ui.focus-workspace:not(.immersive-workspace) .input-panel,
  .creator-ui.focus-workspace:not(.immersive-workspace) .inspector {
    bottom:18px!important;
  }
  /* Do not accidentally unlock the intentional immersive layout. */
  .creator-ui.focus-workspace.immersive-workspace {
    height:100vh!important;
    overflow:hidden!important;
  }
}

/* Keep global creation navigation reachable while the storyboard scrolls.
   The editor-specific fullscreen canvases own their own headers. */
.creator-ui.focus-workspace:not(.immersive-workspace) > .topbar {
  position:sticky!important;
  top:0!important;
  z-index:80!important;
}