/* Kept outside the legacy stylesheet tree: this shell owns its visual language. */
.ss-v2 {
  --ss-bg: #151e26; --ss-sidebar: #101820; --ss-surface: #202b35;
  --ss-raised: #2a3843; --ss-border: #33424d; --ss-text: #eaf0f3;
  --ss-muted: #9babb7; --ss-accent: #f3ae55; --ss-sidebar-width: 224px;
  color-scheme: dark; margin: 0; color: var(--ss-text); background: var(--ss-bg);
  font: 400 14px/1.5 "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  height: 100vh; height: 100dvh; display: flex; overflow: hidden;
}
.ss-v2 *, .ss-v2 *::before, .ss-v2 *::after { box-sizing: border-box; }
.ss-v2 [hidden] { display: none !important; }
.ss-v2 h1, .ss-v2 h2, .ss-v2 p { margin: 0; }
:where(.ss-v2) a { color: var(--ss-accent); text-underline-offset: 3px; }
.ss-v2 button, .ss-v2 input { font: inherit; }
.ss-v2 button, .ss-v2 a, .ss-v2 summary { -webkit-tap-highlight-color: transparent; }
.ss-v2 :focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 3px; }
.ss-icon { width: 20px; height: 20px; flex-shrink: 0; }
.ss-skip { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 18px; background: var(--ss-surface); }
.ss-skip:focus { top: 12px; }
.ss-button {
  min-height: 44px; padding: 9px 12px; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; border: 1px solid var(--ss-border); border-radius: 6px;
  background: var(--ss-surface); color: var(--ss-text); font-weight: 600; font-size: 12px;
  line-height: 1.4; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ss-button:hover { background: var(--ss-raised); }
.ss-button--quiet { background: transparent; border-color: transparent; color: var(--ss-muted); }
.ss-button--quiet:hover { color: var(--ss-text); }
.ss-button--primary { background: var(--ss-accent); border-color: var(--ss-accent); color: #151e26; }
.ss-button:disabled { opacity: .35; cursor: default; }
.ss-icon-button { width: 44px; padding: 10px; flex-shrink: 0; }
.ss-icon-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ss-sidebar {
  width: var(--ss-sidebar-width); flex-shrink: 0; display: flex; flex-direction: column;
  padding: max(28px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  background: var(--ss-sidebar); border-right: 1px solid var(--ss-border); z-index: 40; overflow-y: auto;
}
.ss-sidebar-brand { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 38px; }
.ss-brand { display: flex; align-items: center; gap: 10px; color: var(--ss-text) !important; text-decoration: none; font-size: 16px; font-weight: 650; line-height: 1.15; }
.ss-brand-mark { display: grid; place-items: center; width: 32px; height: 36px; color: var(--ss-accent); }
.ss-brand-mark .ss-icon { width: 30px; height: 30px; }
.ss-brand-sub { display: block; margin-top: 5px; font-size: 9px; letter-spacing: .25em; color: var(--ss-muted); }
/* Frame the supplied artwork without modifying its pixels. Lighten blends its
   dark matte into this dark shell; transparent exports can replace it later. */
.ss-artwork { display: inline-block; position: relative; overflow: hidden; flex-shrink: 0; mix-blend-mode: lighten; pointer-events: none; }
.ss-artwork > img { position: absolute; display: block; max-width: none; height: auto; }
.ss-artwork--symbol { aspect-ratio: 1; }
.ss-artwork--symbol > img { width: 179.655%; left: -39.828%; top: -37.822%; }
.ss-artwork--simulations { aspect-ratio: 1; }
.ss-artwork--simulations > img { width: 191.159%; left: -45.732%; top: -43.75%; }
.ss-artwork--wordmark { aspect-ratio: 1850 / 340; }
.ss-artwork--wordmark > img { width: 117.405%; left: -8.649%; top: -54.412%; }
.ss-icon.ss-artwork--simulations { width: 24px; height: 24px; }
.ss-brand { flex: 1; min-width: 0; }
.ss-brand .ss-brand-mark { display: none; width: 40px; height: 40px; }
.ss-brand-wordmark { width: 220px; max-width: 100%; }
.ss-simulation-mark .ss-artwork--simulations { width: 32px; height: 32px; }
.ss-empty-mark .ss-artwork--simulations { width: 44px; height: 44px; }
.ss-sidebar-section-label { padding: 0 12px; margin-bottom: 9px; font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ss-muted); }
.ss-resources-label { margin-top: 32px; }
.ss-navigation { display: grid; gap: 4px; }
.ss-v2 .ss-nav-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 11px 12px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ss-muted) !important; }
.ss-nav-link:not(:disabled):hover { background: var(--ss-surface); color: var(--ss-text) !important; }
.ss-nav-link:disabled { opacity: .65; cursor: default; }
.ss-nav-link.is-current { background: #f3ae5511; color: var(--ss-accent) !important; box-shadow: inset 2px 0 var(--ss-accent); }
.ss-sidebar-bottom { margin-top: auto; padding-top: 36px; }
.ss-account { position: relative; border-top: 1px solid var(--ss-border); margin: 16px 10px 12px; padding-top: 16px; min-width: 0; }
.ss-account > summary { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
.ss-account > summary::-webkit-details-marker { display: none; }
.ss-account-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--ss-surface); color: var(--ss-muted); }
.ss-account-icon small { position: absolute; bottom: -3px; padding: 2px 3px; border-radius: 3px; color: var(--ss-accent); background: var(--ss-sidebar); font-size: 9px; }
.ss-account-label { min-width: 0; }
.ss-account-label small { color: var(--ss-muted); font-size: 11px; }
.ss-account strong { display: block; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-account-menu { padding: 16px; background: var(--ss-sidebar); border: 1px solid var(--ss-border); border-radius: 10px; box-shadow: 0 12px 40px #0005; }
.ss-account-menu > small, .ss-account-menu p { display: block; color: var(--ss-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.ss-account-menu > strong { font-size: 14px; }
.ss-account-menu > small { margin: 8px 0; }
.ss-account-menu > a, .ss-account-menu form > button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ss-text); text-decoration: none; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.ss-account-menu > a:hover, .ss-account-menu form > button:hover { background: var(--ss-surface); }
.ss-preview-label { display: block; margin-left: 10px; color: var(--ss-muted); font-size: 10px; letter-spacing: .04em; }
.ss-nav-trigger, .ss-nav-close, .ss-nav-backdrop { display: none; }
.ss-main { position: relative; flex: 1; min-width: 0; min-height: 0; }
.ss-main:focus { outline: none; }
.ss-notice { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-surface); }
.ss-notice > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ss-notice > .ss-button { margin: -6px -10px -6px 0; }
.ss-flashes { position: absolute; right: 16px; top: 80px; width: min(420px, calc(100% - 32px)); display: grid; gap: 8px; z-index: 25; pointer-events: none; }
.ss-flashes > .ss-notice { margin-bottom: 0; pointer-events: auto; }
.ss-main--scroll > .ss-flashes { position: static; width: auto; max-width: 1100px; margin: 24px auto 0; padding: 0 clamp(24px, 4vw, 56px); }
.ss-canvas-workspace { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ss-canvas {
  position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none;
  background-color: var(--ss-bg); user-select: none;
  background-image: linear-gradient(#3c506038 1px, transparent 1px), linear-gradient(90deg, #3c506038 1px, transparent 1px), linear-gradient(#34465422 1px, transparent 1px), linear-gradient(90deg, #34465422 1px, transparent 1px);
}
.ss-canvas.is-panning { cursor: grabbing; }
.ss-canvas.is-grid-hidden { background-image: none; }
.ss-v2 .ss-canvas:focus-visible { outline: none; }
.ss-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.ss-world-layer { position: absolute; top: 0; left: 0; }
.ss-regions { z-index: 1; }
.ss-regions { overflow: visible; width: 1px; height: 1px; opacity: .24; pointer-events: none; }
.ss-canvas.ss-paint-mode { cursor: crosshair; }
.ss-paint-mode .ss-grid-node { cursor: crosshair; }
.ss-paint-mode.ss-paint-pan-ready, .ss-paint-mode.ss-paint-pan-ready .ss-grid-node { cursor: grab; }
.ss-canvas.ss-paint-mode.is-panning, .ss-paint-mode.is-panning .ss-grid-node { cursor: grabbing; }
.ss-paint-tools { position: relative; }
.ss-paint-tools > button[aria-pressed=true] { background: var(--ss-accent); color: var(--ss-bg); }
.ss-paint-panel { position: absolute; z-index: 50; left: 0; bottom: calc(100% + 12px); width: min(300px, calc(100vw - 24px)); padding: 14px; background: var(--ss-sidebar); border: 1px solid var(--ss-border); border-radius: 10px; box-shadow: 0 6px 28px #0008; }
.ss-paint-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-paint-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ss-v2 .ss-paint-swatches button { width: 32px; height: 32px; padding: 0; border: 3px solid transparent; border-radius: 50%; background: var(--ss-swatch, var(--ss-surface)); background-clip: padding-box; cursor: pointer; color: var(--ss-text); }
.ss-v2 .ss-paint-swatches button[aria-pressed=true] { outline: 2px solid var(--ss-text); outline-offset: 1px; }
.ss-paint-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-paint-options:has(label[hidden]) { grid-template-columns:1fr; }
.ss-paint-options label { color: var(--ss-muted); font-size: 11px; }
.ss-v2 .ss-paint-options select { display: block; margin-top: 6px; width: 100%; min-height: 36px; border: 1px solid var(--ss-border); border-radius: 5px; background: var(--ss-surface); color: var(--ss-text); padding: 6px; }
.ss-paint-panel p { margin-top: 12px; font-size: 11px; line-height: 1.5; color: var(--ss-muted); }
.ss-paint-panel kbd { color:var(--ss-text); font:inherit; }
.ss-paint-status { display:block; margin-top:8px; font-size:11px; color:var(--ss-muted); }
@media (max-width: 560px) { .ss-paint-panel { position: fixed; left: 12px; bottom: 64px; } }
.ss-links { z-index: 2; }
.ss-nodes { z-index: 3; }
.ss-canvas-heading { position: absolute; top: max(26px, env(safe-area-inset-top)); left: max(28px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 14px; pointer-events: none; }
.ss-canvas-heading h1 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.ss-canvas-heading p { color: var(--ss-muted); font-size: 12px; margin-top: 3px; }
.ss-canvas-heading button { pointer-events: auto; }
.ss-canvas-controls { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; padding: 4px; gap: 2px; background: #202b35f5; border: 1px solid var(--ss-border); border-radius: 8px; box-shadow: 0 4px 16px #0003; }
.ss-control-divider { width: 1px; height: 20px; background: var(--ss-border); margin: 0 2px; }
.ss-grid-toggle[aria-pressed="true"] { color: var(--ss-accent); background: #f3ae550d; }
.ss-zoom { min-width: 48px; text-align: center; color: var(--ss-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ss-canvas-help { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); }
.ss-canvas-help summary { list-style: none; }
.ss-canvas-help summary::-webkit-details-marker { display: none; }
.ss-help-panel { position: absolute; left: 0; bottom: calc(100% + 12px); width: 324px; max-width: calc(100vw - 32px); padding: 20px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 8px; box-shadow: 0 8px 28px #0005; }
.ss-help-panel h2 { font-size: 14px; font-weight: 600; }
.ss-help-panel dl { margin: 16px 0; font-size: 12px; }
.ss-help-panel dt { margin-top: 14px; color: var(--ss-text); font-weight: 600; }
.ss-help-panel dd { margin: 4px 0 0; color: var(--ss-muted); }
.ss-help-panel p { padding-top: 12px; border-top: 1px solid var(--ss-border); color: var(--ss-muted); font-size: 11px; }
@media (max-width: 959px) {
  .ss-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(288px, calc(100vw - 32px)); transform: translateX(-100%); padding-left: max(16px, env(safe-area-inset-left)); visibility: hidden; }
  .ss-nav-open .ss-sidebar { transform: none; visibility: visible; }
  .ss-sidebar-brand { margin-bottom: 30px; }
  .ss-nav-trigger, .ss-nav-close { display: inline-flex; }
  .ss-nav-backdrop { position: fixed; inset: 0; display: block; border: 0; background: #0009; z-index: 30; }
  .ss-canvas-heading { left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); }
  .ss-canvas-controls { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .ss-canvas-help { left: max(16px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media (max-width: 539px) {
  .ss-canvas-controls { right: max(12px, env(safe-area-inset-right)); }
  .ss-grid-toggle { width: 44px; padding: 10px; }
  .ss-grid-toggle > span, .ss-canvas-help summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ss-canvas-help summary { width: 44px; padding: 10px; }
  .ss-canvas-help { left: max(8px, env(safe-area-inset-left)); }
  .ss-help-panel { left: 8px; bottom: calc(100% + 18px); }
  .ss-canvas-controls { gap: 0; }
  .ss-control-divider { margin: 0; }
}

/* Simulations share the shell and controls, while the canvas stays full height. */
.ss-main--scroll { overflow-y: auto; }
.ss-page { max-width: 1440px; margin: 0 auto; padding: clamp(24px, 4vw, 56px); }
.ss-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.ss-page-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ss-page-title h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; margin-top: 5px; }
.ss-eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ss-muted); }
.ss-list-intro { color: var(--ss-muted); font-size: 12px; margin-bottom: 20px !important; }
.ss-simulations-welcome { padding: 24px; margin-bottom: 28px; border: 1px solid var(--ss-border); border-radius: 12px; background: var(--ss-surface); }
.ss-simulations-welcome h2 { font-size: 21px; line-height: 1.35; }
.ss-simulations-welcome > p { margin-top: 8px; color: var(--ss-muted); }
.ss-welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ss-welcome-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 24px 0; list-style: none; }
.ss-welcome-features li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: start; gap: 6px 10px; }
.ss-welcome-features .ss-icon { color: var(--ss-accent); }
.ss-welcome-features strong { align-self: center; }
.ss-welcome-features li > span:not(.ss-icon) { grid-column: 2; color: var(--ss-muted); font-size: 12px; }
.ss-page-footer { display: flex; justify-content: flex-end; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--ss-border); font-size: 12px; }
.ss-page-footer a { color: var(--ss-muted); }
.ss-page-footer a:hover { color: var(--ss-accent); }
.ss-membership-page { max-width: 1100px; }
.ss-membership-intro { font-size: 18px; line-height: 1.6; max-width: 650px; margin-bottom: 28px !important; }
.ss-support-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); align-items: start; gap: 40px; margin: 36px 0; }
.ss-support-story h2 { font-size: 22px; margin-bottom: 16px; line-height: 1.4; }
.ss-support-story > p { color: var(--ss-muted); line-height: 1.8; margin-bottom: 20px; }
.ss-support-reasons { display: grid; gap: 24px; list-style: none; padding: 0; margin: 28px 0; }
.ss-support-reasons li { display: flex; align-items: start; gap: 16px; }
.ss-support-reasons .ss-icon { flex-shrink: 0; color: var(--ss-accent); width: 24px; height: 24px; }
.ss-support-reasons strong { display: block; margin-bottom: 6px; }
.ss-support-reasons p { color: var(--ss-muted); line-height: 1.6; }
.ss-membership-plan { border: 1px solid var(--ss-border); border-radius: 12px; background: var(--ss-surface); padding: 28px; }
.ss-membership-plan--member { border-color: var(--ss-accent); }
.ss-membership-plan h2 { font-size: 28px; margin: 12px 0 !important; }
.ss-membership-plan > p { color: var(--ss-muted); line-height: 1.6; }
.ss-membership-plan .ss-button { margin-top: 20px; }
.ss-membership-prices { display: flex; flex-wrap: wrap; gap: 20px; margin: 24px 0 16px; }
.ss-membership-prices strong { font-size: 28px; }
.ss-membership-prices small { display: block; color: var(--ss-accent); margin-top: 4px; }
.ss-membership-checkout-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ss-membership-test-notice { padding: 16px 20px; margin-bottom: 24px; border: 1px solid var(--ss-accent); border-radius: 8px; line-height: 1.5; }
.ss-membership-status { padding: 20px; margin-bottom: 24px; border: 1px solid var(--ss-border); border-radius: 8px; }
.ss-membership-status h2 { margin: 0 0 12px !important; font-size: 20px; }
.ss-membership-status p { margin: 8px 0 !important; }
.ss-membership-plan .ss-support-optional { margin-top: 20px; font-size: 11px; }
@media (max-width: 700px) { .ss-support-layout, .ss-welcome-features { grid-template-columns: 1fr; } .ss-support-layout { gap: 28px; } .ss-support-layout .ss-membership-plan { grid-row: 1; } .ss-membership-plan { padding: 22px; } .ss-simulations-welcome { padding: 20px; } }
.ss-simulation-list { display: grid; gap: 16px; }
.ss-simulation-row { padding: 24px; border: 1px solid var(--ss-border); border-radius: 10px; background: #1a252e; }
.ss-simulation-card-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 24px; }
.ss-simulation-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.ss-simulation-stats { grid-column: 1; grid-row: 2; }
.ss-simulation-overview > .ss-row-actions { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; flex-wrap: wrap; }
.ss-simulation-preview { min-width: 0; }
.ss-simulation-preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 6px; color: var(--ss-muted); font-size: 10px; }
.ss-simulation-preview-heading > div { display: flex; gap: 2px; border: 1px solid var(--ss-border); border-radius: 5px; padding: 2px; }
.ss-simulation-preview-heading button { border: 0; border-radius: 3px; padding: 3px 8px; background: transparent; color: var(--ss-muted); font: inherit; cursor: pointer; }
.ss-simulation-preview-heading button[aria-pressed=true] { background: var(--ss-raised); color: var(--ss-text); }
.ss-simulation-preview-image { display: block; overflow: hidden; height: 136px; border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-bg); }
.ss-simulation-preview-image:hover { border-color: var(--ss-accent); }
.ss-simulation-preview-map { display: block; width: 100%; height: 100%; }
.ss-simulation-preview-node rect { fill: var(--ss-surface); stroke: var(--ss-muted); stroke-width: .75; vector-effect: non-scaling-stroke; }
.ss-simulation-preview-node.is-resource rect { fill: #669aff26; stroke: #669aff; }
.ss-simulation-preview-belt { fill: none; stroke: var(--ss-flow-good); stroke-width: 1; stroke-opacity: .6; vector-effect: non-scaling-stroke; }
.ss-simulation-preview-belt.is-shortage { stroke: var(--ss-flow-bad); }
.ss-simulation-preview-paint { opacity: .24; }
.ss-simulation-preview-label { fill: var(--ss-text); font-weight: 600; letter-spacing: -.01em; }
.ss-simulation-preview-empty { fill: var(--ss-muted); font-size: 28px; }
.ss-simulation-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ss-simulation-mark { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; background: #f3ae550b; color: var(--ss-accent); border-radius: 8px; }
.ss-simulation-identity > div { min-width: 0; }
.ss-simulation-identity h2 { font-size: 17px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.ss-simulation-identity h2 a { color: var(--ss-text); text-decoration: none; }
.ss-simulation-identity h2 a:hover { color: var(--ss-accent); }
.ss-simulation-identity p { margin-top: 5px; color: var(--ss-muted); font-size: 11px; }
.ss-simulation-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; }
.ss-simulation-stats dt { font-size: 11px; color: var(--ss-muted); margin-bottom: 7px; }
.ss-simulation-stats dd { margin: 0; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-simulation-stats dd span { font-size: 11px; font-weight: 400; color: var(--ss-muted); }
.ss-generated-power { display: block; margin-top: 5px; color: var(--ss-muted); font-size: 11px; }
.ss-row-actions { display: flex; align-items: center; gap: 6px; }
.ss-row-actions .ss-simulation-delete-trigger { width: 100%; }
.ss-simulation-delete-trigger { color: var(--ss-flow-bad); }
.ss-simulation-delete-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.ss-simulation-delete-dialog > p { margin: 0 0 20px; color: var(--ss-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.ss-simulation-delete-dialog > p strong { color: var(--ss-text); }
.ss-simulation-delete-dialog form { display: grid; gap: 8px; margin: 0; }
.ss-simulation-delete-dialog label { color: var(--ss-muted); font-size: 12px; }
.ss-simulation-delete-dialog input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-bg); color: var(--ss-text); font: inherit; }
.ss-simulation-delete-dialog input:focus { outline: 2px solid var(--ss-accent); outline-offset: 2px; }
.ss-simulation-delete-dialog .ss-form-actions { justify-content: flex-end; margin-top: 16px; }
.ss-simulation-delete-confirm { color: var(--ss-flow-bad); border-color: var(--ss-flow-bad); }
.ss-settings-delete { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ss-border); }
.ss-row-empty-note { color: var(--ss-muted); font-size: 11px; border-top: 1px solid #33424d80; padding-top: 16px; margin-top: 20px !important; }
.ss-simulation-details { margin-top: 20px; border-top: 1px solid var(--ss-border); }
.ss-simulation-details summary { display: flex; align-items: center; gap: 16px; min-height: 44px; color: var(--ss-accent); font-size: 12px; cursor: pointer; }
.ss-simulation-details summary::before { content: "+"; font-size: 18px; }
.ss-simulation-details[open] summary::before { content: "−"; }
.ss-simulation-details summary span { margin-left: auto; color: var(--ss-muted); font-size: 11px; }
.ss-production-details { padding: 8px 0; color: var(--ss-muted); font-size: 12px; }
.ss-production-details h3 { margin: 20px 0 10px; font-size: 12px; color: var(--ss-text); }
.ss-output-items { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-output-items > span { display: flex; align-items: center; gap: 8px; background: var(--ss-surface); border-radius: 6px; padding: 6px 10px; }
.ss-output-items strong { color: var(--ss-text); font-weight: 500; }
.ss-list-empty { max-width: 600px; margin: clamp(48px, 12vh, 120px) auto; text-align: center; }
.ss-empty-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 24px; border: 1px solid var(--ss-border); border-radius: 12px; color: var(--ss-accent); }
.ss-empty-mark .ss-icon { width: 30px; height: 30px; }
.ss-list-empty h2 { font-size: 22px; margin-bottom: 12px; font-weight: 600; }
.ss-list-empty p { max-width: 48ch; margin: 0 auto; color: var(--ss-muted); }
.ss-list-empty .ss-small-note { margin-top: 24px; font-size: 12px; }
.ss-form-panel { max-width: 540px; padding: 28px; border: 1px solid var(--ss-border); border-radius: 10px; background: #1a252e; }
.ss-form-panel label { display: block; margin-bottom: 10px; font-weight: 600; }
.ss-form-panel input[type="text"] { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #60727e; border-radius: 6px; color: var(--ss-text); background: var(--ss-sidebar); }
.ss-form-panel p { margin-top: 10px; color: var(--ss-muted); font-size: 12px; }
.ss-form-actions { display: flex; gap: 10px; margin-top: 28px; }
.ss-form-errors { margin-bottom: 20px; padding: 12px; border-left: 2px solid #ff9c8b; background: #ff9c8b0a; color: #ffbaad; }
.ss-account-page { max-width: 840px; }
.ss-account-form { max-width: none; }
.ss-account-section + .ss-account-section, .ss-account-confirm { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ss-border); }
.ss-account-section h2, .ss-account-danger h2 { font-size: 16px; font-weight: 600; }
.ss-account-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.ss-account-form .ss-account-fields > div, .ss-account-danger > div { min-width: 0; }
.ss-account-form input:not([type=hidden]):not([type=checkbox]) { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #60727e; border-radius: 6px; color: var(--ss-text); background: var(--ss-sidebar); }
.ss-account-form .field_with_errors input { border-color: var(--ss-flow-bad, #ff9c8b); }
.ss-account-form .ss-form-errors ul { padding-left: 20px; margin-bottom: 0; }
.ss-account-danger { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 24px 28px; border: 1px solid var(--ss-border); border-radius: 10px; }
.ss-account-danger p { margin-top: 6px; color: var(--ss-muted); font-size: 12px; }
.ss-account-delete { color: var(--ss-flow-bad, #ff9c8b); border-color: var(--ss-flow-bad, #ff9c8b); }
.ss-auth-page { max-width: 520px; }
.ss-auth-form form { display: grid; gap: 20px; }
.ss-auth-form .ss-form-errors { margin: 0; }
.ss-auth-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ss-auth-form .ss-auth-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.ss-auth-check input { width: 18px; height: 18px; accent-color: var(--ss-accent); }
.ss-auth-links { margin: 24px 0 12px !important; color: var(--ss-muted); }
@media (max-width: 599px) {
  .ss-account-fields { grid-template-columns: minmax(0, 1fr); }
  .ss-account-danger { flex-direction: column; align-items: flex-start; padding: 20px 16px; }
}
.ss-canvas-heading { right: 80px; }
.ss-canvas-title { min-width: 0; }
.ss-canvas-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-canvas-heading a, .ss-canvas-heading button { pointer-events: auto; }
.ss-canvas-breadcrumb { font-size: 11px; margin-top: 5px; }
.ss-canvas-breadcrumb > a { color: var(--ss-muted); }
.ss-view-warning { position: absolute; top: max(88px, calc(env(safe-area-inset-top) + 72px)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); width: fit-content; max-width: calc(100% - 32px); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-surface); color: var(--ss-text); font-size: 12px; z-index: 5; }
.ss-save-action { border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-surface); min-height: 44px; padding: 8px 12px; color: var(--ss-accent); cursor: pointer; }
.ss-canvas-rename { position: absolute; right: max(20px, env(safe-area-inset-right)); top: max(22px, env(safe-area-inset-top)); }
.ss-editor-toolbar { position: absolute; top: max(88px, calc(env(safe-area-inset-top) + 72px)); left: max(24px, env(safe-area-inset-left)); display: flex; gap: 8px; }
.ss-editor-tray { position: fixed; z-index: 50; inset: 0 auto 0 0; width: 320px; display: flex; flex-direction: column; background: var(--ss-sidebar); border-right: 1px solid var(--ss-border); }
.ss-tray-heading { flex-shrink: 0; padding: 20px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--ss-border); }
.ss-tray-heading h2 { margin: 4px 0 0; font-size: 20px; font-weight: 600; }
.ss-tray-body { display: flex; flex: 1; flex-direction: column; padding: 16px; min-height: 0; }
.ss-add-palette, .ss-editor-tray fieldset { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.ss-editor-tray fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.ss-editor-tray label { display: block; margin: 14px 0 8px; font-size: 12px; font-weight: 600; }
.ss-editor-tray input[type="search"] { flex-shrink: 0; width: 100%; min-height: 44px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #60727e; border-radius: 6px; color: var(--ss-text); background: var(--ss-bg); font-size: 14px; }
.ss-kind-tabs { display: flex; flex-shrink: 0; padding: 4px; border: 1px solid var(--ss-border); border-radius: 8px; }
.ss-v2 .ss-kind-tab { min-height: 40px; flex: 1; background: transparent; color: var(--ss-muted); border: 0; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ss-kind-tab[aria-pressed="true"] { background: var(--ss-surface); color: var(--ss-accent); }
.ss-kind-tab:disabled { cursor: default; }
.ss-image-picker { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px; overflow-y: auto; overscroll-behavior: contain; }
.ss-v2 .ss-image-choice { min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-bg); text-align: center; color: var(--ss-text); font-size: 11px; line-height: 1.4; cursor: grab; touch-action: none; }
.ss-image-choice img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.ss-image-choice:hover, .ss-image-choice[aria-pressed="true"] { border-color: var(--ss-accent); background: #f3ae550a; }
.ss-palette-footer { display: flex; flex-shrink: 0; flex-direction: column; gap: 8px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--ss-border); }
.ss-palette-footer > span { min-height: 16px; color: var(--ss-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-recipe-preview { flex: 0 1 auto; min-height: 0; max-height: min(34dvh, 320px); overflow-y: auto; overscroll-behavior: contain; margin-top: 12px; border-top: 1px solid var(--ss-border); padding-top: 12px; }
.ss-recipe-summary { display: flex; flex-direction: column; gap: 6px; }
.ss-recipe-title { font-size: 13px; line-height: 1.4; }
.ss-recipe-machine { color: var(--ss-muted); font-size: 11px; }
.ss-recipe-ports { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.ss-recipe-ports h3 { margin: 0 0 6px; font-size: 11px; font-weight: 500; color: var(--ss-muted); }
.ss-recipe-ports ul { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.ss-recipe-port { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 11px; line-height: 1.4; }
.ss-recipe-port img { width: 24px; height: 24px; object-fit: contain; }
.ss-recipe-rate { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-quick-dialog .ss-recipe-ports { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ss-recipe-preview:not([hidden]) + .ss-palette-footer > [data-v2-editor-target=choiceLabel] { display: none; }
@media(max-width: 959px) {
  .ss-editor-tray .ss-recipe-preview { max-height: min(28dvh, 220px); margin-top: 8px; padding-top: 8px; }
  .ss-recipe-ports { gap: 8px; }
}
@media(max-width: 440px) { .ss-quick-dialog .ss-recipe-ports { grid-template-columns: minmax(0, 1fr); } }
.ss-choice-label small { display: block; margin-top: 3px; color: var(--ss-muted); font-size: 10px; }
.ss-picker-note { flex-shrink: 0; color: var(--ss-muted); font-size: 11px; margin-top: 8px !important; }
.ss-picker-note:empty { display: none; }
.ss-palette-hint { flex-shrink: 0; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--ss-border); font-size: 11px; line-height: 1.6; color: var(--ss-muted); }
.ss-tray-note { flex-shrink: 0; color: var(--ss-muted); font-size: 12px; line-height: 1.6; }
.ss-tray-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 8px; padding-top: 16px; padding-bottom: max(0px, env(safe-area-inset-bottom)); }
.ss-remove-object { color: #ffa999; }
.ss-editor-error { position: absolute; z-index: 20; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); top: max(146px, calc(env(safe-area-inset-top) + 130px)); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 540px; padding: 12px 14px; background: var(--ss-surface); border: 1px solid #a06e41; border-radius: 8px; font-size: 12px; }
.ss-draft-changes { display: grid; flex: 1; min-height: 0; align-content: start; gap: 12px; margin-top: 16px; overflow-y: auto; overscroll-behavior: contain; }
.ss-draft-change { padding: 14px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-bg); }
.ss-draft-change-title { display: flex; align-items: center; gap: 8px; }
.ss-draft-change-title img { object-fit: contain; }
.ss-draft-change-title strong { flex: 1; font-size: 12px; font-weight: 500; }
.ss-draft-change-title > span { font-size: 10px; color: var(--ss-accent); text-transform: capitalize; }
.ss-draft-change p { color: var(--ss-muted); font-size: 11px; overflow-wrap: anywhere; margin-top: 10px !important; }
.ss-review-overview { margin: 0; padding: 10px 14px; border: 1px dashed var(--ss-border); border-radius: 8px; color: var(--ss-muted); font-size: 11px; }
.ss-help-arrange { border-top: 1px solid var(--ss-border); padding-top: 12px; margin-top: 12px; }
.ss-help-arrange p { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--ss-muted); }
.ss-review-count { padding: 6px 12px; border: 1px solid var(--ss-border); border-radius: 20px; background: var(--ss-surface); font-size: 12px; }
.ss-review-count--added { color: var(--ss-flow-good); }
.ss-review-count--edited { color: var(--ss-accent); }
.ss-review-count--removed { color: var(--ss-flow-bad); }
.ss-review-group { display:grid; gap:8px; min-width:0; }
.ss-review-group-title { display:flex; align-items:center; gap:8px; font-size:12px; margin:0; padding:6px 0; border-bottom:1px solid var(--ss-border); }
.ss-review-group-title > span { color:var(--ss-muted); font-size:11px; font-weight:400; }
.ss-review-belt { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); align-items:center; gap:6px; margin-top:8px; }
.ss-review-endpoint { display:flex; align-items:center; gap:6px; min-width:0; padding:5px 7px; border:1px solid var(--ss-border); border-radius:5px; font-size:11px; }
.ss-review-endpoint img { flex-shrink:0; object-fit:contain; }
.ss-review-endpoint > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-review-belt-arrow { color:var(--ss-muted); text-align:center; font-size:18px; }
.ss-review-comparison { display: grid; grid-template-columns: 120px minmax(0, 1fr) 20px minmax(0, 1fr); align-items: baseline; gap: 8px; margin-top: 10px; font-size: 12px; overflow-wrap: anywhere; }
.ss-review-comparison strong { font-weight: 500; color: var(--ss-muted); }
.ss-review-before { color: var(--ss-muted); white-space: pre-wrap; }
.ss-review-after { white-space: pre-wrap; }
.ss-review-arrow { color: var(--ss-accent); text-align: center; }
@media (max-width: 560px) {
  .ss-review-endpoint > span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
  .ss-review-comparison { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
  .ss-review-comparison strong { grid-column: 1 / -1; }
}
.ss-grid-node { position: absolute; left: 0; top: 0; width: 240px; touch-action: none; }
.ss-grid-node--factory { width: 288px; }
.ss-grid-node.is-selected { z-index: 1; }
.ss-v2 .ss-node-body { width: 100%; padding: 12px; border: 1px solid #60727e; border-radius: 9px; background: #202b35f5; color: var(--ss-text); cursor: grab; font-size: 12px; line-height: 1.5; touch-action: none; box-shadow: 0 4px 14px #0003; }
.ss-node-body:active { cursor: grabbing; }
.ss-grid-node.is-selected > .ss-node-body { border-color: var(--ss-accent); outline: 1px solid var(--ss-accent); outline-offset: 3px; }
.ss-card-header { display: flex; gap: 8px; align-items: center; }
.ss-v2 .ss-node-select { display: flex; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: grab; touch-action: none; }
.ss-node-select img { object-fit: contain; pointer-events: none; }
.ss-card-identity { flex: 1; min-width: 0; }
.ss-node-title { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ss-card-machine { display: block; margin-top: 3px; color: var(--ss-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-card-field[data-inactive] { pointer-events: none; }
.ss-card-field[data-inactive] input, .ss-card-field[data-inactive] select { border-color: transparent; background: transparent; opacity: 1; color: var(--ss-text); appearance: none; }
.ss-resource-unlimited[data-inactive] { pointer-events: none; }
.ss-node-body { outline: 1px solid #60727e50; outline-offset: 3px; }
.ss-grid-node--stamp:not(.is-selected) > .ss-node-body { outline-color: transparent; }
.ss-card-power { align-self: start; margin-top: 4px; padding: 3px 5px; background: #111a24; border-radius: 4px; white-space: nowrap; font-size: 10px; }
.ss-card-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 10px 0; border-top: 1px solid #42525f; border-bottom: 1px solid #42525f; }
.ss-card-field, .ss-card-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-card-field > span, .ss-card-stat > span { font-size: 9px; color: var(--ss-muted); white-space: nowrap; }
.ss-card-stat strong { display: flex; align-items: center; min-height: 28px; font-size: 12px; font-weight: 500; }
.ss-card-field input, .ss-card-field select { width: 100%; min-width: 0; min-height: 28px; padding: 3px 6px; border: 1px solid #60727e; border-radius: 4px; background: var(--ss-bg); color: var(--ss-text); font-size: 12px; }
.ss-card-field input[type="text"] { font-size: 13px; }
.ss-card-field input::placeholder { opacity: 1; color: var(--ss-text); }
.ss-card-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ss-card-ports { min-width: 0; }
.ss-card-ports h3 { margin: 0 0 6px; font-size: 9px; font-weight: 500; color: var(--ss-muted); text-transform: uppercase; letter-spacing: .05em; }
.ss-port-outputs { padding-left: 10px; border-left: 1px solid #42525f; }
.ss-rate-detail { grid-column: 1 / -1; display: block; min-height: 27px; margin-top: 3px; font-size: 9px; color: var(--ss-muted); line-height: 1.4; }
.ss-card-routing { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; padding-top: 10px; margin-top: 10px; border-top: 1px solid #42525f; }
.ss-v2 .ss-port-rotate { min-height: 28px; padding: 3px 6px; border: 1px solid var(--ss-border); border-radius: 4px; color: var(--ss-muted); background: var(--ss-bg); cursor: pointer; font-size: 11px; }
.ss-port-rotate:disabled { visibility: hidden; }
.ss-node-status { height: 22px; padding-top: 7px; font-size: 10px; color: #9ad9cd; white-space: nowrap; }
.ss-grid-node.has-shortage > .ss-node-body { border-color: #c46f62; }
.ss-grid-node.has-shortage .ss-node-status { color: #f19f91; }
.ss-grid-node[data-flow-status="ready"].has-missing-ports .ss-node-status { color: var(--ss-accent); }
.ss-grid-node.is-related > .ss-node-body { outline-color: #8dd5c780; }
.ss-grid-node.is-selected > .ss-node-body { border-color: var(--ss-accent); outline-color: var(--ss-accent); }
.ss-v2 .ss-port-connector { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 3px; border: 1px solid #78bfb4; border-radius: 7px; background: var(--ss-sidebar); color: #9ad9cd; cursor: crosshair; touch-action: none; }
.ss-port-connector img { width: 24px; height: 24px; object-fit: contain; pointer-events: none; }
.ss-port-connector--left { left: -24px; transform: translate(-50%, -50%); }
.ss-port-connector--right { right: -24px; transform: translate(50%, -50%); }
.ss-port-connector--top { top: -24px; transform: translate(-50%, -50%); }
.ss-port-connector--bottom { bottom: -24px; transform: translate(-50%, 50%); }
.ss-port-connector.is-unconnected { border-style: dashed; }
.ss-port-connector.is-link-anchor { outline: 2px solid var(--ss-port-color); outline-offset: 3px; }
.ss-port-direction { position: absolute; bottom: -6px; right: -4px; display: flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: var(--ss-sidebar); font-size: 16px; line-height: 1; }
.ss-belt-paths { overflow: visible; position: absolute; pointer-events: none; }
.ss-belt { fill: none; stroke: light-dark(#30786a, #8dd5c7); stroke-opacity: .65; stroke-width: calc(2.5px / var(--ss-canvas-scale, 1)); stroke-linejoin: round; pointer-events: stroke; cursor: pointer; }
.ss-belt.is-shortage { stroke: light-dark(#b45340, #ef8f80); }
.ss-belt.is-related { stroke-width: calc(3px / var(--ss-canvas-scale, 1)); }
.ss-belt.is-selected { stroke: var(--ss-accent); stroke-opacity: 1; stroke-width: calc(3px / var(--ss-canvas-scale, 1)); }
.ss-belt-preview { stroke: var(--ss-accent); stroke-dasharray: 6 5; pointer-events: none; }
/* The world uses a CSS transform, outside SVG's non-scaling-stroke coordinate
   system. Compensate explicitly so stroke, dash spacing and speed stay visible. */
.ss-belt-flow { fill: none; stroke: light-dark(#174b42, #f0fffa); stroke-width: calc(3.5px / var(--ss-canvas-scale, 1)); stroke-linecap: round; stroke-dasharray: calc(var(--ss-belt-flow-dash) / var(--ss-canvas-scale, 1)) calc(var(--ss-belt-flow-gap) / var(--ss-canvas-scale, 1)); pointer-events: none; animation: ss-belt-flow var(--ss-belt-flow-duration) linear infinite; }
.ss-belt-flow.is-shortage { stroke: light-dark(#7d3322, #fff1e8); }
.ss-belt-flow.is-selected { stroke: light-dark(#704712, #fff8dc); }
@keyframes ss-belt-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(-1 * var(--ss-belt-flow-period) / var(--ss-canvas-scale, 1)); } }
.ss-grid-node.is-dimmed, .ss-belt.is-dimmed, .ss-belt-flow.is-dimmed, .ss-belt-label.is-dimmed, .ss-belt-waypoint.is-dimmed { opacity: .42; }
@media (prefers-reduced-motion: reduce) { .ss-belt-flow { display: none; animation: none; } }
.ss-v2 .ss-belt-label { position: absolute; display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #4c8078; border-radius: 6px; background: var(--ss-sidebar); color: light-dark(#235c51, #c3eee7); font-size: 10px; line-height: 1.3; white-space: nowrap; transform: translate(-50%, -50%); cursor: pointer; }
.ss-belt-label img { width: 22px; height: 22px; object-fit: contain; }
.ss-belt-label.is-shortage { color: light-dark(#943d2f, #f2aca1); border-color: #a2645b; }
.ss-belt-label.is-selected { border-color: var(--ss-accent); outline: 1px solid var(--ss-accent); outline-offset: 2px; }
.ss-belt-direction { width: 16px; flex-shrink: 0; font-size: 17px; text-align: center; }
.ss-quick-context { flex-shrink: 0; font-size: 11px; line-height: 1.5; margin-bottom: 12px !important; color: var(--ss-accent); }
.ss-card-rate { display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: 5px; margin: 6px 0; font-size: 10px; }
.ss-card-rate img { grid-row: span 2; object-fit: contain; }
.ss-rate-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-card-rate strong { font-size: 11px; font-weight: 500; color: #d2e8f6; }
.ss-card-footnote { display: block; margin-top: 10px; font-size: 10px; text-align: right; color: var(--ss-muted); }
.ss-resource-supply { display: block; margin-top: 14px; color: #d2e8f6; font-weight: 500; }
.ss-grid-node--resource .ss-card-settings { grid-template-columns: 1fr 1fr; border-bottom: 0; padding-bottom: 0; }
.ss-resource-unlimited { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.ss-resource-unlimited input { accent-color: var(--ss-accent); width: 16px; height: 16px; }
.ss-grid-node--stamp .ss-node-body { height: 100%; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; box-shadow: none; }
.ss-grid-node--stamp .ss-node-select { width: 100%; height: 100%; }
.ss-grid-node--stamp .ss-node-select img { width: 100%; height: 100%; max-width: 100%; }
.ss-v2 .ss-stamp-resize { position: absolute; right: calc(-6px / var(--ss-canvas-scale, 1)); bottom: calc(-6px / var(--ss-canvas-scale, 1)); display: none; width: calc(24px / var(--ss-canvas-scale, 1)); height: calc(24px / var(--ss-canvas-scale, 1)); padding: 0; border: 0; border-radius: 3px; background: transparent; cursor: nwse-resize; touch-action: none; }
.ss-stamp-resize::after { content: ""; position: absolute; right: calc(4px / var(--ss-canvas-scale, 1)); bottom: calc(4px / var(--ss-canvas-scale, 1)); width: calc(10px / var(--ss-canvas-scale, 1)); height: calc(10px / var(--ss-canvas-scale, 1)); border-right: calc(2px / var(--ss-canvas-scale, 1)) solid var(--ss-accent); border-bottom: calc(2px / var(--ss-canvas-scale, 1)) solid var(--ss-accent); }
.ss-grid-node.is-selected > .ss-stamp-resize { display: block; }
.ss-stamp-tools { position: absolute; z-index: 2; top: calc(100% + 8px); left: 0; display: grid; grid-template-columns: 1fr 70px; gap: 10px; width: 220px; padding: 10px; border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-sidebar); transform: scale(calc(1 / var(--ss-canvas-scale, 1))); transform-origin: top left; }
.ss-selection-tools { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: 84px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-sidebar); font-size: 11px; }
.ss-selection-tools .ss-button { font-size: 11px; padding: 8px; }
.ss-selection-tools > span { margin-right: 4px; }
.ss-box-mode { cursor: crosshair; }
.ss-selection-box { position: absolute; pointer-events: none; z-index: 10; border: calc(2px / var(--ss-canvas-scale, 1)) solid var(--ss-accent); background: #f3ae5530; }
.ss-drop-active { box-shadow: inset 0 0 0 2px var(--ss-accent); }
.ss-placement-ghost { position: fixed; z-index: 80; pointer-events: none; display: flex; gap: 8px; align-items: center; max-width: 180px; padding: 8px; background: var(--ss-sidebar); border: 1px solid var(--ss-accent); border-radius: 8px; font-size: 11px; }
.ss-placement-ghost img { object-fit: contain; }
@media (min-width: 960px) {
  .ss-v2 { --ss-sidebar-width: 64px; }
  .ss-sidebar { padding: 24px 8px 16px; overflow: visible; }
  .ss-sidebar-brand { margin: 0 0 24px; justify-content: center; }
  .ss-brand > span:not(.ss-brand-mark), .ss-sidebar-section-label, .ss-preview-label, .ss-account-label { display: none; }
  .ss-brand { flex: none; }
  .ss-brand .ss-brand-mark { display: block; }
  .ss-nav-link { position: relative; justify-content: center; padding: 11px !important; }
  .ss-nav-link > span:not(.ss-artwork) { position: absolute; z-index: 60; left: 56px; top: 4px; padding: 9px 12px; white-space: nowrap; border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-sidebar); visibility: hidden; pointer-events: none; }
  .ss-nav-link:hover > span:not(.ss-artwork), .ss-nav-link:focus-visible > span:not(.ss-artwork) { visibility: visible; }
  .ss-navigation[aria-label="Resources"] { margin-top: 28px; }
  .ss-account { margin: 16px 0 0; padding-top: 16px; }
  .ss-account > summary { justify-content: center; }
  .ss-account-menu { position: fixed; z-index: 60; left: 72px; bottom: 16px; width: 288px; max-height: calc(100dvh - 32px); overflow-y: auto; }
  .ss-palette-open .ss-main { margin-left: 320px; }
  .ss-editor-tray { left: 64px; }
}
@media (pointer: coarse) {
  .ss-v2 .ss-port-connector { width: 44px; height: 44px; }
  .ss-v2 .ss-stamp-resize { width: calc(44px / var(--ss-canvas-scale, 1)); height: calc(44px / var(--ss-canvas-scale, 1)); right: calc(-16px / var(--ss-canvas-scale, 1)); bottom: calc(-16px / var(--ss-canvas-scale, 1)); }
  .ss-stamp-resize::after { right: calc(14px / var(--ss-canvas-scale, 1)); bottom: calc(14px / var(--ss-canvas-scale, 1)); }
  .ss-card-field input, .ss-card-field select { min-height: 36px; }
}
@media (max-width: 959px) {
  .ss-editor-tray { inset: auto 0 0; width: 100%; height: min(50%, 440px); border-right: 0; border-top: 1px solid var(--ss-border); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px #0004; }
  .ss-tray-heading { padding: 12px 16px; }
  .ss-tray-heading h2 { font-size: 18px; }
  .ss-tray-open .ss-canvas-controls, .ss-tray-open .ss-canvas-help, .ss-tray-open .ss-selection-tools { display: none; }
  .ss-editor-toolbar { left: max(16px, env(safe-area-inset-left)); gap: 6px; }
  .ss-editor-toolbar .ss-button { padding: 10px 12px; font-size: 12px; }
  .ss-selection-tools { left: max(16px, env(safe-area-inset-left)); }
  .ss-image-picker { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .ss-palette-hint { margin-top: 8px !important; padding-top: 8px; font-size: 10px; line-height: 1.4; }
  .ss-palette-footer { flex-direction: row; align-items: center; margin-top: 8px; padding-top: 8px; }
  .ss-palette-footer > span { flex: 1; }
  .ss-palette-hint br { display: none; }
  .ss-tray-body { padding-top: 12px; }
}
@media (max-width: 959px) and (max-height: 550px) and (orientation: landscape) {
  .ss-editor-tray { inset: 0 auto 0 0; width: min(320px, 45%); height: 100%; border-radius: 0; border-top: 0; border-right: 1px solid var(--ss-border); }
  .ss-palette-open .ss-main { margin-left: min(320px, 45%); }
  .ss-tray-heading .ss-eyebrow, .ss-palette-hint { display: none; }
}

@media (max-width: 1199px) {
  .ss-simulation-card-body { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
  .ss-simulation-overview { grid-template-columns: 1fr auto; }
  .ss-simulation-stats { grid-column: 1; grid-row: 2; }
  .ss-row-actions { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; }
}
@media (min-width: 600px) and (max-width: 1050px) {
  .ss-simulation-overview { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ss-simulation-overview > .ss-row-actions { grid-column: 1; grid-row: 3; flex-direction: row; }
}
@media (max-width: 599px) {
  .ss-simulation-card-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ss-simulation-preview-image { height: 156px; }
  .ss-simulation-preview-heading button { min-height: 30px; }
  .ss-simulation-overview > .ss-row-actions { flex-direction: row; }
  .ss-page { padding: 24px 16px max(24px, env(safe-area-inset-bottom)); }
  .ss-page-heading { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 24px; }
  .ss-page-title { align-items: center; }
  .ss-page-heading > .ss-button { align-self: start; }
  .ss-simulation-row { padding: 20px 16px; }
  .ss-simulation-overview { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .ss-simulation-stats { gap: 10px; }
  .ss-row-actions { flex-direction: row; justify-content: space-between; }
  .ss-simulation-details summary { align-items: start; padding: 12px 0; }
  .ss-simulation-details summary span { text-align: right; max-width: 45%; }
  .ss-form-panel { padding: 20px 16px; }
  .ss-form-actions { flex-wrap: wrap; }
  .ss-canvas-rename { right: max(12px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); }
}

.ss-canvas { cursor: all-scroll; }
.ss-canvas.is-panning { cursor: all-scroll; }
.ss-grid-node:hover > .ss-node-body { box-shadow: 0 0 0 1px #8dd5c750, 0 4px 14px #0003; }
.ss-v2 .ss-image-choice { min-width: 0; overflow: hidden; }
.ss-image-choice img { display: block; max-width: 100%; max-height: 40px; }
.ss-choice-label { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ss-raw-filter { display: flex !important; gap: 8px; align-items: center; margin: 0 0 10px !important; font-weight: 400 !important; }
.ss-raw-filter input { margin: 0; }
.ss-card-routing { grid-template-columns: 1fr 1fr; }
.ss-v2 .ss-port-rotate { width: 100%; font-size: 10px; }
.ss-port-rotate:disabled { visibility: visible; }
.ss-build-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 8px; }
.ss-notes-button { min-height: 28px; padding: 3px 8px; border: 1px solid var(--ss-border); border-radius: 4px; background: var(--ss-bg); color: var(--ss-muted); font-size: 11px !important; cursor: pointer; }
.ss-notes-button:disabled { visibility: hidden; }
.ss-editor-toolbar { flex-wrap: wrap; max-width: calc(100% - 48px); z-index: 4; }
.ss-canvas-controls > .ss-button { flex-shrink: 0; }
.ss-help-panel { width: min(640px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 170px)); overflow-y: auto; }
.ss-help-intro { margin: 8px 0 16px !important; color: var(--ss-muted); font-size: 11px; }
.ss-help-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ss-help-groups h3 { margin: 0 0 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ss-accent); }
.ss-help-rows { display: grid; gap: 10px; }
.ss-help-row { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.ss-key-combo { display: flex; align-items: center; gap: 4px; min-width: 78px; }
.ss-key-combo small { color: var(--ss-muted); }
.ss-key-combo kbd { display: inline-block; padding: 3px 6px; min-width: 24px; text-align: center; border: 1px solid #586976; border-bottom-width: 3px; border-radius: 4px; background: var(--ss-bg); color: var(--ss-text); font: 10px "Segoe UI", sans-serif; white-space: nowrap; }
.ss-dialog { border: 1px solid var(--ss-border); border-radius: 12px; padding: 24px; background: var(--ss-sidebar); color: var(--ss-text); box-shadow: 0 16px 60px #0009; }
.ss-dialog::backdrop { background: #060c12b0; backdrop-filter: blur(3px); }
.ss-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; margin-bottom: 16px; }
.ss-dialog-heading h2 { font-size: 20px; overflow-wrap: anywhere; }
.ss-delete-dialog { width: min(480px, calc(100vw - 24px)); }
.ss-support-reminder { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; border-top: 3px solid var(--ss-accent); }
.ss-support-reminder .ss-dialog-heading { margin-bottom: 12px; }
.ss-support-reminder .ss-eyebrow { margin: 0; }
.ss-support-reminder h2 { margin-bottom: 12px; font-size: 24px; line-height: 1.25; }
.ss-support-reminder p { color: var(--ss-muted); font-size: 13px; line-height: 1.7; }
.ss-support-reminder-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 20px 0; padding: 14px 0; border-block: 1px solid var(--ss-border); }
.ss-support-reminder-price strong { color: var(--ss-text); font-size: 20px; }
.ss-support-reminder-price span { font-size: 11px; }
.ss-support-reminder .ss-form-actions { flex-wrap: wrap; justify-content: flex-end; margin-top: 0; }
.ss-support-reminder .ss-support-reminder-note { margin: 16px 0 0; font-size: 10px; }
.ss-note-dialog { width: min(520px, calc(100% - 32px)); }
.ss-note-dialog textarea { display: block; width: 100%; resize: vertical; min-height: 72px; max-height: 220px; margin: 8px 0 12px; padding: 10px; border: 1px solid #60727e; border-radius: 6px; color: var(--ss-text); background: var(--ss-bg); font: inherit; }
.ss-note-dialog p { margin-bottom: 16px; color: var(--ss-muted); font-size: 11px; }
.ss-summary-dialog { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: var(--ss-bg); }
.ss-summary-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ss-overview-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left)); background: var(--ss-sidebar); border-top: 3px solid var(--ss-accent); border-bottom: 1px solid var(--ss-border); box-shadow: 0 4px 20px #0003; z-index: 1; }
.ss-overview-heading { min-width: 0; }
.ss-overview-heading h2 { font-size: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ss-overview-header > [data-v2-panels-target=summaryStatus] { min-width: 0; max-width: 480px; }
.ss-overview-content { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-top: 64px; padding: 0 max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.ss-overview-close { flex-shrink: 0; }
.ss-overview-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 20px; }
.ss-overview-stats, .ss-overview-shortages, .ss-overview-outputs, .ss-overview-footnote { position: sticky; left: 0; }
.ss-overview-stats.has-generation { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ss-overview-stats > div { padding: 14px; background: var(--ss-surface); border-radius: 8px; }
.ss-overview-stats small { display: block; color: var(--ss-muted); font-size: 11px; }
.ss-overview-stats strong { display: block; margin-top: 6px; font-size: 20px; }
.ss-overview-shortages { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; margin-bottom: 16px; border: 1px solid var(--ss-border); border-radius: 6px; font-size: 11px; }
.ss-overview-shortages > span { display: flex; align-items: center; gap: 5px; color: #ef9b8e; }
/* The overview body owns both axes so table headers stick below the top bar. */
.ss-overview-scroll { overflow: visible; }
.ss-overview-table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 11px; }
.ss-overview-table th { position: sticky; top: 0; z-index: 1; padding: 12px 10px; background: var(--ss-sidebar); color: var(--ss-muted); font-weight: 500; border-top: 1px solid var(--ss-border); border-bottom: 1px solid var(--ss-border); box-shadow: 0 3px 6px #0002; }
.ss-overview-table td { padding: 14px 10px; vertical-align: top; border-bottom: 1px solid var(--ss-border); white-space: pre-line; }
.ss-overview-table td:first-child { min-width: 200px; max-width: 260px; }
.ss-overview-table td:nth-child(2) { width: 160px; }
.ss-overview-table td:nth-child(3) { width: 304px; }
.ss-overview-table td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-overview-identity { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ss-overview-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ss-overview-table small, .ss-overview-footnote { color: var(--ss-muted); font-size: 10px; }
.ss-overview-notes { color: var(--ss-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px !important; overflow-wrap: anywhere; }
.ss-overview-rate { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 10px; }
.ss-overview-rate:last-child { margin-bottom: 0; }
.ss-overview-rate.is-shortage { color: #ef9b8e; }
.ss-overview-rate.is-supplied { color: var(--ss-flow-good); }
.ss-overview-table img, .ss-overview-shortages img { object-fit: contain; flex-shrink: 0; }
.ss-overview-footnote { margin-top: 16px !important; }
.ss-overview-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 34px; color: var(--ss-muted); font-size: 11px; }
.ss-overview-savebar > [role=status] { min-width: 0; overflow-wrap: anywhere; }
.ss-overview-savebar.has-error { color: #ef9b8e; }
.ss-overview-savebar .ss-button { padding: 4px 8px; font-size: 11px; }
.ss-overview-config { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 10px; width: 284px; padding: 10px; border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-sidebar); }
.ss-overview-config--supply { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
.ss-overview-config--static { grid-auto-flow: row; gap: 6px; color: var(--ss-muted); font-size: 10px; }
.ss-overview-config--static strong { color: var(--ss-text); font-size: 14px; }
.ss-overview-field { display: grid; gap: 6px; min-width: 0; white-space: nowrap; font-size: 10px; }
.ss-overview-field span { color: var(--ss-muted); }
.ss-overview-control { width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid var(--ss-border); border-radius: 4px; color: var(--ss-text); background: var(--ss-bg); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.ss-overview-control:focus { outline: 1px solid var(--ss-accent); outline-offset: 1px; }
.ss-overview-control:disabled { opacity: .55; cursor: not-allowed; }
.ss-overview-control[type=number] { text-align: right; }
.ss-overview-control[type=checkbox] { width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--ss-accent); }
.ss-overview-toggle { display: flex; align-items: center; gap: 6px; min-height: 34px; cursor: pointer; }
.ss-overview-build-controls { display: flex; align-items: center; gap: 8px; width: 150px; }
.ss-overview-build-controls .ss-overview-field { flex: 1; }
.ss-overview-build-controls .ss-overview-field > span { display: none; }
.ss-overview-rate .ss-overview-destination { grid-column: 2; width: 100%; max-width: 190px; margin: 0; color: var(--ss-muted); font-size: 10px; }
.ss-overview-settings { margin: 0; padding: 3px 7px; border: 1px solid var(--ss-border); border-radius: 4px; color: var(--ss-accent); background: transparent; font: inherit; font-size: 10px; cursor: pointer; }
.ss-overview-settings:disabled { opacity: .55; cursor: not-allowed; }
.ss-panel-error { color: #ef9b8e; font-size: 11px; margin-bottom: 8px !important; }
@media (max-width: 959px) {
  .ss-editor-toolbar { max-width: calc(100% - 32px); }
  .ss-overview-stats, .ss-overview-stats.has-generation { grid-template-columns: 1fr 1fr; }
  .ss-help-groups { grid-template-columns: 1fr; }
  .ss-overview-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: max(12px, env(safe-area-inset-top)) 16px 10px; }
  .ss-overview-header > [data-v2-panels-target=summaryStatus] { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .ss-overview-heading .ss-eyebrow { font-size: 8px; }
  .ss-overview-heading h2 { font-size: 17px; }
  .ss-overview-close { width: 44px; padding: 10px; }
  .ss-overview-close > span { display: none; }
  .ss-overview-content { padding: 0 16px 16px; }
  .ss-overview-stats { margin-top: 16px; }
  .ss-overview-control { min-height: 36px; }
  .ss-canvas-controls { gap: 1px; padding: 4px; max-width: calc(100% - 24px); }
}
@media (max-width: 539px) {
}

/* Reserve edge docks so controls never sit over the planning floor. */
.ss-workspace-modes { display: inline-flex; flex-shrink: 0; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-bg); }
.ss-workspace-mode { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid transparent; border-radius: 5px; color: var(--ss-muted); text-decoration: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ss-workspace-mode .ss-icon { width: 18px; height: 18px; flex-shrink: 0; }
.ss-workspace-mode:hover { color: var(--ss-text); background: var(--ss-surface); }
.ss-workspace-mode[aria-current=page] { color: var(--ss-accent); border-color: var(--ss-accent); background: var(--ss-surface); }
.ss-workspace-mode:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }
.ss-canvas-workspace { display: grid; grid-template: "top" auto "canvas" minmax(0, 1fr) "bottom" auto / minmax(0, 1fr); }
.ss-canvas-workspace > .ss-canvas { grid-area: canvas; position: relative; inset: auto; min-height: 0; }
.ss-canvas-workspace.ss-inspector-open { grid-template: "top top" auto "canvas inspector" minmax(0,1fr) "bottom bottom" auto / minmax(0,1fr) 360px; }
.ss-canvas-workspace.ss-inspector-collapsed { grid-template: "top top" auto "canvas inspector" minmax(0,1fr) "bottom bottom" auto / minmax(0,1fr) 48px; }
.ss-inspector-tab { grid-area:inspector; display:flex; flex-direction:column; align-items:center; gap:18px; min-width:0; min-height:0; padding:16px 10px; color:var(--ss-muted); background:var(--ss-sidebar); border:0; border-left:1px solid var(--ss-border); cursor:pointer; }
.ss-inspector-tab:hover, .ss-inspector-tab.has-selection { color:var(--ss-accent); background:var(--ss-surface); }
.ss-inspector-tab.has-selection { border-left:2px solid var(--ss-accent); }
.ss-inspector-tab strong, .ss-inspector-tab > span { writing-mode:vertical-rl; white-space:nowrap; }
.ss-inspector-tab strong { font-size:12px; }
.ss-inspector-tab > span { min-height:0; overflow:hidden; text-overflow:ellipsis; font-size:11px; color:var(--ss-muted); }
.ss-factory-inspector { grid-area:inspector; display:flex; flex-direction:column; min-width:0; min-height:0; border-left:1px solid var(--ss-border); background:var(--ss-sidebar); }
.ss-factory-inspector > .ss-editor-tray { position:static; inset:auto; width:100%; height:100%; max-height:none; border:0; border-radius:0; box-shadow:none; }
.ss-factory-inspector .ss-tray-heading { padding:14px 16px; }
.ss-factory-inspector .ss-tray-heading h2 { font-size:16px; }
.ss-factory-inspector .ss-tray-heading .ss-eyebrow { font-size:9px; }
.ss-inspector-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; border-bottom:1px solid var(--ss-border); }
.ss-inspector-heading h2 { font-size:16px; }
.ss-inspector-heading .ss-eyebrow { font-size:9px; }
.ss-factory-search-dialog { width:min(540px,calc(100vw - 24px)); }
.ss-factory-search-dialog form { display:flex; flex-direction:column; gap:12px; min-height:0; }
.ss-factory-search-dialog label, .ss-factory-search-status { color:var(--ss-muted); font-size:12px; }
.ss-factory-search-dialog input { width:100%; min-width:0; padding:12px; border:1px solid var(--ss-border); border-radius:6px; background:var(--ss-bg); color:var(--ss-text); }
.ss-factory-search-results { display:grid; gap:6px; max-height:50dvh; overflow:auto; }
.ss-v2 .ss-factory-search-result { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--ss-border); border-radius:6px; background:var(--ss-surface); color:var(--ss-text); text-align:left; cursor:pointer; }
.ss-factory-search-result:hover { border-color:var(--ss-accent); }
.ss-factory-search-result > span:first-of-type { flex:1; min-width:0; overflow-wrap:anywhere; }
.ss-factory-search-result strong, .ss-factory-search-result small { display:block; }
.ss-factory-search-result small { margin-top:4px; color:var(--ss-muted); font-size:11px; }
.ss-inspector-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px; }
.ss-inspector-empty { color:var(--ss-muted); font-size:13px; padding:16px 0; }
.ss-inspector-footer { padding:12px 16px; border-top:1px solid var(--ss-border); font-size:12px; color:var(--ss-muted); }
.ss-inspector-footer .ss-panel-error { color:var(--ss-flow-bad); }
.ss-inspector-open .ss-minimap { right:376px; }
.ss-inspector-collapsed .ss-minimap { right:64px; }
.ss-selection-slot:empty { display:none; }
.ss-inspector-actions .ss-selection-tools { position:static; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 16px; border:0; border-bottom:1px solid var(--ss-border); border-radius:0; background:var(--ss-sidebar); }
.ss-inspector-actions .ss-selection-tools > span { flex:1 1 100%; font-size:11px; color:var(--ss-muted); }
.ss-inspector-actions .ss-button { min-height:32px; padding:6px 8px; font-size:12px; }
.ss-v2 .ss-selection-delete { color:var(--ss-flow-bad); }
.ss-bulk-actions { position:relative; }
.ss-bulk-actions summary { list-style:none; cursor:pointer; }
.ss-bulk-actions summary::-webkit-details-marker { display:none; }
.ss-bulk-menu { position:absolute; bottom:calc(100% + 8px); left:0; width:280px; padding:16px; display:flex; flex-direction:column; gap:10px; border:1px solid var(--ss-border); border-radius:8px; background:var(--ss-sidebar); box-shadow:0 8px 24px #0005; z-index:20; }
.ss-bulk-menu > strong { font-size:13px; }
.ss-bulk-caption { font-size:11px; color:var(--ss-muted); }
.ss-bulk-buttons { display:flex; gap:4px; flex-wrap:wrap; }
.ss-bulk-buttons .ss-button { min-height:36px; padding:8px; font-size:11px; border:1px solid var(--ss-border); }
.ss-inspector-actions .ss-bulk-menu { top:calc(100% + 8px); bottom:auto; }
@media(max-width:700px) {
  .ss-bulk-actions summary { width:32px; padding:6px; }
  .ss-bulk-actions summary > span { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
  .ss-bulk-menu { position:fixed; left:12px; right:12px; bottom:calc(var(--ss-canvas-bottom,104px) + 12px); width:auto; }
  .ss-bottom-dock .ss-selection-tools { gap:4px; }
}
.ss-top-dock { grid-area: top; display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--ss-sidebar); border-bottom: 1px solid var(--ss-border); z-index: 5; }
.ss-top-dock .ss-canvas-heading { position: static; flex: 0 0 180px; min-width: 0; min-height: 40px; pointer-events: auto; gap: 8px; }
.ss-top-dock h1 { font-size: 13px; }
.ss-top-dock .ss-canvas-breadcrumb { margin-top: 2px; font-size: 10px; }
.ss-top-dock .ss-editor-toolbar { position: static; flex: 1; flex-wrap: nowrap; align-items: center; max-width: none; gap: 5px; }
.ss-top-dock .ss-button { min-height: 40px; height: 40px; padding: 8px 11px; font-size: 12px; }
.ss-top-dock .ss-icon-button, .ss-bottom-dock .ss-icon-button { width: 36px; height: 36px; min-width: 36px; padding: 8px; }
.ss-top-dock .ss-icon-button > span, .ss-bottom-dock .ss-icon-button > span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.ss-bottom-dock { grid-area: bottom; background: var(--ss-sidebar); border-top: 1px solid var(--ss-border); padding: 4px 8px max(4px, env(safe-area-inset-bottom)); z-index: 5; }
.ss-bottom-dock:has(.ss-paint-panel:not([hidden])) { z-index:13; }
.ss-bottom-dock:has(.ss-bulk-actions[open]) { z-index:13; }
.ss-bottom-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ss-bottom-dock .ss-canvas-controls { position: static; margin-left: auto; background: transparent; border: 0; box-shadow: none; padding: 0; gap: 0; max-width: none; }
.ss-bottom-dock .ss-selection-tools { position: static; border: 0; background: transparent; padding: 0; gap: 2px; }
.ss-context-dock { flex: 0 1 340px; min-width: 0; }
.ss-context-dock .ss-stamp-tools { position: static; transform: none; width: 100%; border: 0; padding: 0 8px; grid-template-columns: minmax(0, 1fr) 76px 30px; align-items: end; }
.ss-context-dock .ss-card-field { flex-direction: row; align-items: center; }
.ss-context-dock .ss-card-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ss-v2 .ss-stamp-note { position: absolute; top: calc(-8px / var(--ss-canvas-scale, 1)); right: calc(-8px / var(--ss-canvas-scale, 1)); z-index: 4; width: calc(30px / var(--ss-canvas-scale, 1)); height: calc(28px / var(--ss-canvas-scale, 1)); min-height: 0; border-width: calc(1px / var(--ss-canvas-scale, 1)); border-radius: calc(4px / var(--ss-canvas-scale, 1)); font-size: calc(17px / var(--ss-canvas-scale, 1)) !important; }
.ss-v2 .ss-stamp-note.has-notes { background: var(--ss-sidebar); }
.ss-editor-error, .ss-view-warning { top: calc(var(--ss-canvas-top, 72px) + 8px); bottom: auto; }
.ss-settings-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; margin: auto; padding: 26px; background: radial-gradient(ellipse at top left, #e9b9490b, transparent 55%), var(--ss-sidebar); }
.ss-settings-dialog .ss-dialog-heading { margin-bottom: 6px; }
.ss-settings-heading { display: flex; gap: 12px; align-items: center; }
.ss-settings-heading-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #e9b94930; border-radius: 12px; background: #e9b94910; color: var(--ss-accent); }
.ss-settings-heading-icon .ss-icon { width: 23px; height: 23px; }
.ss-settings-dialog .ss-settings-intro { margin: 0 0 22px; color: var(--ss-muted); font-size: 13px; }
.ss-settings-dialog form { display: grid; gap: 18px; }
.ss-settings-field { display: grid; gap: 8px; font-size: 12px; font-weight: 600; }
.ss-settings-field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-bg); color: var(--ss-text); font-weight: 400; }
.ss-settings-toggles { border: 1px solid var(--ss-border); border-radius: 12px; padding: 0 14px; background: #ffffff03; }
.ss-settings-option { display: grid; grid-template-columns: 32px minmax(0, 1fr) 40px; gap: 12px; align-items: center; min-height: 74px; padding: 14px 0; cursor: pointer; }
.ss-settings-option + .ss-settings-option { border-top: 1px solid var(--ss-border); }
.ss-settings-option-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #ffffff06; color: var(--ss-muted); }
.ss-settings-option-icon .ss-icon { width: 19px; height: 19px; }
.ss-settings-option strong { display: block; font-size: 13px; font-weight: 600; }
.ss-settings-option small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--ss-muted); }
.ss-settings-option input { appearance: none; position: relative; width: 40px; height: 24px; padding: 0; border: 1px solid #60727e; border-radius: 14px; background: #344451; cursor: pointer; }
.ss-settings-option input::before { content: ""; display: block; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #c3cdd5; transition: transform .15s ease, background .15s ease; }
.ss-settings-option input:checked { border-color: var(--ss-accent); background: var(--ss-accent); }
.ss-settings-option input:checked::before { transform: translateX(16px); background: #15202b; }
.ss-settings-option input:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 3px; }
.ss-settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.ss-settings-footer p { color: var(--ss-muted); font-size: 11px; }
.ss-settings-footer .ss-button { min-width: 80px; border-radius: 8px; }
@media (max-width: 560px) { .ss-settings-dialog { padding: 20px; } .ss-settings-heading { gap: 9px; } .ss-settings-heading-icon { width: 38px; height: 38px; } .ss-settings-dialog .ss-dialog-heading h2 { font-size: 18px; } .ss-settings-option { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .ss-settings-option input::before { transition: none; } }
.ss-card-routing { grid-template-columns: minmax(0, 1fr) 36px; }
.ss-port-orientation { position: relative; }
.ss-port-orientation summary { list-style: none; width: 36px; height: 28px; border: 1px solid var(--ss-border); border-radius: 4px; background: var(--ss-bg); cursor: pointer; padding: 2px 4px; }
.ss-port-orientation summary::-webkit-details-marker { display: none; }
.ss-port-orientation svg { width: 100%; height: 100%; }
.ss-orientation-options { position: absolute; z-index: 8; right: 0; bottom: calc(100% + 6px); width: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-sidebar); box-shadow: 0 4px 12px #0006; }
.ss-v2 .ss-orientation-options button { width: 40px; height: 40px; padding: 4px; border: 1px solid transparent; border-radius: 4px; background: var(--ss-surface); cursor: pointer; color: var(--ss-text); }
.ss-orientation-options button[aria-pressed=true] { border-color: var(--ss-accent); }
.ss-orientation-options button:disabled { opacity: .5; cursor: default; }
.ss-notes-button { position: relative; width: 30px; height: 28px; padding: 2px; font-size: 17px !important; }
.ss-notes-button:disabled { visibility: visible; opacity: .5; }
.ss-notes-button.has-notes { background: #f3ae5520; border-color: var(--ss-accent); color: var(--ss-accent); }
.ss-note-preview { display: none; position: absolute; z-index: 9; bottom: calc(100% + 8px); right: 0; width: 240px; max-height: 160px; overflow: auto; white-space: pre-wrap; text-align: left; font-size: 11px; line-height: 1.5; padding: 12px; color: var(--ss-text); background: var(--ss-sidebar); border: 1px solid var(--ss-accent); border-radius: 6px; box-shadow: 0 4px 16px #0008; cursor: default; transform: scale(calc(1 / var(--ss-canvas-scale, 1))); transform-origin: bottom right; }
.ss-notes-button:hover .ss-note-preview, .ss-notes-button:focus-visible .ss-note-preview { display: block; }
.ss-belt { pointer-events: none; }
.ss-v2 .ss-belt-label { touch-action: none; cursor: copy; }
.ss-belt-hit { fill: none; stroke: transparent; stroke-width: calc(16px / var(--ss-canvas-scale, 1)); pointer-events: stroke; cursor: copy; touch-action: none; }
.ss-v2 .ss-belt-waypoint { position: absolute; z-index: 4; width: calc(24px / var(--ss-canvas-scale, 1)); height: calc(24px / var(--ss-canvas-scale, 1)); transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; cursor: move; touch-action: none; }
.ss-belt-waypoint::after { content: ""; position: absolute; width: calc(7px / var(--ss-canvas-scale, 1)); height: calc(7px / var(--ss-canvas-scale, 1)); left: 50%; top: 50%; transform: translate(-50%, -50%); border: calc(1px / var(--ss-canvas-scale, 1)) solid #8dd5c7; background: var(--ss-sidebar); border-radius: 50%; }
.ss-belt-waypoint.is-selected::after, .ss-belt-waypoint:hover::after { border-color: var(--ss-accent); background: var(--ss-accent); }
.ss-belt-waypoint:focus-visible { outline: calc(2px / var(--ss-canvas-scale, 1)) solid var(--ss-accent); }
@media (pointer: coarse) { .ss-v2 .ss-belt-waypoint { width: calc(44px / var(--ss-canvas-scale, 1)); height: calc(44px / var(--ss-canvas-scale, 1)); } .ss-belt-hit { stroke-width: 28px; } }
.ss-port-connector.is-link-match { outline: 2px solid var(--ss-port-color); outline-offset: 3px; box-shadow: 0 0 12px var(--ss-port-tint); }
.ss-quick-dialog { width: min(560px, calc(100vw - 24px)); height: min(740px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; }
.ss-quick-dialog .ss-editor-tray { position: static; inset: auto; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.ss-tray-heading { flex-shrink: 0; }
.ss-editor-tray fieldset > label, .ss-quick-context { flex-shrink: 0; }
.ss-quick-dialog .ss-image-picker { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ss-quick-dialog .ss-palette-hint { display: none; }
.ss-quick-dialog .ss-image-choice { cursor: pointer; }
@media (max-width: 1240px) {
  /* Two rows: the simulation and its tools, then the mode with the mode's tools beside it. */
  .ss-top-dock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; }
  .ss-top-dock .ss-canvas-heading { grid-row: 1; grid-column: 1 / 3; }
  .ss-top-dock .ss-simulation-tools { grid-row: 1; grid-column: 3; justify-self: end; }
  .ss-top-dock .ss-workspace-modes { grid-row: 2; grid-column: 1; justify-self: start; }
  .ss-top-dock .ss-editor-toolbar { grid-row: 2; grid-column: 2 / 4; }
}
@media (max-width: 700px) {
  .ss-context-dock { order: 2; flex-basis: 100%; border-top: 1px solid var(--ss-border); padding: 6px 0; }
  .ss-context-dock .ss-stamp-tools { max-width: 400px; }
  .ss-top-dock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; padding: max(6px, env(safe-area-inset-top)) 8px 6px; }
  .ss-top-dock .ss-canvas-heading { grid-column: 1; }
  .ss-top-dock .ss-workspace-modes { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; }
  .ss-top-dock .ss-workspace-mode { flex: 1; }
  .ss-top-dock .ss-editor-toolbar { grid-row: 3; grid-column: 1 / -1; gap: 8px; }
  .ss-top-dock [data-v2-editor-target=addButton] { width: 36px; padding: 8px; }
  .ss-top-dock [data-v2-editor-target=addButton] > span { display: none; }
  .ss-bottom-dock .ss-selection-tools { flex: 1; }
  .ss-bottom-dock .ss-selection-tools > span { font-size: 10px; }
  .ss-bottom-dock .ss-selection-tools .ss-icon-button { width: 30px; min-width: 30px; }
  .ss-bottom-dock .ss-selection-delete { width:44px; min-width:44px; padding:8px; }
  .ss-bottom-dock .ss-selection-delete > span { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
  .ss-settings-dialog { margin: auto; }
}
@media (max-width: 959px) {
  .ss-editor-tray { height: min(72dvh, 560px); max-height: calc(100dvh - 16px); }
  .ss-editor-tray .ss-palette-hint { display: none; }
  .ss-editor-tray .ss-image-picker { flex: 1 1 80px; min-height: 60px; }
}
@media (max-width: 959px) and (max-height: 550px) {
  .ss-editor-tray { height: 100dvh; max-height: 100dvh; }
  .ss-editor-tray .ss-eyebrow, .ss-editor-tray .ss-quick-context { display: none; }
  .ss-editor-tray .ss-tray-heading { padding: 6px 12px; }
  .ss-editor-tray .ss-tray-body { padding: 6px 12px; }
  .ss-editor-tray label { margin: 6px 0; }
  .ss-editor-tray input[type="search"] { margin-bottom: 6px; }
}

@media (pointer: coarse) {
  .ss-workspace-mode { min-height: 44px; }
  .ss-v2 .ss-stamp-note { width: calc(44px / var(--ss-canvas-scale, 1)); height: calc(44px / var(--ss-canvas-scale, 1)); }
  .ss-context-dock .ss-stamp-tools { grid-template-columns: minmax(0, 1fr) 76px 44px; }
  .ss-context-dock .ss-notes-button { width: 44px; height: 44px; }
  .ss-top-dock .ss-button, .ss-bottom-dock .ss-button { min-height: 44px; height: 44px; }
  .ss-top-dock .ss-icon-button, .ss-top-dock [data-v2-editor-target=addButton], .ss-bottom-dock .ss-icon-button, .ss-bottom-dock .ss-selection-tools .ss-icon-button { width: 44px; min-width: 44px; }
}

/* Canvas cards favor images and quantities; names and explanations stay available
   to hover, keyboard focus and assistive technology without adding more rows. */
.ss-v2 { --ss-input: #ffb72b; --ss-output: #669aff; }
.ss-visually-hidden, .ss-card-identity .ss-card-field > span { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
.ss-output-scorecard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.ss-output-group { border: 1px solid var(--ss-border); border-radius: 10px; background: var(--ss-surface); padding: 16px; min-width: 0; }
.ss-output-group-heading { border-bottom: 1px solid var(--ss-border); padding-bottom: 12px; margin-bottom: 8px; }
.ss-output-group-heading h3 { margin: 0 0 4px; font-size: 16px; }
.ss-output-group-heading small, .ss-output-empty { color: var(--ss-muted); font-size: 12px; }
.ss-output-group--storage .ss-output-group-heading h3 { color: var(--ss-output); }
.ss-output-group--sink .ss-output-group-heading h3 { color: var(--ss-accent); }
.ss-output-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; font-size: 13px; }
.ss-output-row + .ss-output-row { border-top: 1px solid var(--ss-border); }
.ss-output-row span { overflow-wrap: anywhere; }
.ss-output-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 700px) {
  .ss-output-scorecard { grid-template-columns: minmax(0, 1fr); }
}
.ss-overview-build { display: flex; align-items: center; gap: 6px; }
.ss-overview-build .ss-status-artwork { width: 28px; height: 28px; }
.ss-belt-label.is-compact .ss-belt-direction { display: none; }
.ss-belt-label.is-compact img { width: 14px; height: 14px; }
.ss-belt-label.is-compact .ss-belt-caption { display: block; white-space: nowrap; }
.ss-belt-label.is-compact .ss-belt-unit { font-size: 5px; }

/* Keep selection legible in scan view without changing card or port geometry. */
.ss-v2 .ss-grid-node.is-selected > .ss-node-body { outline-width: calc(2px / var(--ss-canvas-scale, 1)); outline-offset: calc(3px / var(--ss-canvas-scale, 1)); box-shadow: 0 0 0 calc(5px / var(--ss-canvas-scale, 1)) #f3ae5530, 0 4px 14px #0003; }
.ss-v2 .ss-grid-node.is-selected:not(.ss-grid-node--stamp) > .ss-node-body { background-image: linear-gradient(#f3ae550b, #f3ae550b); }

/* Staged imports share the editor's typography and orange/blue port palette. */
.ss-import-page{max-width:1100px;margin-inline:auto}
.ss-import-heading-actions{display:flex;gap:8px;flex-wrap:wrap}
.ss-import-form{max-width:850px;margin:24px auto;background:#202733;border:1px solid #394352;border-radius:18px;padding:28px}
.ss-import-sources{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0;padding:0;margin:0 0 24px}
.ss-import-sources label{position:relative;cursor:pointer}
.ss-import-sources input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.ss-import-sources label>span{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px 12px;padding:20px;border:1px solid #495467;border-radius:12px;background:#171e28}
.ss-import-sources small{grid-column:2;color:#aab6c5;line-height:1.5}
.ss-import-sources input:checked+span{border-color:#ffb72b;background:#ffb72b0b;box-shadow:0 0 0 1px #ffb72b}
.ss-import-sources input:focus-visible+span{outline:3px solid #669aff;outline-offset:3px}
.ss-import-source h2,.ss-import-notes h2{font-size:19px;margin:8px 0 20px}
.ss-import-form>label,.ss-import-source>label{display:block;margin-bottom:10px;font-weight:600}
.ss-import-form input[type=text],.ss-import-source select{width:100%;padding:13px;background:#151b24;border:1px solid #4a5667;color:#e9edf4;border-radius:8px;font:inherit}
.ss-import-form .ss-small-note{line-height:1.7;margin:16px 0 22px;color:#b2bdcb}
.ss-import-source[hidden]{display:none}
.ss-import-upload{display:grid!important;justify-items:center;gap:12px;text-align:center;border:1px dashed #6a7990;border-radius:12px;padding:28px;background:#151b24}
.ss-import-upload svg{width:36px;height:36px;color:#669aff}
.ss-import-upload small{color:#aab6c5;font-weight:400}
.ss-import-upload input{max-width:100%;font:inherit;font-size:14px}
.ss-import-preview{border:1px solid #394352;background:#161d27;border-radius:16px;overflow:hidden;margin-top:24px}
.ss-import-map{display:block;width:100%;height:360px;padding:20px;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:24px 24px}
.ss-import-map rect{fill:#252d3b;stroke:#669aff;stroke-width:5}
.ss-import-map text{fill:#e4ebf5;font-size:22px;font-weight:600}
.ss-import-map .ss-import-map-count{fill:#ffb72b;font-size:32px}
.ss-import-map-belt{stroke:#82c789;stroke-width:5;fill:none}
.ss-import-regions{margin:24px 0;padding:18px;border:1px solid #495467;border-radius:10px;display:flex;flex-wrap:wrap;gap:12px}
.ss-import-regions label,.ss-import-check{display:flex!important;align-items:center;gap:10px;background:#171e28;border-radius:8px;padding:12px}
.ss-import-regions small,.ss-import-check small{display:block;margin-top:4px;font-size:12px;color:#b2bdcb;font-weight:400}
.ss-import-form input[type=checkbox]{accent-color:#ffb72b;width:18px;height:18px;flex-shrink:0}
.ss-import-notes{border-top:1px solid #394352;margin-top:22px;padding-top:12px;line-height:1.7;color:#c4cedc}
.ss-import-notes li{margin:8px 0}
.ss-import-notes details{font-size:13px;margin-top:20px}
.ss-import-progress{text-align:center;padding:60px 24px;border:1px solid #394352;background:#202733;border-radius:18px;margin:30px auto;max-width:700px;line-height:1.7}
.ss-import-spinner{display:inline-block;width:36px;height:36px;border:3px solid #4a5667;border-top-color:#ffb72b;border-radius:50%;animation:ss-import-spin 1s linear infinite}
@keyframes ss-import-spin{to{transform:rotate(360deg)}}
.ss-import-sources--admin { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ss-admin-import-search { display:flex; align-items:end; gap:12px; margin:20px 0; }
.ss-admin-import-search > div:first-child { flex:1; min-width:0; }
.ss-admin-import-search label { display:block; color:var(--ss-muted); font-size:12px; margin-bottom:8px; }
.ss-admin-import-search input[type=search] { width:100%; padding:13px; border:1px solid var(--ss-border); border-radius:8px; background:var(--ss-bg); color:var(--ss-text); font:inherit; }
.ss-admin-import-search select { font-size:13px; }
.ss-admin-import-results { border:1px solid var(--ss-border); border-radius:10px; padding:0; margin:0; overflow:hidden; }
.ss-admin-import-result { display:flex; align-items:center; gap:12px; padding:16px; cursor:pointer; border-bottom:1px solid var(--ss-border); }
.ss-admin-import-result:last-child { border-bottom:0; }
.ss-admin-import-result:has(input:checked) { background:#f3ae5511; box-shadow:inset 3px 0 var(--ss-accent); }
.ss-admin-import-result:has(input:disabled) { opacity:0.5; cursor:default; }
.ss-admin-import-result input { accent-color:var(--ss-accent); width:18px; height:18px; flex-shrink:0; }
.ss-admin-import-result > span { min-width:0; overflow-wrap:anywhere; }
.ss-admin-import-result strong { display:block; font-size:13px; }
.ss-admin-import-result small { display:block; color:var(--ss-muted); font-size:11px; line-height:1.5; margin-top:5px; }
.ss-admin-import-size { margin-left:auto; text-align:right; flex-shrink:0; }
.ss-admin-import-pages { display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; color:var(--ss-muted); margin-top:12px; }
.ss-import-origin { margin:24px 0; padding:16px; border-left:3px solid var(--ss-accent); background:var(--ss-surface); font-size:13px; }
.ss-import-origin small { display:block; margin-top:8px; color:var(--ss-muted); }
@media(max-width:650px) { .ss-admin-import-search { flex-wrap:wrap; } .ss-admin-import-search > div:first-child { flex-basis:100%; } .ss-admin-import-search > div:nth-child(2) { flex:1; } .ss-admin-import-result { gap:10px; padding:12px; } .ss-admin-import-size strong { font-size:11px; } }
@media(max-width:650px){.ss-import-sources{grid-template-columns:1fr}.ss-import-form{padding:18px}.ss-import-page .ss-page-heading{align-items:flex-start;flex-wrap:wrap;gap:16px}.ss-import-map{height:260px}.ss-import-sources label>span{padding:16px}.ss-import-regions{padding:12px}}
@media(prefers-reduced-motion:reduce){.ss-import-spinner{animation:none}}


.ss-import-sources .ss-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ss-import-sources label>span{height:100%;align-content:start}
.ss-import-sources .ss-icon{width:26px;height:26px;grid-row:1 / 3;align-self:center}

.ss-import-resume{border:1px solid var(--ss-border);border-radius:12px;padding:20px;margin-bottom:28px;background:var(--ss-surface)}
.ss-import-resume h2{font-size:18px;margin:0 0 8px}
.ss-import-resume-row{display:flex;align-items:center;gap:16px;border-top:1px solid var(--ss-border)}
.ss-import-resume-row>a{display:flex;flex:1;min-width:0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;padding:16px 0;color:var(--ss-text);text-decoration:none}
.ss-import-resume-row strong{min-width:0;overflow-wrap:anywhere}
.ss-import-resume-row>a span{color:var(--ss-muted);font-size:12px}
.ss-import-resume-row>a:hover strong{color:var(--ss-input)}
.ss-import-resume-row form,.ss-import-heading-actions form{margin:0;flex-shrink:0}
.ss-legacy-welcome .ss-button--primary { width: fit-content; border: 1px solid var(--ss-accent); padding: 10px 14px; color: #151e26; }
.ss-inspector-panel { margin-bottom:24px; border:1px solid var(--ss-border); border-radius:12px; background:var(--ss-surface); overflow:hidden; }
.ss-inspector-panel > .ss-small-note, .ss-inspector-panel > summary { padding:16px; margin:0; }
.ss-inspector-panel > summary { cursor:pointer; }
.ss-factory-inspector .ss-import-map { height:clamp(320px,65vh,900px); background:var(--ss-bg); }
.ss-factory-inspector .ss-import-map rect { fill:var(--ss-surface); stroke:var(--ss-border); }
.ss-factory-inspector .ss-import-map text { fill:var(--ss-text); }
.ss-factory-inspector .ss-import-map-toolbar > div { flex-wrap:wrap; }
.ss-inspector-table { overflow-x:auto; }
.ss-inspector-table table { width:100%; border-collapse:collapse; font-size:13px; }
.ss-inspector-table :is(th,td) { padding:12px 16px; text-align:left; border-top:1px solid var(--ss-border); }
.ss-inspector-table th { color:var(--ss-muted); }
.ss-import-source .ss-import-all { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; }
.ss-import-all input { width: 20px; height: 20px; accent-color: var(--ss-accent); }
.ss-batch-imports { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 24px 0; }
.ss-batch-import { min-width: 0; padding: 20px; border: 1px solid var(--ss-border); border-radius: 12px; background: var(--ss-surface); }
.ss-batch-import h2 { margin: 0 0 8px; font-size: 18px; overflow-wrap: anywhere; }
.ss-batch-import p, .ss-batch-import details { color: var(--ss-muted); font-size: 12px; line-height: 1.6; }
.ss-batch-import details { margin-top: 12px; }
.ss-batch-import summary { cursor: pointer; }

/* Import exploration and a small, inexpensive canvas navigator. */
.ss-import-map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--ss-border); color:var(--ss-muted); font-size:12px; }
.ss-import-map-toolbar > div { display:flex; align-items:center; gap:4px; }
.ss-import-map-toolbar output { min-width:50px; text-align:center; }
.ss-import-map { touch-action:none; cursor:grab; }
.ss-import-map:active { cursor:grabbing; }
.ss-import-regions { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.ss-import-region { display:grid; grid-template-columns:minmax(0,1fr) auto; background:#171e28; border-radius:10px; padding:4px; }
.ss-import-region > label { background:none; }
.ss-import-region > button { align-self:start; padding-inline:8px; font-size:12px; }
.ss-import-products { grid-column:1/-1; display:flex; flex-direction:column; gap:8px; padding:0 12px 12px; font-size:12px; }
.ss-import-products > span { display:flex; gap:8px; align-items:center; }
.ss-import-products small { margin:0; }
.ss-minimap { position:absolute; z-index:12; right:16px; bottom:calc(var(--ss-canvas-bottom,54px) + 16px); width:220px; border:1px solid var(--ss-border); border-radius:10px; overflow:hidden; background:var(--ss-sidebar); box-shadow:0 3px 16px #0003; }
.ss-minimap > div { display:flex; justify-content:space-between; border-bottom:1px solid var(--ss-border); }
.ss-minimap .ss-button { min-height:32px; padding:6px 10px; font-size:11px; }
.ss-minimap > svg { display:block; width:100%; height:130px; touch-action:none; cursor:crosshair; background:var(--ss-bg); }
.ss-minimap rect { fill:var(--ss-flow-good); opacity:.65; }
.ss-minimap rect.ss-minimap-resource { fill:var(--ss-input); }
.ss-minimap rect.ss-minimap-stamp { fill:var(--ss-muted); }
.ss-minimap rect.is-shortage { fill:var(--ss-flow-bad); }
.ss-minimap rect.ss-minimap-viewport { fill:var(--ss-accent); fill-opacity:.12; stroke:var(--ss-accent); stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:1; pointer-events:none; }
.ss-v2 [data-zoom-detail=map] :is(.ss-zoom-flow,.ss-zoom-type) { visibility:hidden; }
.ss-v2 [data-zoom-detail=map] .ss-canvas:not(.is-grid-hidden) { background-image:linear-gradient(#3c506038 1px,transparent 1px),linear-gradient(90deg,#3c506038 1px,transparent 1px); }
.ss-v2 [data-zoom-detail=map] :is(.ss-grid-node--factory,.ss-grid-node--resource) .ss-zoom-header { inset:0; height:auto; justify-content:center; }
.ss-v2 [data-zoom-detail=map] .ss-zoom-header > img { width:180px; height:180px; }
.ss-v2 [data-zoom-detail=map] .ss-zoom-settings { visibility:hidden; }
.ss-v2 [data-zoom-detail=map] .is-selected .ss-zoom-settings { visibility:visible; }
.ss-v2 [data-zoom-detail=map] .ss-port-connector { opacity:0; pointer-events:none; }
.ss-v2 [data-zoom-detail=map] .ss-belt-label, .ss-v2 [data-zoom-detail=map] .ss-belt-flow { display:none; }
.ss-v2 .is-interacting .ss-belt-flow { animation-play-state:paused; }
@media(max-width:650px) { .ss-import-map-toolbar { flex-wrap:wrap; padding:8px; } .ss-import-regions { grid-template-columns:1fr; } .ss-minimap { width:150px; right:10px; } .ss-minimap > svg { height:86px; } }

.ss-draft-save { display:flex; align-items:center; color:var(--ss-muted); font-size:10px; line-height:1.4; white-space:nowrap; }
.ss-draft-save.has-error { color:var(--ss-flow-bad); }
@media(max-width:700px) {
  /* Keep two rows: selection joins the tools; undo can sit beside zoom. */
  .ss-bottom-dock { min-height:104px; align-content:start; }
  .ss-bottom-dock .ss-canvas-controls { flex-basis:auto; justify-content:flex-end; }
}

/* Editing tools stay together; navigation occupies the other end of the dock. */
.ss-canvas-tools { display:flex; align-items:center; gap:2px; }
.ss-edit-history { display:flex; align-items:center; gap:2px; }
.ss-history-button { gap:5px; }
.ss-history-button small { min-width:12px; font-size:10px; font-variant-numeric:tabular-nums; }
@media(max-width:700px) {
  .ss-bottom-dock .ss-history-button { min-width:38px; padding:8px 4px; }
}
.ss-bottom-dock .ss-help-panel { width:min(380px, calc(100vw - 24px)); padding:18px; }
.ss-help-panel h2 { font-size:16px; margin-bottom:14px; }
.ss-help-panel .ss-help-row { display:grid; grid-template-columns:130px minmax(0,1fr); font-size:11px; }
.ss-bottom-dock [aria-pressed=true] { color:var(--ss-accent); background:#e9b94918; }
.ss-minimap > div { align-items:center; }
.ss-minimap > div > span { padding-left:10px; color:var(--ss-muted); font-size:11px; }
.ss-minimap > div > div { display:flex; align-items:center; }
.ss-minimap .ss-icon-button { width:30px; min-width:30px; padding:6px; }
.ss-minimap .ss-icon-button > span { display:none; }
.ss-minimap .ss-icon-button .ss-icon { width:14px; height:14px; }
.ss-coming-soon { padding:6px 12px; border-radius:20px; background:#e9b94918; color:var(--ss-accent); font-size:13px; font-weight:600; }
.ss-v2 .ss-zoom-header > .ss-map-product { display:none; }
.ss-v2 [data-zoom-detail=map] .ss-zoom-header > .ss-scan-machine { display:none; }
.ss-v2 [data-zoom-detail=map] .ss-zoom-header > .ss-map-product { display:block; }
@media(max-width:700px) {
  .ss-bottom-dock .ss-canvas-controls { flex-basis:auto; }
}

@media(max-width:700px) {
  .ss-top-dock .ss-simulation-tools { grid-row:1; grid-column:2; }
  .ss-draft-save { position:static; border:0; padding:0; background:transparent; }
}

@media(max-width:700px) {
  .ss-paint-tools .ss-paint-panel { bottom:calc(var(--ss-canvas-bottom,104px) + 12px); }
}

.ss-rotation-shortcuts { grid-column: 1 / -1; padding: 5px 2px 0; color: var(--ss-muted); font-size: 9px; text-align: center; white-space: nowrap; }
.ss-rotation-shortcuts kbd { padding: 1px 3px; border: 1px solid var(--ss-border); border-radius: 3px; color: var(--ss-text); font: inherit; }
.ss-layout-choices { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:16px 0; border:0; min-width:0; }
.ss-layout-choices legend { font-size:12px; color:var(--ss-muted); margin-bottom:8px; }
.ss-layout-choices label { position:relative; flex:1 1 150px; cursor:pointer; }
.ss-layout-choices input { position:absolute; width:1px; height:1px; opacity:0; }
.ss-layout-choices label > span { display:block; padding:12px 16px; text-align:center; border:1px solid var(--ss-border); border-radius:8px; background:var(--ss-sidebar); color:var(--ss-muted); }
.ss-layout-choices label:has(input:checked) > span { border-color:var(--ss-accent); color:var(--ss-text); background:var(--ss-raised); }
.ss-layout-choices label:has(input:focus-visible) > span { outline:2px solid var(--ss-accent); outline-offset:3px; }
.ss-v2 .ss-layout-dialog { width:min(1100px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow-y:auto; }
.ss-layout-dialog .ss-import-map { height:clamp(240px,48vh,500px); background:var(--ss-bg); color:var(--ss-flow-good); border:1px solid var(--ss-border); border-radius:12px; }
.ss-layout-dialog .ss-import-map rect { fill:var(--ss-surface); stroke:var(--ss-border); }
.ss-layout-dialog .ss-import-map text { fill:var(--ss-text); }
.ss-layout-dialog .ss-import-map-belt { stroke:var(--ss-flow-good); }
.ss-layout-dialog .ss-form-actions { flex-wrap:wrap; }
.ss-v2 .ss-layout-dialog--expanded { display:flex; flex-direction:column; inset:0; margin:0; width:100vw; height:100dvh; max-height:none; border-radius:0; padding:16px; overflow:hidden; box-sizing:border-box; }
.ss-layout-dialog--expanded > :not(.ss-import-map) { flex-shrink:0; }
.ss-layout-dialog--expanded .ss-layout-choices { margin:8px 0; }
.ss-layout-dialog--expanded .ss-import-map { flex:1; min-height:0; height:auto; }
.ss-layout-dialog--expanded .ss-form-actions { margin-top:12px; }
@media(max-width:650px) {
  .ss-layout-dialog .ss-import-map-toolbar > div { flex-wrap:wrap; }
  .ss-v2 .ss-layout-dialog--expanded { padding:12px; }
}

/* Simple sharing and custom paint controls use the existing V2 surfaces. */
.ss-share-url { width:100%; }
.ss-share-social { display:flex; flex-wrap:wrap; gap:20px; margin:20px 0; }
.ss-share-image { display:block; width:100%; height:auto; border:1px solid var(--ss-border); border-radius:8px; margin:20px 0; }
.ss-shared-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; background:var(--ss-sidebar); border-bottom:1px solid var(--ss-border); }
.ss-shared-heading h1 { margin:0; font-size:20px; overflow:hidden; text-overflow:ellipsis; }
.ss-readonly-workspace { flex:1; min-height:0; height:calc(100dvh - 80px); }
.ss-readonly-workspace .ss-canvas { cursor:grab; touch-action:none; }
.ss-readonly-workspace .ss-nodes { pointer-events:none; }
.ss-readonly-workspace:not([data-v2-shared-canvas-image-value=true]) .ss-grid-node:not(.ss-grid-node--stamp) { pointer-events:auto; }
.ss-readonly-workspace :is(.ss-belt-waypoint,.ss-stamp-resize) { display:none; }
.ss-readonly-workspace .ss-nodes :disabled { opacity:1; pointer-events:none; }
.ss-shared-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ss-paint-options input[type=color] { width:100%; height:36px; padding:2px; }
.ss-paint-options input[type=text] { width:100%; min-width:0; }
.ss-paint-options input[aria-invalid=true] { border-color:var(--ss-danger); }
@media(max-width:600px) { .ss-shared-heading { padding:10px 12px; } .ss-shared-controls { font-size:11px; } }
.ss-shared-heading > div { min-width:0; }
.ss-shared-heading h1 { white-space:nowrap; }
.ss-shared-heading > .ss-button { flex-shrink:0; }
.ss-shared-controls > span { white-space:nowrap; }
@media(max-width:600px) { .ss-shared-pan-hint { display:none; } }
.ss-sharing-panel, .ss-sharing-panel > [data-controller] { display:grid; gap:16px; }
.ss-sharing-panel .ss-share-url { min-height:44px; padding:10px 12px; border:1px solid var(--ss-border); border-radius:6px; color:var(--ss-text); background:var(--ss-sidebar); }
.ss-sharing-panel .ss-form-actions, .ss-sharing-panel .ss-share-social, .ss-sharing-panel .ss-share-image { margin:0; }

.ss-explore-search { display:grid; grid-template-columns:minmax(150px,1.25fr) minmax(160px,1.1fr) minmax(140px,.95fr) minmax(100px,.7fr) minmax(140px,.9fr) auto; align-items:end; gap:12px; margin-bottom:16px; }
.ss-explore-search > div { min-width:0; }
.ss-explore-search label { display:block; margin-bottom:6px; color:var(--ss-muted); font-size:12px; }
.ss-explore-search :is(input,select) { min-height:44px; padding:10px 12px; border:1px solid var(--ss-border); border-radius:6px; background:var(--ss-bg); color:var(--ss-text); font:inherit; }
.ss-explore-search :is(input,select) { width:100%; min-width:0; }
.ss-explore-page .ss-explore-results { margin:0 0 16px; color:var(--ss-muted); font-size:12px; }
.ss-explore-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:20px; }
.ss-explore-card { display:block; min-width:0; overflow:hidden; border:1px solid var(--ss-border); border-radius:10px; background:var(--ss-surface); color:var(--ss-text); text-decoration:none; }
.ss-explore-card:hover { border-color:var(--ss-accent); }
.ss-explore-card-link { display:block; color:inherit; text-decoration:none; }
.ss-explore-preview { height:210px; background:var(--ss-bg); border-bottom:1px solid var(--ss-border); }
.ss-explore-card-info { padding:18px; }
.ss-explore-card h2 { margin:0 0 14px; font-size:17px; overflow-wrap:anywhere; }
.ss-explore-card-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ss-explore-card-heading h2 { margin:0; min-width:0; }
.ss-explore-tier { display:inline-block; flex-shrink:0; padding:3px 7px; border:1px solid var(--ss-border); border-radius:5px; color:var(--ss-muted); font-size:11px; white-space:nowrap; }
.ss-explore-card-stats { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--ss-muted); font-size:12px; }
.ss-explore-card-stats strong { color:var(--ss-text); }
.ss-explore-open { display:flex; align-items:center; gap:5px; margin-left:auto; color:var(--ss-accent); }
.ss-explore-open .ss-icon { width:16px; height:16px; }
.ss-explore-empty { display:grid; justify-items:center; gap:12px; padding:72px 16px; text-align:center; }
.ss-explore-empty > .ss-icon { width:36px; height:36px; color:var(--ss-accent); }
.ss-explore-empty p,.ss-explore-pages { color:var(--ss-muted); font-size:12px; }
.ss-explore-pages { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:28px; }
.ss-explore-viewer,.ss-shared-viewer { display:flex; flex-direction:column; height:100%; min-height:0; }
.ss-explore-viewer .ss-readonly-workspace,.ss-shared-viewer .ss-readonly-workspace { height:auto; }
.ss-shared-viewer .ss-shared-heading { flex-shrink:0; flex-wrap:wrap; }
.ss-explore-viewer-heading { flex-wrap:wrap; flex-shrink:0; }
.ss-explore-viewer-heading .ss-page-title { max-width:100%; }
.ss-explore-viewer-heading .ss-page-title > div { min-width:0; }
.ss-explore-viewer-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ss-report-form form { display:grid; gap:12px; margin-top:20px; }
.ss-report-form h2 { overflow-wrap:anywhere; }
.ss-report-form :is(select,textarea) { width:100%; padding:10px 12px; border:1px solid var(--ss-border); border-radius:6px; background:var(--ss-bg); color:var(--ss-text); font:inherit; }
.ss-report-form select { min-height:44px; }
.ss-report-form textarea { resize:vertical; }
.ss-report-count { margin-left:6px; padding:1px 6px; border-radius:8px; background:var(--ss-accent); color:var(--ss-bg); font-size:11px; }
.ss-report-filters { display:flex; gap:20px; margin:20px 0; }
.ss-report-filters a[aria-current=page] { color:var(--ss-accent); }
.ss-factory-report { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px; border-bottom:1px solid var(--ss-border); }
.ss-factory-report > div { min-width:0; overflow-wrap:anywhere; }
.ss-factory-report > .ss-button { flex-shrink:0; }
.ss-report-details { flex-shrink:0; padding:12px 24px; border-bottom:1px solid var(--ss-border); }
.ss-report-details .ss-report-description { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:8px; max-height:100px; overflow:auto; font-size:13px; }
.ss-admin-viewer-actions form { margin:0; }
@media(min-width:801px) and (max-width:1200px) { .ss-explore-search { grid-template-columns:repeat(4,minmax(0,1fr)); } .ss-explore-search > div:nth-child(-n+2) { grid-column:span 2; } }
@media(max-width:800px) { .ss-explore-search { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .ss-explore-search > div:first-child,.ss-explore-search > button { grid-column:1/-1; } }
@media(max-width:380px) { .ss-explore-search { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .ss-explore-viewer-heading { gap:8px; } .ss-explore-viewer-actions .ss-button { padding:8px 10px; } }

/* The V2 admin browser keeps the shared read-only canvas and a compact list. */
.ss-admin-simulations { list-style:none; padding:0; margin:0; border:1px solid var(--ss-border); border-radius:10px; overflow:hidden; }
.ss-admin-simulation { display:grid; grid-template-columns:minmax(0,1fr) 140px 180px auto; gap:20px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--ss-border); }
.ss-admin-simulation:last-child { border-bottom:0; }
.ss-admin-simulation-name { min-width:0; overflow-wrap:anywhere; }
.ss-admin-simulation-title { font-weight:600; }
.ss-admin-simulation-name p, .ss-admin-simulation-activity, .ss-admin-simulation-size small { color:var(--ss-muted); font-size:12px; }
.ss-admin-simulation-name p { margin-top:6px; }
.ss-admin-simulation-size :is(strong,small) { display:block; }
.ss-admin-owner-filter { margin-bottom:16px; }
.ss-admin-browser-search > div:first-of-type { flex:1; min-width:0; }
.ss-admin-browser-search select { min-height:48px; padding:10px 12px; border:1px solid var(--ss-border); border-radius:8px; color:var(--ss-text); background:var(--ss-bg); font:inherit; }
.ss-admin-viewer { display:flex; flex-direction:column; height:100%; min-height:0; }
.ss-admin-viewer-heading { flex-wrap:wrap; flex-shrink:0; }
.ss-admin-viewer-heading .ss-page-title > div { min-width:0; }
.ss-admin-viewer-heading .ss-page-title { max-width:100%; }
.ss-admin-viewer-heading p { overflow-wrap:anywhere; }
.ss-admin-viewer-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ss-admin-viewer .ss-readonly-workspace { height:auto; }
@media(max-width:650px) { .ss-admin-browser-search > div:first-of-type { flex-basis:100%; } .ss-admin-simulation { grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; padding:16px; } .ss-admin-simulation-size { text-align:right; } .ss-admin-viewer-heading { gap:8px; } .ss-admin-viewer-actions { gap:4px; } .ss-admin-viewer-actions .ss-button { padding:8px 10px; font-size:12px; } }

.ss-admin-tabs { display:flex; flex-wrap:wrap; gap:12px 24px; margin:0 0 24px; border-bottom:1px solid var(--ss-border); }
.ss-admin-tabs a { padding:0 0 12px; color:var(--ss-muted); }
.ss-admin-tabs a[aria-current=page] { color:var(--ss-accent); border-bottom:2px solid var(--ss-accent); }
.ss-admin-users { list-style:none; padding:0; margin:0; border:1px solid var(--ss-border); border-radius:10px; overflow:hidden; }
.ss-admin-user { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.6fr); gap:20px; padding:20px; border-bottom:1px solid var(--ss-border); }
.ss-admin-user:last-child { border-bottom:0; }
.ss-admin-user > div { min-width:0; overflow-wrap:anywhere; }
.ss-admin-user :is(small,span,strong), .ss-admin-billing-list small { display:block; }
.ss-admin-user small { margin-top:6px; font-size:12px; color:var(--ss-muted); }
.ss-admin-field-label { color:var(--ss-muted); font-size:11px; margin-bottom:8px; }
.ss-admin-status { color:var(--ss-accent); font-size:12px; font-weight:500; }
.ss-admin-status--active { color:var(--ss-flow-good); }
.ss-admin-user-identity { overflow-wrap:anywhere; }
.ss-admin-user-summary { display:grid; grid-template-columns:1fr 1.25fr; gap:20px; margin-bottom:20px; }
.ss-admin-user-panel { min-width:0; padding:24px; border:1px solid var(--ss-border); border-radius:10px; background:var(--ss-surface); overflow-wrap:anywhere; }
.ss-admin-user-panel h2 { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 16px; font-size:18px; }
.ss-admin-user-panel h3 { margin:24px 0 12px; font-size:14px; }
.ss-admin-facts { display:grid; grid-template-columns:minmax(0,145px) minmax(0,1fr); gap:12px 16px; font-size:12px; }
.ss-admin-facts dt { color:var(--ss-muted); }
.ss-admin-facts dd { margin:0; }
.ss-admin-user-panel code { font-size:11px; }
.ss-admin-billing-list { list-style:none; padding:0; margin:0; }
.ss-admin-billing-list li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding:14px 0; border-bottom:1px solid var(--ss-border); font-size:13px; }
.ss-admin-billing-list li:last-child { border-bottom:0; }
.ss-admin-billing-list li > div { min-width:0; }
.ss-admin-billing-list small { font-size:12px; color:var(--ss-muted); margin-top:6px; }
.ss-admin-billing-list .ss-admin-payment-error { color:var(--ss-danger); }
.ss-admin-purchases { list-style:none; padding:0; margin:0; border:1px solid var(--ss-border); border-radius:10px; overflow:hidden; }
.ss-admin-purchase { display:grid; grid-template-columns:minmax(0,1fr) 160px 170px auto; gap:20px; padding:20px; border-bottom:1px solid var(--ss-border); font-size:13px; }
.ss-credits-page { max-width:1040px; }
.ss-ai-starter { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:28px; overflow-y:auto; }
.ss-ai-starter h2 { font-size:26px; line-height:1.2; margin:8px 0 14px; }
.ss-ai-starter p { margin:12px 0; color:var(--ss-muted); }
.ss-ai-starter textarea { display:block; width:100%; resize:vertical; min-height:110px; max-height:220px; margin:20px 0 12px; padding:12px; border:1px solid var(--ss-border); border-radius:6px; background:var(--ss-bg); color:var(--ss-text); font:inherit; font-size:16px; }
.ss-ai-starter-examples { display:flex; flex-wrap:wrap; gap:8px; }
.ss-ai-starter .ss-form-actions { justify-content:space-between; gap:10px; margin-top:24px; }
.ss-ai-starter p.ss-ai-starter-request { padding:16px; border-radius:8px; background:var(--ss-bg); color:var(--ss-text); white-space:pre-wrap; overflow-wrap:anywhere; max-height:180px; overflow-y:auto; }
@media(max-width:450px) { .ss-ai-starter { padding:20px; } .ss-ai-starter h2 { font-size:23px; } .ss-ai-starter .ss-form-actions > .ss-button { flex:1; white-space:normal; } }
.ss-credit-balance, .ss-credit-payment { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:24px; margin:24px 0 16px; border:1px solid var(--ss-border); border-radius:12px; background:var(--ss-surface); }
.ss-credit-balance h2, .ss-credit-payment h2 { margin:0 0 8px; font-size:20px; }
.ss-credit-balance p { margin:0; color:var(--ss-muted); }
.ss-credit-packages { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:30px 0 18px; scroll-margin-top:24px; }
.ss-credit-pack { display:flex; flex-direction:column; min-width:0; }
.ss-credit-pack--bonus { border-color:var(--ss-accent); }
.ss-credit-quantity { display:flex; flex-direction:column; gap:8px; margin:8px 0 24px; }
.ss-credit-quantity strong { font-size:22px; }
.ss-credit-quantity span { color:var(--ss-muted); }
.ss-credit-pack form { margin-top:auto; }
.ss-credit-pack .ss-button { width:100%; }
.ss-credit-history { margin-top:32px; }
.ss-credit-history-row { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--ss-border); }
.ss-credit-history-row small, .ss-credit-history-row a { display:block; margin-top:6px; color:var(--ss-muted); }
.ss-credit-history-row > span:last-child { text-align:right; }
@media(max-width:650px) { .ss-credit-packages { grid-template-columns:1fr; } .ss-credit-balance, .ss-credit-payment { padding:20px; } }
.ss-admin-purchase:last-child { border-bottom:0; }
.ss-admin-purchase > div { min-width:0; overflow-wrap:anywhere; }
.ss-admin-purchase small { display:block; color:var(--ss-muted); margin-top:6px; font-size:12px; }
@media(max-width:1000px) { .ss-admin-user-summary { grid-template-columns:1fr; } }
@media(max-width:700px) {
  .ss-admin-user { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:16px; }
  .ss-admin-user-name { grid-column:1 / -1; }
  .ss-admin-user-panel { padding:18px; }
  .ss-admin-facts { grid-template-columns:minmax(0,115px) minmax(0,1fr); gap:12px; }
  .ss-admin-purchase { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:16px; }
  .ss-admin-purchase > div:first-child { grid-column:1 / -1; }
}

/* AI layout: section marker captions and the Arrange with AI option */
.ss-section-label { position: absolute; left: calc(100% + 32px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: clamp(48px, calc(16px / var(--ss-canvas-scale, 1)), 320px); font-weight: 600; letter-spacing: -.01em; line-height: 1; color: var(--ss-text); pointer-events: none; }
.ss-layout-ai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto; align-items: end; gap: 12px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ss-border); }
.ss-layout-ai-copy { display: flex; gap: 12px; align-items: flex-start; }
.ss-layout-ai-copy .ss-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ss-accent); }
.ss-layout-ai-copy strong { display: block; font-size: 14px; }
.ss-layout-ai-copy span { display: block; margin-top: 2px; font-size: 12px; color: var(--ss-muted); line-height: 1.45; }
.ss-layout-ai-note { display: grid; gap: 6px; font-size: 12px; color: var(--ss-muted); }
.ss-layout-ai-note input { width: 100%; min-width: 0; min-height: 36px; padding: 7px 10px; box-sizing: border-box; color: var(--ss-text); background: var(--ss-bg); border: 1px solid var(--ss-border); border-radius: 6px; font: inherit; font-size: 13px; }
.ss-layout-dialog--expanded .ss-layout-ai { display: none; }
@media (max-width: 760px) {
  .ss-layout-ai { grid-template-columns: 1fr; align-items: stretch; }
}