:root {
    --navy:#0b253a;
    --orange:#f47c20;
    --ink:#17212b;
    --muted:#667085;
    --line:#d0d5dd;
    --panel:#f5f5f5;
    --rail:#2f4f4f;
    --ladder:#4682b4;
    --blue:#191970;
    --bg:#f7f9fc;
    --card:#ffffff;
  }
  * { box-sizing:border-box; }
  body {
    margin:0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color:var(--ink);
    background:var(--bg);
  }
  .topbar {
    background:var(--navy);
    color:#fff;
    padding:16px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .brand { display:flex; align-items:center; gap:12px; min-width:0; }
  .brand-logo { display:block; width:120px; height:auto; }
  .client-badge { display:none; padding:7px 10px; border:1px solid #496276; border-radius:4px; color:#dbe6ed; font-size:10px; font-weight:800; letter-spacing:.12em; white-space:nowrap; }
  .export-title { display:none; margin-left:auto; color:#fff; font-size:14px; font-weight:800; letter-spacing:.1em; text-align:right; }
  .wrap { max-width:1600px; margin:0 auto; padding:20px; }
  .layout { display:grid; grid-template-columns:360px minmax(0,1fr); gap:18px; align-items:start; }
  .card { background:var(--card); border:1px solid #e4e7ec; border-radius:16px; box-shadow:0 7px 24px rgba(16,24,40,.06); }
  .controls { padding:18px; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; }
  .controls h2 { font-size:15px; margin:0 0 14px; color:var(--navy); }
  .section { padding:14px 0; border-top:1px solid #eef0f3; }
  .section:first-of-type { border-top:0; padding-top:0; }
  .section-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#475467; margin-bottom:10px; }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  label { display:block; font-size:12px; color:#475467; margin-bottom:5px; font-weight:650; }
  input, textarea, select {
    width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 10px;
    font:inherit; font-size:13px; color:var(--ink); background:#fff; outline:none;
  }
  input:focus, textarea:focus, select:focus { border-color:#98a2b3; box-shadow:0 0 0 3px rgba(244,124,32,.10); }
  textarea { resize:vertical; min-height:70px; line-height:1.45; }
  .hint { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.35; }
  .actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
  button {
    border:0; border-radius:9px; padding:10px 12px; cursor:pointer; font:inherit; font-size:13px; font-weight:750;
    background:var(--navy); color:white;
  }
  button.secondary { background:#fff; color:var(--navy); border:1px solid #cfd5dc; }
  button.orange { background:var(--orange); }
  button.danger { background:#b42318; }
  button:disabled { opacity:.45; cursor:not-allowed; filter:none; }
  button:hover:not(:disabled) { filter:brightness(.98); }
  .edit-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; padding:10px 12px; border:1px solid #e4e7ec; border-radius:10px; background:#f8fafc; }
  .edit-toolbar .edit-help { flex:1 1 280px; font-size:12px; color:#667085; line-height:1.4; }
  .edit-toolbar button { padding:8px 10px; }
  .editable-item .hit { stroke:transparent; stroke-width:180; pointer-events:stroke; cursor:pointer; }
  .editable-item .visual { pointer-events:none; }
  body:not(.mode-client) .editable-item:hover .visual { stroke:var(--orange) !important; }
  .editable-item.selected .visual { stroke:#d92d20 !important; }
  .editable-item.selected .hit { stroke:rgba(217,45,32,.08); }
  .top-sump-item .hit { pointer-events:all; fill:transparent; stroke:transparent; }
  .editable-item.custom-added .visual { stroke-dasharray:none; }
  .add-mode #drawing { cursor:crosshair; }
  .mode-active { outline:3px solid rgba(2,132,199,.18); }
  .draft-line { stroke:#0284c7; stroke-width:22; stroke-dasharray:70 45; pointer-events:none; }
  button:hover { filter:brightness(.98); }
  .error { margin-top:12px; padding:10px 11px; border-radius:9px; background:#fff1f0; color:#b42318; font-size:12px; display:none; white-space:pre-wrap; }
  .viewer { padding:16px; min-width:0; }
  .viewer-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
  .viewer-head h2 { margin:0; font-size:16px; color:var(--navy); }
  .tabs { display:flex; gap:6px; }
  .tab { background:#eef2f6; color:#344054; padding:8px 12px; }
  .tab.active { background:var(--navy); color:white; }
  .canvas-shell { border:1px solid #e4e7ec; border-radius:12px; background:white; overflow:auto; min-height:520px; }
  svg { width:100%; min-width:1000px; height:auto; display:block; background:#fff; }
  .meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .chip { font-size:12px; padding:6px 9px; border-radius:999px; background:#f2f4f7; color:#475467; border:1px solid #e4e7ec; }
  .legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:12px; color:#667085; }
  .legend span::before { content:""; display:inline-block; width:18px; height:3px; margin-right:6px; vertical-align:middle; border-radius:2px; background:var(--rail); }
  .legend .ladder::before { background:var(--ladder); }
  .legend .panel::before { background:#b7bcc3; height:1px; }
  .info-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:14px; }
  .info-panel { border:1px solid #e4e7ec; border-radius:12px; padding:12px; background:#fff; min-width:0; }
  .info-panel h3 { margin:0 0 10px; font-size:13px; color:var(--navy); }
  .schedule-table { width:100%; border-collapse:collapse; font-size:12px; }
  .schedule-table th, .schedule-table td { padding:7px 8px; border-bottom:1px solid #eef0f3; text-align:left; vertical-align:top; }
  .schedule-table th { color:#475467; font-weight:800; background:#f8fafc; }
  .schedule-table td:nth-child(2), .schedule-table th:nth-child(2) { text-align:right; white-space:nowrap; }
  .validation-list { display:grid; gap:7px; }
  .validation-item { padding:8px 9px; border-radius:8px; font-size:12px; line-height:1.35; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; }
  .validation-ok { padding:9px 10px; border-radius:8px; font-size:12px; background:#ecfdf3; border:1px solid #abefc6; color:#067647; }
  .sump-editor-empty { font-size:12px; color:#667085; padding:7px 0; }
  .toolbar-spacer { flex:1 1 10px; }
  .small-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
  @media (max-width: 1100px) { .info-grid { grid-template-columns:1fr; } }
  @media (max-width: 900px) {
    .layout { grid-template-columns:1fr; }
    .controls { position:static; max-height:none; }
    .canvas-shell { min-height:360px; }
  }
  /* Workspace shell */
  :root { --navy:#10283d; --orange:#ed7621; --bg:#eaf0f4; --line:#bdc9d2; --rail:#284b55; }
  body { background:var(--bg); }
  .topbar { min-height:64px; padding:10px 22px; border-bottom:3px solid var(--orange); }
  .header-actions { display:flex; align-items:center; gap:8px; }
  .header-actions button { background:#203e55; border:1px solid #426075; padding:8px 11px; }
  .header-actions button.active { background:var(--orange); border-color:var(--orange); }
  .wrap { max-width:none; padding:12px; }
  .layout { grid-template-columns:310px minmax(0,1fr) 340px; gap:12px; align-items:stretch; }
  .layout.left-collapsed { grid-template-columns:45px minmax(0,1fr) 340px; }
  .layout.right-collapsed { grid-template-columns:310px minmax(0,1fr) 45px; }
  .layout.left-collapsed.right-collapsed { grid-template-columns:45px minmax(0,1fr) 45px; }
  .card { border-radius:8px; box-shadow:0 2px 10px rgba(16,40,61,.06); }
  .controls,.inspector { position:sticky; top:12px; height:calc(100vh - 91px); max-height:none; overflow:auto; padding:14px; }
  .pane-head { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:13px; }
  .pane-head h2 { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.11em; color:var(--navy); }
  .collapse-btn { width:28px; height:28px; padding:0; border:1px solid #cbd6df; border-radius:5px; background:#f4f7f9; color:var(--navy); }
  .layout.left-collapsed .controls,.layout.right-collapsed .inspector { padding:8px; overflow:hidden; }
  .layout.left-collapsed .controls > :not(.pane-head),.layout.right-collapsed .inspector > :not(.pane-head) { display:none; }
  .layout.left-collapsed .controls h2,.layout.right-collapsed .inspector h2 { display:none; }
  .section { padding:12px 0; }
  .section-title { color:#274861; font-size:11px; }
  input,textarea,select { border-radius:5px; padding:7px 8px; font-size:12px; }
  label { font-size:11px; }
  button { border-radius:5px; }
  button:focus-visible,.editable-item:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
  .viewer { padding:13px; min-height:calc(100vh - 91px); }
  .viewer-head { margin-bottom:9px; }
  .viewer-head h2 { font-size:14px; text-transform:uppercase; letter-spacing:.055em; }
  .tab { border-radius:4px; padding:7px 11px; }
  .edit-toolbar { background:#f4f7f9; border-radius:5px; padding:7px; gap:5px; }
  .edit-toolbar button { padding:7px 9px; font-size:11px; }
  .edit-help { display:none; }
  .canvas-shell { min-height:calc(100vh - 220px); border-radius:5px; background:#fff; }
  #drawing { min-width:720px; height:calc(100vh - 220px); min-height:500px; }
  .inspector .info-panel { border:0; border-top:1px solid #e2e9ee; border-radius:0; padding:14px 0; }
  .inspector .info-panel h3 { font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
  .inspector .info-grid { display:block; margin:0; }
  .inspector .info-grid .info-panel:first-child { border-top:0; }
  .schedule-table { font-size:11px; }
  .schedule-table th,.schedule-table td { padding:5px 4px; }
  .validation-item { font-size:11px; }
  .status-ok { color:#067647; }
  .status-warn { color:#a65d08; }
  .status-error { color:#b42318; }
  .inspector-empty { color:#667085; font-size:12px; line-height:1.5; }
  .inspector-actions { display:flex; gap:7px; margin-top:10px; }
  .inspector-actions button { flex:1; padding:8px 4px; font-size:11px; }
  .inspector-state { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
  .inspector-state button { font-size:10px; padding:7px 8px; }
  .revision-list { display:grid; gap:5px; margin-top:8px; }
  .revision-row { display:grid; grid-template-columns:34px 75px 1fr 38px 22px; gap:3px; align-items:center; font-size:10px; }
  .revision-row button { padding:3px; font-size:11px; }
  .mode-client .controls,.mode-client .inspector,.mode-client .edit-toolbar,.mode-client .legend { display:none; }
  .mode-client #saveHeaderBtn,.mode-client #loadHeaderBtn,.mode-client #printSheetBtn,.mode-client #exportHtmlBtn,.mode-client #clientModeBtn { display:none; }
  .mode-client .layout { grid-template-columns:minmax(0,1fr); }
  .mode-client .topbar { min-height:72px; padding:12px clamp(16px,3vw,40px); box-shadow:0 3px 12px rgba(16,40,61,.12); }
  .mode-client .client-badge { display:inline-flex; align-items:center; }
  .mode-client .wrap { max-width:1800px; margin:0 auto; padding:16px clamp(12px,2vw,28px); }
  .mode-client .viewer { min-height:calc(100vh - 104px); padding:18px 20px; border-radius:8px; }
  .mode-client .viewer-head { padding-bottom:11px; border-bottom:1px solid #e1e7eb; }
  .mode-client .viewer-head h2 { font-size:15px; letter-spacing:.09em; }
  .mode-client .tab { min-height:36px; border:1px solid #d3dce2; background:#fff; }
  .mode-client .tab.active { color:#fff; background:var(--orange); border-color:var(--orange); }
  .mode-client .canvas-shell { min-height:calc(100vh - 330px); border-color:#d8e0e5; border-radius:6px; }
  .mode-client #drawing { min-width:0; }
  .mode-client #threeHost { height:calc(100vh - 350px); min-height:420px; }
  .mode-client .iso-tools { padding:8px 10px; border:1px solid #d8e0e5; border-radius:6px; background:#fff; }
  .mode-client .iso-status { color:#536878; }
  body.exported-client .header-actions,body.exported-client #exportHtmlBtn,body.exported-client #showWinkoLogoExportLabel { display:none !important; }
  body.exported-client #showConcretePlinthLabel,body.exported-client #showBlackPlinthLabel { display:none !important; }
  body.exported-client .export-title { display:none; }
  body.exported-client:not(.client-state-ready) .canvas-shell { visibility:hidden; }
  body.exported-client.hide-export-logo .brand { display:none; }
  .mode-client .editable-item .hit,.mode-client .ladder-drag-hit { pointer-events:none; }
  .mode-client .member-actions { display:none !important; }
  .mode-client .meta { display:none; }
  .mode-client .chip { background:#f7f9fa; border-color:#dce3e8; color:#344b5b; }
  .client-project { display:none; }
  .mode-client .client-project { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 12px; padding:13px 16px; border:1px solid #d8e0e5; border-left:4px solid var(--orange); border-radius:6px; background:#fff; }
  .client-project-title { min-width:200px; display:grid; gap:4px; }
  .client-project-title span { color:#607585; font-size:9px; font-weight:800; letter-spacing:.12em; }
  .client-project-title strong { color:var(--navy); font-size:15px; }
  .client-project-title small { color:var(--orange); font-size:10px; font-weight:800; letter-spacing:.08em; }
  .client-project-data { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:0; }
  .client-project-data div { display:grid; gap:3px; min-width:112px; padding:2px 12px; border-left:1px solid #e1e7eb; }
  .client-project-data span { color:#70818d; font-size:9px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
  .client-project-data strong { color:#253d4d; font-size:11px; font-weight:700; }
  .sheet-preview { display:none; }
  .iso-tools { display:none; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
  .view-iso .iso-tools { display:flex; }
  .iso-tools button { padding:7px 10px; font-size:11px; }
  .iso-status { color:#667b8b; font-size:11px; margin-left:auto; }
  .member-actions { display:none; align-items:center; gap:9px; padding:8px 10px; margin-bottom:8px; border:1px solid #cbd6df; border-radius:5px; background:#f4f7f9; font-size:11px; }
  .member-actions span { flex:1; color:#203e55; font-weight:700; }
  .member-actions button { padding:6px 10px; font-size:11px; }
  .member-hit { stroke:transparent; stroke-width:180; pointer-events:stroke; cursor:pointer; }
  #threeHost { display:none; width:100%; height:calc(100vh - 220px); min-height:500px; background:#f7f9fa; }
  #threeHost canvas { display:block; width:100%; height:100%; touch-action:none; }
  .view-iso.three-ready #threeHost { display:block; }
  .view-iso.three-ready #drawing { display:none; }
  @media (max-width:1600px) { .layout { grid-template-columns:270px minmax(0,1fr) 300px; } .layout.left-collapsed { grid-template-columns:45px minmax(0,1fr) 300px; } .layout.right-collapsed { grid-template-columns:270px minmax(0,1fr) 45px; } }
  @media (max-width:1050px) { .layout,.layout.left-collapsed,.layout.right-collapsed,.layout.left-collapsed.right-collapsed { grid-template-columns:260px minmax(0,1fr); } .inspector { grid-column:1/-1; position:static; height:auto; } .layout.right-collapsed .inspector { grid-column:1/-1; } .controls { position:sticky; } }
  @media (max-width:720px) { .layout,.layout.left-collapsed,.layout.right-collapsed,.layout.left-collapsed.right-collapsed { grid-template-columns:minmax(0,1fr); } .controls,.inspector { position:static; height:auto; } .viewer { min-height:0; } .canvas-shell { min-height:350px; } #drawing,#threeHost { min-height:350px; height:500px; } .viewer-head { flex-wrap:wrap; } .tabs { flex-wrap:wrap; } .header-actions { flex-wrap:wrap; justify-content:flex-end; } }
  @media (max-width:720px) { .mode-client .topbar { flex-wrap:wrap; } .mode-client .client-badge { margin-left:auto; } .mode-client .header-actions { width:100%; } .mode-client .client-project { align-items:flex-start; flex-direction:column; } .mode-client .client-project-data { justify-content:flex-start; width:100%; } .mode-client .client-project-data div { min-width:50%; padding:7px 8px; } .mode-client #threeHost { min-height:350px; height:65vh; } }
  @page { size:A3 landscape; margin:0; }
  @media print { body.exported-client { display:none !important; } body > :not(.sheet-preview) { display:none !important; } .sheet-preview { display:block; width:100%; } .sheet-preview svg { width:100%; min-width:0; max-height:100vh; } }