:root {
  color-scheme: light;
  --navy: #17375e;
  --blue: #245b96;
  --blue-soft: #eef5fc;
  --page: #f5f8fc;
  --surface: #ffffff;
  --text: #172033;
  --muted: #5f6b7a;
  --border: #d8e0ea;
  --danger: #b42318;
  --danger-soft: #fff0ee;
  --success: #087a4b;
  --orange: #d97706;
  --orange-soft: #fff6e8;
  --shadow: 0 10px 28px rgba(23, 55, 94, .07);
  --radius: 16px;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); }
body {
  margin: 0;
  background:
    linear-gradient(rgba(36,91,150,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,91,150,.025) 1px, transparent 1px),
    var(--page);
  background-size: 32px 32px;
  color: var(--text);
  line-height: 1.55;
}
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea { font-family: "Almarai", Tahoma, Arial, sans-serif; }
html[lang="en"] body, html[lang="en"] button, html[lang="en"] input, html[lang="en"] select, html[lang="en"] textarea { font-family: Inter, "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
.page-shell { width: min(1320px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 52px; }
.prototype-banner { margin-bottom: 16px; padding: 11px 15px; border: 1px solid #e8c66a; border-radius: 12px; background: #fff8e6; color: #6c5100; font-size: 13px; font-weight: 800; text-align: start; }
.hero { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:25px; margin-bottom:18px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(135deg,#fff,#f2f8fd); box-shadow:var(--shadow); }
.hero h1 { margin:0 0 8px; color:var(--navy); font-size:clamp(30px,4vw,48px); line-height:1.18; }
.hero p { margin:0; max-width:760px; color:var(--muted); }
.eyebrow { margin:0 0 7px !important; color:var(--blue) !important; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.hero-actions { display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:0 0 auto; }
.language-switch { display:inline-flex; gap:4px; padding:4px; border:1px solid #cbd8e6; border-radius:999px; background:#f3f7fb; }
.language-button { border:0; border-radius:999px; padding:8px 13px; background:transparent; color:var(--navy); font-weight:800; }
.language-button.active { background:var(--navy); color:#fff; box-shadow:0 2px 9px rgba(23,55,94,.18); }
.privacy-badge { padding:6px 10px; border-radius:999px; background:var(--blue-soft); color:var(--blue); font-size:11px; font-weight:700; }
.card { margin-bottom:18px; padding:22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.card-heading h2 { margin:0 0 5px; color:var(--navy); font-size:22px; line-height:1.3; }
.card-heading p { margin:0; color:var(--muted); font-size:14px; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:5px 10px; border-radius:999px; background:var(--blue-soft); color:var(--blue); font-size:12px; font-weight:800; white-space:nowrap; }
.settings-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; }
.common-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.span-2 { grid-column:span 2; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.field label { color:#334155; font-size:13px; font-weight:800; }
input, select, textarea { width:100%; min-height:44px; padding:10px 12px; border:1px solid #cdd9e6; border-radius:11px; background:#fff; color:var(--text); outline:none; transition:border-color .15s, box-shadow .15s; }
textarea { min-height:150px; resize:vertical; direction:ltr; text-align:left; unicode-bidi:isolate; font-family:Consolas, "Courier New", monospace !important; line-height:1.55; }
input:focus, select:focus, textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,91,150,.13); }
.input-suffix { position:relative; display:flex; align-items:center; }
.input-suffix input { padding-inline-end:38px; direction:ltr; text-align:left !important; }
.input-suffix span { position:absolute; inset-inline-end:13px; color:var(--muted); font-weight:800; pointer-events:none; }
.field-help { margin:0; color:var(--muted); font-size:12px; }
.check-field { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 12px; border:1px solid #d8e2ec; border-radius:11px; background:#fbfdff; color:#334155; font-size:13px; font-weight:800; }
.check-field input { width:18px; min-height:18px; accent-color:var(--blue); }
.shape-panel { padding:17px; border:1px solid #dbe5ef; border-radius:14px; background:#fbfdff; }
.form-message { min-height:24px; margin-top:10px; color:var(--danger); font-size:13px; font-weight:700; }
.actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.no-margin { margin-top:0 !important; }
.button,.icon-button { min-height:42px; border:1px solid #cbd7e5; border-radius:10px; padding:9px 14px; background:#fff; color:var(--navy); font-weight:800; transition:transform .12s, background .12s, border-color .12s; }
.button:hover:not(:disabled),.icon-button:hover:not(:disabled) { transform:translateY(-1px); border-color:#9fb4cc; background:#f8fbff; }
.button:disabled,.icon-button:disabled { cursor:not-allowed; opacity:.48; transform:none; }
.button.primary { border-color:var(--blue); background:var(--blue); color:#fff; }
.button.primary:hover { background:#1d4f84; }
.button.danger { border-color:#efb8b2; background:var(--danger-soft); color:var(--danger); }
.place-button { border-color:#9dc3e8; background:#eef6ff; color:#1f5e99; }
.place-button.active { border-color:#7c3aed; background:#f3e8ff; color:#6d28d9; box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.icon-button { width:42px; padding:0; font-size:22px; line-height:1; }
.workspace { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr); gap:18px; align-items:start; }
.stack { min-width:0; }
.preview-card { position:sticky; top:14px; }
.list-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.history-actions { direction:ltr; }
.empty-state { padding:28px 18px; border:1px dashed #c6d4e3; border-radius:14px; background:#f9fbfd; text-align:center; }
.empty-state svg { width:150px; height:100px; }
.empty-state h3 { margin:6px 0 4px; color:var(--navy); }
.empty-state p { margin:0; color:var(--muted); }
.shape-list { display:grid; gap:10px; }
.shape-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px; border:1px solid #dce5ef; border-radius:13px; background:#fbfdff; cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s; }
.shape-item.hole { background:#fffaf5; border-color:#f0d7b4; }
.shape-item.selected { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.12); background:#faf7ff; }
.shape-item.hole.selected { background:#fff8ef; }
.selection-help { margin:0 0 12px; color:var(--muted); font-size:12px; text-align:center; }
.shape-symbol { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:#eaf2fb; color:var(--blue); font-weight:800; direction:ltr; unicode-bidi:isolate; }
.shape-item.hole .shape-symbol { background:var(--orange-soft); color:var(--orange); }
.shape-copy { min-width:0; }
.shape-copy strong { display:block; color:var(--navy); direction:ltr; unicode-bidi:isolate; }
.shape-copy span { display:block; color:var(--muted); font-size:12px; direction:ltr; unicode-bidi:isolate; white-space:normal; }
.shape-actions { display:flex; gap:6px; }
.mini-button { border:1px solid #d2ddea; border-radius:8px; padding:6px 9px; background:#fff; color:var(--navy); font-size:12px; font-weight:800; }
.mini-button.remove { color:var(--danger); }
.preview-stage { min-height:330px; border:1px solid #dbe5ef; border-radius:15px; overflow:hidden; background:linear-gradient(#fff,#fbfdff); direction:ltr; unicode-bidi:isolate; }
.preview-stage svg { display:block; width:100%; height:330px; }
.preview-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.preview-summary>div { padding:10px; border-radius:11px; background:#f4f7fb; }
.preview-summary span { display:block; color:var(--muted); font-size:11px; }
.preview-summary strong { display:block; margin-top:3px; color:var(--navy); font-size:13px; direction:ltr; unicode-bidi:isolate; }
.results-card { background:linear-gradient(180deg,#fff,#fbfdff); }
.centroid-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.primary-result { padding:22px; border-radius:17px; background:linear-gradient(135deg,#17375e,#2f69a8); color:#fff; text-align:center; }
.primary-result.accent { background:linear-gradient(135deg,#a95405,#d97706); }
.primary-result span { display:block; color:#dcebf9; font-size:13px; font-weight:700; }
.primary-result strong { display:block; margin-top:6px; font-size:clamp(32px,5vw,55px); line-height:1.15; direction:ltr; unicode-bidi:isolate; }
.result-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:14px; }
.result-box { padding:15px; border:1px solid #dce5ef; border-radius:13px; background:#fff; }
.result-box span { display:block; color:var(--muted); font-size:12px; }
.result-box strong { display:block; margin-top:5px; color:var(--navy); font-size:18px; direction:ltr; unicode-bidi:isolate; }
.symmetry-result-box { border-color:#d8c7f3; background:#faf7ff; }
.symmetry-result-box strong { color:#6d28d9; font-size:15px; }
.diagram-toolbar { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.zoom-group { display:flex; flex-wrap:wrap; gap:8px; }
.diagram-status-group { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.coordinate-readout,.selected-shape-badge { display:inline-flex; align-items:center; min-height:36px; padding:7px 10px; border:1px solid #d9e4ee; border-radius:999px; background:#f8fbff; color:var(--navy); font-size:12px; font-weight:800; direction:ltr; unicode-bidi:isolate; }
.selected-shape-badge { background:#faf7ff; border-color:#d8c7f3; color:#6d28d9; }
.diagram-stage { position:relative; width:100%; height:clamp(520px,62vw,760px); min-height:520px; overflow:hidden; border:1px solid #d9e4ee; border-radius:16px; background:#fff; direction:ltr; unicode-bidi:isolate; touch-action:pan-y; cursor:default; }
.diagram-stage.is-zoomed { touch-action:none; cursor:grab; }
.diagram-stage.is-dragging { cursor:grabbing; }
.diagram-stage.is-shape-dragging { touch-action:none; cursor:grabbing; }
.diagram-stage.placement-mode { touch-action:none; cursor:crosshair; border-color:#9b74dc; box-shadow:inset 0 0 0 2px rgba(124,58,237,.12); }
.placement-hint { position:absolute; top:12px; left:50%; z-index:4; transform:translateX(-50%); max-width:calc(100% - 24px); padding:9px 14px; border:1px solid #cbb5ed; border-radius:999px; background:rgba(250,247,255,.96); color:#6d28d9; font-size:12px; font-weight:800; text-align:center; pointer-events:none; box-shadow:0 4px 14px rgba(76,29,149,.12); }
.diagram-stage svg { display:block; width:100%; height:100%; max-width:none; max-height:none; direction:ltr; unicode-bidi:isolate; }
.diagram-help { margin:10px 0 0; color:var(--muted); text-align:center; font-size:12px; }
#diagramSvg text,#previewSvg text { font-family:"Segoe UI",Arial,sans-serif; direction:ltr; unicode-bidi:isolate; }
.grid-line { stroke:#e9eef5; stroke-width:1; vector-effect:non-scaling-stroke; }
.axis-line { stroke:#8699ae; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.axis-label { fill:#64748b; font-size:14px; font-weight:700; }
.shape-solid { fill:rgba(36,91,150,.22); stroke:#245b96; stroke-width:2.2; vector-effect:non-scaling-stroke; }
.shape-interactive { cursor:grab; pointer-events:all; touch-action:none; }
.shape-selected .shape-solid,.shape-selected .shape-hole { stroke:#7c3aed; stroke-width:3.6; filter:drop-shadow(0 0 3px rgba(124,58,237,.35)); }
.shape-selected .shape-label { fill:#6d28d9; }
.shape-hole { fill:url(#holePattern); stroke:#d97706; stroke-width:2.2; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; }
.shape-label { fill:#17375e; font-size:14px; font-weight:800; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
.local-centroid { fill:#fff; stroke:#245b96; stroke-width:2; vector-effect:non-scaling-stroke; }
.local-centroid-line { stroke:#245b96; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.composite-guide { stroke:#d97706; stroke-width:1.8; stroke-dasharray:7 6; vector-effect:non-scaling-stroke; }
.composite-centroid { fill:#d97706; stroke:#fff; stroke-width:3; vector-effect:non-scaling-stroke; }
.composite-centroid-ring { fill:none; stroke:#17375e; stroke-width:2.2; vector-effect:non-scaling-stroke; }
.centroid-label rect { fill:#fff; stroke:#d97706; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.centroid-label text { fill:#17375e; font-size:14px; font-weight:800; }
.origin-dot { fill:#fff; stroke:#64748b; stroke-width:2; vector-effect:non-scaling-stroke; }
.origin-label { fill:#64748b; font-size:12px; font-weight:700; }
#calculationDetails { border:0; }
#calculationDetails summary { display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; list-style:none; color:var(--navy); font-size:18px; font-weight:800; }
#calculationDetails summary::-webkit-details-marker { display:none; }
.summary-result { color:var(--blue); font-size:14px; direction:ltr; unicode-bidi:isolate; }
.details-description { margin:8px 0 0; color:var(--muted); font-size:14px; }
.details-body { margin-top:18px; }
.calculation-table-wrap { overflow-x:auto; border:1px solid #dce5ef; border-radius:14px; }
.calculation-table { width:100%; border-collapse:collapse; min-width:720px; direction:ltr; }
.calculation-table th,.calculation-table td { padding:11px 12px; border-bottom:1px solid #e2e8f0; text-align:right; white-space:nowrap; }
.calculation-table th:first-child,.calculation-table td:first-child { text-align:left; }
.calculation-table thead th { background:#eef5fc; color:var(--navy); font-size:12px; }
.calculation-table tbody td { color:#334155; font-size:13px; }
.calculation-table tfoot td { background:#f8fafc; color:var(--navy); font-weight:800; border-bottom:0; }
.hole-row td { color:#9a4f08 !important; }
.final-equations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.final-equation { padding:17px; border-radius:14px; background:#eaf2fb; color:var(--navy); font-size:18px; font-weight:800; text-align:center; direction:ltr; unicode-bidi:isolate; overflow-wrap:anywhere; }
.final-equation.accent { background:#fff3e0; color:#8a4b05; }
.invalid-message { grid-column:1/-1; padding:16px; border-radius:14px; background:#fff0ee; color:var(--danger); font-weight:800; text-align:center; }
.actions-card { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.actions-card h2 { margin:0 0 4px; color:var(--navy); }
.actions-card p { margin:0; color:var(--muted); }
.export-actions { justify-content:flex-end; }
.toast { position:fixed; left:50%; bottom:24px; z-index:50; transform:translate(-50%,20px); opacity:0; pointer-events:none; max-width:min(520px,calc(100% - 32px)); padding:11px 16px; border-radius:999px; background:#172033; color:#fff; font-size:13px; font-weight:800; transition:opacity .18s,transform .18s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
html[dir="rtl"] .hero-actions { align-items:flex-start; }
html[dir="rtl"] input,html[dir="rtl"] select { text-align:right; }
body.imported-tool-mode { background:transparent; }
body.imported-tool-mode .page-shell { width:min(1320px, calc(100% - 16px)); margin-inline:auto; padding-top:0; }
body.imported-tool-mode .prototype-banner { display:none; }
@media (max-width:1050px) {
  .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .common-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .result-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .workspace { grid-template-columns:1fr; }
  .preview-card { position:static; }
  .result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .page-shell { width:min(100% - 18px,100%); padding:10px 0 28px; }
  .hero { flex-direction:column; padding:22px 18px; border-radius:18px; }
  .hero-actions { width:100%; align-items:stretch !important; }
  .language-switch,.privacy-badge { align-self:flex-start; }
  .card { padding:16px; border-radius:15px; }
  .card-heading { flex-direction:column; gap:10px; }
  .card-heading h2 { font-size:19px; }
  .settings-grid,.common-grid,.form-grid { grid-template-columns:1fr; }
  .list-toolbar { flex-direction:column; align-items:stretch; }
  .list-toolbar .actions { justify-content:center; }
  .span-2 { grid-column:auto; }
  .shape-item { grid-template-columns:auto minmax(0,1fr); }
  .shape-actions { grid-column:1/-1; justify-content:flex-end; }
  .preview-stage { min-height:360px; }
  .preview-stage svg { height:360px; }
  .preview-summary,.centroid-pair,.result-grid,.final-equations { grid-template-columns:1fr; }
  .diagram-toolbar { flex-direction:column; align-items:stretch; }
  .diagram-toolbar>* { justify-content:center; }
  .diagram-stage { height:clamp(480px,126vw,660px); min-height:480px; }
  .shape-label { font-size:16px; }
  .centroid-label text { font-size:16px; }
  #calculationDetails summary { align-items:flex-start; flex-direction:column; }
  .actions-card { flex-direction:column; align-items:stretch; }
  .actions-card .button { flex:1 1 auto; }
}

#diagramSvg .grid-line,#diagramSvg .axis-line,#diagramSvg .axis-label,#diagramSvg .shape-label,#diagramSvg .local-centroid,#diagramSvg .local-centroid-line,#diagramSvg .composite-guide,#diagramSvg .symmetry-axis,#diagramSvg .symmetry-label,#diagramSvg .composite-centroid,#diagramSvg .composite-centroid-ring,#diagramSvg .centroid-label,#diagramSvg .origin-dot,#diagramSvg .origin-label { pointer-events:none; }

/* 0.4.0 advanced geometry and editing tools */
.library-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; align-items:end; }
.library-action { display:flex; align-items:flex-end; }
.library-action .button { width:100%; }
.multi-edit-panel { margin-bottom:14px; padding:14px; border:1px solid #d9e4ee; border-radius:14px; background:#f8fbff; }
.multi-select-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.multi-count { margin-inline-start:auto; color:var(--blue); font-size:12px; font-weight:800; }
.multi-edit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto auto; gap:10px; align-items:end; }
.batch-apply,.batch-delete { min-height:44px; }
.shape-select-check { display:flex; align-items:center; justify-content:center; }
.shape-select-check input,.coordinate-select input { width:18px; min-height:18px; accent-color:#7c3aed; }
.shape-item { grid-template-columns:auto auto minmax(0,1fr) auto; }
#coordinateTableDetails summary { display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; list-style:none; color:var(--navy); font-size:18px; font-weight:800; }
#coordinateTableDetails summary::-webkit-details-marker { display:none; }
.coordinate-table-wrap { margin-top:16px; overflow-x:auto; border:1px solid #dce5ef; border-radius:14px; }
.coordinate-table { width:100%; min-width:860px; border-collapse:collapse; direction:ltr; }
.coordinate-table th,.coordinate-table td { padding:9px 10px; border-bottom:1px solid #e2e8f0; text-align:center; white-space:nowrap; }
.coordinate-table thead th { background:#eef5fc; color:var(--navy); font-size:12px; }
.coordinate-table tbody tr:last-child td { border-bottom:0; }
.coordinate-table input,.coordinate-table select { min-height:38px; padding:7px 9px; border-radius:8px; }
.coordinate-table .coordinate-label { min-width:90px; }
.coordinate-table .coordinate-number { width:110px; direction:ltr; text-align:left !important; }
.coordinate-table .coordinate-type { color:var(--muted); font-size:12px; text-align:start; }
.diagram-tabs { display:inline-flex; gap:4px; margin:0 0 14px; padding:4px; border:1px solid #cbd8e6; border-radius:12px; background:#f3f7fb; }
.diagram-tab { min-height:40px; border:0; border-radius:9px; padding:8px 14px; background:transparent; color:var(--navy); font-weight:800; }
.diagram-tab.active { background:var(--navy); color:#fff; box-shadow:0 2px 9px rgba(23,55,94,.18); }
.annotation-tools { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.annotation-tools .button.active { border-color:#7c3aed; background:#f3e8ff; color:#6d28d9; box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.measurement-summary { margin-top:10px; padding:11px 13px; border:1px solid #b9d8ef; border-radius:12px; background:#f2f9ff; color:var(--navy); font-size:13px; font-weight:700; direction:ltr; unicode-bidi:isolate; }
.dimension-line,.dimension-extension { stroke:#0f766e; stroke-width:1.5; vector-effect:non-scaling-stroke; pointer-events:none; }
.dimension-line { marker-start:url(#dimensionTick); marker-end:url(#dimensionTick); }
.dimension-text { fill:#0f766e; font:800 13px Arial; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; pointer-events:none; }
.construction-line { stroke:#0891b2; stroke-width:1.6; stroke-dasharray:10 7; vector-effect:non-scaling-stroke; pointer-events:none; }
.construction-label { fill:#0e7490; font:800 12px Arial; paint-order:stroke; stroke:#fff; stroke-width:4px; pointer-events:none; }
.measure-line { stroke:#7c3aed; stroke-width:2.2; vector-effect:non-scaling-stroke; pointer-events:none; }
.measure-point { fill:#fff; stroke:#7c3aed; stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none; }
.measure-text { fill:#6d28d9; font:800 13px Arial; paint-order:stroke; stroke:#fff; stroke-width:5px; stroke-linejoin:round; pointer-events:none; }
.combined-shape-fill { fill:#2f69a8; filter:drop-shadow(0 5px 9px rgba(23,55,94,.16)); }
.combined-outline-hint { fill:none; stroke:#17375e; stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:.28; pointer-events:none; }
.diagram-stage.measure-mode,.diagram-stage.construction-mode { touch-action:none; cursor:crosshair; border-color:#9b74dc; box-shadow:inset 0 0 0 2px rgba(124,58,237,.10); }

@media (max-width:1050px) {
  .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .multi-edit-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .library-grid,.multi-edit-grid { grid-template-columns:1fr; }
  .multi-count { width:100%; margin-inline-start:0; text-align:center; }
  .shape-item { grid-template-columns:auto auto minmax(0,1fr); }
  .shape-actions { grid-column:1/-1; }
  .diagram-tabs { display:flex; width:100%; }
  .diagram-tab { flex:1; padding-inline:8px; font-size:12px; }
  .annotation-tools { width:100%; }
  .annotation-tools .button { flex:1 1 calc(50% - 8px); }
}
#diagramSvg .dimension-line,#diagramSvg .dimension-extension,#diagramSvg .dimension-text,#diagramSvg .construction-line,#diagramSvg .construction-label,#diagramSvg .measure-line,#diagramSvg .measure-point,#diagramSvg .measure-text,#diagramSvg .combined-shape-fill,#diagramSvg .combined-outline-hint { pointer-events:none; }
.centroid-symbol-bar { stroke:#17375e; stroke-width:1.8; vector-effect:non-scaling-stroke; pointer-events:none; }

/* 0.4.1 context-aware position restore */
.position-restore-button { min-height:36px; padding:7px 11px; border-radius:999px; color:#6d28d9; border-color:#d8c7f3; background:#faf7ff; font-size:12px; }
.position-restore-button:hover:not(:disabled) { background:#f3e8ff; border-color:#b99be5; }
.position-restore-button[hidden] { display:none !important; }