@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --ink:#202725; --muted:#69736c; --paper:#fafbf9; --line:#dce1db; --accent:#276147; --stage:#e7ece5; --highlight:#d7f086; }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; font-size:14px; }
button,input,select { font:inherit; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.studio-header { height:78px; display:flex; align-items:center; gap:20px; padding:0 40px; border-bottom:1px solid var(--line); }
.studio-brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-family:Manrope,sans-serif; font-size:22px; font-weight:800; }
.brand-mark { width:24px; height:29px; border:2px solid var(--ink); background:linear-gradient(90deg,transparent 45%,var(--ink) 45%,var(--ink) 54%,transparent 54%),linear-gradient(transparent 45%,var(--ink) 45%,var(--ink) 52%,transparent 52%); }
.brand-edition { font-size:11px; color:var(--accent); align-self:flex-start; padding-top:5px; }
.studio-local { margin-left:auto; color:var(--muted); font-size:10px; }
.header-tools,.scene-tools { display:flex; gap:6px; }
.header-tools button,.scene-tools button,.studio-price button { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:4px; background:var(--paper); }
svg.lucide { width:18px; height:18px; }
.is-loading svg.lucide { animation:studio-spin .9s linear infinite; color:var(--accent); }
#request-status.is-loading { display:flex; align-items:center; gap:7px; }
#request-status.is-loading svg.lucide { width:14px; height:14px; flex:0 0 14px; }
#configuration-total.is-loading { display:flex; align-items:center; min-height:34px; }
#configuration-total.is-loading svg.lucide { width:23px; height:23px; }
.studio-price button.is-loading { border-color:var(--accent); background:#eaf0e7; }
.scene-fallback { display:flex; align-items:center; gap:9px; color:var(--muted); }
.scene-fallback svg.lucide { color:var(--accent); }
@keyframes studio-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .is-loading svg.lucide { animation:none; } }
.studio-workspace { display:grid; grid-template-columns:minmax(0,1fr) 390px; min-height:690px; }
.studio-stage { position:relative; min-width:0; background:var(--stage); overflow:hidden; }
.stage-heading { position:absolute; top:37px; left:40px; right:25px; z-index:1; pointer-events:none; }
.eyebrow { font-size:10px; font-weight:700; color:var(--muted); }
h1,h2,p { margin:0; }
h1 { margin:10px 0 8px; font-family:Manrope,sans-serif; font-size:32px; font-weight:600; line-height:1.2; }
.stage-heading p { color:var(--muted); font-size:13px; }
#window-scene { width:100%; height:690px; }
#window-scene { cursor:pointer; }
#window-scene canvas { display:block; width:100%; height:100%; cursor:pointer; touch-action:none; }
#window-scene canvas:focus-visible { outline:3px solid var(--accent); outline-offset:-4px; }
.scene-fallback { position:absolute; left:30px; top:44%; max-width:80%; }
.stage-footer { position:absolute; bottom:28px; left:40px; right:40px; display:flex; justify-content:space-between; gap:14px; font-size:12px; pointer-events:none; }
.preview-note { color:var(--muted); }
.scene-tools { position:absolute; right:24px; top:180px; flex-direction:column; }
.scene-tools [aria-pressed=true] { background:var(--highlight); }
.studio-panel { background:var(--paper); border-left:1px solid var(--line); min-width:0; display:flex; flex-direction:column; }
.panel-heading { padding:32px 28px 24px; }
.panel-heading h2 { font-family:Manrope,sans-serif; font-size:25px; margin:8px 0 10px; font-weight:600; }
#request-status { color:var(--muted); font-size:11px; display:block; min-height:16px; }
#request-status.error { color:#a73830; }
.studio-tabs { display:flex; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.studio-tabs button { flex:1; min-width:0; padding:17px 4px; border:0; border-bottom:2px solid transparent; background:transparent; font-size:12px; }
.studio-tabs [aria-selected=true] { color:var(--accent); font-weight:700; border-bottom-color:var(--accent); }
#configuration-fields { padding:0 28px; height:421px; overflow-y:auto; scrollbar-width:thin; }
.studio-field { padding:21px 0; margin:0; border:0; border-bottom:1px solid var(--line); min-width:0; }
.studio-field.is-targeted { border-radius:4px; background:#eaf0e7; outline:2px solid var(--accent); outline-offset:-2px; }
.field-title { display:flex; justify-content:space-between; gap:10px; margin-bottom:13px; font-size:12px; font-weight:700; }
.field-title span:last-child { color:var(--muted); font-weight:400; max-width:55%; overflow-wrap:anywhere; }
.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.choice { position:relative; display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 6px; min-height:42px; border:1px solid var(--line); border-radius:4px; font-size:11px; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
.choice:has(input:checked) { border-color:var(--accent); background:#eaf0e7; box-shadow:inset 0 0 0 1px var(--accent); }
.choice:has(input:disabled) { opacity:.45; }
.choice input[type=radio] { position:absolute; opacity:0; width:1px; }
.choice:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.choice input[type=checkbox] { accent-color:var(--accent); }
.colour-choice { flex-direction:column; min-height:75px; }
.colour-chip { width:30px; height:30px; border-radius:50%; border:1px solid #0002; }
.type-choice { flex-direction:column; min-height:88px; gap:10px; color:var(--muted); }
.type-choice svg.lucide { width:32px; height:32px; stroke-width:1.5; color:var(--accent); flex-shrink:0; }
.type-choice:has(input:checked) { color:var(--accent); }
.type-choice span { min-height:28px; display:flex; align-items:center; justify-content:center; }
.studio-number,.studio-select { width:100%; padding:12px; border:1px solid var(--line); background:white; border-radius:4px; }
.studio-price { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:22px 28px; background:#eef2eb; border-top:1px solid var(--line); min-height:97px; }
.studio-price span { display:block; color:var(--muted); font-size:10px; }
.studio-price strong { display:block; margin-top:7px; font-family:Manrope,sans-serif; font-size:28px; font-weight:600; }
.studio-actions { padding:18px 28px 22px; border-top:1px solid var(--line); }
.studio-action-buttons,.studio-output-actions { display:grid; grid-template-columns:1fr; gap:8px; }
.studio-action-buttons button,.studio-output-actions button { display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; min-height:42px; padding:10px 13px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); text-align:left; font-size:12px; font-weight:600; transition:background-color .16s ease,border-color .16s ease,color .16s ease; }
.studio-action-buttons button:hover:not(:disabled),.studio-output-actions button:hover:not(:disabled) { border-color:var(--accent); background:#eaf0e7; }
.studio-action-buttons button svg.lucide,.studio-output-actions button svg.lucide { width:17px; height:17px; flex:0 0 17px; color:var(--accent); }
.studio-action-buttons button span,.studio-output-actions button span { flex:1; }
.studio-action-buttons .studio-action-primary { min-height:46px; border-color:var(--accent); background:var(--accent); color:#fff; }
.studio-action-buttons .studio-action-primary:hover:not(:disabled) { border-color:#1d4e38; background:#1d4e38; }
.studio-action-buttons .studio-action-primary svg.lucide { color:#fff; }
.studio-action-buttons button:disabled,.studio-output-actions button:disabled { border-color:var(--line); background:#f0f2ef; color:#79817c; opacity:1; }
.studio-action-buttons button:disabled svg.lucide,.studio-output-actions button:disabled svg.lucide { color:#89928c; }
.studio-action-spinner { display:none; }
.studio-action-buttons button.is-loading .studio-action-spinner,.studio-output-actions button.is-loading .studio-action-spinner { display:block; }
#studio-action-feedback { min-height:16px; margin-top:9px; color:var(--muted); font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
#studio-action-feedback.error { color:#a73830; }
.studio-bom { display:grid; grid-template-columns:280px minmax(0,1fr); gap:40px; padding:35px 40px 45px; border-top:1px solid var(--line); }
.studio-bom > #bom-lines { min-width:0; }
.studio-bom h2 { margin-top:10px; font-family:Manrope,sans-serif; font-size:21px; font-weight:600; }
.spec-summary { display:grid; grid-template-columns:repeat(4,minmax(105px,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.spec-summary > div { min-width:0; padding:12px 14px; border-right:1px solid var(--line); }
.spec-summary > div:first-child { padding-left:0; }
.spec-summary > div:last-child { border-right:0; }
.spec-summary span,.spec-total-details span { display:block; color:var(--muted); font-size:9px; font-weight:700; }
.spec-summary strong { display:block; margin-top:6px; font-family:Manrope,sans-serif; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.spec-summary-total strong { color:var(--accent); }
.spec-table-title { display:flex; align-items:baseline; gap:10px; margin:23px 0 10px; font-family:Manrope,sans-serif; font-size:14px; font-weight:700; }
.spec-table-title span { color:var(--muted); font-family:'DM Sans',sans-serif; font-size:10px; font-weight:400; }
.spec-route-title { margin-top:28px; }
.spec-table-wrap { width:100%; overflow-x:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); scrollbar-width:thin; }
.studio-spec-table { width:100%; min-width:1250px; border-collapse:collapse; font-size:11px; }
.studio-route-table { min-width:1120px; }
.studio-spec-table th,.studio-spec-table td { padding:10px 11px; border-bottom:1px solid #e8ebe7; text-align:left; vertical-align:top; }
.studio-spec-table th { position:sticky; top:0; background:#eef2eb; color:#48544d; font-size:9px; font-weight:700; white-space:nowrap; }
.studio-spec-table tbody tr:nth-child(even) { background:#f7f9f6; }
.studio-spec-table tbody tr.is-current-item { background:#f0f4ed; }
.studio-spec-table tbody tr.is-targeted { background:#e0edcf; outline:2px solid var(--accent); outline-offset:-2px; }
.studio-spec-table tbody tr:last-child td { border-bottom:0; }
.studio-spec-table .spec-code,.studio-spec-table .spec-number { white-space:nowrap; font-variant-numeric:tabular-nums; }
.studio-spec-table .spec-number { text-align:right; }
.studio-spec-table .spec-description { min-width:180px; max-width:320px; overflow-wrap:anywhere; }
.studio-spec-table .spec-emphasis { color:var(--accent); font-weight:700; }
.studio-spec-table .spec-empty { padding:18px 11px; color:var(--muted); text-align:center; }
.spec-total-details { display:flex; flex-wrap:wrap; gap:26px; padding:13px 0 0; }
.spec-total-details strong { display:block; margin-top:4px; color:var(--ink); font-size:12px; font-variant-numeric:tabular-nums; }
@media(min-width:1500px) { .studio-workspace { grid-template-columns:minmax(0,1fr) 440px; } }
@media(max-width:850px) { .studio-header { padding:0 20px; height:66px; } .studio-local { display:none; } .header-tools { margin-left:auto; } .studio-workspace { grid-template-columns:minmax(0,1fr) 340px; } .stage-heading { left:24px; } h1 { font-size:26px; } .studio-bom { grid-template-columns:1fr; gap:20px; padding:28px 24px; } .stage-footer { left:24px; right:24px; } }
@media(max-width:650px) { .studio-brand { font-size:19px; gap:9px; } .studio-workspace { display:flex; flex-direction:column; } #window-scene { height:440px; } .stage-heading { top:24px; } h1 { font-size:25px; } .scene-tools { top:155px; right:14px; } .scene-tools button { width:34px; height:34px; } .stage-footer { bottom:19px; font-size:11px; } .studio-panel { border-left:0; border-top:1px solid var(--line); } .panel-heading { padding:24px; } #configuration-fields { height:auto; max-height:450px; padding:0 24px; } .choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .studio-price { padding:20px 24px; } .studio-bom { padding:26px 18px; } .spec-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .spec-summary > div { padding:11px 9px; border-bottom:1px solid var(--line); } .spec-summary > div:first-child { padding-left:9px; } .spec-summary > div:nth-child(2) { border-right:0; } .spec-summary > div:nth-child(3),.spec-summary > div:nth-child(4) { border-bottom:0; } .spec-total-details { gap:16px; } }
@media(prefers-reduced-motion:no-preference) { .stage-heading { animation:studio-reveal .5s ease-out both; } @keyframes studio-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } }

.specification-dialog { width:min(960px,calc(100vw - 32px)); max-width:none; height:min(900px,calc(100vh - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--paper); box-shadow:0 24px 80px #10181342; }
.specification-dialog::backdrop { background:#141c18a8; backdrop-filter:blur(3px); }
.specification-dialog-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; }
.specification-dialog-header,.specification-dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
.specification-dialog-header { border-bottom:1px solid var(--line); }
.specification-dialog-header h2 { margin:4px 0 0; font-family:Manrope,sans-serif; font-size:18px; font-weight:600; }
.specification-dialog button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:40px; padding:9px 14px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font-size:12px; font-weight:600; }
.specification-dialog .specification-print-button { border-color:var(--accent); background:var(--accent); color:#fff; }
.specification-dialog .specification-print-button svg.lucide { width:16px; height:16px; }
#specification-preview { width:100%; height:100%; min-height:0; border:0; background:#f1f4f0; }
.specification-dialog-footer { justify-content:flex-end; border-top:1px solid var(--line); }
@media(max-width:600px) { .specification-dialog { width:calc(100vw - 16px); height:calc(100vh - 16px); max-height:calc(100vh - 16px); } .specification-dialog-header,.specification-dialog-footer { padding:12px; gap:8px; } .specification-dialog button { padding:8px 10px; } }