/* ── Canvas ──────────────────────────────────────────────────── */
.sdl-wrap { display:inline-flex;flex-direction:column;gap:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;user-select:none; }
.sdl-login-notice { background:#fff8e1;border:1px solid #ffe082;border-radius:6px;padding:14px 20px;font-size:14px;margin:20px 0; }

/* ── Toolbar ─────────────────────────────────────────────────── */
.sdl-toolbar { display:flex;align-items:center;gap:5px;background:#1e1e2e;padding:7px 12px;border-radius:8px 8px 0 0;flex-wrap:wrap; }
.sdl-toolbar__sep { width:1px;height:20px;background:rgba(255,255,255,0.2);margin:0 2px; }
.sdl-toolbar__label { font-size:11px;color:rgba(255,255,255,0.55);white-space:nowrap; }
.sdl-btn { background:#3b3b52;color:#e0e0f0;border:1px solid rgba(255,255,255,0.1);border-radius:5px;padding:5px 11px;font-size:12px;cursor:pointer;transition:background 0.15s,transform 0.1s;white-space:nowrap; }
.sdl-btn:hover { background:#52526e;transform:translateY(-1px); }
.sdl-btn:active { transform:translateY(0); }
.sdl-btn--success { background:#1a6b35;border-color:#27ae60;color:#d4f7e0; }
.sdl-btn--success:hover { background:#218838; }
.sdl-btn--danger { background:#6b1a1a;border-color:#c0392b;color:#fdd; }
.sdl-btn--danger:hover { background:#922b21; }
.sdl-btn--sm { padding:3px 9px;font-size:11px; }
.sdl-badge { background:rgba(255,255,255,0.1);color:#c8c8e8;border-radius:4px;padding:4px 10px;font-size:12px;font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* ── Tool buttons ────────────────────────────────────────────── */
.sdl-btn--tool { opacity:0.65; }
.sdl-btn--tool:hover { opacity:1; }
.sdl-btn--tool-active { opacity:1;background:#6c63ff !important;border-color:#a09cf7 !important; }
.sdl-btn--tool[data-tool="tape"].sdl-btn--tool-active { background:#c0392b !important;border-color:#e74c3c !important; }
.sdl-btn--tool[data-tool="window"].sdl-btn--tool-active { background:#1a6bb5 !important;border-color:#6db3f2 !important; }
.sdl-btn--tool[data-tool="door"].sdl-btn--tool-active { background:#6b3a10 !important;border-color:#c8874a !important; }

/* ── Thickness ───────────────────────────────────────────────── */
.sdl-btn--thick { font-size:11px;padding:5px 9px;opacity:0.6; }
.sdl-btn--thick:hover { opacity:1; }
.sdl-btn--thick-active { opacity:1;background:#e07b00 !important;border-color:#ffaa44 !important; }

/* ── Axis hint ───────────────────────────────────────────────── */
.sdl-axis-hint { font-size:11px;color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:4px;padding:3px 8px;white-space:nowrap;transition:color 0.15s,background 0.15s; }
.sdl-axis-hint--active { color:#ffe066;background:rgba(255,220,50,0.15);border-color:rgba(255,220,50,0.4); }

/* ── SVG wrap ────────────────────────────────────────────────── */
.sdl-svg-wrap { position:relative;border:2px solid #1e1e2e;border-top:none;background:#fff;line-height:0; }
.sdl-svg { display:block; }
.sdl-overlay { position:absolute;top:0;left:0;pointer-events:none; }

/* ── Handles ─────────────────────────────────────────────────── */
.sdl-handle { background:transparent;border-radius:3px; }
.sdl-handle:hover { background:rgba(108,99,255,0.10); }
.sdl-handle--selected { background:rgba(108,99,255,0.08);outline:2px dashed rgba(108,99,255,0.7);outline-offset:2px;border-radius:2px; }
.sdl-handle:not(.sdl-handle--selected) .sdl-knob { display:none; }
.sdl-knob--endpoint { width:11px;height:11px;background:#fff;border:2px solid #6c63ff;border-radius:50%;position:absolute; }
.sdl-sym-handle--window { background:rgba(26,107,181,0.10); }
.sdl-sym-handle--window:hover { background:rgba(26,107,181,0.22); }
.sdl-sym-handle--door { background:rgba(107,58,16,0.10); }
.sdl-sym-handle--door:hover { background:rgba(107,58,16,0.22); }

/* ── Controls panel ──────────────────────────────────────────── */
.sdl-controls-panel { display:flex;align-items:center;gap:14px;background:#f4f4f8;border:2px solid #1e1e2e;border-top:none;padding:8px 14px;border-radius:0 0 8px 8px;flex-wrap:wrap; }
.sdl-controls-panel__title { font-weight:700;color:#333;font-size:12px;text-transform:uppercase;letter-spacing:0.05em; }
.sdl-controls-panel label { display:flex;align-items:center;gap:6px;color:#444;font-size:12px; }
.sdl-controls-panel input[type=color] { width:26px;height:26px;border:none;padding:0;cursor:pointer;border-radius:50%; }
.sdl-controls-panel select { border:1px solid #ccc;border-radius:4px;padding:3px 6px;font-size:12px;cursor:pointer; }
.sdl-sym-panel { background:#f4f4f8; }
.sdl-sym-panel label { display:flex;align-items:center;gap:6px;font-size:12px;color:#444; }

/* ── Dim inputs ──────────────────────────────────────────────── */
.sdl-dim-input { width:62px;padding:3px 6px;border:1px solid #bbb;border-radius:5px;font-size:13px;font-family:monospace;text-align:right;background:#fff;color:#1a1a2e;outline:none;transition:border-color 0.15s,box-shadow 0.15s;-moz-appearance:textfield; }
.sdl-dim-input::-webkit-inner-spin-button,.sdl-dim-input::-webkit-outer-spin-button { opacity:0.4; }
.sdl-dim-input:focus { border-color:#6c63ff;box-shadow:0 0 0 2px rgba(108,99,255,0.18); }
.sdl-dim-unit { font-size:11px;color:#888;margin-left:2px; }
.sdl-dim-ftshow { font-size:11px;color:#6c63ff;margin-left:4px;font-family:monospace; }

/* ── Toast ───────────────────────────────────────────────────── */
.sdl-toast { position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:rgba(30,138,68,0.93);color:#fff;padding:8px 22px;border-radius:20px;font-size:13px;z-index:9999;pointer-events:none;box-shadow:0 2px 12px rgba(0,0,0,0.18);transition:opacity 0.4s ease;white-space:nowrap; }
.sdl-toast--error { background:rgba(192,57,43,0.93); }
.sdl-toast--hide { opacity:0; }

/* ── Modal ───────────────────────────────────────────────────── */
.sdl-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:8888;display:flex;align-items:center;justify-content:center; }
.sdl-modal { background:#fff;border-radius:10px;padding:28px 28px 20px;width:440px;max-width:94vw;max-height:85vh;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,0.25);overflow:hidden; }
.sdl-modal__title { margin:0;font-size:18px;font-weight:700;color:#111; }
.sdl-modal__label { margin:0;font-size:12px;color:#999;text-align:center; }
.sdl-modal__row { display:flex;gap:8px;margin-top:8px; }
.sdl-modal__footer { display:flex;justify-content:flex-end; }
.sdl-new-form { display:flex;flex-direction:column;gap:4px; }
.sdl-modal-btn { background:#3b3b52;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:13px;cursor:pointer;transition:background 0.15s; }
.sdl-modal-btn:hover { background:#52526e; }
.sdl-modal-btn--primary { background:#1a6b35; }
.sdl-modal-btn--primary:hover { background:#218838; }
.sdl-input { width:100%;box-sizing:border-box;border:1px solid #ccc;border-radius:6px;padding:8px 12px;font-size:14px;outline:none;transition:border-color 0.2s; }
.sdl-input:focus { border-color:#2271b1; }
.sdl-project-list { overflow-y:auto;max-height:240px;display:flex;flex-direction:column;gap:6px;padding-right:2px; }
.sdl-empty { margin:0;color:#aaa;font-size:13px;text-align:center;padding:20px 0; }
.sdl-project-item { display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e5e5e5;border-radius:8px;background:#fafafa;transition:background 0.15s; }
.sdl-project-item:hover { background:#f0f6ff;border-color:#2271b1; }
.sdl-project-item--active { background:#e8f4fd;border-color:#2271b1; }
.sdl-project-item__info { flex:1;min-width:0; }
.sdl-project-item__name { font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sdl-project-item__meta { font-size:11px;color:#888;margin-top:2px; }
.sdl-project-item__load { background:#2271b1;color:#fff;border:none;border-radius:5px;padding:5px 11px;font-size:12px;cursor:pointer;flex-shrink:0; }
.sdl-project-item__load:hover { background:#135e96; }
.sdl-project-item__delete { background:transparent;color:#c0392b;border:1px solid #c0392b;border-radius:5px;padding:5px 8px;font-size:12px;cursor:pointer;flex-shrink:0; }
.sdl-project-item__delete:hover { background:#c0392b;color:#fff; }

/* ── Stats page ──────────────────────────────────────────────── */
.sdl-stats-wrap { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:960px;margin:0 auto;color:#1a1a2e; }
.sdl-stats-header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e8e8f0; }
.sdl-stats-title { margin:0;font-size:22px;font-weight:700;color:#1e1e2e; }
.sdl-stats-selector { display:flex;align-items:center;gap:8px; }
.sdl-stats-selector__label { font-size:13px;font-weight:600;color:#555;white-space:nowrap; }
.sdl-stats-select { border:1px solid #ccc;border-radius:6px;padding:7px 12px;font-size:14px;min-width:240px;cursor:pointer;outline:none; }
.sdl-stats-btn { background:#3b3b52;color:#fff;border:none;border-radius:6px;padding:7px 12px;font-size:14px;cursor:pointer; }
.sdl-stats-empty { text-align:center;padding:48px 20px;color:#888;font-size:15px;background:#f8f8fc;border:2px dashed #ddd;border-radius:8px; }
.sdl-stats-panel { display:flex;flex-direction:column;gap:28px; }
.sdl-stats-preview-wrap { background:#fff;border:1px solid #e0e0ec;border-radius:8px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.sdl-stats-svg { display:block;width:100%;max-height:340px;border-radius:4px;background:#fafafa; }
.sdl-stats-caption { margin:8px 0 0;font-size:12px;color:#888;text-align:center; }
.sdl-stats-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px; }
.sdl-stat-card { display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid #e0e0ec;border-radius:10px;padding:16px 18px;box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.sdl-stat-card__icon { font-size:26px;line-height:1;flex-shrink:0; }
.sdl-stat-card__value { font-size:18px;font-weight:700;color:#1e1e2e;line-height:1.2; }
.sdl-stat-card__value small { font-size:12px;font-weight:400;color:#888; }
.sdl-stat-card__label { font-size:12px;color:#666;margin-top:3px; }
.sdl-stat-card__sub { font-size:11px;color:#999;margin-top:2px; }
.sdl-stats-section { background:#fff;border:1px solid #e0e0ec;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.04); }
.sdl-stats-section__title { margin:0;padding:14px 18px;font-size:14px;font-weight:700;background:#f4f4f8;border-bottom:1px solid #e0e0ec;color:#333; }
.sdl-stats-table { width:100%;border-collapse:collapse;font-size:13px; }
.sdl-stats-table th { background:#f4f4f8;padding:10px 14px;text-align:left;font-weight:600;color:#444;border-bottom:1px solid #e0e0ec;white-space:nowrap; }
.sdl-stats-table td { padding:9px 14px;border-bottom:1px solid #f0f0f4;color:#333;vertical-align:middle; }
.sdl-stats-table tbody tr:last-child td { border-bottom:none; }
.sdl-stats-table tbody tr:hover td { background:#f8f8ff; }
.sdl-stats-table small { color:#999;font-size:11px; }
.sdl-stats-table__empty { text-align:center;color:#aaa;padding:20px !important;font-style:italic; }
.sdl-swatch { display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,0.15);vertical-align:middle;margin-right:5px; }

/* ── Materials table ─────────────────────────────────────────── */
.sdl-mat-num { text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap; }
.sdl-mat-total { font-weight:600;color:#1a6b35; }
.sdl-mat-note { color:#999;font-size:11px;font-style:italic; }
.sdl-mat-row--zero td { color:#bbb; }
.sdl-mat-grand td { padding:13px 14px;background:#1e1e2e;color:#fff;border-top:2px solid #6c63ff;font-size:14px; }
.sdl-mat-grand__total { font-size:18px;font-weight:700;color:#7fffb2 !important;letter-spacing:0.02em; }
.sdl-stats-table--materials tbody tr:nth-child(even) td { background:#f9f9fd; }
.sdl-stats-table--materials tbody tr:hover td { background:#f0f0ff; }
.sdl-th-cb { width:60px;text-align:center;color:#555;font-size:12px;font-weight:600; }
.sdl-mat-cb-cell { text-align:center;vertical-align:middle;padding:9px 10px !important; }
.sdl-mat-cb { width:17px;height:17px;cursor:pointer;accent-color:#6c63ff;display:block;margin:0 auto; }
.sdl-mat-row--unchecked td { opacity:0.38;text-decoration:line-through;color:#999; }
.sdl-mat-row--unchecked .sdl-mat-note,.sdl-mat-row--unchecked .sdl-mat-cb-cell,.sdl-mat-row--unchecked .sdl-mat-cb { opacity:1 !important;text-decoration:none !important; }

/* ── 3D viewer ───────────────────────────────────────────────── */
.sdl-3d-wrap { background:#1a1a2e;border-radius:10px;overflow:hidden;position:relative;margin:20px 0; }
.sdl-3d-toolbar { display:flex;align-items:center;gap:6px;padding:10px 14px;background:#12121f;flex-wrap:wrap; }
.sdl-3d-btn { background:rgba(255,255,255,0.10);color:#d0d0e8;border:1px solid rgba(255,255,255,0.12);border-radius:5px;padding:5px 12px;font-size:12px;cursor:pointer;transition:background 0.15s;white-space:nowrap; }
.sdl-3d-btn:hover { background:rgba(255,255,255,0.18); }
.sdl-3d-select { background:rgba(255,255,255,0.08);color:#d0d0e8;border:1px solid rgba(255,255,255,0.15);border-radius:5px;padding:5px 10px;font-size:12px;min-width:180px;cursor:pointer; }
.sdl-3d-select option { background:#1a1a2e;color:#d0d0e8; }
.sdl-3d-sep { width:1px;height:20px;background:rgba(255,255,255,0.12);margin:0 2px; }
.sdl-3d-label { font-size:11px;color:rgba(255,255,255,0.45);white-space:nowrap; }
.sdl-3d-ceiling-input { background:rgba(255,255,255,0.08);color:#d0d0e8;border:1px solid rgba(255,255,255,0.15);border-radius:5px;padding:5px 8px;font-size:12px;width:56px;text-align:center; }
.sdl-3d-ceiling-display { font-size:12px;font-weight:600;color:#a09cf7;min-width:28px; }
.sdl-3d-canvas-wrap { position:relative; }
.sdl-3d-canvas { display:block;width:100%; }
.sdl-3d-hint { position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.55);color:#c8c8e0;font-size:11px;padding:4px 14px;border-radius:20px;pointer-events:none;white-space:nowrap; }
.sdl-3d-overlay { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(18,18,30,0.75);color:#9090b0;font-size:14px; }