@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --ink:#202826; --muted:#65716d; --paper:#f6f7f3; --white:#fff; --line:#d9dfd9; --teal:#176276; --teal-dark:#10495a; --orange:#d46038; --stage:#dfe5e1; --lime:#c5d97c; --danger:#a94631; --panel-width:clamp(500px,34vw,680px); --panel-gap:20px; font-family:'DM Sans',sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; min-width:0; background:var(--paper); font-size:14px; }
button,input,select { font:inherit; }
button { color:inherit; cursor:pointer; }
button:disabled { opacity:.48; cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
#panelboard-studio { min-height:100vh; }
.studio-header { height:68px; display:flex; align-items:center; gap:18px; padding:0 28px; background:#fff; border-bottom:1px solid var(--line); }
.studio-brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-size:12px; font-weight:700; }
.studio-brand strong { display:block; font-family:'Barlow Condensed',sans-serif; font-size:21px; font-weight:600; }
.brand-mark { width:30px; height:32px; display:flex; align-items:center; justify-content:space-evenly; border:2px solid var(--teal); }
.brand-mark i { width:4px; height:20px; display:block; background:var(--teal); }
.brand-mark i:nth-child(2) { height:13px; background:var(--orange); }
.header-edition { margin-left:auto; color:var(--muted); font-size:10px; font-weight:700; }
.header-actions { display:flex; align-items:center; gap:6px; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:4px; background:#fff; }
.icon-button:hover:not(:disabled) { border-color:var(--teal); color:var(--teal); }
svg.lucide { width:18px; height:18px; }
.studio-workspace { display:grid; grid-template-columns:minmax(0,1fr) var(--panel-width); column-gap:var(--panel-gap); height:max(760px,calc(100vh - 68px)); }
.studio-stage { position:relative; min-width:0; min-height:0; height:100%; overflow:hidden; background-color:var(--stage); background-image:linear-gradient(#ffffff35 1px,transparent 1px),linear-gradient(90deg,#ffffff35 1px,transparent 1px); background-size:32px 32px; }
.stage-heading { position:absolute; top:30px; left:34px; z-index:1; max-width:540px; pointer-events:none; }
.eyebrow { margin:0; color:var(--teal); font-size:9px; line-height:1.4; font-weight:700; }
h1,h2,h3,p { margin-top:0; }
h1 { margin:9px 0 6px; font-family:'Barlow Condensed',sans-serif; font-size:38px; line-height:1; font-weight:600; }
.stage-heading > p:last-child { margin:0; color:#4b5954; font-size:12px; }
#panelboard-scene { position:absolute; inset:0; min-height:650px; }
#panelboard-scene canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
#panelboard-scene canvas:active { cursor:grabbing; }
.scene-fallback { position:absolute; top:50%; left:50%; max-width:360px; transform:translate(-50%,-50%); color:var(--muted); text-align:center; }
.scene-dimensions { position:absolute; top:150px; left:34px; padding:8px 10px; color:#384843; background:#ffffffd9; border-left:3px solid var(--orange); font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.scene-tools { position:absolute; top:155px; right:20px; display:flex; flex-direction:column; gap:6px; }
.scene-tools .icon-button { background:#ffffffed; }
.scene-tools .icon-button[data-action=pan][aria-pressed=true] { color:#fff; background:var(--teal); border-color:var(--teal); }
.stage-note { position:absolute; right:25px; bottom:19px; left:25px; display:flex; justify-content:space-between; gap:16px; color:#4e5d57; font-size:10px; pointer-events:none; }
.stage-note > span:first-child { display:flex; align-items:center; gap:7px; }
.status-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--orange); }
.studio-panel { min-width:0; height:100%; display:flex; flex-direction:column; overflow:hidden; background:var(--paper); border-left:1px solid var(--line); }
.panel-heading { padding:28px 30px 20px; }
.panel-heading h2,.bom-heading h2 { margin:5px 0 7px; font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:600; }
#request-status { display:block; min-height:19px; color:var(--muted); font-size:12px; }
#request-status.error { color:var(--danger); }
#request-status.is-loading::before { content:''; width:9px; height:9px; display:inline-block; margin-right:7px; border:2px solid var(--line); border-top-color:var(--teal); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-1px; }
@keyframes spin { to { transform:rotate(360deg); } }
.studio-tabs { display:flex; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.studio-tabs button { flex:1; min-width:0; padding:16px 7px 13px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; }
.studio-tabs button[aria-selected=true] { color:var(--teal); border-bottom-color:var(--orange); }
.panel-scroll { min-height:0; flex:1; overflow-y:auto; scrollbar-width:thin; }
#configuration-fields { padding:0 30px; }
.studio-field { min-width:0; margin:0; padding:19px 0 17px; border:0; border-bottom:1px solid var(--line); }
.studio-field legend { width:100%; margin-bottom:10px; padding:0; color:#394641; font-size:14px; font-weight:700; }
.studio-select,.studio-number,.studio-text { width:100%; min-height:46px; padding:11px 13px; border:1px solid #cbd4ce; border-radius:3px; background:#fff; color:var(--ink); font-size:14px; }
.studio-select:hover,.studio-number:hover,.studio-text:hover { border-color:#82948b; }
.field-description { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.checkbox-option { display:flex; align-items:center; gap:10px; padding:12px 13px; border:1px solid var(--line); border-radius:3px; background:#fff; font-size:13px; }
.checkbox-option input { accent-color:var(--teal); }
.studio-field .checkbox-option + .checkbox-option { margin-top:8px; }
.image-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.image-choice { position:relative; min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:#fff; cursor:pointer; }
.image-choice input { position:absolute; width:1px; height:1px; opacity:0; }
.option-3d-box { width:100%; height:104px; display:block; overflow:hidden; background:#eef1ed; }
.component-preview-art { width:100%; height:100%; display:block; }
.image-choice > span:last-child { min-height:44px; display:flex; align-items:center; padding:8px 10px; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.image-choice.is-selected { border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal); }
.image-choice:focus-within { outline:2px solid var(--orange); outline-offset:2px; }
.image-checkbox-option { display:grid; grid-template-columns:18px minmax(0,1fr) 70px; align-items:center; }
.checkbox-3d-box { width:70px; height:54px; display:block; overflow:hidden; background:#eef1ed; }
.circuit-schedule { padding:20px 30px 24px; }
.circuit-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.circuit-heading h3,.section-heading h3 { margin:3px 0 0; font-family:'Barlow Condensed',sans-serif; font-size:23px; line-height:1; font-weight:600; }
.circuit-heading span { color:var(--muted); font-size:10px; }
.schedule-export { display:flex; align-items:center; gap:6px; min-height:31px; padding:6px 8px; border:1px solid var(--teal); border-radius:3px; background:#fff; color:var(--teal); font-size:9px; font-weight:700; white-space:nowrap; }
.schedule-export svg.lucide { width:14px; height:14px; }
.schedule-export:hover { background:#eaf0ec; }
.schedule-list { display:grid; gap:8px; }
.schedule-row { display:grid; grid-template-columns:34px minmax(0,1fr) 92px; align-items:center; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.schedule-number { color:var(--teal); font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700; text-align:center; }
.schedule-row input,.schedule-row select { min-width:0; width:100%; height:40px; padding:7px 9px; border:1px solid #cbd4ce; border-radius:3px; background:#fff; font-size:12px; }
.schedule-row .schedule-device { grid-column:2 / 4; }
.schedule-labels { display:grid; grid-template-columns:34px minmax(0,1fr) 92px; gap:8px; margin:0 0 6px; color:var(--muted); font-size:10px; }
.component-library { padding:20px 30px 24px; border-top:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:10px; margin-bottom:12px; }
.drag-hint { color:var(--muted); font-size:9px; }
.component-group-list { display:grid; gap:13px; }
.component-group h4 { margin:0 0 8px; color:var(--teal); font-size:11px; line-height:1.3; font-weight:700; }
.component-palette { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.component-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:#fff; transition:border-color .16s ease,transform .16s ease; }
.component-card.is-selected { border-color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange); }
.component-preview-box { width:100%; height:100px; overflow:hidden; background:#f0f2ef; }
.component-preview-box[draggable=true] { cursor:grab; }
.component-preview-box[draggable=true]:active { cursor:grabbing; }
.component-card-content { min-height:70px; display:flex; align-items:center; gap:7px; padding:9px; }
.component-card-copy { min-width:0; flex:1; display:grid; gap:3px; }
.component-card-copy small { color:var(--muted); font-size:9px; line-height:1.2; }
.component-card-content span { min-width:0; color:#394641; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.component-card-content button { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--teal); }
.component-card-content button:hover { border-color:var(--teal); }
.component-card-content button svg.lucide { width:14px; height:14px; }
.studio-price { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 38px; align-items:center; gap:8px; padding:20px 30px 39px; border-top:1px solid var(--line); background:#e8eee9; }
.studio-price span { display:block; color:var(--muted); font-size:10px; font-weight:700; }
.studio-price strong { display:block; margin-top:3px; color:var(--teal-dark); font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; }
.studio-price p { position:absolute; right:30px; bottom:11px; left:30px; margin:0; color:#52615a; font-size:9px; }
.studio-price .icon-button { grid-column:2; grid-row:1; }
.studio-actions { padding:16px 30px 18px; 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 { width:100%; min-height:42px; display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:10px 13px; border:1px solid var(--line); border-radius:3px; 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(--teal); background:#eaf0ec; }
.studio-action-buttons button svg.lucide,.studio-output-actions button svg.lucide { width:17px; height:17px; flex:0 0 17px; color:var(--teal); }
.studio-action-buttons button span,.studio-output-actions button span { flex:1; }
.studio-action-buttons .studio-action-primary { min-height:46px; border-color:var(--teal); background:var(--teal); color:#fff; }
.studio-action-buttons .studio-action-primary:hover:not(:disabled) { border-color:var(--teal-dark); background:var(--teal-dark); }
.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:#eef1ed; color:#79817c; opacity:1; cursor:default; }
.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; animation:spin .8s linear infinite; }
#studio-action-feedback { min-height:16px; margin:9px 0 0; color:var(--muted); font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
#studio-action-feedback.error { color:var(--danger); }
.bom-section { display:grid; grid-template-columns:220px minmax(0,1fr); gap:35px; padding:30px 34px 34px; background:#fff; border-top:1px solid var(--line); }
.bom-heading h2 { margin-bottom:0; }
#bom-lines { min-width:0; }
.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; color:var(--ink); font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.spec-summary-total strong { color:var(--teal-dark); }
.spec-table-title { display:flex; align-items:baseline; gap:10px; margin:23px 0 10px; font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:600; }
.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:1450px; border-collapse:collapse; font-size:12px; }
.studio-route-table { min-width:1200px; }
.studio-route-table { font-size:11px; }
.studio-spec-table th,.studio-spec-table td { padding:10px 11px; border-bottom:1px solid #e5eae5; text-align:left; vertical-align:top; }
.studio-spec-table th { position:sticky; top:0; background:#eef2ed; color:#58645e; font-size:10px; font-weight:700; white-space:nowrap; }
.studio-route-table th { font-size:9px; }
.studio-spec-table tbody tr:nth-child(even) { background:#f7f9f6; }
.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(--teal-dark); 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; }
.bom-table-wrap { max-width:100%; overflow:auto; }
.bom-table { width:100%; min-width:900px; border-collapse:collapse; font-size:13px; line-height:1.5; }
.bom-table th,.bom-table td { padding:12px 14px; border-bottom:1px solid #e5eae5; text-align:left; }
.bom-table th { color:#58645e; background:#eef2ed; font-size:11px; text-transform:uppercase; white-space:nowrap; }
.bom-table .bom-number { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bom-table td:nth-child(2) { white-space:nowrap; }
.empty-state { margin:0; padding:13px; color:var(--muted); background:#f4f6f2; font-size:10px; }
.engineering-note { margin:0; padding:13px 34px; color:#fff; background:#364641; font-size:9px; line-height:1.55; }
.download-dialog { width:min(960px,calc(100% - 24px)); height:min(900px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); box-shadow:0 16px 50px #20282640; }
.download-dialog::backdrop { background:#20282680; }
.download-dialog form { height:100%; min-height:0; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; }
.download-dialog-heading { padding:20px 24px 12px; }
.download-dialog h2 { margin:0 0 8px; font-family:'Barlow Condensed',sans-serif; font-size:28px; }
.download-document-format { margin:0 0 8px; color:var(--teal); font-size:12px; font-weight:700; }
#download-document-summary { margin:0; font-size:13px; overflow-wrap:anywhere; }
#document-preview-status { margin:0; padding:0 24px 12px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
#document-preview-pages { min-height:0; display:flex; flex-direction:column; align-items:center; gap:16px; padding:16px; overflow:auto; background:#dfe5e1; }
.document-preview-page { width:100%; max-width:760px; height:auto; display:block; flex:none; background:#fff; box-shadow:0 2px 8px #20282620; }
.download-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin:0; padding:14px 24px; border-top:1px solid var(--line); }
.download-dialog-actions button { min-height:40px; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; border:1px solid var(--line); border-radius:4px; font-size:13px; }
.download-dialog-cancel { background:#fff; }
.download-dialog-actions .download-dialog-confirm { border-color:var(--teal); background:var(--teal); color:#fff; }
@media(max-width:1050px) { .studio-workspace { grid-template-columns:minmax(0,1fr) 400px; column-gap:0; } .panel-heading { padding:22px 22px 16px; } #configuration-fields { padding:0 22px; } .circuit-schedule,.component-library { padding-right:22px; padding-left:22px; } .studio-price { padding-right:22px; padding-left:22px; } .studio-price p { right:22px; left:22px; } }
@media(max-width:760px) { .studio-header { height:60px; padding:0 16px; } .studio-workspace { display:flex; flex-direction:column; height:auto; } .studio-stage { height:610px; min-height:610px; flex:0 0 610px; } #panelboard-scene { min-height:610px; } .stage-heading { top:22px; left:18px; right:60px; } h1 { font-size:33px; } .scene-dimensions { top:130px; left:18px; } .scene-tools { top:135px; right:12px; } .stage-note { right:14px; bottom:14px; left:14px; font-size:9px; } .studio-panel { height:auto; overflow:visible; border-top:1px solid var(--line); border-left:0; } .panel-heading { padding:20px 18px 13px; } .studio-tabs button { font-size:11px; } #configuration-fields { padding:0 18px; } .studio-field legend { font-size:13px; } .studio-select,.studio-number,.studio-text { font-size:13px; } .circuit-schedule,.component-library { padding-right:18px; padding-left:18px; } .studio-price { padding-right:18px; padding-left:18px; } .studio-price p { right:18px; left:18px; } .bom-section { grid-template-columns:1fr; gap:12px; padding:23px 18px; } .engineering-note { padding:13px 18px; } }
@media(max-width:760px) { .studio-actions { padding-right:18px; padding-left:18px; } .spec-summary { grid-template-columns:repeat(2,minmax(105px,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(max-width:420px) { .header-edition { font-size:8px; } .studio-brand strong { font-size:18px; } .studio-stage,#panelboard-scene { min-height:530px; } .scene-dimensions { top:130px; } .scene-tools { top:135px; } .component-palette { grid-template-columns:1fr 1fr; } .stage-note > span:last-child { max-width:43%; text-align:right; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }