:root { color-scheme: light dark; font-family: Inter, system-ui, sans-serif; }
body { margin: 0; background: #10151f; color: #eef3fb; }
.studio-shell [hidden] { display: none !important; }
.studio-shell { max-width: 1500px; margin: auto; padding: 24px; }
.studio-shell header { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.studio-shell h1, .studio-shell h2 { margin: 0; }
.studio-shell small, .studio-shell label span { color: #94a4ba; }
.studio-back-link, .studio-guide-link { display: inline-block; margin-bottom: 8px; color: #8fb9ff; }
.studio-shell label { display: grid; gap: 6px; min-width: 240px; }
.studio-shell select { min-height: 40px; border-radius: 9px; padding: 7px 10px; }
.studio-status { min-height: 24px; margin: 14px 0; color: #9fb1c9; }
.studio-workspace-nav { position: sticky; top: 0; z-index: 10; display: flex; gap: 6px; margin: 18px 0 0; padding: 7px; overflow-x: auto; border: 1px solid #2b384a; border-radius: 13px; background: rgb(16 21 31 / 92%); backdrop-filter: blur(16px); }
.studio-workspace-nav a { padding: 9px 13px; border-radius: 8px; color: #94a4ba; text-decoration: none; white-space: nowrap; }
.studio-workspace-nav a:hover { color: #eef3fb; background: #202a39; }
.studio-workspace-nav a[aria-current="page"] { color: #fff; background: #315b93; }
[data-studio-section] { scroll-margin-top: 78px; }
.studio-overview { display: grid; gap: 18px; margin-bottom: 14px; }
.studio-overview p { max-width: 780px; color: #b8c5d8; line-height: 1.55; }
.studio-project-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(170px, .35fr) auto auto; gap: 10px; align-items: end; }
.studio-project-toolbar label { min-width: 0; }
.studio-project-toolbar input, .studio-project-toolbar select, .studio-project-toolbar button,
.studio-project-card button, .studio-blueprint-card button { min-height: 40px; border-radius: 9px; padding: 7px 12px; }
.studio-primary { border-color: #5084c9; color: #fff; background: #315b93; }
.studio-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 10px; }
.studio-project-card { display: grid; gap: 9px; padding: 14px; border: 1px solid #2b384a; border-radius: 12px; background: #131b27; }
.studio-project-card h3, .studio-project-card p { margin: 0; }
.studio-project-card p { font: 12px ui-monospace, monospace; }
.studio-project-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.studio-project-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-project-metrics span, .studio-status-token { padding: 4px 7px; border-radius: 999px; color: #b9c7da; background: #202a39; font-size: 11px; }
.studio-status-token.active { color: #a9e2bb; background: #1c3b2b; }
.studio-status-token.planned { color: #bad5ff; background: #203a5c; }
.studio-status-token.archived, .studio-status-token.cancelled { color: #aeb5c1; background: #303641; }
.studio-empty { grid-column: 1 / -1; }
.studio-dialog { width: min(580px, calc(100vw - 32px)); border: 1px solid #40516a; border-radius: 15px; color: inherit; background: #171e2a; box-shadow: 0 28px 90px rgb(0 0 0 / 48%); }
.studio-dialog::backdrop { background: rgb(4 9 17 / 72%); backdrop-filter: blur(4px); }
.studio-dialog form { display: grid; gap: 12px; }
.studio-dialog-heading { display: flex; justify-content: space-between; align-items: center; }
.studio-dialog-heading button { width: 38px; height: 38px; border-radius: 50%; }
.studio-dialog input, .studio-dialog select { box-sizing: border-box; width: 100%; min-height: 40px; border-radius: 9px; padding: 7px 10px; }
.studio-date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.studio-blueprint-card { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(180px, .6fr) auto auto; align-items: end; gap: 10px; padding: 13px; border: 1px solid #365275; border-radius: 12px; background: #142238; }
.studio-blueprint-card > div { display: grid; gap: 4px; }
.studio-blueprint-card label { min-width: 0; }
.studio-blueprint-card pre { grid-column: 1 / -1; max-height: 260px; overflow: auto; padding: 10px; border-radius: 8px; background: #0e1520; font-size: 11px; }
.studio-overview-links { display: flex; gap: 18px; align-items: start; }
.studio-expert-id summary { color: #8394ab; cursor: pointer; }
.studio-launch-guide { border-top: 1px solid #2b384a; padding-top: 14px; }
.studio-launch-guide li { margin: 7px 0; line-height: 1.4; }
.studio-journey { display: grid; grid-template-columns: minmax(190px, .7fr) 2fr; gap: 18px; align-items: center; margin-bottom: 14px; }
.studio-journey > div:first-child { display: grid; gap: 5px; }
.studio-journey-scroll { position: relative; min-width: 0; }
.studio-journey ol { display: grid; grid-template-columns: repeat(8, minmax(140px, 1fr)); gap: 6px; margin: 0; padding: 0 34px; list-style: none; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; }
.studio-journey-scroll-control { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 32px; height: 42px; padding: 0; border: 1px solid rgb(93 126 174 / 24%); border-radius: 999px; color: rgb(35 73 126 / 76%); background: rgb(255 255 255 / 62%); box-shadow: 0 6px 18px rgb(24 62 118 / 12%); backdrop-filter: blur(8px); transform: translateY(-50%); cursor: pointer; transition: opacity .16s ease, background .16s ease, box-shadow .16s ease; }
.studio-journey-scroll-control--left { left: 1px; }
.studio-journey-scroll-control--right { right: 1px; }
.studio-journey-scroll-control span { font-size: 27px; font-weight: 300; line-height: 1; transform: translateY(-1px); }
.studio-journey-scroll-control:hover { color: #174b9b; background: rgb(255 255 255 / 86%); box-shadow: 0 8px 22px rgb(24 62 118 / 18%); }
.studio-journey-scroll-control:focus-visible { outline: 3px solid rgb(36 107 255 / 38%); outline-offset: 2px; }
.studio-journey a { display: flex; min-width: 0; gap: 7px; min-height: 48px; align-items: center; padding: 7px 9px; border-radius: 8px; color: #aebbd0; line-height: 1.2; overflow-wrap: anywhere; text-decoration: none; white-space: normal; background: #202a39; }
.studio-journey a > span { flex: 0 0 auto; }
.studio-journey li.complete a { color: #9ed8b0; }
.studio-journey li.current a { color: #fff; background: #315b93; }
.studio-controls { margin-bottom: 14px; }
.studio-edition-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; background: linear-gradient(135deg, #19283c, #171e2a 55%); }
.studio-edition-summary[hidden] { display: none; }
.studio-edition-summary h2 { margin-top: 4px; }
.studio-edition-readiness { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 8px; }
.studio-edition-readiness span { display: grid; gap: 3px; padding: 8px 10px; border-radius: 9px; background: #202a39; }
.studio-edition-readiness strong { font-size: 12px; }
.studio-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 12px; }
.studio-actions label { min-width: 160px; }
.studio-actions button, .studio-actions input { min-height: 40px; border-radius: 9px; padding: 7px 12px; }
.studio-controls textarea { box-sizing: border-box; width: 100%; margin-top: 12px; border-radius: 9px; padding: 10px; font: 12px ui-monospace, monospace; }
.studio-inspector { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.studio-inspector label { min-width: 0; }
.studio-inspector input, .studio-inspector select { box-sizing: border-box; width: 100%; min-height: 40px; border-radius: 9px; padding: 7px 10px; }
.studio-expert { margin-top: 12px; color: #94a4ba; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 14px; }
.studio-panel { min-width: 0; padding: 16px; border: 1px solid #2b384a; border-radius: 14px; background: #171e2a; }
.studio-source { grid-column: 1 / -1; }
.studio-source pre { max-height: 440px; overflow: auto; white-space: pre; font-size: 12px; }
.studio-graph { display: grid; gap: 12px; }
.studio-canvas-panel { overflow: hidden; }
.studio-canvas-heading, .studio-canvas-tools, .studio-palette { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.studio-canvas-heading { justify-content: space-between; }
.studio-breadcrumbs { display: flex; align-items: center; gap: 7px; min-height: 38px; margin-top: 10px; overflow-x: auto; }
.studio-breadcrumbs button { border: 0; padding: 6px 9px; border-radius: 7px; color: #aebbd0; background: transparent; }
.studio-breadcrumbs button:not([aria-current="page"]):hover { color: #fff; background: #202a39; }
.studio-breadcrumbs button[aria-current="page"] { color: #fff; font-weight: 650; }
.studio-canvas-tools button, .studio-palette button { min-height: 36px; border: 1px solid #3a4b63; border-radius: 8px; padding: 6px 10px; background: #202a39; color: inherit; }
.studio-canvas-tools output { min-width: 48px; text-align: center; }
.studio-palette { margin: 12px 0; }
.studio-canvas-navigation { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.studio-canvas-navigation label { min-width: 180px; }
.studio-canvas-navigation input, .studio-canvas-navigation button { min-height: 36px; border-radius: 8px; padding: 6px 10px; }
.studio-canvas-navigation output { color: #94a4ba; }
.studio-edge-summary { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #142238; }
.studio-edge-summary strong { margin-right: 4px; font-size: 12px; color: #9fc2ef; }
.studio-edge-summary button { min-height: 30px; border: 1px solid #3b5e88; border-radius: 999px; color: #cbdcf2; background: #1d3049; }
.studio-palette button { cursor: grab; }
.studio-palette button:focus-visible, .studio-canvas-node:focus-visible { outline: 3px solid #8fb9ff; outline-offset: 2px; }
.studio-canvas-viewport { position: relative; min-height: 560px; overflow: auto; border: 1px solid #2b384a; border-radius: 10px; background-color: #111824; background-image: radial-gradient(#334258 1px, transparent 1px); background-size: 20px 20px; touch-action: none; }
.studio-scope-context { position: absolute; z-index: 4; top: 12px; left: 12px; display: grid; gap: 3px; box-sizing: border-box; max-width: min(560px, calc(100% - 24px)); padding: 8px 12px; border: 1px solid #405677; border-radius: 10px; background: rgb(19 29 44 / 92%); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); backdrop-filter: blur(8px); }
.studio-scope-context[hidden] { display: none; }
.studio-scope-context small { color: #8fa6c5; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.studio-scope-context-header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.studio-scope-context strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-scope-context button { flex: 0 0 auto; min-height: 28px; padding: 4px 8px; border: 1px solid #536b89; border-radius: 7px; color: #dce9fb; background: #25364d; cursor: pointer; }
.studio-scope-context button:hover, .studio-scope-context button:focus-visible { border-color: #8fb9ff; background: #304a6d; }
.studio-canvas { position: relative; width: 2700px; height: 1400px; transform-origin: 0 0; }
.studio-canvas-edges { position: absolute; inset: 0; width: 2700px; height: 1400px; overflow: visible; pointer-events: none; transform-origin: 0 0; }
.studio-canvas-edge, .studio-canvas-edge-hit { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.studio-canvas-edge { stroke: #647d9f; stroke-width: 2; pointer-events: none; }
.studio-canvas-edge-hit { stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.studio-canvas-edge-group:focus { outline: none; }
.studio-canvas-edge-group:focus .studio-canvas-edge { stroke-width: 3.5; filter: drop-shadow(0 0 3px rgb(120 174 252 / 65%)); }
.studio-canvas-edge--containment { stroke: #647d9f; }
.studio-canvas-edge--flow { stroke: #3f7fc3; }
.studio-canvas-edge--dependency { stroke: #8d68b8; stroke-dasharray: 3 5; }
.studio-canvas-edge--template { stroke: #6b829d; stroke-dasharray: 10 5; }
.studio-canvas-edge--grouping { stroke: #527e8b; stroke-dasharray: 2 4; }
.studio-canvas-edge--aggregate { stroke: #8f6fc5; stroke-width: 2.5; stroke-dasharray: 9 7; }
.studio-edge-marker--containment path { fill: #647d9f; }
.studio-edge-marker--flow path { fill: #3f7fc3; }
.studio-edge-marker--dependency path { fill: #8d68b8; }
.studio-edge-marker--template path { fill: #6b829d; }
.studio-edge-marker--grouping path { fill: #527e8b; }
.studio-edge-marker--aggregate path { fill: #8f6fc5; }
.studio-canvas-node { position: absolute; box-sizing: border-box; display: grid; align-content: start; gap: 4px; min-width: 0; overflow: hidden; padding: 12px 14px; border: 1px solid #476486; border-left: 4px solid #5d92e8; border-radius: 9px; background: #202a39; color: inherit; text-align: left; cursor: move; touch-action: none; }
.studio-canvas-node > b { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.studio-canvas-node[data-visual-role="module"] { border: 2px solid #527fb7; border-top: 5px solid #74a4df; border-radius: 17px; background: linear-gradient(145deg, #243750, #1f2b3b 68%); }
.studio-canvas-node[data-visual-role="container"] { border: 2px dashed #7086a5; border-left-style: solid; border-radius: 13px; background: #1d2938; }
.studio-canvas-node[data-visual-role="phase"] { border-left-width: 6px; border-radius: 9px; }
.studio-canvas-node[data-visual-role="draw"] { padding-right: 22px; padding-left: 22px; border: 2px solid #a285b9; border-radius: 42px; background: linear-gradient(135deg, #362c46, #252b3a 70%); }
.studio-canvas-node[data-visual-role="allocation"] { border-color: #9b865f; border-radius: 24px 8px; background: #322f2a; }
.studio-node-ports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.studio-port-column { display: grid; gap: 5px; min-width: 0; }
.studio-port-column[data-port-column="input"] { grid-column: 1; }
.studio-port-column[data-port-column="output"] { grid-column: 2; }
.studio-node-ports button { overflow: hidden; min-width: 0; min-height: 25px; padding: 3px 7px; border: 1px solid #536b89; border-radius: 999px; color: #c7d8ed; background: #182435; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; cursor: crosshair; }
.studio-node-ports button:hover, .studio-node-ports button:focus-visible { border-color: #8fb9ff; background: #253b58; }
.studio-node-ports button.studio-port-selected { border-color: #84d4a2; color: #dff9e8; background: #28523a; box-shadow: 0 0 0 2px rgb(80 190 120 / 24%); }
.studio-open-level { overflow: hidden; min-height: 31px; margin-top: 5px; border: 1px solid #4f6f98; border-radius: 7px; padding: 5px 7px; color: #dce9fb; background: #2a3a50; line-height: 1.2; text-overflow: ellipsis; white-space: normal; }
.studio-canvas-node[aria-selected="true"] { border-color: #9bc2ff; box-shadow: 0 0 0 2px #5d92e8; }
.studio-canvas-node.studio-flow-highlight { border-color: #84d4a2; box-shadow: 0 0 0 3px rgb(80 190 120 / 32%); }
.studio-canvas-node small { overflow: hidden; color: #94a4ba; text-overflow: ellipsis; white-space: nowrap; }
.studio-kind { display: grid; gap: 7px; }
.studio-kind > strong { color: #8fb9ff; text-transform: uppercase; font-size: 11px; }
.studio-node { padding: 9px; border-left: 3px solid #5d92e8; border-radius: 6px; background: #202a39; }
.studio-node small { display: block; }
.studio-diagnostic { margin: 8px 0; padding: 8px; border-radius: 7px; background: #202a39; }
.studio-diagnostic.error { border-left: 3px solid #e75d68; }
.studio-diagnostic.warning { border-left: 3px solid #e7b45d; }
.studio-derived div { margin-top: 10px; white-space: pre-wrap; font: 12px ui-monospace, monospace; }
.studio-edition-data { grid-column: 1 / -1; }
.studio-edition-data pre { overflow: auto; white-space: pre-wrap; }
.studio-edition-data > p { color: #aebbd0; }
.studio-data-upload { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(260px, 1fr) auto; gap: 10px; align-items: end; margin: 14px 0; }
.studio-data-upload label { min-width: 0; }
.studio-data-upload input, .studio-data-upload button, .studio-data-list button, .studio-schedule-review button { box-sizing: border-box; min-height: 40px; border-radius: 9px; padding: 7px 10px; }
.studio-data-list { display: grid; gap: 7px; margin: 12px 0; }
.studio-data-list article { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #2b384a; border-radius: 10px; background: #131b27; }
.studio-data-list article > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.studio-data-list article > div:first-child { display: grid; gap: 3px; }
.studio-data-list small { color: #94a4ba; }
.studio-data-list .studio-participant-unresolved { display: grid; grid-template-columns: minmax(180px, .6fr) minmax(220px, 1fr) minmax(220px, 1fr); align-items: end; border-color: #70434a; }
.studio-participant-unresolved label { min-width: 0; }
.studio-participant-unresolved input { box-sizing: border-box; width: 100%; min-height: 40px; border-radius: 9px; padding: 7px 10px; }
.studio-participant-unresolved [data-participant-results] { display: flex; gap: 5px; flex-wrap: wrap; }
.studio-participant-unresolved [data-participant-results] button { min-height: 32px; font-size: 11px; }
.studio-data-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.studio-data-summary span { padding: 7px 10px; border-radius: 8px; color: #b8cae2; background: #202a39; }
.studio-data-summary span.blocked { color: #ffd0d4; background: #512830; }
.studio-schedule-review { margin-top: 12px; padding: 12px; border: 1px solid #365275; border-radius: 10px; background: #142238; }
.studio-schedule-review pre { max-height: 390px; padding: 10px; border-radius: 8px; background: #0e1520; font-size: 11px; }
.studio-runtime-card { margin-top: 14px; padding: 14px; border: 1px solid #2b384a; border-radius: 11px; background: #131b27; }
.studio-runtime-card h3 { margin: 0; }
.studio-runtime-card > p { color: #aebbd0; }
.studio-runtime-card pre { max-height: 280px; padding: 10px; border-radius: 8px; background: #0e1520; font-size: 11px; }
.studio-layer-form { display: grid; grid-template-columns: minmax(130px, .3fr) minmax(160px, .4fr) minmax(220px, 1fr) auto; align-items: end; gap: 10px; }
.studio-layer-form label { min-width: 0; }
.studio-layer-form input, .studio-layer-form select, .studio-layer-form button { box-sizing: border-box; width: 100%; min-height: 40px; border-radius: 9px; padding: 7px 10px; }
.studio-presentation-panel { grid-column: 1 / -1; }
.studio-section-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.studio-section-heading h2, .studio-presentation-card h3, .studio-theme-assignment-card :is(strong, span) { overflow-wrap: anywhere; }
.studio-section-heading p, .studio-presentation-card > p { max-width: 780px; color: #aebbd0; line-height: 1.5; }
.studio-section-heading button { flex: 0 0 auto; min-height: 40px; border-radius: 9px; padding: 7px 12px; }
.studio-presentation-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.6fr); align-items: start; gap: 14px; margin-top: 14px; }
.studio-presentation-card { min-width: 0; padding: 16px; border: 1px solid #2b384a; border-radius: 13px; background: #131b27; }
.studio-presentation-card h3 { margin: 0; }
.studio-presentation-card form { display: grid; gap: 10px; margin-top: 14px; }
.studio-presentation-card label { min-width: 0; }
.studio-presentation-card :is(input, select, button) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; border-radius: 9px; padding: 7px 10px; }
.studio-presentation-card .studio-actions { display: grid; grid-template-columns: 1fr 1fr; }
.studio-logo-preview { display: flex; align-items: center; gap: 14px; min-height: 116px; padding: 14px; border: 1px dashed #40516a; border-radius: 12px; background: #0f1826; }
.studio-logo-preview img { display: block; width: min(116px, 36%); max-height: 86px; object-fit: contain; }
.studio-logo-preview > div:last-child { display: grid; gap: 5px; min-width: 0; }
.studio-logo-placeholder { display: grid; flex: 0 0 74px; width: 74px; height: 74px; place-items: center; border-radius: 22px; color: #7facdf; background: #1e3048; font-size: 38px; }
.studio-theme-control { min-width: 0; }
.studio-presentation-access { margin: 12px 0; padding: 10px 12px; border-radius: 9px; color: #f0d29c; background: #44351f; }
.studio-theme-assignment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.studio-theme-assignment-card { min-width: 0; overflow: hidden; padding: 13px; border: 1px solid #34465e; border-radius: 12px; background: #101926; }
.studio-theme-assignment-card > header { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.studio-theme-assignment-card > header > div { display: grid; gap: 4px; min-width: 0; }
.studio-theme-assignment-card > header .studio-status-token { flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-theme-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.studio-theme-preview-card { display: grid; align-content: space-between; gap: 5px; box-sizing: border-box; min-width: 0; min-height: 138px; overflow: hidden; padding: 10px; border: 1px solid rgb(127 156 196 / 34%); border-radius: 10px; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%); }
.studio-theme-preview-card > :is(strong, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-theme-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; padding: 4px 6px; border: 1px solid transparent; border-radius: 7px; }
.studio-theme-preview-header span { display: block; min-width: 0; }
.studio-theme-preview-header img { display: block; max-width: 68px; max-height: 22px; object-fit: contain; }
.studio-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.studio-check input { width: 18px; min-height: 18px; }
.studio-presentation-history { margin-top: 16px; }
.studio-presentation-history summary { cursor: pointer; color: #aebbd0; }
.studio-presentation-history article { display: grid; gap: 4px; margin-top: 8px; padding: 9px 11px; border-radius: 9px; background: #131b27; }
.studio-diagnostic a { display: inline-block; margin-top: 6px; color: #91bfff; }
.studio-release-gates { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.studio-release-gates span { padding: 7px 10px; border-radius: 999px; font-size: 12px; }
.studio-release-gates span.ready { color: #a9e2bb; background: #1c3b2b; }
.studio-release-gates span.blocked { color: #ffd0d4; background: #512830; }
.studio-public-preview-dialog {
  box-sizing: border-box;
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  height: min(780px, calc(100vh - 32px));
  max-height: none;
  overflow: hidden;
  padding: 0;
}
.studio-public-preview-dialog .studio-dialog-heading { padding: 16px 18px; border-bottom: 1px solid #2b384a; }
.studio-public-preview-dialog .studio-dialog-heading h2 { min-width: 0; margin: 0; }
.studio-public-preview { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; height: calc(100% - 71px); padding: 14px 18px 18px; overflow: hidden; }
.studio-public-preview nav { display: flex; gap: 6px; min-width: 0; margin: 8px 0; overflow-x: auto; padding-bottom: 2px; }
.studio-public-preview button { min-height: 34px; border-radius: 8px; padding: 6px 9px; }
.studio-public-preview button.active { border-color: #78a8e4; color: #fff; background: #315b90; }
.studio-public-preview pre {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 12px;
  border-radius: 9px;
  background: #0e1520;
  font-size: 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}
.studio-preview-surface-output {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.studio-preview-fixtures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 10px;
  padding: 2px;
}
.studio-preview-match-card {
  position: relative;
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--exxora-line);
  border-radius: 16px;
  color: var(--exxora-ink);
  background: var(--exxora-surface-alt);
  box-shadow: var(--exxora-shadow-soft);
}
.studio-preview-match-card .match-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--exxora-muted);
  font-size: 11px;
}
.studio-preview-match-card .match-meta > :last-child { justify-self: end; }
.studio-preview-match-card .match-meta-time,
.studio-preview-match-card .match-card-context {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-preview-match-card .match-card-context {
  max-width: 120px;
  font-size: 10px;
  font-weight: 750;
}
.studio-preview-match-card .status-pill {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  border-radius: 999px;
  color: #174aa8;
  background: #e8f0ff;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-preview-match-card .status-pill.live { color: #a32635; background: #fff0f2; }
.studio-preview-match-card .teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.studio-preview-match-card .team {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}
.studio-preview-match-card .team-code {
  overflow: hidden;
  max-width: 100%;
  font-size: 18px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-preview-match-card .team-name {
  display: -webkit-box;
  min-height: 2.2em;
  overflow: hidden;
  color: var(--exxora-muted);
  font-size: 12px;
  line-height: 1.1;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.studio-preview-match-card .team-flag { display: grid; min-height: 24px; place-items: center; }
.studio-preview-match-card .score {
  display: grid;
  min-width: 68px;
  justify-items: center;
  color: var(--exxora-ink);
  font-size: 29px;
  font-weight: 850;
  white-space: nowrap;
}
.studio-preview-match-card .score small { color: var(--exxora-muted); font-size: 9px; font-weight: 700; }
.studio-preview-match-card .draw-team-flag {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--exxora-line);
  border-radius: 50%;
  background: var(--exxora-surface);
  font-size: 18px;
}
.studio-preview-match-card .draw-team-flag img { width: 100%; height: 100%; object-fit: cover; }
.studio-preview-match-card .draw-team-flag-fallback { color: var(--exxora-muted); font-size: 8px; font-weight: 850; }
.studio-preview-banner { padding: 9px 11px; border-radius: 9px; }
.studio-preview-banner.ready { color: #a9e2bb; background: #1c3b2b; }
.studio-preview-banner.private { color: #f0d29c; background: #44351f; }
.studio-catalog-release { margin-top: 18px; padding-top: 15px; border-top: 1px solid #2b384a; }
.studio-release-reason { flex: 1 1 270px; }
@media (max-width: 900px) { .studio-project-toolbar, .studio-blueprint-card { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .studio-layer-form, .studio-presentation-grid, .studio-theme-assignment-grid { grid-template-columns: 1fr; } .studio-data-list .studio-participant-unresolved { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .studio-layout { grid-template-columns: 1fr; } .studio-source { grid-column: auto; } .studio-shell header, .studio-edition-summary { align-items: stretch; flex-direction: column; } .studio-edition-readiness { grid-template-columns: repeat(2, 1fr); } .studio-canvas-viewport { min-height: 430px; } .studio-journey { grid-template-columns: 1fr; } .studio-project-toolbar, .studio-blueprint-card, .studio-date-pair, .studio-data-upload, .studio-layer-form { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .studio-preview-fixtures { grid-template-columns: 1fr; } .studio-preview-match-card .match-meta { grid-template-columns: 1fr auto; } .studio-preview-match-card .match-meta-center { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-color-scheme: light) {
  body { background: #eef2f7; color: #182335; }
  .studio-panel { border-color: #cbd5e1; background: #fff; }
  .studio-workspace-nav { border-color: #cbd5e1; background: rgb(248 250 252 / 94%); }
  .studio-workspace-nav a:hover, .studio-edition-readiness span, .studio-node, .studio-diagnostic { background: #edf2f8; color: #182335; }
  .studio-canvas-viewport { border-color: #cbd5e1; background-color: #f8fafc; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); }
  .studio-canvas-node { border-color: #7895ba; background: #fff; color: #182335; box-shadow: 0 5px 18px rgb(50 75 105 / 9%); }
  .studio-scope-context { border-color: #b6c5d7; background: rgb(255 255 255 / 92%); box-shadow: 0 8px 24px rgb(50 75 105 / 12%); }
  .studio-scope-context small { color: #59708d; }
  .studio-scope-context button { border-color: #a9bacd; color: #29415f; background: #edf3fa; }
  .studio-scope-context button:hover, .studio-scope-context button:focus-visible { border-color: #527fb7; background: #e1edf9; }
  .studio-canvas-node[data-visual-role="module"] { background: linear-gradient(145deg, #edf5ff, #fff 70%); }
  .studio-canvas-node[data-visual-role="container"] { background: #f7f9fc; }
  .studio-canvas-node[data-visual-role="draw"] { border-color: #9672ad; background: linear-gradient(135deg, #f5edfa, #fff 72%); }
  .studio-canvas-node[data-visual-role="allocation"] { border-color: #a78b5c; background: #fbf7ef; }
  .studio-node-ports button { border-color: #94a9c2; color: #29415f; background: #eef4fb; }
  .studio-node-ports button:hover, .studio-node-ports button:focus-visible { border-color: #527fb7; background: #e3effc; }
  .studio-node-ports button.studio-port-selected { border-color: #4e9c6b; color: #205c36; background: #e2f5e8; }
  .studio-canvas-tools button, .studio-palette button { border-color: #b8c5d5; background: #f3f6fa; color: #182335; }
  .studio-edition-summary { background: linear-gradient(135deg, #e5eef9, #fff 55%); }
  .studio-project-card { border-color: #d4dde8; background: #f8fafc; }
  .studio-project-metrics span, .studio-status-token { color: #35465d; background: #e8eef5; }
  .studio-dialog { border-color: #cbd5e1; color: #182335; background: #fff; }
  .studio-blueprint-card { border-color: #b7cce6; background: #eef5fd; }
  .studio-blueprint-card pre { background: #f8fafc; }
  .studio-data-list article, .studio-schedule-review { border-color: #d4dde8; background: #f8fafc; }
  .studio-data-summary span { color: #35465d; background: #e8eef5; }
  .studio-schedule-review pre { background: #fff; }
  .studio-runtime-card { border-color: #d4dde8; background: #f8fafc; }
  .studio-runtime-card pre { background: #fff; }
  .studio-presentation-card, .studio-theme-assignment-card, .studio-presentation-history article { border-color: #d4dde8; background: #f8fafc; }
  .studio-logo-preview { border-color: #b8c5d5; background: #fff; }
  .studio-logo-placeholder { color: #315b93; background: #e8eef8; }
  .studio-public-preview pre { background: #fff; }
  .studio-public-preview button.active { border-color: #246bff; color: #fff; background: #246bff; }
}

/* EXXORA product-family skin. Brand tokens come from the approved vector pack. */
:root {
  --exxora-navy: #08143b;
  --exxora-cyan: #12c8f4;
  --exxora-blue: #246bff;
  --exxora-violet: #9254f5;
  --exxora-danger: #a32635;
  --exxora-gradient: linear-gradient(112deg, var(--exxora-cyan), var(--exxora-blue) 52%, var(--exxora-violet));
  --exxora-bg: #f4f7ff;
  --exxora-surface: rgb(255 255 255 / 90%);
  --exxora-surface-solid: #fff;
  --exxora-surface-alt: #f8faff;
  --exxora-ink: #08143b;
  --exxora-muted: #63708b;
  --exxora-line: #dce5f3;
  --exxora-line-strong: #b8cae7;
  --exxora-control: #f8faff;
  --exxora-control-hover: #eef4ff;
  --exxora-canvas: #f7faff;
  --exxora-dot: #c8d6ed;
  --exxora-shadow: 0 18px 50px rgb(32 74 155 / 10%);
  --exxora-shadow-soft: 0 8px 24px rgb(32 74 155 / 8%);
  --studio-edge-containment: #627897;
  --studio-edge-flow: #246bff;
  --studio-edge-dependency: #8052c6;
  --studio-edge-template: #6e7f99;
  --studio-edge-grouping: #277786;
  --studio-edge-aggregate: #9254f5;
}
body {
  min-height: 100vh;
  color: var(--exxora-ink);
  background:
    radial-gradient(circle at 88% 2%, rgb(146 84 245 / 16%), transparent 28rem),
    radial-gradient(circle at 6% 18%, rgb(18 200 244 / 13%), transparent 26rem),
    linear-gradient(150deg, #fff 0%, var(--exxora-bg) 46%, #eef2ff 100%);
  background-attachment: fixed;
}
.studio-shell {
  position: relative;
  max-width: 1540px;
  padding:
    max(28px, env(safe-area-inset-top))
    max(28px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(28px, env(safe-area-inset-left));
}
.studio-brand-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 24px 28px;
  border: 1px solid rgb(184 202 231 / 82%);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 35%, rgb(36 107 255 / 12%), transparent 23rem),
    var(--exxora-surface);
  box-shadow: var(--exxora-shadow);
  backdrop-filter: blur(18px);
}
.studio-brand-header::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 4px;
  background: var(--exxora-gradient);
  content: "";
}
.studio-brand-header::after {
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -150px;
  width: 390px;
  height: 250px;
  border: 1px solid rgb(36 107 255 / 14%);
  border-radius: 50%;
  box-shadow:
    0 0 0 30px rgb(18 200 244 / 4%),
    0 0 0 68px rgb(146 84 245 / 3%);
  transform: rotate(-14deg);
  content: "";
}
.studio-title-block { display: grid; justify-items: start; }
.studio-brand-lockup { display: block; width: clamp(145px, 16vw, 205px); margin-bottom: 10px; }
.studio-brand-lockup img { display: block; width: 100%; height: auto; }
.studio-shell h1 {
  margin-top: 2px;
  color: var(--exxora-navy);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 820;
  letter-spacing: -.045em;
}
.studio-shell h2, .studio-shell h3 { color: var(--exxora-ink); letter-spacing: -.025em; }
.studio-shell small, .studio-shell label span { color: var(--exxora-muted); }
.studio-back-link, .studio-guide-link, .studio-diagnostic a {
  color: var(--exxora-blue);
  font-weight: 650;
  text-decoration: none;
}
.studio-back-link:hover, .studio-guide-link:hover, .studio-diagnostic a:hover { color: var(--exxora-violet); }
.studio-shell :is(button, input, select, textarea) {
  border: 1px solid var(--exxora-line-strong);
  color: var(--exxora-ink);
  background: var(--exxora-control);
  font: inherit;
}
.studio-shell button { transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.studio-shell button {
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}
.studio-shell button:not(:disabled):hover {
  border-color: rgb(36 107 255 / 62%);
  background: var(--exxora-control-hover);
  box-shadow: 0 6px 18px rgb(36 107 255 / 12%);
  transform: translateY(-1px);
}
.studio-shell button:disabled { cursor: not-allowed; opacity: .46; }
.studio-primary,
.studio-shell [data-studio-apply],
.studio-shell [data-studio-runtime-apply]:not(:disabled) {
  border-color: transparent;
  color: #fff;
  background: var(--exxora-gradient);
  box-shadow: 0 9px 22px rgb(36 107 255 / 22%);
}
.studio-primary:hover,
.studio-shell [data-studio-apply]:hover,
.studio-shell [data-studio-runtime-apply]:not(:disabled):hover {
  border-color: transparent;
  color: #fff;
  background: var(--exxora-gradient);
  box-shadow: 0 12px 28px rgb(36 107 255 / 28%);
}
.studio-workspace-nav {
  top: 8px;
  gap: 4px;
  margin-top: 14px;
  border-color: var(--exxora-line);
  border-radius: 16px;
  background: rgb(255 255 255 / 88%);
  box-shadow: var(--exxora-shadow-soft);
}
.studio-workspace-nav a { color: var(--exxora-muted); font-weight: 650; }
.studio-workspace-nav a:hover { color: var(--exxora-blue); background: #f0f5ff; }
.studio-workspace-nav a[aria-current="page"] {
  color: #fff;
  background: var(--exxora-gradient);
  box-shadow: 0 7px 18px rgb(36 107 255 / 24%);
}
.studio-status {
  color: var(--exxora-muted);
  overflow-wrap: anywhere;
}
.studio-status[data-state="loading"]::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--exxora-blue);
  box-shadow: 0 0 0 4px rgb(36 107 255 / 12%);
  content: "";
}
.studio-status[data-state="error"] { color: var(--exxora-danger); }
.studio-panel,
.studio-project-card,
.studio-runtime-card,
.studio-presentation-card,
.studio-theme-assignment-card,
.studio-presentation-history article,
.studio-data-list article,
.studio-dialog {
  border-color: var(--exxora-line);
  color: var(--exxora-ink);
  background: var(--exxora-surface);
  box-shadow: var(--exxora-shadow-soft);
}
.studio-panel { border-radius: 18px; }
.studio-project-card { border-radius: 16px; }
.studio-project-card:hover {
  border-color: rgb(36 107 255 / 40%);
  box-shadow: 0 14px 32px rgb(36 107 255 / 12%);
}
.studio-overview > div:first-child {
  position: relative;
  overflow: hidden;
  padding: 22px 24px;
  border: 1px solid var(--exxora-line);
  border-radius: 18px;
  background: linear-gradient(125deg, rgb(18 200 244 / 8%), rgb(36 107 255 / 5%) 52%, rgb(146 84 245 / 9%));
}
.studio-overview > div:first-child::after {
  position: absolute;
  top: -70px;
  right: -20px;
  width: 260px;
  height: 170px;
  border: 1px solid rgb(36 107 255 / 12%);
  border-radius: 50%;
  transform: rotate(-18deg);
  content: "";
}
.studio-overview p, .studio-edition-data > p, .studio-runtime-card > p,
.studio-section-heading p, .studio-presentation-card > p,
.studio-presentation-history summary { color: var(--exxora-muted); }
.studio-edition-summary {
  border-color: rgb(36 107 255 / 20%);
  background: linear-gradient(125deg, rgb(18 200 244 / 9%), var(--exxora-surface-solid) 48%, rgb(146 84 245 / 8%));
}
.studio-edition-readiness span,
.studio-journey a,
.studio-project-metrics span,
.studio-data-summary span,
.studio-node,
.studio-diagnostic {
  color: var(--exxora-ink);
  background: var(--exxora-surface-alt);
}
.studio-journey li.complete a { color: #177447; background: #effaf4; }
.studio-journey li.current a { color: #fff; background: var(--exxora-gradient); box-shadow: 0 8px 20px rgb(36 107 255 / 20%); }
.studio-status-token { color: var(--exxora-muted); background: #edf2fb; }
.studio-status-token.active { color: #17683e; background: #e6f7ed; }
.studio-status-token.planned { color: #174aa8; background: #e8f0ff; }
.studio-status-token.archived, .studio-status-token.cancelled { color: #667085; background: #eef0f4; }
.studio-blueprint-card,
.studio-schedule-review {
  border-color: rgb(36 107 255 / 24%);
  background: linear-gradient(135deg, rgb(18 200 244 / 7%), rgb(146 84 245 / 6%));
}
.studio-blueprint-card pre,
.studio-schedule-review pre,
.studio-runtime-card pre,
.studio-public-preview pre,
.studio-source pre {
  color: var(--exxora-ink);
  background: var(--exxora-surface-alt);
}
.studio-breadcrumbs button { color: var(--exxora-muted); background: transparent; }
.studio-breadcrumbs button:not([aria-current="page"]):hover { color: var(--exxora-blue); background: #edf4ff; }
.studio-breadcrumbs button[aria-current="page"] { color: var(--exxora-navy); }
.studio-canvas-tools button,
.studio-palette button,
.studio-edge-summary button {
  border-color: var(--exxora-line-strong);
  color: var(--exxora-ink);
  background: var(--exxora-control);
}
.studio-palette button { position: relative; overflow: hidden; }
.studio-palette button::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--exxora-gradient);
  content: "";
}
.studio-edge-summary { background: linear-gradient(90deg, rgb(18 200 244 / 7%), rgb(146 84 245 / 7%)); }
.studio-edge-summary strong { color: var(--exxora-blue); }
.studio-canvas-viewport {
  border-color: var(--exxora-line);
  border-radius: 16px;
  background-color: var(--exxora-canvas);
  background-image:
    radial-gradient(var(--exxora-dot) 1px, transparent 1px),
    radial-gradient(circle at 80% 0%, rgb(146 84 245 / 8%), transparent 24rem);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}
.studio-scope-context {
  border-color: var(--exxora-line-strong);
  color: var(--exxora-ink);
  background: rgb(255 255 255 / 92%);
  box-shadow: var(--exxora-shadow-soft);
}
.studio-scope-context small { color: var(--exxora-blue); }
.studio-scope-context button { border-color: var(--exxora-line-strong); color: var(--exxora-blue); background: #f2f6ff; }
.studio-canvas-edge--containment { stroke: var(--studio-edge-containment); }
.studio-canvas-edge--flow { stroke: var(--studio-edge-flow); }
.studio-canvas-edge--dependency { stroke: var(--studio-edge-dependency); }
.studio-canvas-edge--template { stroke: var(--studio-edge-template); }
.studio-canvas-edge--grouping { stroke: var(--studio-edge-grouping); }
.studio-canvas-edge--aggregate { stroke: var(--studio-edge-aggregate); }
.studio-edge-marker--containment path { fill: var(--studio-edge-containment); }
.studio-edge-marker--flow path { fill: var(--studio-edge-flow); }
.studio-edge-marker--dependency path { fill: var(--studio-edge-dependency); }
.studio-edge-marker--template path { fill: var(--studio-edge-template); }
.studio-edge-marker--grouping path { fill: var(--studio-edge-grouping); }
.studio-edge-marker--aggregate path { fill: var(--studio-edge-aggregate); }
.studio-canvas-node {
  border-color: #b6c8e4;
  border-left-color: var(--exxora-blue);
  color: var(--exxora-ink);
  background: var(--exxora-surface-solid);
  box-shadow: 0 10px 24px rgb(32 74 155 / 12%);
}
.studio-canvas-node[data-visual-role="module"] {
  border-color: #8eace0;
  border-top-color: var(--exxora-blue);
  background: linear-gradient(145deg, rgb(18 200 244 / 9%), #fff 54%, rgb(146 84 245 / 8%));
}
.studio-canvas-node[data-visual-role="container"] { border-color: #8ea5c8; background: #fbfcff; }
.studio-canvas-node[data-visual-role="phase"] { border-left-color: var(--exxora-cyan); background: linear-gradient(110deg, rgb(18 200 244 / 7%), #fff 30%); }
.studio-canvas-node[data-visual-role="draw"] { border-color: #9c7ad5; background: linear-gradient(135deg, rgb(146 84 245 / 12%), #fff 72%); }
.studio-canvas-node[data-visual-role="allocation"] { border-color: #638de0; background: linear-gradient(135deg, rgb(36 107 255 / 10%), rgb(146 84 245 / 8%)); }
.studio-canvas-node[aria-selected="true"] {
  border-color: var(--exxora-blue);
  box-shadow: 0 0 0 3px rgb(18 200 244 / 24%), 0 14px 30px rgb(36 107 255 / 22%);
}
.studio-canvas-node small { color: var(--exxora-muted); }
.studio-node-ports button {
  border-color: #a8bcda;
  color: #244a87;
  background: #f1f6ff;
}
.studio-node-ports button:hover, .studio-node-ports button:focus-visible { border-color: var(--exxora-blue); background: #e9f2ff; }
.studio-node-ports button.studio-port-selected {
  border-color: #4ca777;
  color: #17663b;
  background: #e5f7ed;
}
.studio-open-level { border-color: #9bb6df; color: var(--exxora-blue); background: #f1f6ff; }
.studio-release-gates span.ready, .studio-preview-banner.ready { color: #17683e; background: #e6f7ed; }
.studio-release-gates span.blocked { color: #a32635; background: #fff0f2; }
.studio-preview-banner.private { color: #8b5a12; background: #fff6e6; }
.studio-public-preview-dialog .studio-dialog-heading { border-color: var(--exxora-line); }
.studio-public-preview button.active { border-color: transparent; color: #fff; background: var(--exxora-gradient); box-shadow: 0 6px 16px rgb(36 107 255 / 20%); }
.studio-dialog::backdrop { background: rgb(8 20 59 / 56%); backdrop-filter: blur(7px); }

@media (prefers-color-scheme: dark) {
  :root {
    --exxora-bg: #071022;
    --exxora-surface: rgb(11 25 53 / 90%);
    --exxora-surface-solid: #0d1d3b;
    --exxora-surface-alt: #102142;
    --exxora-ink: #f4f7ff;
    --exxora-muted: #9cacca;
    --exxora-line: #223b69;
    --exxora-line-strong: #35588d;
    --exxora-control: #102346;
    --exxora-control-hover: #17305d;
    --exxora-canvas: #08162f;
    --exxora-dot: #274875;
    --exxora-danger: #ffb8c0;
    --exxora-shadow: 0 20px 58px rgb(0 0 0 / 30%);
    --exxora-shadow-soft: 0 10px 28px rgb(0 0 0 / 22%);
    --studio-edge-containment: #93a7c7;
    --studio-edge-flow: #6e9dff;
    --studio-edge-dependency: #b292eb;
    --studio-edge-template: #a3b0c4;
    --studio-edge-grouping: #65b1bf;
    --studio-edge-aggregate: #b58af8;
  }
  body {
    background:
      radial-gradient(circle at 88% 2%, rgb(146 84 245 / 20%), transparent 29rem),
      radial-gradient(circle at 6% 18%, rgb(18 200 244 / 12%), transparent 28rem),
      linear-gradient(150deg, #050b18, var(--exxora-bg) 50%, #0b1230);
  }
  .studio-brand-header { border-color: var(--exxora-line); background: radial-gradient(circle at 88% 35%, rgb(36 107 255 / 18%), transparent 23rem), var(--exxora-surface); }
  .studio-shell h1 { color: #fff; }
  .studio-workspace-nav { border-color: var(--exxora-line); background: rgb(7 16 34 / 88%); }
  .studio-workspace-nav a:hover { color: #fff; background: #14284e; }
  .studio-panel,
  .studio-project-card,
  .studio-runtime-card,
  .studio-presentation-card,
  .studio-theme-assignment-card,
  .studio-presentation-history article,
  .studio-data-list article,
  .studio-dialog { border-color: var(--exxora-line); background: var(--exxora-surface); }
  .studio-overview > div:first-child { border-color: var(--exxora-line); background: linear-gradient(125deg, rgb(18 200 244 / 10%), rgb(36 107 255 / 8%) 52%, rgb(146 84 245 / 12%)); }
  .studio-edition-summary { border-color: var(--exxora-line); background: linear-gradient(125deg, rgb(18 200 244 / 11%), var(--exxora-surface-solid) 48%, rgb(146 84 245 / 12%)); }
  .studio-status-token { color: var(--exxora-muted); background: #172949; }
  .studio-status-token.active, .studio-journey li.complete a { color: #9ce0b7; background: #153828; }
  .studio-journey-scroll-control { border-color: rgb(117 153 210 / 28%); color: rgb(211 226 255 / 78%); background: rgb(9 25 54 / 62%); box-shadow: 0 7px 20px rgb(0 0 0 / 24%); }
  .studio-journey-scroll-control:hover { color: #fff; background: rgb(18 43 83 / 88%); }
  .studio-status-token.planned { color: #b3d0ff; background: #16325e; }
  .studio-status-token.archived, .studio-status-token.cancelled { color: #b2bac8; background: #273047; }
  .studio-blueprint-card, .studio-schedule-review { border-color: var(--exxora-line); background: linear-gradient(135deg, rgb(18 200 244 / 8%), rgb(146 84 245 / 10%)); }
  .studio-breadcrumbs button:not([aria-current="page"]):hover { color: #fff; background: #14284e; }
  .studio-breadcrumbs button[aria-current="page"] { color: #fff; }
  .studio-canvas-viewport { box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); }
  .studio-scope-context { border-color: var(--exxora-line-strong); background: rgb(13 29 59 / 92%); }
  .studio-scope-context button { border-color: var(--exxora-line-strong); color: #c6dcff; background: #14284e; }
  .studio-canvas-node { border-color: #355b8e; border-left-color: var(--exxora-blue); color: var(--exxora-ink); background: var(--exxora-surface-solid); box-shadow: 0 12px 28px rgb(0 0 0 / 28%); }
  .studio-canvas-node[data-visual-role="module"] { border-color: #4776b8; border-top-color: var(--exxora-blue); background: linear-gradient(145deg, rgb(18 200 244 / 12%), #102142 54%, rgb(146 84 245 / 14%)); }
  .studio-canvas-node[data-visual-role="container"] { border-color: #4b668d; background: #0e1d39; }
  .studio-canvas-node[data-visual-role="phase"] { border-left-color: var(--exxora-cyan); background: linear-gradient(110deg, rgb(18 200 244 / 11%), #0d1d3b 34%); }
  .studio-canvas-node[data-visual-role="draw"] { border-color: #8c6ec0; background: linear-gradient(135deg, rgb(146 84 245 / 18%), #101d39 72%); }
  .studio-canvas-node[data-visual-role="allocation"] { border-color: #517ccd; background: linear-gradient(135deg, rgb(36 107 255 / 15%), rgb(146 84 245 / 12%)); }
  .studio-node-ports button { border-color: #41638f; color: #c6dcff; background: #12264a; }
  .studio-node-ports button:hover, .studio-node-ports button:focus-visible { border-color: var(--exxora-blue); background: #173362; }
  .studio-node-ports button.studio-port-selected { border-color: #57b47f; color: #ccf4dc; background: #19412e; }
  .studio-open-level { border-color: #41638f; color: #c6dcff; background: #12264a; }
  .studio-release-gates span.ready, .studio-preview-banner.ready { color: #9ce0b7; background: #153828; }
  .studio-release-gates span.blocked { color: #ffb8c0; background: #4a1e29; }
  .studio-preview-banner.private { color: #f2cd91; background: #3d2d18; }
  .studio-preview-match-card .status-pill { color: #b3d0ff; background: #16325e; }
  .studio-preview-match-card .status-pill.live { color: #ffb8c0; background: #4a1e29; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #78aefc;
  outline-offset: 2px;
}