/* KoozhenStudio light-mode consistency audit
   Loaded last on every product surface so legacy literal dark colours cannot
   override the shared light palette. */

:root {
  --ks-navy: #1B1A34;
  --ks-teal: #47B4B0;
  --ks-indigo: #7C6CF3;
  --ks-mist: #C4DBDA;
  --ks-canvas: #F4F8F8;
  --ks-surface: #FFFFFF;
  --ks-surface-soft: #EDF4F4;
  --ks-border: rgba(27, 26, 52, .14);
  --ks-muted: #66727D;
}

/* Studio chrome, creation plan and canvas */
html[data-theme="light"] .koozhen-creation-plan {
  background: #F7FAFA !important;
  border-bottom-color: var(--ks-border) !important;
  box-shadow: 0 1px 0 rgba(27, 26, 52, .04);
}
html[data-theme="light"] .koozhen-plan-label { color: var(--ks-muted) !important; }
html[data-theme="light"] .koozhen-plan-step { color: #65717B !important; }
html[data-theme="light"] .koozhen-plan-step::before { border-color: rgba(27,26,52,.24) !important; }
html[data-theme="light"] .koozhen-plan-step.is-active {
  color: var(--ks-navy) !important;
  background: rgba(124,108,243,.13) !important;
}
html[data-theme="light"] .koozhen-plan-step.is-active::before { color: #fff !important; }
html[data-theme="light"] .koozhen-plan-step.is-done { color: #247F7C !important; }
html[data-theme="light"] .koozhen-plan-line { background: rgba(27,26,52,.13) !important; }
html[data-theme="light"] .koozhen-guide-open {
  color: var(--ks-navy) !important;
  background: rgba(71,180,176,.1) !important;
  border-color: rgba(71,180,176,.5) !important;
}

html[data-theme="light"] .cost-pill {
  background: rgba(255,255,255,.94) !important;
  border-color: var(--ks-border) !important;
  box-shadow: 0 3px 12px rgba(27,26,52,.06);
}
html[data-theme="light"] .cost-pill:hover { background: var(--ks-surface-soft) !important; }
html[data-theme="light"] .cost-pill :is(.cp-label,.cp-caret) { color: var(--ks-muted) !important; }
html[data-theme="light"] .cost-pill .cp-value { color: var(--ks-navy) !important; }

html[data-theme="light"] .studio-canvas-panel { background: var(--ks-canvas) !important; color: var(--ks-navy) !important; }
html[data-theme="light"] .sc-viewport {
  background-color: var(--ks-canvas) !important;
  background-image: radial-gradient(rgba(27,26,52,.20) 1.15px, transparent 1.15px) !important;
}
html[data-theme="light"] .sc-toolbar {
  background: rgba(255,255,255,.96) !important;
  border-bottom-color: var(--ks-border) !important;
}
html[data-theme="light"] .sc-save-state { color: var(--ks-muted) !important; }
html[data-theme="light"] .sc-toolbar-separator { background: rgba(27,26,52,.13) !important; }
html[data-theme="light"] .sc-minimap {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(27,26,52,.24) !important;
  box-shadow: 0 8px 24px rgba(27,26,52,.12);
}
html[data-theme="light"] .sc-map-view {
  border-color: var(--ks-navy) !important;
  background: rgba(124,108,243,.08) !important;
}
html[data-theme="light"] .sc-coordinates {
  background: rgba(255,255,255,.94) !important;
  color: #55636E !important;
  border: 1px solid var(--ks-border);
  box-shadow: 0 3px 12px rgba(27,26,52,.06);
}
html[data-theme="light"] .chat-input-area { border-top-color: var(--ks-border) !important; }
html[data-theme="light"] .chat-input-area .composer {
  border-radius: 20px !important;
  border-color: rgba(27,26,52,.18) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(27,26,52,.08);
  overflow: hidden;
}
html[data-theme="light"] .chat-input-area .chat-input {
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--ks-navy) !important;
}

/* Settings: restore readable controls, badges and navigation contrast. */
html[data-theme="light"] #settingsModal .modal-close {
  position: relative;
  z-index: 5;
  color: var(--ks-navy) !important;
  background: #F1F5F5 !important;
  border: 1px solid rgba(27,26,52,.18) !important;
  opacity: 1 !important;
  box-shadow: 0 3px 12px rgba(27,26,52,.08);
}
html[data-theme="light"] #settingsModal .modal-close:hover { background: var(--ks-mist) !important; }
html[data-theme="light"] #settingsModal .settings-tab-icon {
  color: #5147AE !important;
  background: rgba(124,108,243,.16) !important;
  border: 1px solid rgba(124,108,243,.16);
}
html[data-theme="light"] #settingsModal .settings-tab.active .settings-tab-icon {
  color: var(--ks-navy) !important;
  background: #75CCC8 !important;
  border-color: rgba(27,26,52,.08);
}
html[data-theme="light"] #settingsModal :is(.model-card-status,.provider-pill,.model-badge,.status-pill,.persona-default-badge) {
  color: #315F66 !important;
  background: #E0F1F0 !important;
  border-color: rgba(71,180,176,.3) !important;
  opacity: 1 !important;
}
html[data-theme="light"] #settingsModal :is(.model-card-sub,.field-hint,.sf-tip,.persona-meta,.settings-update-ver,.settings-update-status) {
  color: #66727D !important;
  opacity: 1 !important;
}
html[data-theme="light"] #settingsModal :is(table th,.role-table th) {
  color: var(--ks-navy) !important;
  background: #E3ECEC !important;
  border-color: var(--ks-border) !important;
}
html[lang^="zh"] #settingsModal .settings-pane[data-pane="models"].active::before { content: "AI 与模型" !important; }
html[lang^="zh"] #settingsModal .settings-pane[data-pane="persona"].active::before { content: "协作偏好" !important; }
html[lang^="zh"] #settingsModal .settings-pane[data-pane="wechat"].active::before { content: "发布上架" !important; }
html[lang^="zh"] #settingsModal .settings-pane[data-pane="storage"].active::before { content: "项目存储" !important; }

html[data-theme="light"] #settingsModal .project-storage-status,
html[data-theme="day"] #settingsModal .project-storage-status,
:root:not([data-theme]) #settingsModal .project-storage-status {
  color: #1B1A34;
  background: rgba(71,180,176,.10);
  border-color: rgba(71,180,176,.30);
}

/* Publish Cockpit (same-origin iframe). */
html[data-theme="light"] body,
html[data-theme="light"] .app-container,
html[data-theme="light"] .main-area,
html[data-theme="light"] .chat-stage,
html[data-theme="light"] .chat-scroll {
  background: #F7FAFA !important;
  color: var(--ks-navy) !important;
}
html[data-theme="light"] .monitor-bar {
  background: rgba(255,255,255,.97) !important;
  border-bottom-color: var(--ks-border) !important;
  color: var(--ks-navy) !important;
  box-shadow: 0 2px 12px rgba(27,26,52,.05);
}
html[data-theme="light"] .monitor-bar.focus-mode { background: #F5F3FF !important; }
html[data-theme="light"] .monitor-bar [style*="color:#fafafa"],
html[data-theme="light"] .monitor-bar [style*="color: #fafafa"] { color: var(--ks-navy) !important; }
html[data-theme="light"] .monitor-bar [style*="color:#a1a1aa"],
html[data-theme="light"] .monitor-bar [style*="color: #a1a1aa"] { color: var(--ks-muted) !important; }
html[data-theme="light"] .date-switcher,
html[data-theme="light"] #lang-toggle-wrap,
html[data-theme="light"] #mb-user-btn {
  color: var(--ks-navy) !important;
  background: #F1F5F5 !important;
  border: 1px solid var(--ks-border) !important;
}
html[data-theme="light"] #lang-toggle-wrap {
  width: auto !important;
  min-width: 76px;
  padding: 0 4px;
  gap: 2px;
  border-radius: 999px !important;
}
html[data-theme="light"] #lang-toggle-wrap .ks-lang-option {
  min-width: 32px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #68727D;
  font-size: 11px;
}
html[data-theme="light"] #lang-toggle-wrap .ks-lang-option.active {
  color: #fff;
  background: var(--ks-indigo);
}
html[data-theme="light"] .e8-decision-summary {
  background: linear-gradient(135deg,#FFFFFF,#F0F7F7) !important;
  border-color: var(--ks-border) !important;
  box-shadow: 0 10px 30px rgba(27,26,52,.07) !important;
}
html[data-theme="light"] .e8-priority-card,
html[data-theme="light"] .ai-card {
  background: #FFFFFF !important;
  border-color: rgba(27,26,52,.12) !important;
}
html[data-theme="light"] :is(.e8-summary-head h1,.e8-priority-card strong,.ai-card-title,.msg-row:not(.user) .msg-bubble strong,.msg-row:not(.user) .msg-bubble h1,.msg-row:not(.user) .msg-bubble h2,.msg-row:not(.user) .msg-bubble h3,.msg-row:not(.user) .msg-bubble h4) {
  color: var(--ks-navy) !important;
}
html[data-theme="light"] :is(.e8-priority-card p,.e8-state-legend,.e8-secondary-tools,.ai-card-text,.msg-row:not(.user) .msg-bubble,.msg-row:not(.user) .msg-bubble em) {
  color: #66727D !important;
}
html[data-theme="light"] .msg-row.user .msg-bubble > div {
  color: var(--ks-navy) !important;
  background: rgba(124,108,243,.12) !important;
  border-color: rgba(124,108,243,.24) !important;
}
html[data-theme="light"] .composer-dock {
  background: linear-gradient(transparent,rgba(247,250,250,.94) 24%,#F7FAFA 58%) !important;
}
html[data-theme="light"] .composer-inner {
  background: #FFFFFF !important;
  border-color: var(--ks-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(27,26,52,.10) !important;
}
html[data-theme="light"] .input-bar {
  background: #F5F8F8 !important;
  border: 1px solid rgba(27,26,52,.16) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
html[data-theme="light"] .input-bar :is(input,textarea) {
  color: var(--ks-navy) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
}
html[data-theme="light"] .input-bar :is(input,textarea)::placeholder { color: #77838D !important; opacity: 1; }
html[data-theme="light"] .chip {
  color: #4F5B66 !important;
  background: #F0F4F4 !important;
  border-color: rgba(27,26,52,.13) !important;
}
html[data-theme="light"] :is(#scene-dropdown,.history-drawer,#sediment-drawer,.fb-popover) {
  color: var(--ks-navy) !important;
  background: #FFFFFF !important;
  border-color: var(--ks-border) !important;
  box-shadow: 0 18px 50px rgba(27,26,52,.16) !important;
}
html[data-theme="light"] :is(.history-item,.sd-card,.fb-chip) {
  color: var(--ks-navy) !important;
  background: #F6F9F9 !important;
  border-color: var(--ks-border) !important;
}

/* Publish collaboration-loop prototype opened as a secondary page. */
html[data-theme="light"] body.collab-loop-page::before {
  background:
    radial-gradient(60% 50% at 15% 0%,rgba(124,108,243,.10),transparent 70%),
    radial-gradient(50% 45% at 90% 10%,rgba(71,180,176,.10),transparent 70%),
    linear-gradient(#F7FAFA,#EFF5F5) !important;
}
html[data-theme="light"] .collab-loop-page :is(.scoreboard,.nextstep,.gcard,.asset,.gen) {
  color: var(--ks-navy) !important;
  background: rgba(255,255,255,.88) !important;
  border-color: var(--ks-border) !important;
  box-shadow: 0 8px 24px rgba(27,26,52,.07) !important;
}
html[data-theme="light"] .collab-loop-page .opt {
  color: var(--ks-navy) !important;
  background: #F3F7F7 !important;
  border-color: rgba(27,26,52,.14) !important;
}
html[data-theme="light"] .collab-loop-page :is(.sb-label,.sb-note,.sb-mini .l,.tagline,h2.sec,.ns-who,.opt .od,.gc-sub,.asset .at .s,.legend) {
  color: var(--ks-muted) !important;
}
html[data-theme="light"] .collab-loop-page .reset {
  color: var(--ks-navy) !important;
  background: rgba(255,255,255,.94) !important;
  border-color: var(--ks-border) !important;
}

/* Annotation pass: homepage activity, theme controls and stable hero layout. */
#page-home .stage > h1 {
  width: auto !important;
  max-width: none !important;
  white-space: nowrap;
  font-size: clamp(32px, 3.25vw, 64px) !important;
}
html:not([data-theme="light"]):not([data-theme="day"]) .koozhen-language-switch {
  color: #C4DBDA !important;
  background: rgba(27,26,52,.82) !important;
  border-color: rgba(196,219,218,.18) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.22) !important;
}
html:not([data-theme="light"]):not([data-theme="day"]) .koozhen-language-option:not(.active) {
  color: #C4DBDA !important;
  background: transparent !important;
}
@media (max-width: 900px) {
  #page-home .stage > h1 { white-space: normal; text-wrap: balance; }
}

/* Settings: wider navigation and a consistently inset, rounded content surface. */
@media (min-width: 761px) {
  #settingsModal .modal-settings { grid-template-columns: 320px minmax(0,1fr) !important; }
}
#settingsModal .settings-tabs { padding-inline: 20px !important; }
#settingsModal .settings-tab-copy strong,
#settingsModal .settings-tab-copy small { white-space: normal; overflow-wrap: anywhere; }
#settingsModal .settings-body { padding: 20px !important; }
#settingsModal .settings-pane.active {
  box-sizing: border-box;
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid rgba(196,219,218,.12);
  border-radius: 20px;
  background: rgba(12,15,30,.34);
}
html[data-theme="light"] #settingsModal .settings-pane.active,
html[data-theme="day"] #settingsModal .settings-pane.active,
:root:not([data-theme]) #settingsModal .settings-pane.active {
  background: #FFFFFF !important;
  border-color: rgba(27,26,52,.12) !important;
  box-shadow: 0 10px 30px rgba(27,26,52,.06);
}

/* Canvas layers must stay transparent so the viewport grid remains visible.
   Keep the themed selectors at least as specific as koozhenstudio-brand.css,
   which previously painted the 200000px node layer #F7F9F9. */
html[data-theme="light"] :is(.sc-node-layer,.sc-edge-layer),
html[data-theme="day"] :is(.sc-node-layer,.sc-edge-layer),
:root:not([data-theme]) :is(.sc-node-layer,.sc-edge-layer) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html:not([data-theme="light"]):not([data-theme="day"]) :is(.sc-node-layer,.sc-edge-layer) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme="light"] .sc-viewport,
html[data-theme="day"] .sc-viewport,
:root:not([data-theme]) .sc-viewport {
  background-color: #F4F8F8 !important;
  background-image: radial-gradient(rgba(92,105,114,.42) 1.15px, transparent 1.25px) !important;
  background-size: 20px 20px !important;
}
html:not([data-theme="light"]):not([data-theme="day"]) .sc-viewport {
  background-image: radial-gradient(rgba(196,219,218,.30) 1.1px, transparent 1.2px) !important;
  background-size: 20px 20px !important;
}

/* Projects: readable action labels in both themes. */
.game-card-info .project-template-clone {
  color: #FFFFFF !important;
  background: linear-gradient(135deg,#6254D8,#47B4B0) !important;
  border-color: rgba(196,219,218,.40) !important;
  opacity: 1 !important;
  font-weight: 750 !important;
  text-shadow: none !important;
}
html[data-theme="light"] .game-card-info .project-template-clone,
html[data-theme="day"] .game-card-info .project-template-clone,
:root:not([data-theme]) .game-card-info .project-template-clone {
  color: #1B1A34 !important;
  background: linear-gradient(135deg,rgba(124,108,243,.22),rgba(71,180,176,.28)) !important;
  border-color: rgba(27,26,52,.24) !important;
}
.game-card-info .project-template-clone:hover {
  filter: brightness(.97) saturate(1.08);
  transform: translateY(-1px);
}

/* Required game-name dialog emitted by the legacy creation guard. */
.required-game-name-overlay {
  background: rgba(7,10,22,.68) !important;
  backdrop-filter: blur(7px) !important;
}
.required-game-name-dialog {
  width: min(460px,calc(100vw - 40px)) !important;
  box-sizing: border-box !important;
  padding: 28px !important;
  color: #F7FAFA !important;
  background: #1B1A34 !important;
  border: 1px solid rgba(196,219,218,.20) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.42) !important;
  font-family: Montserrat,"Noto Sans SC",sans-serif !important;
}
.required-game-name-title {
  margin: 0 0 7px !important;
  color: inherit !important;
  font-size: 19px !important;
  font-weight: 750 !important;
}
.required-game-name-description {
  margin: 0 0 18px !important;
  color: rgba(196,219,218,.72) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.required-game-name-label {
  margin: 18px 0 7px !important;
  color: #C4DBDA !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.required-game-name-input,
.required-game-name-select {
  width: 100% !important;
  height: 48px !important;
  box-sizing: border-box !important;
  padding: 0 14px !important;
  color: #F7FAFA !important;
  background: rgba(8,13,24,.72) !important;
  border: 1px solid rgba(196,219,218,.24) !important;
  border-radius: 12px !important;
  outline: none !important;
  font: 500 14px/1 Montserrat,"Noto Sans SC",sans-serif !important;
}
.required-game-name-input:focus,
.required-game-name-select:focus {
  border-color: #47B4B0 !important;
  box-shadow: 0 0 0 3px rgba(71,180,176,.18) !important;
}
.required-game-name-error {
  min-height: 20px !important;
  height: auto !important;
  padding-top: 7px !important;
  color: #FF8994 !important;
  font-size: 12px !important;
}
.required-game-name-cancel,
.required-game-name-confirm {
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font: 750 14px/1 Montserrat,"Noto Sans SC",sans-serif !important;
}
.required-game-name-cancel {
  color: #C4DBDA !important;
  background: transparent !important;
  border: 1px solid rgba(196,219,218,.28) !important;
}
.required-game-name-confirm {
  color: #FFFFFF !important;
  background: linear-gradient(135deg,#7C6CF3,#47B4B0) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 22px rgba(124,108,243,.24) !important;
}
html[data-theme="light"] .required-game-name-overlay,
html[data-theme="day"] .required-game-name-overlay,
:root:not([data-theme]) .required-game-name-overlay {
  background: rgba(27,26,52,.28) !important;
}
html[data-theme="light"] .required-game-name-dialog,
html[data-theme="day"] .required-game-name-dialog,
:root:not([data-theme]) .required-game-name-dialog {
  color: #1B1A34 !important;
  background: #FFFFFF !important;
  border-color: rgba(27,26,52,.14) !important;
  box-shadow: 0 24px 70px rgba(27,26,52,.20) !important;
}
html[data-theme="light"] .required-game-name-description,
html[data-theme="day"] .required-game-name-description,
:root:not([data-theme]) .required-game-name-description { color: #66727D !important; }
html[data-theme="light"] .required-game-name-label,
html[data-theme="day"] .required-game-name-label,
:root:not([data-theme]) .required-game-name-label { color: #3E4A55 !important; }
html[data-theme="light"] :is(.required-game-name-input,.required-game-name-select),
html[data-theme="day"] :is(.required-game-name-input,.required-game-name-select),
:root:not([data-theme]) :is(.required-game-name-input,.required-game-name-select) {
  color: #1B1A34 !important;
  background: #F4F8F8 !important;
  border-color: rgba(27,26,52,.18) !important;
}
html[data-theme="light"] .required-game-name-cancel,
html[data-theme="day"] .required-game-name-cancel,
:root:not([data-theme]) .required-game-name-cancel {
  color: #1B1A34 !important;
  background: #F1F5F5 !important;
  border-color: rgba(27,26,52,.18) !important;
}

/* Focused Studio canvas: a distinct workspace, legible graph and clear node hierarchy. */
html[data-theme="light"] .studio-canvas-panel,
html[data-theme="day"] .studio-canvas-panel,
:root:not([data-theme]) .studio-canvas-panel {
  background: #DCE8E8 !important;
  border-left: 1px solid rgba(27,26,52,.14) !important;
  box-shadow: inset 10px 0 30px rgba(27,26,52,.035) !important;
}
html[data-theme="light"] .sc-viewport,
html[data-theme="day"] .sc-viewport,
:root:not([data-theme]) .sc-viewport {
  background-color: #E8F0F0 !important;
  background-image:
    /*radial-gradient(circle,rgba(27,26,52,.50) 1.35px,transparent 1.5px),*/
    radial-gradient(circle,rgba(71,180,176,.25) 1.8px,transparent 2px) !important;
  background-size:
    var(--sc-grid-size,24px) var(--sc-grid-size,24px),
    120px 120px !important;
  background-position:
    var(--sc-grid-x,0) var(--sc-grid-y,0),
    var(--sc-grid-x,0) var(--sc-grid-y,0) !important;
  box-shadow: inset 0 0 0 1px rgba(27,26,52,.08), inset 0 0 70px rgba(27,26,52,.035) !important;
}
html[data-theme="light"] .sc-edge-layer,
html[data-theme="day"] .sc-edge-layer,
:root:not([data-theme]) .sc-edge-layer { z-index: 1 !important; }
html[data-theme="light"] .sc-node-layer,
html[data-theme="day"] .sc-node-layer,
:root:not([data-theme]) .sc-node-layer { z-index: 2 !important; }
html[data-theme="light"] .sc-edge-shadow,
html[data-theme="day"] .sc-edge-shadow,
:root:not([data-theme]) .sc-edge-shadow {
  stroke: rgba(27,26,52,.28) !important;
  stroke-width: 7px !important;
}
html[data-theme="light"] .sc-edge,
html[data-theme="day"] .sc-edge,
:root:not([data-theme]) .sc-edge {
  stroke: #267E7B !important;
  stroke-width: 3.4px !important;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.9));
}
html[data-theme="light"] .sc-edge:hover,
html[data-theme="light"] .sc-edge.selected,
html[data-theme="day"] .sc-edge:hover,
html[data-theme="day"] .sc-edge.selected,
:root:not([data-theme]) .sc-edge:hover,
:root:not([data-theme]) .sc-edge.selected {
  stroke: #5B4FD4 !important;
  stroke-width: 4.5px !important;
}
html[data-theme="light"] .sc-node:not(.group),
html[data-theme="day"] .sc-node:not(.group),
:root:not([data-theme]) .sc-node:not(.group) {
  color: #1B1A34 !important;
  background: #FFFFFF !important;
  border: 2px solid rgba(27,26,52,.26) !important;
  box-shadow: 0 14px 34px rgba(27,26,52,.16),0 2px 6px rgba(27,26,52,.09) !important;
}
html[data-theme="light"] .sc-node:not(.group)::before,
html[data-theme="day"] .sc-node:not(.group)::before,
:root:not([data-theme]) .sc-node:not(.group)::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 12px;
  bottom: 12px;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: var(--node-accent,#47B4B0);
  z-index: 4;
}
.sc-node.prompt,.sc-node.text { --node-accent:#47B4B0; }
.sc-node.image { --node-accent:#7C6CF3; }
.sc-node.audio { --node-accent:#328F8B; }
.sc-node.reference { --node-accent:#667FA0; }
.sc-node.prototype { --node-accent:#7C6CF3; }
html[data-theme="light"] .sc-node-header,
html[data-theme="day"] .sc-node-header,
:root:not([data-theme]) .sc-node-header {
  color: #1B1A34 !important;
  background: linear-gradient(90deg,rgba(71,180,176,.14),rgba(124,108,243,.10)) !important;
  border-bottom-color: rgba(27,26,52,.16) !important;
}
html[data-theme="light"] .sc-node-kind,
html[data-theme="day"] .sc-node-kind,
:root:not([data-theme]) .sc-node-kind { color: #56636D !important; opacity: 1 !important; }
html[data-theme="light"] .sc-node:hover,
html[data-theme="day"] .sc-node:hover,
:root:not([data-theme]) .sc-node:hover {
  border-color: #47B4B0 !important;
  box-shadow: 0 18px 42px rgba(27,26,52,.20),0 0 0 3px rgba(71,180,176,.14) !important;
}
html[data-theme="light"] .sc-node.selected,
html[data-theme="day"] .sc-node.selected,
:root:not([data-theme]) .sc-node.selected {
  border-color: #5B4FD4 !important;
  box-shadow: 0 0 0 4px rgba(124,108,243,.28),0 20px 46px rgba(27,26,52,.24) !important;
}
html[data-theme="light"] .sc-port,
html[data-theme="day"] .sc-port,
:root:not([data-theme]) .sc-port {
  width: 15px !important;
  height: 15px !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(27,26,52,.65),0 3px 8px rgba(27,26,52,.22) !important;
}
html[data-theme="light"] .sc-prototype-node,
html[data-theme="day"] .sc-prototype-node,
:root:not([data-theme]) .sc-prototype-node {
  background: #FFFFFF !important;
  border-color: rgba(91,79,212,.52) !important;
}
html[data-theme="light"] .sc-minimap,
html[data-theme="day"] .sc-minimap,
:root:not([data-theme]) .sc-minimap {
  background: rgba(255,255,255,.98) !important;
  border: 2px solid rgba(27,26,52,.28) !important;
  box-shadow: 0 12px 30px rgba(27,26,52,.18) !important;
}
html[data-theme="light"] .sc-map-view,
html[data-theme="day"] .sc-map-view,
:root:not([data-theme]) .sc-map-view {
  border: 2px solid #1B1A34 !important;
  background: rgba(124,108,243,.08) !important;
}

/* Last-loaded lock: settings nav stays a left column, not the old horizontal tab strip. */
#settingsModal .modal-settings {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  grid-template-rows: 72px minmax(0, 1fr) 76px !important;
}
@media (min-width: 761px) {
  #settingsModal .modal-settings { grid-template-columns: 320px minmax(0, 1fr) !important; }
}
#settingsModal .settings-tabs {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
#settingsModal .settings-tab {
  flex: 0 0 auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
}
#settingsModal .settings-pane { display: none !important; }
#settingsModal .settings-pane.active { display: block !important; }
