/* Drape Mesh module — slope coverage area marking + auto-anchor + BOM.
 * Layered on top of studio.css; reuses .studio-hero, .topbar, .topnav, .status-badge etc. */

/* ════════════════════════════════════════════════════════════════════════
 * v57.14 — Strike override panel (active polygon V/H grid rotation)
 * Engineer L99 IQ200: "düşey grid strike açısını edit edebilelim, kesit alır gibi"
 * ════════════════════════════════════════════════════════════════════════ */
.poly-strike-panel {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.45));
  border: 1px solid rgba(6, 182, 212, 0.28);
  border-radius: 5px;
  font-size: 11.5px;
}
.poly-strike-panel .psp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.poly-strike-panel .psp-icon { font-size: 13px; }
.poly-strike-panel .psp-title {
  flex: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #cffafe;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}
.poly-strike-panel .psp-reset {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.40);
  color: rgba(203, 213, 225, 0.85);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}
.poly-strike-panel .psp-reset:hover {
  background: rgba(71, 85, 105, 0.55);
  border-color: rgba(148, 163, 184, 0.65);
  color: #fff;
}
.poly-strike-panel .psp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.poly-strike-panel .psp-row input[type=range] {
  flex: 1;
  accent-color: var(--tk-acc-primary);
  height: 4px;
  cursor: pointer;
}
.poly-strike-panel .psp-row input[type=number] {
  width: 50px;
  background: rgba(15, 23, 42, 0.60);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 3px;
  color: #cffafe;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 4px;
  text-align: center;
}
.poly-strike-panel .psp-unit {
  font-size: 10.5px;
  color: rgba(148, 163, 184, 0.85);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.poly-strike-panel .psp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.80);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.poly-strike-panel .psp-auto-deg {
  color: rgba(6, 182, 212, 0.80);
}
.poly-strike-panel.is-override {
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(15, 23, 42, 0.55));
}
.poly-strike-panel.is-override .psp-title {
  color: #fde68a;
}


/* ════════════════════════════════════════════════════════════════════════
 * v57.5 — Inline overlay toggle inside ① ÜRET AI row (P1-P2 arasında)
 * Engineer: "overlay eskiden P1 ve P2 arasındaydı galiba yine oraya mı alsak?"
 * ════════════════════════════════════════════════════════════════════════ */
.pt-ai-overlay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 8px;
  background: rgba(51, 65, 85, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 4px;
  color: rgba(226, 232, 240, 0.85);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.14s ease;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.pt-ai-overlay-toggle:hover {
  background: rgba(71, 85, 105, 0.65);
  border-color: rgba(148, 163, 184, 0.50);
}
.pt-ai-overlay-toggle input[type="checkbox"] {
  accent-color: var(--tk-acc-primary);
  width: 12px;
  height: 12px;
  margin: 0 2px 0 0;
  cursor: pointer;
}
.pt-ai-overlay-toggle:has(input:checked) {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.22), rgba(168, 85, 247, 0.16));
  border-color: rgba(6, 182, 212, 0.55);
  color: #cffafe;
  box-shadow: 0 0 6px rgba(6, 182, 212, 0.25);
}
.pt-ai-overlay-icon {
  font-size: 13px;
  line-height: 1;
}
.pt-ai-overlay-text {
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  opacity: 0.85;
}


/* ════════════════════════════════════════════════════════════════════════
 * v57.3 — YAMAÇ (slope) management panel (03 KESİT phase)
 * Engineer L99 vizyonu: "her yamacın kritik kesiti olmalı".
 * ════════════════════════════════════════════════════════════════════════ */
.acc-slopes .slope-hint {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(203, 213, 225, 0.85);
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.45);
  border-left: 3px solid var(--ds-amber);
  border-radius: 3px;
  margin-bottom: 8px;
}
.slope-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
}
.slope-toolbar .btn-sec {
  flex: 1;
  font-size: 11px;
  padding: 5px 8px;
  white-space: nowrap;
}
.acc-subhead-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(251, 191, 36, 0.25);
  border: 1px solid rgba(251, 191, 36, 0.55);
  color: #fde68a;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.slope-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}
.slope-list-empty {
  padding: 12px 8px;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.65);
  text-align: center;
  font-style: italic;
  background: rgba(15, 23, 42, 0.40);
  border: 1px dashed rgba(148, 163, 184, 0.25);
  border-radius: 4px;
}
/* v57.63 — Engineer L99: X butonu kendi satırında yer harcıyordu, üst satıra alındı.
 * Grid: row1 = [dot] [name] [meta] [×], row2 = [status spans 4 col]. */
.slope-row {
  display: grid;
  grid-template-columns: 10px auto 1fr 22px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 3px;
  padding: 5px 8px;
  background: rgba(15, 23, 42, 0.50);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.14s ease;
}
.slope-row:hover {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(148, 163, 184, 0.45);
}
.slope-row.active {
  background: linear-gradient(180deg,
    rgba(var(--slope-color, 251 191 36), 0.18) 0%,
    rgba(15, 23, 42, 0.55) 100%);
  border-color: var(--slope-color, var(--ds-amber));
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
}
.slope-color-dot {
  width: 10px;
  height: 10px;
  background: var(--slope-color, var(--ds-amber));
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  grid-column: 1;
}
.slope-name {
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.02em;
}
.slope-meta {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.70);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.slope-status-bits {
  grid-column: 1 / -1;
  font-size: 10px;
  color: rgba(203, 213, 225, 0.70);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding-top: 3px;
  margin-top: 3px;
  border-top: 1px dashed rgba(148, 163, 184, 0.18);
}
.slope-status-bits i { opacity: 0.45; }
.slope-del {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: rgba(252, 165, 165, 0.85);
  border-radius: 3px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.12s ease;
}
.slope-del:hover {
  background: rgba(239, 68, 68, 0.32);
  border-color: rgba(239, 68, 68, 0.85);
  color: #fff;
}
.slope-detail-panel {
  margin-top: 10px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.45));
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 5px;
}
.slope-detail-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
  font-size: 11px;
}
.slope-detail-row:last-child { border-bottom: none; }
.slope-detail-label {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: rgba(148, 163, 184, 0.85);
  text-transform: uppercase;
}
.slope-detail-value {
  color: rgba(226, 232, 240, 0.92);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}
.btn-small {
  padding: 3px 8px !important;
  font-size: 10.5px !important;
  height: 24px !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * v55.12 — DESIGN TOKENS (consistent visual language across all components)
 *
 * Renk semantik:
 *   --acc-primary  : ana action / kabul (cyan)
 *   --acc-success  : başarı / kabul edildi (yeşil)
 *   --acc-warn     : uyarı / dikkat (sarı/amber)
 *   --acc-danger   : sil / iptal / hata (kırmızı)
 *   --acc-info     : nötr info / muted (slate)
 *   --acc-ai       : AI/Vision actions (cyan/teal accent)
 *   --acc-aof      : AOF specific (yellow accent)
 *
 * Spacing scale: 4 / 6 / 8 / 12 / 16 / 24 / 32 (px)
 * Typography:    11 / 12 / 13 / 14 / 16 (px); mono 10 / 11 / 12
 * Radius:        3 (small) / 5 (medium) / 8 (large) / 999 (pill)
 * Shadow:        1 (subtle) / 2 (raised) / 3 (modal)
 * ════════════════════════════════════════════════════════════════════════ */
:root {
  /* v57.29.41 — Designer P0 — Font tokens BROKEN bug fix.
   * Mevcut: --ds-font-* 47 yerde var(--ds-font-display, fallback) ile
   * kullanılıyor ama :root'ta TANIMLI DEĞİL. Fallback'e düşmüş, Manrope
   * intent etkisiz. Şimdi tanımla. */
  --ds-font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  /* Semantic colors (token, all components reference these) */
  --tk-acc-primary:  rgb(6, 182, 212);            /* cyan-500 */
  --tk-acc-success:  rgb(34, 197, 94);            /* green-500 */
  --tk-acc-warn:     rgb(251, 191, 36);           /* amber-400 */
  --tk-acc-danger:   rgb(239, 68, 68);            /* red-500 */
  --tk-acc-info:     rgb(148, 163, 184);          /* slate-400 */
  --tk-acc-ai:       rgb(103, 232, 249);          /* cyan-300 (lighter for dark bg) */
  --tk-acc-aof:      var(--tk-acc-primary);       /* v58.67: AOF = primary CYAN (serbest sarı kalktı) */
  --tk-acc-udg:      rgb(103, 232, 249);          /* same as AI */
  /* Surface (dark theme) */
  --tk-surf-base:    rgb(15, 23, 42);             /* slate-900 */
  --tk-surf-raised:  rgb(30, 41, 59);             /* slate-800 */
  --tk-surf-glass:   rgba(15, 23, 42, 0.55);      /* translucent dark */
  --tk-surf-frost:   rgba(2, 6, 23, 0.92);        /* modal backdrop */
  /* Text */
  --tk-text-primary: rgb(226, 232, 240);          /* slate-200 */
  --tk-text-muted:   rgba(148, 163, 184, 0.85);   /* slate-400 muted */
  --tk-text-dim:     rgba(148, 163, 184, 0.65);   /* slate-400 dim */
  /* Borders */
  --tk-border-soft:  rgba(148, 163, 184, 0.18);
  --tk-border-med:   rgba(148, 163, 184, 0.32);
  --tk-border-strong:rgba(148, 163, 184, 0.55);
  /* Spacing scale */
  --tk-sp-1: 4px;
  --tk-sp-2: 6px;
  --tk-sp-3: 8px;
  --tk-sp-4: 12px;
  --tk-sp-5: 16px;
  --tk-sp-6: 24px;
  --tk-sp-7: 32px;
  /* Radius scale */
  --tk-r-1: 3px;
  --tk-r-2: 5px;
  --tk-r-3: 8px;
  --tk-r-pill: 999px;
  /* Typography scale */
  --tk-fs-xs:  10px;
  --tk-fs-sm:  11px;
  --tk-fs-md:  12px;
  --tk-fs-lg:  13px;
  --tk-fs-xl:  14px;
  --tk-fs-2xl: 16px;
  --tk-ff-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tk-ff-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  /* Shadow */
  --tk-sh-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --tk-sh-2: 0 4px 12px rgba(0, 0, 0, 0.40);
  --tk-sh-3: 0 20px 60px rgba(0, 0, 0, 0.50);
  /* Transitions */
  --tk-trans-fast: 0.12s ease;
  --tk-trans-med:  0.20s ease;
}

/* ──────────── Unified components (v55.12) ──────────── */

/* Panel block — left-panel modular blocks (AOF, UDG, PolyEdit, AI Vision section, etc.)
   Replaces aof-block, udg-block, etc. Use as base class together with accent variant. */
.tk-panel-block {
  margin: var(--tk-sp-2) 0 var(--tk-sp-3) 0;   /* v58.73 kompakt: 8/12 → 6/8 */
  padding: var(--tk-sp-3);                      /* v58.73 kompakt: 12 → 8 */
  background: rgba(15, 23, 42, 0.40);
  border: 1px solid var(--tk-border-soft);
  border-radius: var(--tk-r-3);
  box-shadow: var(--tk-sh-1);
  transition: border-color var(--tk-trans-med);
}
.tk-panel-block:hover { border-color: var(--tk-border-med); }
.tk-panel-block--primary { border-color: rgba(6, 182, 212, 0.30); background: rgba(6, 182, 212, 0.05); }
.tk-panel-block--aof     { border-color: rgba(6, 182, 212, 0.30); background: rgba(6, 182, 212, 0.05); }
.tk-panel-block--udg     { border-color: rgba(6, 182, 212, 0.32); background: rgba(6, 182, 212, 0.06); }
.tk-panel-block--polyedit{ border-color: rgba(6, 182, 212, 0.25); background: rgba(6, 182, 212, 0.04); }

/* Panel header row (icon + title + status pill) */
.tk-panel-header {
  display: flex;
  align-items: center;
  gap: var(--tk-sp-3);
  margin-bottom: var(--tk-sp-3);
}
.tk-panel-icon {
  font-size: var(--tk-fs-xl);
  line-height: 1;
}
.tk-panel-title {
  font-size: var(--tk-fs-md);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--tk-text-primary);
  flex: 1;
}

/* Status pill (right side of panel header). Color-coded by state. */
.tk-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tk-sp-1);
  padding: 2px var(--tk-sp-2);
  min-height: 18px;
  font-size: var(--tk-fs-xs);
  font-weight: 700;
  font-family: var(--tk-ff-mono);
  letter-spacing: 0.2px;
  background: rgba(148, 163, 184, 0.10);
  color: var(--tk-text-muted);
  border: 1px solid var(--tk-border-soft);
  border-radius: var(--tk-r-pill);
  cursor: help;
  white-space: nowrap;
}
.tk-status-pill[data-state="active"],
.tk-status-pill.tk-state-active {
  background: rgba(6, 182, 212, 0.20);
  color: var(--tk-acc-ai);
  border-color: rgba(6, 182, 212, 0.55);
}
.tk-status-pill[data-state="success"],
.tk-status-pill.tk-state-success {
  background: rgba(34, 197, 94, 0.20);
  color: rgb(134, 239, 172);
  border-color: rgba(34, 197, 94, 0.55);
}
.tk-status-pill[data-state="warn"],
.tk-status-pill.tk-state-warn {
  background: rgba(251, 191, 36, 0.20);
  color: rgb(253, 230, 138);
  border-color: rgba(251, 191, 36, 0.55);
}

/* Compact icon toolbar (replaces .aof-toolbar). Buttons sized for fit, no wrap on
   normal panel widths. */
.tk-icon-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--tk-border-soft);
  border-radius: var(--tk-r-2);
  flex-wrap: wrap;       /* still wrap on tiny panels — graceful degradation */
  max-width: 100%;
  box-sizing: border-box;
}
.tk-icon-toolbar > .tk-icon-btn {
  flex: 0 0 auto;
}
.tk-icon-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--tk-border-soft);
  margin: 0 2px;
}

/* Icon button (square, compact) */
.tk-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 var(--tk-sp-2);
  background: rgba(51, 65, 85, 0.45);
  color: var(--tk-text-primary);
  border: 1px solid var(--tk-border-soft);
  border-radius: var(--tk-r-1);
  font-size: var(--tk-fs-md);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background var(--tk-trans-fast), border-color var(--tk-trans-fast), transform 0.08s ease;
}
.tk-icon-btn:hover:not(:disabled) {
  background: rgba(71, 85, 105, 0.65);
  border-color: var(--tk-border-strong);
  transform: scale(1.06);
}
.tk-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.tk-icon-btn.tk-active,
.tk-icon-btn[data-active="true"] {
  background: rgba(6, 182, 212, 0.25);
  border-color: var(--tk-acc-primary);
  color: var(--tk-acc-ai);
}
.tk-icon-btn--primary {
  background: rgba(6, 182, 212, 0.22);
  border-color: rgba(6, 182, 212, 0.55);
  color: var(--tk-acc-ai);
}
.tk-icon-btn--warn {
  background: rgba(253, 224, 71, 0.20);
  border-color: rgba(253, 224, 71, 0.55);
  color: rgb(254, 243, 199);
}
.tk-icon-btn--danger {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: rgb(252, 165, 165);
}

/* Hint banner (dashed border, info-style) — for active tool guidance */
.tk-hint-banner {
  margin: var(--tk-sp-2) 0 var(--tk-sp-3) 0;
  padding: var(--tk-sp-2) var(--tk-sp-3);
  font-size: var(--tk-fs-sm);
  color: rgb(254, 243, 199);
  background: rgba(253, 224, 71, 0.08);
  border: 1px dashed rgba(253, 224, 71, 0.45);
  border-radius: var(--tk-r-1);
}

/* Stats row (small inline metrics, mono font) */
.tk-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tk-sp-1);
  font-size: var(--tk-fs-xs);
  font-family: var(--tk-ff-mono);
  color: var(--tk-text-muted);
  margin-top: var(--tk-sp-2);
}
.tk-stats-row > b { color: var(--tk-text-primary); }
.tk-stats-row .tk-stats-spacer { flex: 1; }


/* ── Mode pills (PMP / AMP) ────────────────────────────────────────────── */
.drape-row-mode {
  align-items: center;
}
.drape-mode-group {
  display: flex;
  gap: 6px;
}
.drape-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-light, #cbd5e1);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text-light, #f1f5f9);
  cursor: pointer;
  font-size: 12px;
  transition: background .15s ease, border-color .15s ease;
}
.drape-mode-pill:hover {
  background: rgba(234,88,12,0.10);
  border-color: var(--accent, var(--tk-acc-primary));
}
.drape-mode-pill input[type="radio"] {
  margin: 0;
  accent-color: var(--accent, var(--tk-acc-primary));
}
.drape-mode-pill:has(input:checked) {
  background: var(--accent, var(--tk-acc-primary));
  border-color: var(--accent, var(--tk-acc-primary));
  color: #fff;
}
.drape-mode-pill b { font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
 * v45.2 — Ribbon-style toolbar (Office / AutoCAD pattern)
 *
 * Groups: Slope System | Geometry | Mesh | Compute | Project
 * Each group has a tiny title strip + inline controls. Visual dividers
 * between groups make the workflow obvious at a glance.
 * ════════════════════════════════════════════════════════════════════════ */
.drape-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: #1e293b;
  border-bottom: 2px solid var(--tk-acc-primary);  /* v58.69: ribbon accent cyan */
  padding: 0;
  gap: 0;
  font-size: 11px;
}
.ribbon-group {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #334155;
  padding: 4px 8px;
  min-height: 60px;
}
.ribbon-group:last-child { border-right: none; }
.ribbon-group-primary { background: rgba(6, 182, 212, 0.10); }
.ribbon-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 4px;
  font-weight: 600;
}
.ribbon-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.ribbon-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #e5e7eb;
  /* v45.5 — translucent pill so the label is legible whether the banner
     pixel behind it is bright or dark. */
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.ribbon-field input[type="number"],
.ribbon-field select,
.ribbon-field input[type="file"] {
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #475569;
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 3px;
}
.ribbon-field input[type="number"] { width: 56px; }
.ribbon-field select { min-width: 90px; }
.ribbon-btn-group {
  display: inline-flex;
  gap: 2px;
}
.ribbon-controls button {
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #475569;
  background: #334155;
  color: #e5e7eb;
  border-radius: 3px;
  cursor: pointer;
}
.ribbon-controls button:hover:not(:disabled) { background: #475569; }
.ribbon-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.ribbon-controls button.drape-update-btn {
  background: #0891b2;
  border-color: #0891b2;
  color: #fff;
  font-weight: 600;
  padding: 6px 14px;
}
.ribbon-controls button.drape-update-btn:hover { background: #0e7490; }
.ribbon-controls .drape-mode-pill {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  background: #334155;
  border: 1px solid #475569;
  color: #cbd5e1;
}
.ribbon-controls .drape-mode-pill input { display: none; }
.ribbon-controls .drape-mode-pill:has(input:checked) {
  background: #0891b2;
  border-color: #0891b2;
  color: #fff;
}
.ribbon-controls .status-badge {
  font-size: 10px;
  padding: 3px 7px;
  background: rgba(15, 23, 42, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  color: #cbd5e1;
}
.ribbon-lang-btn { font-weight: 600; }

/* v45.1 — Mesh Workshop side dock layout
 *
 * Right column now hosts BOTH Mesh Workshop (top) and Section A-A (below),
 * both at the same height as the viewer so engineer sees mesh, slope
 * section, and workshop sliders simultaneously without scrolling.
 *
 *   ┌─ viewer ──────────────────┬─ workshop ─┐
 *   │                           ├─ section ──┤
 *   │                           │            │
 *   ├─ stats ┬─ bom ┬─ tools ────────────────┤
 *   └────────┴──────┴───────────┴────────────┘
 */
.drape-shell {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* v45.37 — Section A-A row bumped again — engineer wanted the cross-
     section window larger and pushed the back of the section off-poly,
     so we need more room. 50vh / 420px floor. */
  grid-template-rows: minmax(280px, 35vh) minmax(420px, 50vh) minmax(220px, auto);
  grid-template-areas:
    "viewer  viewer  viewer  viewer  workshop workshop"
    "viewer  viewer  viewer  viewer  section  section"
    "stats   stats   bom     bom     tools    tools";
  gap: 10px;
  padding: 10px;
  background: var(--bg-soft, #f5f7fa);
}
.drape-area-workshop { grid-area: workshop; }

.drape-panel {
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  padding: 10px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.drape-panel h3 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 4px;
}

.drape-area-stats   { grid-area: stats; }
.drape-area-bom     { grid-area: bom; }
.drape-area-section { grid-area: section; }
.drape-area-tools   { grid-area: tools; }       /* v43.32 */
/* v45.1 — Mesh Workshop dock styling. Same chrome as section panel. */
.drape-area-workshop {
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
}
.drape-area-workshop.collapsed { grid-row: span 0; padding: 4px 8px; }
.drape-area-workshop.collapsed #drapeWorkshopBox { display: none; }
.drape-area-workshop #drapeWorkshopBox {
  flex: 1;
  overflow-y: auto;
  margin-top: 4px;
}

/* v43.32 — Tools panel content */
.drape-tools-box {
  font-size: 11px;
  color: #1e293b;
  line-height: 1.5;
}
.drape-tools-box h4 {
  margin: 8px 0 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 2px;
}
.drape-tools-box .row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
}
.drape-tools-box .row .k { color: #64748b; }
.drape-tools-box .row .v { color: #0f172a; font-weight: 500; }
.drape-tools-box .hint  { color: #94a3b8; font-style: italic; font-size: 10px; margin-top: 4px; }

/* v44.0 — Mesh Workshop control cards inside Tools panel */
.drape-tools-box .ws-hint { color: #94a3b8; font-weight: 400; font-size: 9px; }
.drape-tools-box .ws-stage {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 5px 6px;
  margin-bottom: 5px;
  background: #f8fafc;
}
.drape-tools-box .ws-tog {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  cursor: pointer;
}
.drape-tools-box .ws-tog input { width: 12px; height: 12px; margin: 0; accent-color: var(--tk-acc-primary); }
.drape-tools-box .ws-tog b { color: #1e293b; font-weight: 600; }
.drape-tools-box .ws-params {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.drape-tools-box .ws-p {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9.5px;
  color: #475569;
}
.drape-tools-box .ws-p input {
  width: 44px;
  padding: 1px 3px;
  font-size: 9.5px;
  border: 1px solid #cbd5e1;
  border-radius: 2px;
  background: #fff;
}
.drape-tools-box .ws-out {
  margin-top: 3px;
  font-size: 9.5px;
  color: #0f766e;
}
.drape-tools-box .ws-rebuild-btn {
  width: 100%;
  margin-top: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #0891b2;
  background: #0891b2;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.drape-tools-box .ws-rebuild-btn:hover { background: #0e7490; }
/* v44.1 — smoothing method radio row */
.drape-tools-box .ws-radio-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 9.5px;
  color: #475569;
}
.drape-tools-box .ws-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.drape-tools-box .ws-radio-row input[type="radio"] {
  width: 11px;
  height: 11px;
  margin: 0;
  accent-color: var(--tk-acc-primary);
}
/* v44.1 — inline help text inside each stage */
.drape-tools-box .ws-desc {
  font-size: 9.5px;
  color: #64748b;
  margin-top: 3px;
  line-height: 1.35;
}
.drape-tools-box .ws-desc b {
  color: #1e293b;
  font-weight: 600;
}
.drape-tools-box .ws-desc-sub {
  font-size: 9px;
  color: #94a3b8;
  margin-top: 3px;
  line-height: 1.3;
  font-style: italic;
}

/* v44.6 — Preset + Auto-tune + Stats UI */
.drape-tools-box .ws-mini-btn {
  font-size: 9.5px;
  padding: 2px 6px;
  border: 1px solid #6366f1;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.drape-tools-box .ws-mini-btn:hover { background: #c7d2fe; }
.drape-tools-box .ws-preset-block { border-color: #6366f1; background: #eef2ff; }
.drape-tools-box .ws-stats-block { border-color: #16a34a; background: #f0fdf4; }
.drape-tools-box .ws-health {
  margin-left: auto;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 8px;
  font-weight: 700;
  color: #fff;
}
.drape-tools-box .ws-health[data-score^="9"],
.drape-tools-box .ws-health[data-score="10"] { background: #16a34a; }
.drape-tools-box .ws-health[data-score^="8"] { background: #65a30d; }
.drape-tools-box .ws-health[data-score^="7"] { background: #ca8a04; }
.drape-tools-box .ws-health[data-score^="6"] { background: #ea580c; }
.drape-tools-box .ws-health { background: #dc2626; }
.drape-tools-box .ws-health[data-score^="9"],
.drape-tools-box .ws-health[data-score="10"] { background: #16a34a; }
.drape-tools-box .ws-health[data-score^="8"] { background: #65a30d; }
.drape-tools-box .ws-health[data-score^="7"] { background: #ca8a04; }
.drape-tools-box .ws-health[data-score^="6"] { background: #ea580c; }
.drape-tools-box .ws-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 6px;
  margin-top: 4px;
  font-size: 9.5px;
}
.drape-tools-box .ws-stat-grid > div {
  display: flex;
  justify-content: space-between;
}
.drape-tools-box .ws-stat-grid .k { color: #64748b; }
.drape-tools-box .ws-stat-grid .v { color: #0f172a; font-weight: 600; }

/* v44.7 — RANSAC plane detection result list */
.drape-tools-box .ws-plane-block { border-color: #8b5cf6; background: #f5f3ff; }

/* ════════════════════════════════════════════════════════════════════════
 * v45.0 — Feedback system: toast, status bar, button loading spinner
 * ════════════════════════════════════════════════════════════════════════ */

/* Toast stack, top-right */
#drape-toast-stack {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.drape-toast {
  pointer-events: auto;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  background: #1e293b;
  color: #fff;
  max-width: 320px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.drape-toast.show { opacity: 1; transform: translateX(0); }
.drape-toast-success { background: #16a34a; }
.drape-toast-error   { background: #dc2626; }
.drape-toast-info    { background: #1e293b; }
.drape-toast-warn    { background: #d97706; }

/* v55.134 — Status bar, prominent TOP-CENTER position (engineer feedback:
 * "ne işlem yapıldığını bilmiyorum, durdur tuşu da olabilir"). Eski bottom
 * 8px + pointer-events:none → kullanıcı fark etmiyordu + Durdur tıklanamıyordu.
 * Yeni: üst-orta, daha büyük, BUTON TIKLANABİLİR (pointer-events: auto),
 * pulse spinner ile dikkat çekici. */
#drape-status-bar {
  position: fixed;
  top: 80px;             /* phase-nav'ın altında */
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 99998;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  color: #fde68a;
  padding: 8px 10px;     /* v55.134c — daha kompakt, button içeride kalsın */
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(245, 158, 11, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  min-width: 360px;
  max-width: 720px;
  box-sizing: border-box;
  overflow: hidden;      /* button bar dışına taşmasın */
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;  /* v58.52.2 FIX — GİZLİYKEN (opacity:0) faz rayı/menü tıklamasını YUTMASIN (invisible overlay bug). .visible'da auto olur → Durdur tıklanır. */
}
#drape-status-bar.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;  /* görünürken (işlem sürerken) Durdur butonu tıklanabilir */
}
#drape-status-bar::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  animation: ds-pulse 1.2s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes ds-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.3); opacity: 0.5; }
}
#drape-status-bar .status-text {
  white-space: nowrap;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#drape-status-bar .status-progress-track {
  flex: 1 1 60px;        /* v55.134c — basis 60px, daha aggresif shrink */
  height: 6px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  overflow: hidden;
  min-width: 50px;
}
#drape-status-bar .status-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #0891b2, var(--tk-acc-primary), #67e8f9);   /* v58.76.2: turuncu eski-primary → cyan ramp (anayasa) */
  width: 0%;
  transition: width 0.15s ease;
  box-shadow: 0 0 6px rgba(6, 182, 212, 0.5);
}
/* v55.134c — Durdur button kompakt, container içinde kalır */
#drape-status-cancel {
  flex: 0 0 auto;
  padding: 4px 10px !important;
  font-size: 11px !important;
  white-space: nowrap;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
}
#drape-status-cancel:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}

/* v55.134 — Idle indicator in the phase-nav header (always visible).
 * Shows ● green when idle, ● amber pulse when busy. Click-through to status bar. */
.ds-idle-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  font-size: 10.5px;
  font-weight: 600;
  color: #86efac;
  letter-spacing: 0.02em;
  cursor: default;
  user-select: none;
  transition: all 0.18s ease;
}
.ds-idle-indicator::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.7);
}
.ds-idle-indicator.busy {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fde68a;
}
.ds-idle-indicator.busy::before {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
  animation: ds-pulse 1.2s ease-in-out infinite;
}

/* Button loading state — applies anywhere */
.btn-loading {
  position: relative;
  cursor: progress !important;
  opacity: 0.85;
}
.btn-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: drape-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes drape-spin {
  to { transform: rotate(360deg); }
}
.drape-tools-box .ws-plane-row {
  font-size: 9px;
  color: #4c1d95;
  font-family: ui-monospace, monospace;
  padding: 1px 0;
}

/* v43.32 — Section A-A rope-kind filter strip */
.drape-section-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-size: 10px;
}
.sf-tog {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 1px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.sf-tog:hover { background: #f1f5f9; }
.sf-tog input { width: 11px; height: 11px; margin: 0; cursor: pointer; accent-color: var(--tk-acc-primary); }
.sf-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ── Section side panel (v34) ──────────────────────────────────────────── */
.drape-area-section {
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
}
.drape-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.drape-section-head h3 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
}
.drape-section-head button {
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 3px;
  cursor: pointer;
  color: #475569;
}
.drape-section-head button:hover { background: #e2e8f0; }
.drape-section-head button.active {
  background: #0891b2;
  color: #fff;
  border-color: #0891b2;
}
.drape-section-svg-wrap {
  flex: 1 1 auto;
  min-height: 160px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.drape-section-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}
.drape-section-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  padding: 20px;
  line-height: 1.5;
}
.drape-section-info {
  margin-top: 6px;
  font-size: 10.5px;
  color: #cbd5e1;                 /* v55.145 — slate-300 (engineer: "yazılar okunmuyor" — dark panel için açık) */
  line-height: 1.45;
  /* v45.36 — cap height so long auto-critical info can't push the SVG
     off-screen; scroll internally if it overflows. */
  max-height: 110px;
  overflow-y: auto;
  flex: 0 0 auto;
  scrollbar-width: thin;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 4px;
  padding: 6px 8px;
}
/* v55.145 — bold etiketler vurgu rengi (eskisi #1e293b dark panelde görünmüyordu) */
.drape-section-info b { color: #fde68a; font-weight: 700; }
/* v55.135 — ISO teknik resim stili (A). Side-panel kesit beyaz kâğıt
 * görünümünde, kalın terrain konturu, ince ızgara, monospace etiketler.
 * Modal kesit zaten ayrı .section-modal-drawing class'ı ile override
 * ediyor — burada side-panel default'u net teknik resme çevirildi. */
.drape-section-svg-wrap {
  background: #fafafa;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}
/* Background rect injected by JS render for clean white "paper" canvas */
.sec-bg { fill: #fafafa; }
.sec-terrain {
  fill: #ede0c8;                /* warm earth */
  stroke: #1e293b;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sec-mesh {
  fill: none;
  stroke: #0f766e;              /* deep teal (mesh = TECCO/MacRO membrane) */
  stroke-width: 1.6;
  stroke-dasharray: 5 2;
  stroke-linecap: round;
}
.sec-bolt        { stroke: #1e293b; stroke-width: 1.2; fill: none; }
.sec-bolt-plate  { fill: #1e293b; }
.sec-bolt-cap    { fill: #ea580c; stroke: #b91c1c; stroke-width: 0.5; }
.sec-bolt.sec-bolt-top     { stroke: #1e3a8a; stroke-width: 1.8; }
.sec-bolt.sec-bolt-bot     { stroke: #991b1b; stroke-width: 1.8; }
.sec-bolt.sec-bolt-side    { stroke: #c2410c; stroke-width: 1.5; }
.sec-bolt.sec-bolt-int     { stroke: #92400e; stroke-width: 1.2; }
.sec-bolt-cap.sec-bolt-cap-top   { fill: #1e3a8a; stroke: #0c1a4d; }
.sec-bolt-cap.sec-bolt-cap-bot   { fill: #991b1b; stroke: #4c0f0f; }
.sec-bolt-cap.sec-bolt-cap-side  { fill: #c2410c; stroke: #7c2d12; }
.sec-bolt-cap.sec-bolt-cap-int   { fill: #facc15; stroke: #854d0e; }
.sec-rope-top    { fill: #1e3a8a; stroke: #fff; stroke-width: 0.5; }
.sec-rope-bot    { fill: #991b1b; stroke: #fff; stroke-width: 0.5; }
.sec-rope-side   { fill: #c2410c; stroke: #fff; stroke-width: 0.5; }
.sec-rope-vert   { fill: #92400e; stroke: #fff; stroke-width: 0.5; }
.sec-rope-horiz  { fill: #92400e; stroke: #fff; stroke-width: 0.5; }
.sec-dim         { stroke: #cbd5e1; stroke-width: 0.3; }
.sec-dim-text, .sec-label-text {
  font-family: 'JetBrains Mono', 'Consolas', ui-monospace, monospace;
  font-size: 8.5px;
  fill: #334155;
  letter-spacing: 0.02em;
}
.sec-label-text { font-size: 7.5px; fill: #1e293b; font-weight: 600; }
.sec-axis-label {
  font-size: 9px; fill: #0f172a;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Consolas', ui-monospace, monospace;
  letter-spacing: 0.04em;
}

/* v55.135 / v55.136 / v57.62 — Title block ribbon (D). SVG'nin altında küçük antet.
 * v55.136: grid → flex-wrap (dar side-panel'de sıkışmaz, alt satıra geçer)
 * v57.62: dark-theme renkleri (önceki light gradient Studio dark UI'de white-on-white
 * okunamıyordu — engineer raporu). Section A-A amber accent ile hizalandı. */
.sec-titleblock {
  margin-top: 6px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.78));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 10px;
  color: #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  line-height: 1.15;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(245, 158, 11, 0.08);
}
.sec-titleblock-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sec-titleblock-key {
  font-size: 7px;
  color: rgba(245, 158, 11, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  line-height: 1;
}
.sec-titleblock-val {
  font-size: 10.5px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.sec-titleblock-nts {
  color: #fecaca;
  background: rgba(185, 28, 28, 0.18);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border: 1px solid rgba(248, 113, 113, 0.55);
  border-radius: 4px;
  white-space: nowrap;
  margin-left: auto;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.sec-watermark {
  fill: #94a3b8;
  fill-opacity: 0.10;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.15em;
  pointer-events: none;
  text-anchor: middle;
}

/* ═════════════════════════════════════════════════════════════
 * v55.136 — DETAILED MODAL B&W TEKNİK ÇİZİM STİLİ
 * Engineer: "renklere gerek yok, teknik çizim ve endüstri standardı".
 * ISO 128 line-weight convention: konturlar kalın siyah, detaylar
 * ince siyah, dim'ler çok ince noktalı. Sadece sınırlı yerlerde
 * vurgu rengi (overall chord = yeşil, açı yayları = nötr gri).
 * Modal'da .section-modal-drawing class'ı default'u override eder.
 * ═════════════════════════════════════════════════════════════ */
.section-modal-drawing .sec-bg { fill: #ffffff; }
.section-modal-drawing .sec-terrain {
  fill: #f5f5f5;             /* açık nötr gri (kayaç fill) */
  stroke: #000000;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.section-modal-drawing .sec-mesh {
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 1.2;
  stroke-dasharray: 6 2 1 2; /* ISO chain-dot (mesh = membrane konvansiyonu) */
}
.section-modal-drawing .sec-bolt,
.section-modal-drawing .sec-bolt.sec-bolt-top,
.section-modal-drawing .sec-bolt.sec-bolt-bot,
.section-modal-drawing .sec-bolt.sec-bolt-side,
.section-modal-drawing .sec-bolt.sec-bolt-int {
  stroke: #000000;
  stroke-width: 1.2;
  fill: none;
}
.section-modal-drawing .sec-bolt-cap,
.section-modal-drawing .sec-bolt-cap.sec-bolt-cap-top,
.section-modal-drawing .sec-bolt-cap.sec-bolt-cap-bot,
.section-modal-drawing .sec-bolt-cap.sec-bolt-cap-side,
.section-modal-drawing .sec-bolt-cap.sec-bolt-cap-int {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 0.8;
}
.section-modal-drawing .sec-dim {
  stroke: #999;
  stroke-width: 0.25;
}
.section-modal-drawing .sec-dim-text,
.section-modal-drawing .sec-label-text {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 8.5px;
  fill: #000;
  font-weight: 400;
}
.section-modal-drawing .sec-axis-label {
  font-size: 10px;
  fill: #000;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  letter-spacing: 0.03em;
}
.section-modal-drawing .sec-angle-arc {
  fill: none;
  stroke: #404040;           /* nötr koyu gri arc */
  stroke-width: 0.6;
}
.section-modal-drawing .sec-angle-text {
  font-size: 9px;
  fill: #000;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* v55.136 — Summary panel (sağ üst köşede; eskiden chord ortasında pill) */
.sec-summary-box {
  fill: #ffffff;
  stroke: #000;
  stroke-width: 0.8;
}
.sec-summary-title {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: #000;
  text-transform: uppercase;
}
.sec-summary-line {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 9.5px;
  fill: #000;
}
.sec-summary-line.bold { font-weight: 700; }
.sec-angle-arc  { fill: none; stroke: #b91c1c; stroke-width: 0.8; }
.sec-angle-text { font-size: 9px; fill: #b91c1c; font-weight: 700; }
/* v55.6 — Overall slope (crest-to-toe composite) — mini panel + modal */
.sec-overall-chord {
  fill: none;
  stroke: var(--uf-emerald);
  stroke-width: 2;
  stroke-dasharray: 6 3;
  opacity: 0.9;
}
.sec-overall-endpoint {
  fill: var(--uf-emerald);
  stroke: #064e3b;
  stroke-width: 0.6;
}
.sec-overall-label-bg {
  fill: var(--uf-emerald);
  stroke: #064e3b;
  stroke-width: 0.5;
  opacity: 0.95;
}
.sec-overall-label {
  font-size: 8px;
  font-weight: 700;
  fill: #ffffff;
}
.sec-overall-sublabel {
  font-size: 7px;
  fill: #047857;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.sec-overall-endpoint-label {
  font-size: 8px;
  font-weight: 700;
  fill: #064e3b;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* v57.93 — Section showAnchors toggle (engineer L99 v57.89.1 follow-up) */
.sec-anchor-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  margin: 6px 0;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 5px;
  cursor: pointer;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(254, 243, 199, 0.88);
  transition: background 0.15s, border-color 0.15s;
}
.sec-anchor-toggle:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.55);
}
.sec-anchor-toggle input[type="checkbox"] {
  accent-color: rgba(245, 158, 11, 0.85);
  margin: 0;
}
.sec-anchor-toggle-icon { font-size: 12px; }
.sec-anchor-toggle-text { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
 * v57.89 — Kritik Kesit Çizim (Figure 7 referans)
 *
 * Engineer L99: temiz mühendislik kesit drawing — bench dimensions
 * (yatay + düşey), kritik face vurgusu (kırmızı), toplam H sağda.
 * TAÇ/TOPUK endpoint markers KALDIRILDI (çözüm sonrası detailed view'da).
 * ═══════════════════════════════════════════════════════════════════ */

/* Kritik face highlight: en steep face kırmızı + kalın */
.sec-crit-line {
  fill: none;
  stroke: #dc2626;
  stroke-width: 2.4;
  opacity: 0.95;
}
.sec-crit-arc {
  fill: none;
  stroke: #dc2626;
  stroke-width: 0.9;
}
.sec-crit-angle {
  font-size: 10px;
  font-weight: 700;
  fill: #dc2626;
  font-family: 'Archivo', system-ui, sans-serif;
}

/* Bench dimension brackets (yatay + düşey 4.48m / 6.90m stili) */
.sec-dim-bench-ext {
  stroke: #475569;
  stroke-width: 0.5;
  fill: none;
}
.sec-dim-bench-line {
  stroke: #1e293b;
  stroke-width: 0.7;
  fill: none;
}
.sec-dim-bench-tick {
  stroke: #1e293b;
  stroke-width: 0.9;
  fill: none;
}
.sec-dim-bench-label {
  font-size: 8.5px;
  font-weight: 600;
  fill: #1e293b;
  font-family: 'Archivo', system-ui, sans-serif;
}

/* v57.93 — Step chord (i=N°, Figure 7'deki ikinci dashed) — β'dan daha steep */
.sec-step-chord-line {
  fill: none;
  stroke: #0f172a;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.7;
}
.sec-step-chord-label-bg {
  fill: #e0e7ff;
  stroke: #4f46e5;
  stroke-width: 0.6;
  opacity: 0.95;
}
.sec-step-chord-label {
  font-size: 9.5px;
  font-weight: 700;
  fill: #312e81;
  font-family: 'Archivo', system-ui, sans-serif;
}

/* Toplam H boyutu (sağ kenar, Figure 7 stil) */
.sec-total-h-line {
  stroke: #0f172a;
  stroke-width: 0.8;
  fill: none;
}
.sec-total-h-label {
  font-size: 10px;
  font-weight: 700;
  fill: #0f172a;
  font-family: 'Archivo', system-ui, sans-serif;
  text-anchor: start;
  dominant-baseline: middle;
}

/* v35: seed bolt pick UI */
.drape-seed-btn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid #0891b2;
  background: #ecfeff;
  color: #155e75;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.drape-seed-btn:hover { background: #cffafe; }
.drape-seed-btn.active {
  background: #0891b2;
  color: #fff;
  border-color: #0891b2;
}
.drape-seed-info {
  font-size: 10px;
  color: #64748b;
  align-self: center;
}
.drape-seed-info.set { color: #166534; font-weight: 600; }

/* v41a — seed-pick removed (design grid is fully automatic from toe corner) */
#seedPickBtn, #seedClearBtn, #seedInfo { display: none !important; }

/* v58.29 FAZ A — Akış denetimi: cross-section (KESİT TARAMA) TEK ana akış oldu.
   Eski "Section A-A" (manuel kesit) redundant — KESİT TARAMA otomatik kesit +
   section-view bunu kapsıyor. State (state.section) save/load'da KORUNUR.
   v58.243 — YAMAÇ REVİVAL: "slopes" seçicisi buradan KALDIRILDI. 🏔️ Yamaç (Yarma
   Şevi) Yönetimi akordeonu (drape.php data-group="slopes", data-phase="section mesh")
   geri geldi; bu kill-kuralı onu HER fazda gizliyordu ("Yol 3" kök nedeni). */
.acc-group[data-group="section"] { display: none !important; }

/* v58.191 yamaç-pasifleştirme bloğu KALDIRILDI (v58.243): yamaç workflow'u geri
   geldiği için buradaki #slopeFab + poly-ctx-item[new-slope/add-slope] + ayraç
   kill-kuralları (display:none !important) YENİ yamaç UI'sini de öldürüyordu —
   taze sekmede FAB, sağ-tık "Yeni Yamaç"/"Yamaca Ekle" item'leri ve akordeon hiç
   görünmüyordu (v58.242 R6 JS düzeltmesi tek başına yetmiyordu: !important,
   .slope-fab'ın hidden-attr + opacity mekanizmasını display:none ile eziyordu).
   Orijinal v58.191 notundaki state/mantık (state.slopes, createSlope) zaten
   korunuyordu; UI giriş noktaları artık KALICI açık. */

/* v58.29.1 — Phase rail TAŞMA fix: 5 istasyon + alt-başlıklar dar şeride
   sığmıyordu ("Kesitler" etiketi görünmüyor, "Çözüm" sub kesik). Alt-başlıkları
   gizle — numara + ana etiket (Mesh/Polygon/Kesitler/Çözüm/Rapor) yeterli ve
   net sığar; detay zaten button title (hover) içinde. */
.ds-phase-rail .phase-label-sub { display: none; }

/* v43 — Planes review panel */
/* v43.21 — compact panel: narrower, tighter padding, smaller fonts.
 * Engineer feedback: "layover menüyü minicik yap, versiyonu kapatıyor".
 */
.drape-area-planes {
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  padding: 4px 5px;
  overflow: hidden;
}
.planes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 3px;
}
.planes-head h3 {
  margin: 0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}
.planes-gen-btn {
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid #16a34a;
  background: #dcfce7;
  color: #14532d;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.planes-gen-btn:disabled { opacity: 0.4; cursor: not-allowed; background: #f1f5f9; border-color: #94a3b8; color: #64748b; }
.planes-gen-btn:hover:not(:disabled) { background: #bbf7d0; }
.planes-list-wrap {
  flex: 1;
  overflow-y: auto;
  font-size: 9px;
  color: #1e293b;
}
.planes-empty {
  color: #94a3b8;
  font-size: 9px;
  padding: 8px 4px;
  text-align: center;
}
.planes-section-h {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  margin: 3px 0 1px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.planes-section-toggles {
  display: flex;
  gap: 6px;
}
.planes-section-toggles input[type="checkbox"] {
  width: 11px;
  height: 11px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--tk-acc-primary);
}
.plane-vis {
  width: 11px;
  height: 11px;
  margin: 0;
  cursor: pointer;
  accent-color: #475569;
}
.plane-item.hidden-plane { opacity: 0.35; }
.plane-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 2px;
  font-size: 9px;
  border-bottom: 1px solid #f1f5f9;
}
.plane-item.disabled { opacity: 0.4; }
.plane-item.redundant { background: #fee2e2; }
.plane-item .plane-id {
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: #ca8a04;
  width: 26px;
  font-size: 9px;
}
.plane-item .plane-info { color: #64748b; flex: 1; font-size: 8.5px; }
.plane-item .plane-toggle {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 2px;
  padding: 0 4px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
}
.plane-item .plane-toggle.on { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.plane-item .plane-toggle.off { background: #fee2e2; border-color: #ef4444; color: #7f1d1d; }

/* Floating overlay below the version badge (which sits at top:6px left:8px). */
.drape-area-planes {
  position: absolute;
  top: 32px;          /* leave room for the v43.X badge above */
  left: 8px;
  z-index: 12;
  width: 170px;       /* compact width */
  max-height: 45vh;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.drape-area-planes:empty,
.drape-area-planes.hidden { display: none; }

/* v37 work mesh inputs */
.drape-mesh-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #cbd5e1;
}
.drape-mesh-input input {
  width: 64px;
  padding: 3px 6px;
  font-size: 11px;
}
.drape-mesh-info {
  font-size: 10px;
  color: #94a3b8;
  margin-left: 4px;
}

/* v37 section break-point drag handles */
.sec-handle {
  fill: #fff;
  stroke: #b91c1c;
  stroke-width: 1.5;
  cursor: ew-resize;
  transition: fill .1s ease;
}
.sec-handle:hover { fill: #fee2e2; }
.sec-handle-crest { stroke: #1d4ed8; }
.sec-handle-toe   { stroke: #b91c1c; }

/* v35 — angle annotation in section */
.sec-angle-arc  { fill: none; stroke: #b91c1c; stroke-width: 1; }
.sec-angle-text { font-size: 9px; fill: #b91c1c; font-weight: 700; }
.sec-angle-leg  { stroke: #b91c1c; stroke-width: 0.5; stroke-dasharray: 2 2; }

/* v35 — seed bolt button + slope-min input */
.drape-seed-btn { background: #1e293b; color: #fff; border: 1px solid #1e293b; }
.drape-seed-btn:hover { background: #334155; }
.drape-seed-btn.active { background: #0891b2; border-color: #0891b2; }
.drape-slope-min { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.drape-slope-min input { width: 55px; padding: 2px 4px; }
.drape-area-viewer  {
  grid-area: viewer;
  position: relative;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 4px;
}

#drapeThreeContainer {
  width: 100%;
  flex: 1;
  min-height: 540px;          /* v33: bigger viewer for full-width layout */
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}

/* ── Stats panel (v30 compact) ───────────────────────────────────────── */
.drape-stats-box {
  font-size: 11px;
  color: #1e293b;
  line-height: 1.25;
}
.drape-stats-box table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.drape-stats-box td {
  padding: 1px 5px;
  border-bottom: 1px solid #f1f5f9;
}
.drape-stats-box td:first-child {
  color: #64748b;
  white-space: nowrap;
}
.drape-stats-box td:last-child {
  text-align: right;
  font-weight: 600;
  color: #0a0e1a;
}

/* ── Manual edge-classification override ─────────────────────────────── */
.drape-classify-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.drape-classify-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.drape-classify-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  font-weight: 600;
}
.drape-classify-mode {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #1e293b;
  cursor: pointer;
}
.drape-classify-mode input {
  margin: 0;
  accent-color: var(--accent, var(--tk-acc-primary));
}
.vertex-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 8px;
}
/* v57.29.41 Designer P0 — Vertex pill dark glass refactor.
 * Eski: #fff white background dark theme'de SIRITAN beyaz blok (engineer 50 poly
 * × 6 edge = 300 pill, 8-saat göz yorgunluğu). Yeni: koyu glass + class-colored
 * border + class-colored text. Aynı bilgi, %80 daha az göz yorgunluğu. */
.vertex-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.65);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.85);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
  user-select: none;
}
.vertex-pill:hover { transform: translateY(-1px); background: rgba(15, 23, 42, 0.85); }
.vertex-pill .vp-num { color: rgba(148, 163, 184, 0.75); font-weight: 500; }
.vertex-pill.top    { border-color: #3b82f6; color: #93c5fd; background: rgba(29, 78, 216, 0.18); }
.vertex-pill.bot    { border-color: #ef4444; color: #fca5a5; background: rgba(185, 28, 28, 0.18); }
.vertex-pill.side   { border-color: #f97316; color: #fdba74; background: rgba(234, 88, 12, 0.18); }
.vertex-pill.none   { border-color: rgba(148, 163, 184, 0.45); color: rgba(148, 163, 184, 0.75); background: rgba(71, 85, 105, 0.18); border-style: dashed; }
.vertex-pill.top .vp-num,
.vertex-pill.bot .vp-num,
.vertex-pill.side .vp-num,
.vertex-pill.none .vp-num { color: rgba(255, 255, 255, 0.55); }

/* v55.55 — Shared edge pill: cyan link border + outer ring. Engineer'a
   "bu komşu polygon ile shared, mesh kontinüite, halat genelde yok" sinyali.
   .shared class .top/.side/.bot/.none ile birlikte kullanılır (renk korunur,
   sadece outer ring eklenir). */
.vertex-pill.shared {
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.75), 0 0 8px rgba(6, 182, 212, 0.35);
  position: relative;
}
.vertex-pill.shared::after {
  content: '🔗';
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.85);
  border-radius: 50%;
  padding: 1px 3px;
  line-height: 1;
}
.vertex-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.vertex-pills:empty::before {
  content: 'polygon kapatılınca vertex listesi burada görünür';
  font-size: 10.5px;
  color: #94a3b8;
  font-style: italic;
}
.drape-classify-hint {
  margin-top: 6px;
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.45;
}
.drape-classify-block.is-auto .vertex-pill { cursor: default; opacity: 0.85; }
.drape-classify-block.is-auto .vertex-pill:hover { transform: none; box-shadow: none; }

/* ── BOM panel (v30 compact + v55.111 simetri) ─────────────────────────────── */
#drapeBomBox {
  font-size: 11px;
  flex: 1;
  overflow: auto;
}
#drapeBomBox table {
  width: 100%;
  border-collapse: collapse;
}
#drapeBomBox th, #drapeBomBox td {
  padding: 2px 5px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 10.5px;
  text-align: left;
}
#drapeBomBox th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9.5px;
}
/* v55.111 — SITE TOTAL satırı: bant değil, sade section divider.
   Engineer: "beyaz bant simetriyi bütünlüğü bozuyor". */
#drapeBomBox tr.bom-summary-divider > td {
  padding: 8px 5px 3px;
  background: transparent !important;
  border-top: 1px solid rgba(251, 191, 36, 0.20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-weight: 400;
}
#drapeBomBox tr.bom-summary-divider .bom-summary-label {
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.65);
}
#drapeBomBox tr.bom-summary-divider .bom-dedup-pill {
  margin-left: 4px;
  padding: 1px 5px;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(134, 239, 172, 0.85);
  background: rgba(134, 239, 172, 0.08);
  border: 1px solid rgba(134, 239, 172, 0.22);
  border-radius: 3px;
}
#drapeBomBox td.qty,
#drapeBomBox th.qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bom-warning {
  margin-top: 6px;
  padding: 6px 8px;
  background: #fef9c3;
  border: 1px solid #facc15;
  border-radius: 4px;
  font-size: 10.5px;
  color: #713f12;
  line-height: 1.4;
}

/* ── Help overlay (top-left of viewer) ───────────────────────────────── */
.drape-help {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
  max-width: 380px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.drape-help .hint {
  color: #94a3b8;
  font-size: 10px;
}
.drape-help.hidden {
  opacity: 0;
}

/* Cursor states */
body.drape-drawing #drapeThreeContainer { cursor: crosshair; }

/* Edge classification colors (used in JS too — keep in sync) */
:root {
  --drape-top-color:    #1d4ed8;  /* blue */
  --drape-bot-color:    #b91c1c;  /* red */
  --drape-side-color:   #ea580c;  /* orange */
  --drape-vertex:       #fbbf24;  /* yellow */
  --drape-mesh-fill:    rgba(34, 197, 94, 0.28);
  --drape-mesh-edge:    #16a34a;
}

/* ── Per-zone anchor specs section (v33 compact) ────────────────────── */
.drape-zones-section {
  padding: 8px 10px 12px;
  background: var(--bg-soft, #f5f7fa);
  border-top: 1px solid #e2e8f0;
}
.drape-zones-title {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
  border-bottom: 2px solid var(--accent, var(--tk-acc-primary));
  padding-bottom: 2px;
  display: inline-block;
}
.drape-zones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.drape-zone-card {
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 5px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drape-zone-card h4 {
  margin: 0 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0a0e1a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drape-zone-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.drape-zone-row label {
  display: flex;
  flex-direction: column;
  font-size: 9px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 1 1 auto;
  min-width: 52px;
}
.drape-zone-row select,
.drape-zone-row input[type="number"] {
  padding: 2px 4px;
  font-size: 10.5px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  margin-top: 1px;
  background: #fff;
  color: #0a0e1a;
}
.drape-zone-row .drape-radio {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #1e293b;
  cursor: pointer;
}
.drape-zone-row .drape-radio input {
  margin: 0;
  accent-color: var(--accent, var(--tk-acc-primary));
}
.drape-zone-note {
  font-size: 10.5px;
  color: #64748b;
  font-style: italic;
  padding-top: 2px;
  border-top: 1px dashed #e2e8f0;
}
.drape-toggle-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #1e293b;
  font-weight: 500;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.drape-toggle-inline input {
  margin: 0;
  accent-color: var(--accent, var(--tk-acc-primary));
}
/* Internal anchor block — disabled state when not enabled */
.drape-internal-card.disabled {
  opacity: 0.55;
  pointer-events: none;
}
.drape-internal-card.disabled .drape-toggle-inline {
  opacity: 1;
  pointer-events: auto;
}
/* Hide internal block in PMP mode entirely (drape-mode-amp class set on body when AMP) */
body:not(.drape-mode-amp) .drape-internal-card {
  display: none;
}

/* ── Wire ropes section (v33 compact) ───────────────────────────────── */
.drape-ropes-section {
  border-top: 1px solid #e2e8f0;
}
.drape-ropes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.drape-rope-card {
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 5px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.drape-rope-card .drape-toggle-inline {
  flex: 1 1 auto;
}
.drape-rope-card label {
  display: flex;
  flex-direction: column;
  font-size: 9px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.drape-rope-card select,
.drape-rope-card input[type="number"] {
  padding: 2px 4px;
  font-size: 10.5px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  margin-top: 2px;
  background: #fff;
  color: #0a0e1a;
  width: 80px;
}

/* Drawing button active state */
#drawBtn.active {
  background: var(--accent, var(--tk-acc-primary)) !important;
  border-color: var(--accent, var(--tk-acc-primary)) !important;
  color: #fff !important;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .drape-zones-grid { grid-template-columns: repeat(2, 1fr); }
  .drape-ropes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .drape-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 480px auto auto;
    grid-template-areas:
      "viewer"
      "stats"
      "bom";
  }
  .drape-zones-grid { grid-template-columns: 1fr; }
  .drape-ropes-grid { grid-template-columns: 1fr; }
}

/* ── Rope-lift control (v30 — pulls ropes off terrain) ───────────────── */
.drape-ropes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.drape-ropelift-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
}
.drape-ropelift-control input[type="number"] {
  width: 64px;
  padding: 3px 5px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ── Update button (v23 dirty indicator) ──────────────────────────────── */
.drape-update-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.drape-update-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;        /* idle: muted grey */
  display: inline-block;
  flex-shrink: 0;
  transition: background .15s ease, box-shadow .15s ease;
}
.drape-update-btn.dirty {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}
.drape-update-btn.dirty .drape-update-dot {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
  animation: drape-update-pulse 1.4s ease-in-out infinite;
}
@keyframes drape-update-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ════════════════════════════════════════════════════════════════════════
   v45.3 Command palette (Ctrl+K)
   Centered modal overlay, dark theme, keyboard-first UX.
   Inspired by VS Code / Linear command palettes.
   ════════════════════════════════════════════════════════════════════════ */
#drape-cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: drape-cmd-fade-in 0.12s ease-out;
}
#drape-cmd-palette.hidden {
  display: none;
}
@keyframes drape-cmd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cmd-palette-box {
  width: min(620px, 92vw);
  max-height: 70vh;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55),
              0 6px 18px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: drape-cmd-slide-in 0.15s ease-out;
}
@keyframes drape-cmd-slide-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

#cmdInput {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid #1e293b;
  outline: none;
  padding: 16px 18px;
  color: #f8fafc;
  font: 500 15px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}
#cmdInput::placeholder {
  color: #64748b;
  font-weight: 400;
}

#cmdList {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #334155 #0f172a;
}
#cmdList::-webkit-scrollbar { width: 8px; }
#cmdList::-webkit-scrollbar-track { background: #0f172a; }
#cmdList::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

.cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px;
  cursor: pointer;
  color: #cbd5e1;
  font: 500 13.5px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background 0.08s ease, color 0.08s ease;
  border-left: 2px solid transparent;
}
.cmd-item:hover {
  background: rgba(51, 65, 85, 0.35);
}
.cmd-item.selected {
  background: rgba(59, 130, 246, 0.18);
  color: #f8fafc;
  border-left-color: #3b82f6;
}
.cmd-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}
.cmd-keys {
  flex: 0 0 auto;
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: #94a3b8;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 3px 7px;
  letter-spacing: 0.06em;
  min-width: 18px;
  text-align: center;
}
.cmd-item.selected .cmd-keys {
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.85);
  border-color: #475569;
}
.cmd-keys:empty {
  display: none;
}

.cmd-hint {
  padding: 10px 18px;
  background: #0b1220;
  border-top: 1px solid #1e293b;
  color: #64748b;
  font: 500 11px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Empty state — when filter matches nothing */
#cmdList:empty::before {
  content: "Eşleşen komut yok / No matching command";
  display: block;
  padding: 24px 18px;
  color: #64748b;
  font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   v45.4 — Banner extended behind topnav + ribbon (continuous hero image)
   Engineer feedback: "o banner daki dağ görüntüsünü tuşların altına kadar
   uzatabilir misin"
   ════════════════════════════════════════════════════════════════════════ */
body {
  position: relative;
}
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 480px;
  /* v45.5 — much lighter gradient so the banner image breathes behind
     the controls. The legibility is preserved by individual button/field
     pills having their own translucent dark fill. */
  background:
    linear-gradient(180deg,
      rgba(15, 23, 42, 0.0)  0%,
      rgba(15, 23, 42, 0.08) 40%,
      rgba(15, 23, 42, 0.35) 85%,
      rgba(15, 23, 42, 0.88) 100%),
    var(--banner-img) center top / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}
/* v46.9 — Hide the 150 px hero banner on drape.php so the top menus
 * sit at the very top of the page (engineer: "üst menülerin sayfanın
 * en tepesine çekelim"). */
.studio-hero {
  display: none;
}
/* Topnav as a thin glass strip — STICKY at top so it always stays visible. */
header.topbar {
  background: rgba(15, 23, 42, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(234, 88, 12, 0.35);
}
header.topbar .topnav a {
  color: #e5e7eb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
header.topbar .topnav a:hover { color: #ffffff; }
header.topbar .topnav a:has(b) {
  background: rgba(234, 88, 12, 0.28);
}

/* v45.5 — Ribbon row itself is now FULLY transparent; the banner image
   shows through unobstructed. Only the individual control pills carry
   tinted glass for legibility. Engineer feedback: "tuşların etrafını
   transparent yap". */
.drape-ribbon {
  /* v46.9 — Sticky just below the topnav (~38 px) so the engineer always
   * has Hesapla / V Oluştur / Workshop / Görünüm at hand while scrolling.
   * Opaque background needed once it sticks — no more banner behind it. */
  background: rgba(15, 23, 42, 0.92);
  color: #e5e7eb;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(234, 88, 12, 0.45);
  position: sticky;
  top: 38px;
  z-index: 99;
}

/* v45.7 — Content area must sit ABOVE body::before banner overlay,
   otherwise the top edge of Mesh Workshop / Viewer / Section panels is
   covered by the 480 px banner gradient. Engineer feedback: "mesh
   workshop banner altında kalıyor". */
.drape-shell {
  position: relative;
  z-index: 1;
  background: var(--bg-light, #eef2f7);    /* opaque so banner doesn't bleed in */
}

/* ════════════════════════════════════════════════════════════════════════
   v45.4 — Ribbon layout refinement
   Engineer feedback: "yerleşimi sevmedim, gruplar daha iyi olabilir,
   gelişigüzel duruyor, aradaki beyaz bant iyi görünmüyor, sağda boşluk".

   Fix:
   - Groups flex-grow so they fill horizontal space evenly (no right gap)
   - Subtle column dividers (rgba), no white band
   - Inner group cards have a tinted glass background for visual containment
   - Slightly heavier title row + compact controls row
   ════════════════════════════════════════════════════════════════════════ */
.drape-ribbon {
  display: flex;
  flex-wrap: nowrap;     /* override earlier wrap so they share width */
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.ribbon-group {
  flex: 1 1 0;           /* equal-share growth — fills full width */
  min-width: 0;
  padding: 6px 12px 8px;
  border-right: 1px solid rgba(148, 163, 184, 0.18);     /* no white band */
  background: transparent;             /* v45.5 — banner shows through */
  position: relative;
}
.ribbon-group:hover {
  background: rgba(15, 23, 42, 0.22);  /* gentle dark on hover for affordance */
}
.ribbon-group-primary {
  flex: 0 0 auto;        /* compute group sized to its button */
  background: transparent;
  border-right-color: rgba(234, 88, 12, 0.45);
}
.ribbon-group-primary:hover { background: rgba(234, 88, 12, 0.18); }
.ribbon-title {
  font: 600 9.5px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #fdba74;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);   /* legible on banner */
}
.ribbon-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(253, 186, 116, 0.4), transparent);
}
.ribbon-controls {
  gap: 6px;
}

/* Stack the wrapping in a more controlled way: groups that have many
   controls (geometry / mesh) take more relative width via flex-grow weight. */
.ribbon-group[data-group="system"]   { flex-grow: 1.4; }
.ribbon-group[data-group="geometry"] { flex-grow: 2.2; }
.ribbon-group[data-group="mesh"]     { flex-grow: 1.3; }
.ribbon-group[data-group="project"]  { flex-grow: 0.8; }

/* On narrow screens the ribbon CAN wrap — preserve the look */
@media (max-width: 1400px) {
  .drape-ribbon { flex-wrap: wrap; }
  .ribbon-group { flex-basis: 33%; }
}

/* ════════════════════════════════════════════════════════════════════════
   v45.4 — Unified typography system
   Engineer feedback: "Visibility de yazı karakter ve formatı boyutu
   sayfanın geneline uymuyor, sayfa genelinde bir metod geliştirelim".

   Establishes 4 type tokens used across all panels:
     --type-label-xs : 10px micro-labels (badges, hints)
     --type-label-sm : 11px field labels, control text
     --type-body     : 12.5px paragraph body, mid-density tables
     --type-h-section: 13px section headings inside panels
     --type-h-panel  : 15px panel titles
   ════════════════════════════════════════════════════════════════════════ */
.drape-shell {
  --type-label-xs:  10px;
  --type-label-sm:  11px;
  --type-body:      12.5px;
  --type-h-section: 13px;
  --type-h-panel:   15px;
  --type-mono:      ui-monospace, "SF Mono", Menlo, monospace;
  --type-ui:        system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-strong:    #0f172a;
  --text-body:      #334155;
  --text-muted:     #64748b;
}
.drape-shell .drape-panel h2,
.drape-shell .drape-panel h3 {
  font: 600 var(--type-h-panel) / 1.25 var(--type-ui);
  color: var(--text-strong);
  letter-spacing: 0.005em;
  margin: 0 0 8px;
}
.drape-shell .drape-panel h4 {
  font: 600 var(--type-h-section) / 1.3 var(--type-ui);
  color: var(--text-body);
  letter-spacing: 0.01em;
  margin: 12px 0 6px;
}
.drape-shell .drape-panel label,
.drape-shell .drape-panel .field-label {
  font: 500 var(--type-label-sm) / 1.4 var(--type-ui);
  color: var(--text-body);
}
.drape-shell .drape-panel .field-hint,
.drape-shell .drape-panel small,
.drape-shell .drape-panel .hint {
  font: 400 var(--type-label-xs) / 1.4 var(--type-ui);
  color: var(--text-muted);
}
.drape-shell .drape-panel p,
.drape-shell .drape-panel li,
.drape-shell .drape-panel td,
.drape-shell .drape-panel th {
  font: 400 var(--type-body) / 1.45 var(--type-ui);
  color: var(--text-body);
}
.drape-shell .drape-panel input[type="number"],
.drape-shell .drape-panel input[type="text"],
.drape-shell .drape-panel select {
  font: 500 var(--type-label-sm) / 1.3 var(--type-mono);
}
.drape-shell .drape-panel button {
  font: 500 var(--type-label-sm) / 1.3 var(--type-ui);
}

/* Visibility / Workshop ws-stage blocks — bring into the unified scale.
   Engineer feedback specifically called out the Visibility card font
   not matching the rest of the page. */
.drape-shell .ws-stage {
  font: 500 var(--type-label-sm) / 1.4 var(--type-ui);
  color: var(--text-body);
}
.drape-shell .ws-stage .ws-tog,
.drape-shell .ws-stage .ws-tog b {
  font: 600 var(--type-h-section) / 1.3 var(--type-ui);
  color: var(--text-strong);
  letter-spacing: 0.005em;
}
.drape-shell .ws-stage .ws-desc {
  font: 400 var(--type-label-xs) / 1.45 var(--type-ui);
  color: var(--text-muted);
  margin: 2px 0 6px;
}
.drape-shell .ws-stage .ws-radio-row label,
.drape-shell .ws-stage .ws-params label {
  font: 500 var(--type-label-sm) / 1.4 var(--type-ui);
  color: var(--text-body);
}
.drape-shell .ws-stage input[type="number"],
.drape-shell .ws-stage input[type="text"] {
  width: 64px;
  font: 500 var(--type-label-sm) / 1.3 var(--type-mono);
  padding: 3px 6px;
}

/* ════════════════════════════════════════════════════════════════════════
   v45.4 — Section A-A: vertical scroll inside the section card so a tall
   profile is fully reachable without the whole page scrolling.
   Engineer feedback: "tip kesit penceresinde scroll olmadığı için detayı
   göremiyoruz".
   ════════════════════════════════════════════════════════════════════════ */
.drape-shell .drape-area-section,
.drape-shell #sectionPanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.drape-shell #sectionPanel .drape-section-svg-wrap {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
  flex: 1 1 auto;
  min-height: 160px;
  /* v45.36 — drop the strict max-height cap; section row is now 42vh and
     info has its own scroll container, so svg-wrap can grow to fill. */
}
.drape-shell #sectionPanel .drape-section-svg-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.drape-shell #sectionPanel .drape-section-svg-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.drape-shell #sectionPanel .drape-section-svg-wrap::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}

/* v48.0 — OBJ / DTM quality warning banner.
 * Sits below the topbar; sticky so engineer can scroll the viewer
 * but the warnings stay reachable. Hidden by default (validateObj
 * un-hides + populates on OBJ load).
 */
.drape-warning-bar {
  position: sticky;
  top: 38px;
  z-index: 95;
  background: rgba(15, 23, 42, 0.97);
  border-bottom: 1px solid #334155;
  padding: 8px 14px;
  color: #e2e8f0;
  font: 12px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  max-height: 40vh;
  overflow-y: auto;
}
.drape-warning-bar[hidden] { display: none; }
/* v54.26 — Minimized mode: only show mini summary, hide head + rows */
.drape-warning-bar.dw-minimized .dw-head { display: none; }
.drape-warning-bar.dw-minimized .dw-rows { display: none; }
.drape-warning-bar.dw-minimized .dw-mini { display: block !important; }
.drape-warning-bar.dw-minimized {
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.65);
  border-radius: 5px;
  transition: padding 0.3s, background 0.3s;
}
.drape-warning-bar .dw-mini {
  display: none;
  font-size: 11px;
  color: #fcd34d;
  letter-spacing: 0.3px;
}
.drape-warning-bar .dw-mini .dw-expand-link {
  color: var(--ds-amber);
  text-decoration: underline;
  margin-left: 4px;
  cursor: pointer;
}
.drape-warning-bar .dw-mini .dw-expand-link:hover { color: #fde047; }
.drape-warning-bar .dw-minimize {
  background: transparent;
  border: none;
  color: rgba(148, 163, 184, 0.75);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
  margin-right: 4px;
}
.drape-warning-bar .dw-minimize:hover { color: #cbd5e1; }
.drape-warning-bar .dw-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px dashed #475569;
  margin-bottom: 6px;
}
.drape-warning-bar .dw-head-label {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.drape-warning-bar .dw-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.drape-warning-bar .dw-close:hover { color: #f87171; }
.drape-warning-bar .dw-rows { display: flex; flex-direction: column; gap: 6px; }
.drape-warning-bar .dw-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  border-left: 3px solid #64748b;
  background: rgba(30, 41, 59, 0.6);
}
.drape-warning-bar .dw-error { border-left-color: #ef4444; background: rgba(127, 29, 29, 0.35); }
.drape-warning-bar .dw-warn  { border-left-color: #f59e0b; background: rgba(120, 53, 15, 0.35); }
.drape-warning-bar .dw-info  { border-left-color: #38bdf8; background: rgba(30, 58, 138, 0.35); }
.drape-warning-bar .dw-icon { font-size: 17px; text-align: center; line-height: 1.4; }
.drape-warning-bar .dw-title { font-weight: 600; color: #f1f5f9; margin-bottom: 2px; }
.drape-warning-bar .dw-msg { color: #cbd5e1; font-size: 11.5px; }
.drape-warning-bar .dw-fix {
  margin-top: 4px;
  color: #fde68a;
  font-size: 11.5px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}
.drape-warning-bar .dw-fix b { color: #fef3c7; }

/* v49.0 — Şev Temizlik ribbon group (vegetation paint + RANSAC + noise).
 * Sits between Mesh and Compute. Active paint mode highlights the toggle
 * button so engineer always sees current state. */
.drape-ribbon .ribbon-group[data-group="slope-clean"] .ribbon-title {
  color: #86efac;   /* light green to signal vegetation focus */
}

/* v50.1 — Compute group compressed to icon-only secondaries so Şev Temizlik
 * gets the breathing room a multi-tool workflow needs. The primary
 * Hesapla button keeps full label. */
.ribbon-group-compact .drape-update-btn-secondary.btn-icon {
  min-width: 32px;
  padding: 4px 8px;
  font-size: 15px;
  font-weight: 700;
}
.ribbon-group-wide {
  flex: 1 1 auto;
  min-width: 0;
}
.ribbon-group-wide .ribbon-controls {
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}
.rg-subgroup {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.rg-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 2px;
}
.btn-icon {
  min-width: 32px;
  padding: 4px 8px;
  font-size: 14px;
  text-align: center;
}
.ribbon-field .rf-lbl {
  font-size: 11px;
  margin-right: 4px;
  color: #94a3b8;
}
#paintModeBtn { transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
#paintModeBtn.active {
  background: #16a34a;
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.45);
}
#paintRadiusInput { width: 4.2em; text-align: right; }
#paintApplyBtn { background: linear-gradient(180deg, #fde047, #facc15); color: #422006; font-weight: 700; }
#paintApplyBtn:hover { background: linear-gradient(180deg, #facc15, #eab308); }
#paintUndoBtn:hover { background: #f3f4f6; }
#paintClearBtn:hover { background: #f3f4f6; }
/* FAZ-4 (v58.569) — #floatingNoiseBtn stilleri kaldırıldı (buton silindi). */

/* v50.0 — Lasso button (alongside paint brush). Yellow when active. */
#lassoBtn { transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
#lassoBtn.active {
  background: #fde047;
  color: #422006;
  box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.55);
}
/* Audit metadata export button */
#metaExportBtn { background: linear-gradient(180deg, #fef3c7, #fde68a); color: #422006; font-weight: 600; }
#metaExportBtn:hover { background: linear-gradient(180deg, #fde68a, #fcd34d); }

/* Layer toggle group — inline checkboxes inside the slope-clean ribbon. */
.layer-toggle-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 2px 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0 2px;
  font-size: 11px;
  color: #cbd5e1;
}
.layer-toggle-group label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  user-select: none;
}
.layer-toggle-group input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* BOM interpolated badge — orange chip on rows where an anchor/rope
 * falls on low-confidence terrain. */
.bom-interp-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #fed7aa;
  color: #9a3412;
  border: 1px solid #ea580c;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: help;
}

/* ════════════════════════════════════════════════════════════════════════
 * v51.0 — Engineering Shell Layout
 * Three-column CAD/GIS-style workspace. Replaces v45.2 ribbon + drape-shell
 * grid. Old .drape-ribbon / .drape-shell rules above are mostly inert
 * because the new HTML no longer emits those containers; selectors that
 * still match individual controls (like .drape-mode-pill, .ribbon-field)
 * are reused inside the new shell.
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg:           #0b1220;
  --color-panel:        #111c2e;
  --color-panel-2:      #182338;
  --color-panel-border: #2a3a55;
  /* v54.3 — Contrast bump on dark theme. Pre-v54.3 muted=#94a3b8 dim=#64748b
   * had poor readability on #0b1220 navy bg, especially small status text
   * and field suffixes. Slate scale lifted by ~2 stops for legibility. */
  --color-text:         #f1f5f9;          /* slate-100 (was slate-200) */
  --color-muted:        #cbd5e1;          /* slate-300 (was slate-400) */
  --color-dim:          #94a3b8;          /* slate-400 (was slate-500) */
  --color-orange:       var(--tk-acc-primary);  /* v58.67: tek primary CYAN (eski turuncu primary kalktı) */
  --color-orange-hover: #0891b2;                /* v58.67: cyan-600 (hover koyu ton) */
  --accent:             var(--tk-acc-primary);  /* v58.67: var(--accent,#ea580c) fallback'leri artık cyan */
  --color-blue:         #1d4ed8;
  --color-green:        #16a34a;
  --color-yellow:       #facc15;
  --color-danger:       #b91c1c;
  --color-accent-veg:   #86efac;
  --left-panel-width:   360px;            /* v55.17a — 300 → 360 (engineer feedback: yan yana gorelim) */
  --right-panel-width:  340px;
  --top-nav-height:     48px;
  --bottom-status-height: 28px;
  --acc-header-height:  32px;
  --btn-height:         28px;
  --input-height:       26px;
  --font-stack:         'Archivo', "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;
}

/* Reset some base body styles for the engineering shell */
body.drape-app-body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-stack);
  font-size: 12.5px;
  line-height: 1.4;
  overflow: hidden;        /* shell handles all scrolling */
  height: 100vh;
}
body.drape-app-body .studio-hero { display: none; }
body.drape-app-body header.topbar { display: none; }   /* old topbar suppressed */
body.drape-app-body .drape-ribbon { display: none; }   /* old ribbon suppressed */
body.drape-app-body .drape-shell  { display: none; }   /* old grid suppressed */
body.drape-app-body .drape-zones-section,
body.drape-app-body .drape-ropes-section {
  display: none;                                       /* legacy zone cards relocated into accordion */
}

.app-shell {
  display: grid;
  /* v58.369 (#A1) — 6 satır: top-nav · 3×auto (faz-rayı + uyarı şeridi + bağlam şeridi,
     bazıları display:none olabilir → boş auto track = 0px) · 1fr (workspace) · alt-durum.
     workspace+footer AÇIK satıra sabitlenir (aşağıda) → kaç üst-şerit görünür olursa olsun
     1fr daima workspace'e gider (eski bug: bağlam şeridi 1fr'i çalıp viewport'u eziyordu). */
  grid-template-rows: var(--top-nav-height) auto auto auto 1fr var(--bottom-status-height);
  height: 100vh;
  width: 100vw;
  background: var(--color-bg);
}
/* v58.369 (#A1) — workspace = 5. satır (1fr), footer = 6. satır; üst-şeritlerin sayısından bağımsız sabit. */
.app-shell > .workspace { grid-row: 5; }
.app-shell > .bottom-status { grid-row: 6; }

/* ─── Top Navigation ─── */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-panel-border);
  height: var(--top-nav-height);
}
.top-nav .topnav {
  display: flex;
  gap: 4px;
  height: 100%;
  align-items: stretch;
}
.top-nav .topnav a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.top-nav .topnav a:hover { color: var(--color-text); background: rgba(255,255,255,0.03); }
.top-nav .topnav a.active,
.top-nav .topnav a:has(b) {
  color: #fde68a;
  border-bottom-color: var(--color-orange);
}
.top-nav-actions { display: flex; gap: 6px; }
.top-nav-actions .topnav-btn {
  background: transparent;
  border: 1px solid var(--color-panel-border);
  color: var(--color-muted);
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.top-nav-actions .topnav-btn:hover { color: var(--color-text); border-color: var(--color-orange); }

/* ─── OBJ Warning Banner ─── */
body.drape-app-body .drape-warning-bar {
  position: static;
  top: auto;
  max-height: 28vh;
  border-top: 0;
  border-bottom: 1px solid var(--color-panel-border);
}

/* ─── Workspace (three columns) ─── */
.workspace {
  display: grid;
  grid-template-columns: var(--left-panel-width) 1fr var(--right-panel-width);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Panels */
.left-panel, .right-panel {
  position: relative;
  background: var(--color-panel);
  border-right: 1px solid var(--color-panel-border);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-panel-border) transparent;
}
.right-panel { border-right: 0; border-left: 1px solid var(--color-panel-border); }
.left-panel::-webkit-scrollbar,
.right-panel::-webkit-scrollbar { width: 8px; }
.left-panel::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb { background: var(--color-panel-border); border-radius: 4px; }
.left-panel.collapsed { width: 18px; min-width: 18px; }
.left-panel.collapsed > section { display: none; }
.right-panel.collapsed { width: 18px; min-width: 18px; }
.right-panel.collapsed > section { display: none; }

.panel-collapse-handle {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 24px;
  margin-left: auto;
  background: var(--color-panel-2);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 11px;
  border-bottom: 1px solid var(--color-panel-border);
  user-select: none;
}
.panel-collapse-handle-right { margin-left: 0; margin-right: auto; }
.panel-collapse-handle:hover { color: var(--color-orange); }

/* ─── Accordion Groups ─── */
.acc-group {
  border-bottom: 1px solid var(--color-panel-border);
}
.acc-group .acc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: var(--acc-header-height);
  background: var(--color-panel-2);
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-panel-border);
}
.acc-group .acc-header:hover { background: #1d2942; }
.acc-group .acc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  background: var(--color-panel-border);
  color: var(--color-muted);
  border-radius: 50%;
}
.acc-group .acc-title { flex: 1; }
.acc-group .acc-arrow {
  font-size: 10px;
  color: var(--color-muted);
  transition: transform 0.18s;
}
.acc-group.acc-collapsed .acc-arrow { transform: rotate(-90deg); }
.acc-group .acc-body {
  display: flex;
  flex-direction: column;
  gap: 5px;           /* v55.108 compact: 8 → 5 */
  padding: 7px 8px;   /* v55.108 compact: 10 → 7/8 */
  background: var(--color-panel);
  overflow: hidden;
  max-height: 4000px;
  transition: max-height 0.22s ease, padding 0.18s ease;
}
.acc-group.acc-collapsed .acc-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.acc-group.acc-veg .acc-header { color: var(--color-accent-veg); }
.acc-group.acc-calc .acc-header { color: #fde68a; }
.acc-group .acc-subhead {
  margin: 4px 0 2px;  /* v55.108 compact: 8/4 → 4/2 */
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}

/* ─── Form rows / fields ─── */
.field-row {
  display: flex;
  align-items: center;
  gap: 4px;           /* v55.108 compact: 6 → 4 */
  font-size: 11.5px;
  color: var(--color-muted);
}
.field-row .field-label {
  flex: 0 0 auto;
  min-width: 76px;
  color: var(--color-muted);
}
.field-row select,
.field-row input[type="number"],
.field-row input[type="text"] {
  flex: 1;
  min-width: 0;
  background: var(--color-panel-2);
  color: var(--color-text);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12px;
  height: var(--input-height);
  box-sizing: border-box;
  font-family: inherit;
}
.field-row select:focus,
.field-row input:focus { border-color: var(--color-orange); outline: none; }
.field-row input[type="file"] {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--color-muted);
  padding: 2px 0;
}
.field-row .field-suffix {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-dim);
}
.field-pair { display: flex; gap: 8px; }
.field-pair .field-row { flex: 1; }
.field-pair .field-row .field-label { min-width: auto; }

.row-block { display: flex; flex-direction: column; gap: 3px; } /* v55.108 compact: 4→3 */
.row-block .row-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}

/* PMP/AMP pill group reused */
.drape-mode-group {
  display: inline-flex;
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-panel-2);
}
.drape-mode-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;    /* v55.108 compact: 5/12 → 4/10 */
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  user-select: none;
  border-right: 1px solid var(--color-panel-border);
}
.drape-mode-pill:last-child { border-right: 0; }
.drape-mode-pill input { display: none; }
.drape-mode-pill:has(input:checked) {
  background: var(--color-orange);
  color: #fff8e7;
}

/* ─── Info Cards ─── */
.info-card {
  background: var(--color-panel-2);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  padding: 4px 7px;   /* v55.108 compact: 6/8 → 4/7 */
  display: flex;
  flex-direction: column;
  gap: 2px;           /* v55.108 compact: 3 → 2 */
}
.info-card-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.info-card-key {
  color: var(--color-muted);
  flex: 0 0 auto;
}
.info-card-val {
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* ─── Buttons ─── */
.btn-sec, .btn-primary, .btn-primary-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--btn-height);
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--color-panel-border);
  background: var(--color-panel-2);
  color: var(--color-text);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.btn-sec:hover {
  background: #1d2942;
  border-color: var(--color-orange);
  color: #fde68a;
}
.btn-sec.btn-tool.active {
  background: rgba(22, 163, 74, 0.25);
  border-color: var(--color-green);
  color: #bbf7d0;
}
.btn-sec.btn-danger:hover {
  background: rgba(185, 28, 28, 0.18);
  border-color: var(--color-danger);
  color: #fecaca;
}
.btn-sec[disabled],
.btn-primary[disabled],
.btn-primary-yellow[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-sec[disabled]:hover,
.btn-primary[disabled]:hover,
.btn-primary-yellow[disabled]:hover {
  background: var(--color-panel-2);
  border-color: var(--color-panel-border);
  color: var(--color-text);
}
.btn-primary {
  background: linear-gradient(180deg, #22d3ee, var(--tk-acc-primary));  /* v58.67: primary CTA cyan */
  border-color: var(--color-orange);
  color: #042f33;
  font-weight: 700;
  height: 34px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.btn-primary:hover { background: linear-gradient(180deg, var(--tk-acc-primary), var(--color-orange-hover)); }
.btn-primary .drape-update-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fde68a;
  box-shadow: 0 0 6px #fde68a;
}
.btn-primary-yellow {
  background: linear-gradient(180deg, #fde047, #facc15);
  color: #422006;
  border-color: #eab308;
  font-weight: 700;
  height: 32px;
}
.btn-primary-yellow:hover { background: linear-gradient(180deg, #facc15, #eab308); }
.btn-full { width: 100%; }
.btn-icon { padding: 0 8px; min-width: 32px; }

/* ═══════════════════════════════════════════════════════════════════════════
   v58.53.0 — KANONİK BUTON SİSTEMİ (.ds-btn) — TEK TIER KAYNAĞI
   Amaç: tüm fazlardaki dağınık buton aileleri kademeli olarak buraya hizalanır
   → her noktada/menüde/tab'da tutarlı, profesyonel görünüm.
   Tier:  --primary (amber CTA) · --secondary (varsayılan) · --icon (kare) ·
          --danger · --ghost   |  Boyut: --sm  |  Durum: hover/active/focus/disabled
   Token: body.drape-app-body --ds-btn-*
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ds-btn-h);
  padding: 0 var(--ds-btn-pad-x);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-btn-r);
  background: var(--ds-surface-2);
  color: var(--ds-text);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-btn-fs);
  font-weight: var(--ds-btn-fw);
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: var(--ds-btn-trans);
}
.ds-btn:hover:not(:disabled):not([disabled]) {
  background: var(--ds-surface-1);
  border-color: var(--tk-acc-primary);  /* v58.68: etkileşim aksanı cyan (amber değil) */
  color: #fff;
}
.ds-btn:active:not(:disabled):not([disabled]) { transform: translateY(0.5px); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-btn-focus); }
.ds-btn:disabled, .ds-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* — Primary CTA (amber) — */
.ds-btn--primary {
  min-height: var(--ds-btn-h-lg);
  font-size: var(--ds-btn-fs-lg);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #22d3ee, var(--ds-orange));  /* v58.67: kanonik CTA cyan */
  border-color: var(--ds-orange);
  color: #042f33;
}
.ds-btn--primary:hover:not(:disabled):not([disabled]) {
  background: linear-gradient(180deg, #67e8f9, #22d3ee);
  border-color: #67e8f9;
  color: #fff;
}
/* — Icon (kare, etiketsiz) — */
.ds-btn--icon { padding: 0; width: var(--ds-btn-h); min-width: var(--ds-btn-h); gap: 0; }
.ds-btn--icon.ds-btn--sm { width: var(--ds-btn-h-sm); min-width: var(--ds-btn-h-sm); }
/* — Boyut / varyant — */
.ds-btn--sm { min-height: var(--ds-btn-h-sm); padding: 0 var(--ds-btn-pad-x-sm); font-size: 10px; }
.ds-btn--ghost { background: transparent; border-color: transparent; }
.ds-btn--ghost:hover:not(:disabled):not([disabled]) { background: var(--ds-surface-hover); border-color: var(--ds-border); }
.ds-btn--danger:hover:not(:disabled):not([disabled]) {
  background: rgba(244,63,94,0.16);
  border-color: var(--ds-rose);
  color: #fecaca;
}
/* — Aktif / basılı durum (toggle) — */
.ds-btn.is-active, .ds-btn[aria-pressed="true"], .ds-btn[data-active="true"] {
  background: rgba(6, 182, 212, 0.16);   /* v58.68: aktif/basılı toggle = cyan (DRAW vb.) */
  border-color: var(--tk-acc-primary);
  color: var(--tk-acc-primary);
}

/* Jenerik tier (.btn-sec/.btn-primary) → kanonik sisteme hizalı focus/active polish
   (boyut/renk korunur, sadece pro-dokunuş: klavye focus halkası + basılı geri-bildirim). */
.btn-sec:focus-visible, .btn-primary:focus-visible, .btn-primary-yellow:focus-visible,
.btn-icon:focus-visible { outline: none; box-shadow: var(--ds-btn-focus); }
.btn-sec:active:not([disabled]), .btn-primary:active:not([disabled]),
.btn-primary-yellow:active:not([disabled]) { transform: translateY(0.5px); }

/* v55.153 — Polygon group locked status indicator (LEGACY — kept for compat,
   replaced by .poly-finalize-card .pfc-foot in v55.158). */
.poly-group-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  margin: 6px 0;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.16), rgba(220, 38, 38, 0.08));
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fca5a5;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.poly-group-status .pgs-icon { font-size: 13px; }
.poly-group-status .pgs-text { flex: 1; }

/* ─── v55.158 — POST-PROCESS / SET BİTİR card redesign ────────────────────
   Engineer feedback: "bu menüye daha güzel bir yerleşim ve tasarım düzenlemesi
   yapalım". Önceki tasarım: 3 ayrı blok (status banner + h4 + 3 buton row +
   orphan Shotcrete) — ad-hoc, hiyerarşi yok, button rolleri eşit görünüyordu.
   Yeni: tek panel, AutoCAD ribbon endüstri patterni.
   ───────────────────────────────────────────────────────────────────────── */

.poly-finalize-card {
  margin: 12px 0 6px 0;
  background:
    linear-gradient(180deg,
      rgba(30, 41, 59, 0.62) 0%,
      rgba(15, 23, 42, 0.58) 100%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 3px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
}
/* subtle top accent — engineering "panel bar" feel */
.poly-finalize-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(6, 182, 212, 0.55) 25%,
    rgba(168, 85, 247, 0.55) 75%,
    transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}

/* ── HEADER ── title + state chip row ─────────────────────────────────── */
.poly-finalize-card .pfc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 6px;
  background:
    linear-gradient(180deg,
      rgba(51, 65, 85, 0.42),
      rgba(30, 41, 59, 0.18));
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.poly-finalize-card .pfc-icon {
  font-size: 13px;
  opacity: 0.78;
  filter: drop-shadow(0 0 3px rgba(6, 182, 212, 0.35));
}
.poly-finalize-card .pfc-title {
  flex: 1;
  margin: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.92);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.poly-finalize-card .pfc-state-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.poly-finalize-card .pfc-state-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;           /* v55.159 — auto width for "G:3" format */
  font-size: 9.5px;
  font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(51, 65, 85, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 3px;
  color: rgba(148, 163, 184, 0.55);
  letter-spacing: 0;
  transition: all 0.18s ease;
  cursor: default;
  white-space: nowrap;
}
.poly-finalize-card .pfc-state-chip[data-state="group"].on {
  background: rgba(34, 197, 94, 0.32);
  border-color: rgba(34, 197, 94, 0.78);
  color: #bbf7d0;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.42);
}
.poly-finalize-card .pfc-state-chip[data-state="lock"].on {
  background: rgba(239, 68, 68, 0.32);
  border-color: rgba(239, 68, 68, 0.78);
  color: #fca5a5;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.42);
}
.poly-finalize-card .pfc-state-chip[data-state="union"].on {
  background: rgba(168, 85, 247, 0.32);
  border-color: rgba(168, 85, 247, 0.78);
  color: #e9d5ff;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.42);
}

/* ── BODY ── 3 subgroup rows ──────────────────────────────────────────── */
.poly-finalize-card .pfc-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 9px 9px;
}
.poly-finalize-card .pfc-subgroup {
  display: flex;
  align-items: stretch;
  gap: 4px;
  position: relative;
  padding-left: 42px;
  min-height: 28px;
}
.poly-finalize-card .pfc-sub-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 7px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(148, 163, 184, 0.58);
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  user-select: none;
}

/* ── BUTTON BASE ── shared across all 4 buttons in the card ───────────── */
.poly-finalize-card .pfc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  background: linear-gradient(180deg,
    rgba(51, 65, 85, 0.55),
    rgba(30, 41, 59, 0.65));
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 4px;
  color: rgba(226, 232, 240, 0.92);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.poly-finalize-card .pfc-btn:hover:not(:disabled) {
  background: linear-gradient(180deg,
    rgba(71, 85, 105, 0.70),
    rgba(51, 65, 85, 0.80));
  border-color: rgba(148, 163, 184, 0.52);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}
.poly-finalize-card .pfc-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.40);
}
.poly-finalize-card .pfc-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.poly-finalize-card .pfc-btn-ico {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}
.poly-finalize-card .pfc-btn-text {
  font-weight: 600;
}
.poly-finalize-card .pfc-btn-hint {
  margin-left: auto;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  opacity: 0.55;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
}

/* ── BUTTON VARIANTS ──────────────────────────────────────────────────── */

/* Toggle ON — Group (green) */
.poly-finalize-card .pfc-btn--toggle.on[data-toggle="group"] {
  background: linear-gradient(180deg,
    rgba(34, 197, 94, 0.34),
    rgba(22, 163, 74, 0.24));
  border-color: rgba(34, 197, 94, 0.68);
  color: #dcfce7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 8px rgba(34, 197, 94, 0.28);
}
.poly-finalize-card .pfc-btn--toggle.on[data-toggle="group"]:hover:not(:disabled) {
  background: linear-gradient(180deg,
    rgba(34, 197, 94, 0.50),
    rgba(22, 163, 74, 0.38));
  border-color: rgba(34, 197, 94, 0.92);
}

/* Toggle ON — Lock (red) */
.poly-finalize-card .pfc-btn--toggle.on[data-toggle="lock"] {
  background: linear-gradient(180deg,
    rgba(239, 68, 68, 0.34),
    rgba(220, 38, 38, 0.24));
  border-color: rgba(239, 68, 68, 0.68);
  color: #fee2e2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 8px rgba(239, 68, 68, 0.28);
}
.poly-finalize-card .pfc-btn--toggle.on[data-toggle="lock"]:hover:not(:disabled) {
  background: linear-gradient(180deg,
    rgba(239, 68, 68, 0.50),
    rgba(220, 38, 38, 0.38));
  border-color: rgba(239, 68, 68, 0.92);
}

/* Destructive — Union (purple) */
.poly-finalize-card .pfc-btn--danger {
  background: linear-gradient(180deg,
    rgba(168, 85, 247, 0.22),
    rgba(126, 34, 206, 0.16));
  border-color: rgba(168, 85, 247, 0.42);
  color: #f3e8ff;
}
.poly-finalize-card .pfc-btn--danger:hover:not(:disabled) {
  background: linear-gradient(180deg,
    rgba(168, 85, 247, 0.42),
    rgba(126, 34, 206, 0.34));
  border-color: rgba(168, 85, 247, 0.78);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.38);
}

/* Analyze — Shotcrete (cyan) */
.poly-finalize-card .pfc-btn--analyze {
  background: linear-gradient(180deg,
    rgba(6, 182, 212, 0.20),
    rgba(8, 145, 178, 0.14));
  border-color: rgba(6, 182, 212, 0.42);
  color: #cffafe;
}
.poly-finalize-card .pfc-btn--analyze:hover:not(:disabled) {
  background: linear-gradient(180deg,
    rgba(6, 182, 212, 0.40),
    rgba(8, 145, 178, 0.32));
  border-color: rgba(6, 182, 212, 0.78);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.32);
}

/* ── FOOTER ── status bar (LED + text) ────────────────────────────────── */
.poly-finalize-card .pfc-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 6px;
  background:
    linear-gradient(180deg,
      rgba(15, 23, 42, 0.50),
      rgba(2, 6, 23, 0.60));
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 10.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(148, 163, 184, 0.85);
  letter-spacing: 0.01em;
  min-height: 22px;
}
.poly-finalize-card .pfc-foot-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.55);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.40);
  transition: all 0.25s ease;
}
.poly-finalize-card .pfc-foot-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status states — drive via data-status on .pfc-foot */
.poly-finalize-card .pfc-foot[data-status="ready"] .pfc-foot-led {
  background: rgba(148, 163, 184, 0.55);
}
.poly-finalize-card .pfc-foot[data-status="grouped"] .pfc-foot-led {
  background: #22c55e;
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 0 6px rgba(34, 197, 94, 0.75);
}
.poly-finalize-card .pfc-foot[data-status="grouped"] .pfc-foot-text {
  color: #bbf7d0;
}
.poly-finalize-card .pfc-foot[data-status="locked"] .pfc-foot-led {
  background: #ef4444;
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 0 6px rgba(239, 68, 68, 0.75);
  animation: pfcLedPulse 1.7s ease-in-out infinite;
}
.poly-finalize-card .pfc-foot[data-status="locked"] .pfc-foot-text {
  color: #fca5a5;
  font-weight: 600;
}
.poly-finalize-card .pfc-foot[data-status="unioned"] .pfc-foot-led {
  background: var(--uf-purple);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 0 6px rgba(168, 85, 247, 0.75);
}
.poly-finalize-card .pfc-foot[data-status="unioned"] .pfc-foot-text {
  color: #e9d5ff;
}
/* v55.159 — Warn (açık polygon var, group dışı) + drawing (sadece açık çizim) */
.poly-finalize-card .pfc-foot[data-status="warn"] .pfc-foot-led {
  background: var(--ds-amber);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 0 6px rgba(251, 191, 36, 0.75);
}
.poly-finalize-card .pfc-foot[data-status="warn"] .pfc-foot-text {
  color: #fde68a;
  font-weight: 600;
}
.poly-finalize-card .pfc-foot[data-status="drawing"] .pfc-foot-led {
  background: var(--ds-amber);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 0 5px rgba(251, 191, 36, 0.60);
  animation: pfcLedPulse 1.8s ease-in-out infinite;
}
.poly-finalize-card .pfc-foot[data-status="drawing"] .pfc-foot-text {
  color: #fde68a;
}

@keyframes pfcLedPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

.btn-row { display: flex; gap: 4px; align-items: center; }  /* v55.108 compact: 6→4 */
.btn-row .btn-sec,
.btn-row .btn-primary { flex: 1; }
.btn-row-2 > * { flex: 1 1 0; min-width: 0; }
.btn-row-3 > * { flex: 1 1 0; min-width: 0; }
.btn-row-4 > * { flex: 1 1 0; min-width: 0; }

/* v55.132 — Project filebar (current file chip + dirty indicator). */
.project-filebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  margin: 0 0 6px 0;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--color-text);
  min-height: 26px;
}
.project-file-icon {
  font-size: 13px;
  opacity: 0.85;
  flex: 0 0 auto;
}
.project-file-chip {
  flex: 1 1 auto;
  font-weight: 500;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fde68a;
  letter-spacing: 0.01em;
}
.project-file-chip.dirty {
  color: var(--ds-amber);
  font-weight: 600;
}
.project-file-chip.dirty::before {
  /* dot already inline-prepended via JS — keep selector for future styling */
}
.btn-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* ─── Vegetation layer toggle (vertical in left panel) ─── */
.layer-toggle-group.layer-toggle-vertical {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  background: var(--color-panel-2);
  border-left: 0;
  border-right: 0;
  font-size: 11px;
  margin: 0;
}
.layer-toggle-group.layer-toggle-vertical label {
  color: var(--color-text);
  border: 0;
  padding: 0;
  gap: 6px;
}

/* Active paint button glow */
#paintModeBtn { transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
#paintModeBtn.active {
  background: var(--color-green);
  color: #f0fdf4;
  border-color: #15803d;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.4);
}
#lassoBtn.active {
  background: var(--color-yellow);
  color: #422006;
  border-color: #ca8a04;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5);
}

/* ─── Anchor zone details (compact) ─── */
.anchor-zone {
  background: var(--color-panel-2);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  padding: 0;
  margin: 0;
}
.anchor-zone > summary {
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  list-style: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.anchor-zone > summary::-webkit-details-marker { display: none; }
.anchor-zone > summary::before {
  content: "▸";
  margin-right: 8px;
  color: var(--color-muted);
  transition: transform 0.18s;
  display: inline-block;
}
.anchor-zone[open] > summary::before { transform: rotate(90deg); }
.anchor-zone-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--color-panel-border);
  background: var(--color-panel);
}
.anchor-row {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--color-muted);
}
.drape-radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.drape-toggle-inline { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* ─── Rope rows (compact + simetri grid) v55.110 ─── */
/* Engineer: "halatlarda kutucuklar kaymış simetri zayıf". Eski flex layout'ta
 * checkbox global "input { width: 100% }" kuralından strech alıyordu →
 * büyük turuncu kareler. Çözüm: grid 3-kolon (toggle | Dia | Sp/empty) +
 * checkbox sabit boyut. Top/Bot/Side'da 3. slot boş kalır → tüm satırların
 * Dia selectleri aynı x-koordinatında hizalı, simetri korunur. */
.rope-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 92px 96px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--color-panel-2);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--color-muted);
  margin-bottom: 3px;
}
.rope-row .rope-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
.rope-row .rope-toggle > input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  accent-color: var(--color-orange, var(--tk-acc-primary));
  cursor: pointer;
}
.rope-row .rope-toggle span {
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rope-row .rope-inline {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11px;
  margin: 0;
}
.rope-row .rope-inline select,
.rope-row .rope-inline input {
  background: var(--color-panel);
  color: var(--color-text);
  border: 1px solid var(--color-panel-border);
  border-radius: 3px;
  font-size: 11px;
  padding: 1px 4px;
  height: 22px;
  width: 54px !important;       /* compact uniform */
  flex: 0 0 auto;
}
.rope-row .rope-inline span {
  color: var(--color-dim, #94a3b8);
  font-size: 10.5px;
}

/* ─── Edge classification (moved to left panel) ─── */
.drape-classify-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-panel-2);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  padding: 8px;
  margin: 0;
}
.drape-classify-block .drape-classify-header {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--color-muted);
}
.drape-classify-block .drape-classify-mode { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.drape-classify-block .drape-classify-hint {
  font-size: 10.5px;
  color: var(--color-dim);
  margin-top: 4px;
}
.vertex-pills { display: flex; flex-wrap: wrap; gap: 3px; }

/* ─── Viewport ─── */
.viewport-shell {
  position: relative;
  overflow: hidden;
  background: #0a0f1a;
}
.viewport-shell #drapeThreeContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
/* v51.1 — FIX: legacy .drape-help set top:8, so combined with new bottom:14
 * the element stretched to fill the viewport vertically. Force top:auto and
 * cap max-height so the help stays a compact bottom pill.
 *
 * Also make it dismissible: pointer-events auto on the inner close button,
 * none on the body so canvas drag isn't blocked. Auto-hides when polygon
 * is computed; user can close manually any time. */
.viewport-shell .drape-help {
  position: absolute;
  left: 50%;
  top: auto;
  right: auto;
  bottom: 74px;          /* v58.52.6 — sağ-alt köşedeki risk heatmap lejantının (bottom:14px, ~50px) ÜSTÜNE kaldır; aksi halde geniş merkez hint pill'i lejantla üst üste biniyordu (engineer) */
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  font-size: 11.5px;
  padding: 8px 36px 8px 14px;     /* extra right padding for close × */
  border: 1px solid var(--color-panel-border);
  border-radius: 8px;
  pointer-events: none;
  max-width: 520px;
  max-height: 140px;
  width: max-content;
  overflow: hidden;
  text-align: center;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.viewport-shell .drape-help.hidden { display: none; }
.viewport-shell .drape-help .help-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;       /* clickable even though parent is pointer-events:none */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.viewport-shell .drape-help .help-close:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}
.viewport-shell .drape-help .hint {
  color: #94a3b8;
  font-size: 10.5px;
  display: block;
  margin-top: 2px;
}

/* Floating planes panel */
.viewport-shell .drape-area-planes {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid var(--color-panel-border);
  border-radius: 6px;
  color: var(--color-text);
  padding: 0;
  font-size: 11.5px;
  z-index: 5;
}
.viewport-shell .drape-area-planes.hidden { display: none; }
.viewport-shell .drape-area-planes .planes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-panel-border);
}
.viewport-shell .drape-area-planes .planes-head h3 {
  margin: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.viewport-shell .drape-area-planes .planes-gen-btn {
  background: var(--color-orange);
  color: #fff8e7;
  border: 0;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.viewport-shell .drape-area-planes .planes-gen-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.viewport-shell .drape-area-planes .planes-list-wrap { padding: 6px 10px; }
.viewport-shell .drape-area-planes .planes-empty {
  color: var(--color-muted);
  font-size: 11px;
  padding: 4px 0;
}

/* Floating viewport toolbar */
.viewport-shell .vp-toolbar {
  position: absolute;
  display: flex;
  gap: 4px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid var(--color-panel-border);
  border-radius: 6px;
  padding: 4px;
  z-index: 6;
}
.viewport-shell .vp-toolbar-tr { top: 12px; right: 12px; }
.viewport-shell .vp-toolbar .vp-btn {
  background: transparent;
  border: 0;
  color: var(--color-text);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.viewport-shell .vp-toolbar .vp-btn:hover { background: rgba(234, 88, 12, 0.18); color: #fde68a; }

.viewport-shell .vp-coord {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  color: var(--color-text);
  padding: 4px 8px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  z-index: 6;
}

/* ─── Right panel content overrides ─── */
.right-panel #statsBox,
.right-panel #drapeBomBox,
.right-panel #drapeToolsBox {
  background: var(--color-panel-2);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  padding: 8px;
  font-size: 11.5px;
  color: var(--color-text);
  max-height: 320px;
  overflow-y: auto;
}
.right-panel .bom-warning {
  font-size: 10.5px;
  color: var(--ds-amber);
  padding: 6px 8px;
  border-left: 2px solid #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  margin: 4px 0;
}

/* Section A-A panel inside right panel */
.right-panel .drape-section-svg-wrap {
  background: var(--color-panel-2);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  padding: 6px;
  min-height: 140px;
  max-height: 36vh;
  overflow: auto;
}
.right-panel .drape-section-empty {
  color: var(--color-muted);
  font-size: 11px;
  padding: 16px 8px;
  text-align: center;
  line-height: 1.55;
}
.right-panel .drape-section-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10.5px;
  color: var(--color-muted);
}
.right-panel .drape-section-filter .sf-tog { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.right-panel .drape-section-filter .sf-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.right-panel .drape-section-info {
  font-size: 11px;
  color: var(--color-text);
  background: var(--color-panel-2);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  padding: 6px 8px;
}

.contextual-help {
  font-size: 10.5px;
  color: var(--color-muted);
  background: rgba(56, 189, 248, 0.06);
  border-left: 2px solid #38bdf8;
  padding: 6px 8px;
  border-radius: 3px;
}

.inspector-empty {
  font-size: 11px;
  color: var(--color-muted);
  text-align: center;
  padding: 18px 6px;
  font-style: italic;
}

/* ─── Bottom Status Bar ─── */
.bottom-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--color-panel);
  border-top: 1px solid var(--color-panel-border);
  font-size: 11px;
  color: var(--color-muted);
  height: var(--bottom-status-height);
  overflow: hidden;
  white-space: nowrap;
}
.bottom-status .status-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.bottom-status .status-label { color: var(--color-dim); font-weight: 600; }
.bottom-status .status-value { color: var(--color-text); font-variant-numeric: tabular-nums; }
.bottom-status .status-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--color-panel-border);
}
.bottom-status .flex-grow { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); }
.bottom-status .flex-right { margin-left: auto; }

/* ─── Compact OBJ warning bar overrides for new shell ─── */
.app-shell .drape-warning-bar {
  position: relative;
  top: 0;
  z-index: 5;
}

/* ─── Suppress conflicting old styles that might leak through ─── */
body.drape-app-body .topbar,
body.drape-app-body .drape-ribbon,
body.drape-app-body .drape-shell,
body.drape-app-body .drape-zones-section,
body.drape-app-body .drape-ropes-section,
body.drape-app-body .drape-warning-bar.legacy {
  display: none !important;
}

/* Override the legacy section sticky positioning when it appears inside our shell. */
.app-shell .drape-warning-bar { position: static; }

/* Hide legacy maximize button from old viewer skin */
.app-shell .maximize-btn { display: none; }

/* ─── Small responsive tweaks ─── */
@media (max-width: 1280px) {
  :root {
    --left-panel-width: 320px;          /* v55.17a — 270 → 320 (10% genişleme orantılı) */
    --right-panel-width: 310px;
  }
}
@media (max-width: 1100px) {
  .workspace { grid-template-columns: var(--left-panel-width) 1fr; }
  .right-panel { display: none; }
}
@media (max-width: 900px) {
  :root { --left-panel-width: 240px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v53 — Multi-polygon list panel (Area Definition accordion)
 * ════════════════════════════════════════════════════════════════════════ */
.polygon-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-panel-2);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  padding: 6px;
  font-size: 13px;          /* v54.30 — was 11px (engineer: "isimleri büyük olsun") */
  margin: 0 0 6px;
}
.polygon-list-empty {
  color: var(--color-muted);
  font-style: italic;
  padding: 6px;
  text-align: center;
}
.polygon-row {
  /* v55.134d — Status text alt satıra düşürüldü (engineer: "iki nokta
   * gibi" görünen status text ana satırı kalabalıklaştırıyordu). Şimdi:
   * üst satır = marker + label + badges; alt satır = küçük gri status.
   * Del button (×) absolute positioning ile sağ-üst köşeye sabit. */
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 5px;
  padding: 4px 30px 3px 8px;  /* sağda del button için yer bırak */
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  min-height: 26px;
  overflow: hidden;
  position: relative;
}
.polygon-row > * { flex: 0 0 auto; }
.polygon-row > .polygon-status {
  flex: 1 0 100%;             /* tam genişlik → yeni satıra düşer */
  margin-left: 22px;          /* marker hizasına indent */
  margin-top: -1px;
}
.polygon-row > .polygon-del {
  position: absolute;
  top: 4px;
  right: 6px;
  margin-left: 0;
}
/* v58.52.3 — Rename (✎) KOMPAKT ikon: panelin geniş `button{width:100%}`
   mirasını ez → auto-genişlik. Aksi halde flex-basis:auto o 259px'i alıp
   shrink:0 ile küçülmüyor, buton marker+label yanına SIĞMAYIP kendi tam-genişlik
   satırına wrap oluyordu → her poligon 2-3 satır = uzun scroll. Artık aynı
   satırda kalır (engineer L99: "yeni isim tuşu satırı kaplıyor, scroll uzuyor"). */
.polygon-row > .polygon-rename {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 1px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.polygon-row > .polygon-rename:hover {
  color: var(--color-orange);
  background: rgba(234, 88, 12, 0.12);
  border-color: rgba(234, 88, 12, 0.35);
}
.polygon-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.polygon-row.active {
  background: rgba(234, 88, 12, 0.12);
  border-left-color: var(--color-orange);
}
.polygon-row .polygon-marker {
  color: var(--color-muted);
  text-align: center;
  font-size: 13px;
}
.polygon-row.active .polygon-marker {
  color: var(--color-orange);
}
/* v55.159 — Marker color = closed-state. Engineer: "polygon closed mı değil
   mi nasıl anlaşılıyor?" Şekil = active/inactive (●/○/☑); renk = state.
   Tek element 2 bilgi: yeşil=closed, sarı=drawing (pulse), gri=empty. */
.polygon-row .polygon-marker.marker-closed {
  color: #22c55e;
  filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.45));
}
.polygon-row .polygon-marker.marker-drawing {
  color: var(--ds-amber);
  filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.45));
  animation: polyMarkerDrawingPulse 1.5s ease-in-out infinite;
}
.polygon-row .polygon-marker.marker-empty {
  color: rgba(148, 163, 184, 0.42);
}
/* Active state hala turuncu kalır (active = higher priority bilgi),
   ama drop-shadow ile state hint korunur. */
.polygon-row.active .polygon-marker.marker-closed {
  color: var(--color-orange);
  filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.65));
}
.polygon-row.active .polygon-marker.marker-drawing {
  color: var(--color-orange);
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.65));
}
@keyframes polyMarkerDrawingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.polygon-row .polygon-label {
  font-weight: 700;
  color: var(--color-text);
  font-family: ui-monospace, monospace;
  font-size: 14px;          /* v54.30 — was inherited 11px, now prominent */
  letter-spacing: 0.3px;
}
.polygon-row .polygon-status {
  /* v55.134d — küçük punto, gri, alt satır */
  color: var(--color-muted);
  font-size: 9.5px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
  opacity: 0.75;
  letter-spacing: 0.02em;
}
.polygon-row.active .polygon-status {
  color: var(--color-muted);  /* aktif satırda da gri kalsın, kalabalık olmasın */
  opacity: 0.85;
}
/* v55.18 — Polygon delete × küçük, low-contrast, kazara basmayı önler.
   Engineer feedback: "x küçük olsun yanlışlıkla basmayalım". 18×18 px,
   soluk renk, hover'da net (intent confirm via visual change). */
.polygon-row .polygon-del {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(148, 163, 184, 0.40);   /* dim, muted */
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.12s, color 0.12s, background 0.12s, border-color 0.12s;
}
.polygon-row:hover .polygon-del {
  opacity: 0.85;
}
.polygon-row .polygon-del:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.55);
  opacity: 1;
}

#addPolygonBtn {
  margin-bottom: 6px;
  border-style: dashed;
  color: var(--color-muted);
}
#addPolygonBtn:hover {
  border-style: solid;
  color: #fde68a;
}

/* ════════════════════════════════════════════════════════════════════════
 * v54.3 — Contrast hot-spots on dark theme
 * Legacy light-theme styles used dark slate/charcoal colors (#1e293b,
 * #475569, #3730a3, …). On the v51.0+ dark navy panels these became
 * unreadable. Override the most visible spots; full audit per-component
 * deferred (notes file).
 * ════════════════════════════════════════════════════════════════════════ */
body.drape-app-body {
  /* Right panel BOM / Stats / Tools / Section-info renderer html chunks
     contain <b>, <code>, and class spans with hard-coded darks. Cascade
     bumps anything inside these boxes to text-light unless an explicit
     accent color is set. */
}
body.drape-app-body #statsBox,
body.drape-app-body #drapeBomBox,
body.drape-app-body #drapeToolsBox,
body.drape-app-body .drape-section-info,
body.drape-app-body .drape-stats-box,
body.drape-app-body .drape-tools-box {
  color: var(--color-text);
}
body.drape-app-body #statsBox b,
body.drape-app-body #drapeBomBox b,
body.drape-app-body #drapeToolsBox b,
body.drape-app-body .drape-section-info b,
body.drape-app-body .drape-stats-box b,
body.drape-app-body .drape-tools-box b {
  color: #fde68a;       /* amber-200 accent on dark */
}
body.drape-app-body #statsBox table,
body.drape-app-body #drapeBomBox table,
body.drape-app-body #drapeToolsBox table {
  color: var(--color-text);
}
body.drape-app-body #statsBox table th,
body.drape-app-body #drapeBomBox table th {
  /* v55.112 — Engineer: "beyaz renk bütünlüğü bozuyor, yama gibi".
     Light theme'den miras background:#f8fafc yamalı görünüyordu. Koyu tema
     uyumlu: çok hafif white-on-dark + amber-soft alt çizgi. */
  background: rgba(255, 255, 255, 0.02) !important;
  color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(251, 191, 36, 0.18) !important;
  font-weight: 600;
  letter-spacing: 0.10em;
}
body.drape-app-body #statsBox table td,
body.drape-app-body #drapeBomBox table td,
body.drape-app-body #drapeToolsBox table td {
  color: var(--color-text);
  /* v55.112 — Eski #f1f5f9 light gray border yama hissini güçlendiriyordu */
  border-color: rgba(255, 255, 255, 0.05) !important;
}
body.drape-app-body .drape-section-info span,
body.drape-app-body .drape-section-info code {
  color: var(--color-text);
}
body.drape-app-body .drape-section-empty,
body.drape-app-body .drape-section-empty b {
  color: var(--color-muted);
}
body.drape-app-body .drape-section-empty b { color: #fde68a; }
body.drape-app-body .drape-classify-hint,
body.drape-app-body .drape-classify-hint b {
  color: var(--color-muted);
}
body.drape-app-body .drape-classify-hint b { color: var(--color-text); }
/* Section A-A toggle labels */
body.drape-app-body .drape-section-filter .sf-tog { color: var(--color-text); }
/* "Show on mesh" + radio labels in Edge Classification */
body.drape-app-body .drape-classify-block,
body.drape-app-body .drape-classify-mode,
body.drape-app-body .drape-classify-mode span {
  color: var(--color-text);
}
/* Anchor zone summary headings */
body.drape-app-body .anchor-zone > summary { color: var(--color-text); }
body.drape-app-body .anchor-zone > summary b { color: #fde68a; }
/* Rope row labels */
body.drape-app-body .rope-row .rope-toggle span,
body.drape-app-body .rope-row .rope-inline { color: var(--color-text); }
/* drape-zone-card legacy compatibility (anchor specs cards) */
body.drape-app-body .drape-zone-card,
body.drape-app-body .drape-zone-card label,
body.drape-app-body .drape-zone-card h4 {
  color: var(--color-text);
}
body.drape-app-body .drape-zone-card h4 b { color: #fde68a; }
body.drape-app-body .drape-zone-note,
body.drape-app-body .drape-zone-note b {
  color: var(--color-muted);
}
body.drape-app-body .drape-zone-note b { color: #fde68a; }
/* Seed bolt status info */
body.drape-app-body .drape-seed-info { color: var(--color-muted); }
body.drape-app-body .drape-seed-info.set { color: #86efac; }   /* green-300 */
/* Planes panel (floating top-left of viewport) */
body.drape-app-body .planes-list-wrap,
body.drape-app-body .planes-list-wrap b,
body.drape-app-body .plane-card,
body.drape-app-body .plane-card .pc-label,
body.drape-app-body .plane-card .pc-num {
  color: var(--color-text);
}
body.drape-app-body .planes-empty { color: var(--color-muted); }
/* Mesh detail card values */
body.drape-app-body #workMeshInfo,
body.drape-app-body #rawTriInfo,
body.drape-app-body #polyAreaInfo,
body.drape-app-body #workTriInfo,
body.drape-app-body #bvhStatusInfo {
  color: var(--color-text);
}
/* Vertex pills (edge classification chips) — the .vp-num inside pills is
   slate-500 by default; on dark panel it's fine because the pill is
   classification-coloured. Keep as is. */

/* ════════════════════════════════════════════════════════════════════════
 * v54.8 — View Layers eye-icon toggle group
 * Replaces the legacy checkbox column with a 2×2 grid of pressable buttons.
 * aria-pressed drives visual state (eye icon + line-through + dim).
 * ════════════════════════════════════════════════════════════════════════ */
body.drape-app-body .view-layer-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 4px;
}
body.drape-app-body .view-layer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
  min-height: 26px;
}
body.drape-app-body .view-layer-btn:hover {
  border-color: #f59e0b;
  background: rgba(255,255,255,0.06);
}
body.drape-app-body .view-layer-btn[aria-pressed="false"] {
  color: var(--color-dim);
  opacity: 0.55;
}
body.drape-app-body .view-layer-btn[aria-pressed="false"] .vl-label {
  text-decoration: line-through;
}
body.drape-app-body .view-layer-btn .vl-icon {
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
}
body.drape-app-body .view-layer-btn .vl-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
 * v54.8 — Contrast audit, remaining hot-spots
 * Catches floating help text + info-card key/val pairs + any leftover
 * dark-on-dark labels not covered by v54.3.
 * ════════════════════════════════════════════════════════════════════════ */
body.drape-app-body .drape-help,
body.drape-app-body .drape-help b {
  color: var(--color-text);
}
body.drape-app-body .drape-help b { color: #fde68a; }
body.drape-app-body .info-card-key { color: var(--color-muted); }
body.drape-app-body .info-card-val { color: var(--color-text); }
body.drape-app-body .info-card-val#prodInfo { color: #fde68a; }
body.drape-app-body .contextual-help,
body.drape-app-body .contextual-help b {
  color: var(--color-muted);
}
body.drape-app-body .contextual-help b { color: #fde68a; }
body.drape-app-body .bom-warning { color: var(--color-muted); }
body.drape-app-body .row-label { color: var(--color-muted); }
body.drape-app-body .field-label { color: var(--color-text); }
body.drape-app-body .field-suffix { color: var(--color-muted); }
body.drape-app-body .acc-subhead { color: var(--color-muted); }
body.drape-app-body .acc-title { color: var(--color-text); }
body.drape-app-body .acc-num { color: var(--color-muted); }
body.drape-app-body .polygon-list-empty { color: var(--color-muted); }
body.drape-app-body .inspector-empty { color: var(--color-muted); }
body.drape-app-body .planes-empty { color: var(--color-muted); }
body.drape-app-body .vp-coord { color: var(--color-text); }
/* Top status bar */
body.drape-app-body .bottom-status,
body.drape-app-body .status-item,
body.drape-app-body .status-label,
body.drape-app-body .status-value {
  color: var(--color-text);
}
body.drape-app-body .status-label { color: var(--color-muted); }

/* ════════════════════════════════════════════════════════════════════════
 * v54.9 — Section endpoint manipulation
 * Triangle end-handles in the SVG profile, plus a bearing-override input
 * row above the SVG. Hover/drag affordances match the existing
 * .sec-handle-crest/.sec-handle-toe palette.
 * ════════════════════════════════════════════════════════════════════════ */
body.drape-app-body .drape-section-bearing {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  font-size: 11px;
}
body.drape-app-body .drape-section-bearing .bearing-label {
  color: var(--color-muted);
  font-weight: 500;
  flex: 0 0 auto;
}
body.drape-app-body .drape-section-bearing input[type="number"] {
  /* v54.10d — give the number a real reading width; the reset button next
     to it was hogging space because btn-icon class forces a min-width. */
  flex: 1 1 0;
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  color: var(--color-text);
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  min-width: 90px;
  width: auto;
  font-variant-numeric: tabular-nums;
}
body.drape-app-body .drape-section-bearing input[type="number"]:focus {
  outline: none;
  border-color: #f59e0b;
}
body.drape-app-body .drape-section-bearing .bearing-suffix {
  color: var(--color-muted);
  flex: 0 0 auto;
}
body.drape-app-body .drape-section-bearing #sectionBearingResetBtn,
body.drape-app-body .drape-section-bearing #sectionBearingResetBtn.btn-icon {
  /* Override the global .btn-icon min-width that was inflating this button. */
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1;
}

/* SVG end-handle triangles. Cyan to distinguish from the red/blue crest/toe handles. */
.sec-ext-handle {
  fill: #22d3ee;
  stroke: #0e7490;
  stroke-width: 1;
  cursor: ew-resize;
  transition: fill 0.12s, stroke 0.12s;
}
.sec-ext-handle:hover {
  fill: #67e8f9;
  stroke: #155e75;
}

/* ════════════════════════════════════════════════════════════════════════
 * v54.10 — Vertical exaggeration toggle row + status bar V×H readout
 * ════════════════════════════════════════════════════════════════════════ */
body.drape-app-body .drape-section-exag {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
}
body.drape-app-body .drape-section-exag .exag-label {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 500;
  margin-right: 4px;
  flex: 0 0 auto;
}
body.drape-app-body .drape-section-exag .exag-btn {
  flex: 1 1 0;
  padding: 3px 4px;
  font-size: 11px;
  font-family: inherit;
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  color: var(--color-muted);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
body.drape-app-body .drape-section-exag .exag-btn:hover {
  border-color: #f59e0b;
  color: var(--color-text);
}
body.drape-app-body .drape-section-exag .exag-btn.active {
  background: #f59e0b;
  border-color: #d97706;
  color: #0b1220;
  font-weight: 600;
}
body.drape-app-body #statusPlanes .status-value { color: #22d3ee; font-weight: 500; }

/* v54.22 K5 — BOM cutting allowance toggle (Halat sipariş payı) */
body.drape-app-body .bom-allowance-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px 0;
  padding: 4px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--color-muted);
}
body.drape-app-body .bom-allow-btn {
  padding: 3px 8px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  color: var(--color-muted);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
body.drape-app-body .bom-allow-btn:hover { color: var(--color-text); border-color: #f59e0b; }
body.drape-app-body .bom-allow-btn.active {
  background: #f59e0b;
  border-color: #d97706;
  color: #0b1220;
  font-weight: 700;
}


/* v54.21 K4 — Bearing compass widget (8-direction quick pick) */
body.drape-app-body .drape-section-compass {
  display: flex;
  justify-content: center;
  margin: 6px 0 4px;
  padding: 4px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
}
body.drape-app-body .drape-section-compass svg { cursor: pointer; }
body.drape-app-body .compass-rim {
  fill: rgba(15, 23, 42, 0.6);
  stroke: var(--color-panel-border);
  stroke-width: 1;
}
body.drape-app-body .compass-center { fill: #22d3ee; }
body.drape-app-body .compass-tick {
  stroke: var(--color-muted);
  stroke-width: 1.5;
  transition: stroke 0.1s, stroke-width 0.1s;
  cursor: pointer;
}
body.drape-app-body .compass-tick:hover {
  stroke: #f59e0b;
  stroke-width: 3;
}
body.drape-app-body .compass-cardinal {
  fill: var(--color-muted);
  font-size: 7px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
}
body.drape-app-body .compass-arrow {
  stroke: #22d3ee;
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 40px 40px;
  transition: transform 0.18s ease-out;
}


/* v54.19 — Magnifier loupe overlay (polygon çizerken cursor mercek). */
.drape-magnifier {
  position: fixed;
  pointer-events: none;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid #22d3ee;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 8px 24px rgba(0,0,0,0.6);
  z-index: 9998;
  background: #0b1220;
}
.drape-magnifier[hidden] { display: none; }

/* v55.35 — Active polygon action panel (HTML overlay floating above active
   polygon centroid). Per-frame screen-space projection in JS. */
.poly-action-panel {
  position: fixed;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(234, 88, 12, 0.85);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 8px rgba(234, 88, 12, 0.35);
  font-family: ui-monospace, monospace;
  pointer-events: auto;
  transform: translate(-50%, -100%);   /* anchor point at bottom-center */
  user-select: none;
}
.poly-action-panel[hidden] { display: none; }
.poly-action-title {
  font-size: 11px;
  font-weight: 700;
  color: #fed7aa;
  letter-spacing: 0.3px;
  padding: 0 2px;
}
.poly-action-row {
  display: flex;
  flex-direction: row;
  gap: 3px;
}
.poly-act-btn {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #f1f5f9;
  width: 26px;
  height: 24px;
  padding: 0;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.10s, border-color 0.10s, transform 0.08s;
}
.poly-act-btn:hover {
  background: rgba(234, 88, 12, 0.30);
  border-color: rgba(254, 215, 170, 0.85);
  transform: scale(1.10);
}
.poly-act-btn:active {
  transform: scale(0.95);
}
.poly-act-btn.poly-act-danger:hover {
  background: rgba(239, 68, 68, 0.40);
  border-color: rgba(252, 165, 165, 0.85);
}


/* v54.16 — Section Tool button + readonly readout (saf endüstri 2-point).
   Replaces v54.9 [Pick Crest][Auto][×] + bearing input + SVG end-handles. */
body.drape-app-body #sectionToolBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.40);
  color: #22d3ee;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
body.drape-app-body #sectionToolBtn:hover:not(:disabled) {
  background: rgba(34, 211, 238, 0.20);
  border-color: #22d3ee;
}
body.drape-app-body #sectionToolBtn.active {
  background: #22d3ee;
  color: #0b1220;
  border-color: #0e7490;
}
body.drape-app-body #sectionToolBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
body.drape-app-body .drape-section-readout {
  /* v54.19 — 6-col grid: bearing-key / input / reset / length-key / val */
  display: grid;
  grid-template-columns: auto 1fr auto auto 1fr;
  gap: 4px 8px;
  align-items: center;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  font-size: 11px;
}
body.drape-app-body .drape-section-readout .readout-key {
  color: var(--color-muted);
  font-weight: 500;
}
body.drape-app-body .drape-section-readout .readout-val {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
body.drape-app-body .drape-section-readout .readout-input {
  width: 64px;
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  color: var(--color-text);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
body.drape-app-body .drape-section-readout .readout-input:focus {
  outline: none;
  border-color: #f59e0b;
}
body.drape-app-body .drape-section-readout .readout-reset {
  width: 22px; height: 22px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--color-panel-border);
  border-radius: 3px;
  color: var(--color-muted);
  cursor: pointer;
}
body.drape-app-body .drape-section-readout .readout-reset:hover {
  color: var(--color-text);
  border-color: #f59e0b;
}


/* v54.12 — Polygon list "computed" badge (✓ if results.computed, · pending).
   Sits in the 3rd grid column of .polygon-row (between label and status). */
body.drape-app-body .polygon-row .polygon-computed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  margin: 0;
  background: #16a34a;            /* green-600 */
  color: #f0fdf4;
  flex: 0 0 auto;
}
body.drape-app-body .polygon-row .polygon-computed-badge.pending {
  background: rgba(255,255,255,0.06);
  color: var(--color-dim);
  font-weight: 500;
}
body.drape-app-body .polygon-row.computed { /* future-proof; row gets .computed when results.computed */ }

/* v57.87 — Design badge: AMD Apply edildi mi, hangi grid? Engineer L99 talebi:
   "her polygon'un tasarımı gözle ayırt edilebilsin". Violet pill (AMD theme). */
body.drape-app-body .polygon-row .polygon-design-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  height: 16px;
  margin: 0 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.28), rgba(126, 34, 206, 0.18));
  border: 1px solid rgba(168, 85, 247, 0.55);
  color: #e9d5ff;
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: help;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.20);
}
body.drape-app-body .polygon-row .polygon-design-badge:hover {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.42), rgba(126, 34, 206, 0.28));
  color: #fff;
}

/* v55.4 — Polygon quality score badge (Q:75 stil pill). Renk = bandı.
   Hover'da tooltip detayı: compactness, hairpins, slivers, vd. */
body.drape-app-body .polygon-row .polygon-quality-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;             /* v55.17d — tighten to content (was 32px) */
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.2px;
  margin: 0 2px;
  flex: 0 0 auto;
  cursor: help;
  white-space: nowrap;      /* v55.17d — single line (was pre-line) */
}
body.drape-app-body .polygon-row .polygon-quality-badge.q-good {
  background: rgba(34, 197, 94, 0.22);   /* green */
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.55);
}
body.drape-app-body .polygon-row .polygon-quality-badge.q-fair {
  background: rgba(251, 191, 36, 0.22);  /* amber */
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.55);
}
body.drape-app-body .polygon-row .polygon-quality-badge.q-poor {
  background: rgba(239, 68, 68, 0.22);   /* red */
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.55);
}
/* v55.17 — Polygon surface type badge (palye/şev from AI Vision or P3 metadata) */
body.drape-app-body .polygon-row .polygon-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 4px;
  font-size: 11px;
  border-radius: 3px;
  margin: 0 2px;
  flex: 0 0 auto;
  cursor: help;
}
body.drape-app-body .polygon-row .polygon-type-badge.type-palye {
  background: rgba(6, 182, 212, 0.18);
  border: 1px solid rgba(6, 182, 212, 0.45);
}
body.drape-app-body .polygon-row .polygon-type-badge.type-sev {
  background: rgba(234, 88, 12, 0.18);
  border: 1px solid rgba(234, 88, 12, 0.45);
}

/* v55.57 — "Halat yok" per-polygon override badge (🪢 ↔ 🚫) */
body.drape-app-body .polygon-row .polygon-norope-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 4px;
  font-size: 11px;
  border-radius: 3px;
  margin: 0 2px;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
body.drape-app-body .polygon-row .polygon-norope-badge.norope-on {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.45);
}
body.drape-app-body .polygon-row .polygon-norope-badge.norope-off {
  background: rgba(220, 38, 38, 0.22);
  border: 1px solid rgba(220, 38, 38, 0.50);
  opacity: 0.92;
}
body.drape-app-body .polygon-row .polygon-norope-badge:hover {
  filter: brightness(1.18);
}

/* v55.74 — Per-palye "yatay grid var/yok" badge (🕸️ / ➖) */
body.drape-app-body .polygon-row .polygon-grid-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 4px;
  font-size: 11px;
  border-radius: 3px;
  margin: 0 2px;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
body.drape-app-body .polygon-row .polygon-grid-badge.grid-on {
  background: rgba(168, 85, 247, 0.20);
  border: 1px solid rgba(168, 85, 247, 0.50);
}
body.drape-app-body .polygon-row .polygon-grid-badge.grid-off {
  background: rgba(100, 116, 139, 0.18);
  border: 1px solid rgba(100, 116, 139, 0.40);
  opacity: 0.85;
}
body.drape-app-body .polygon-row .polygon-grid-badge:hover {
  filter: brightness(1.2);
}

/* v55.80 — Per-polygon anchor toggle badge (🔩 / ❌) */
body.drape-app-body .polygon-row .polygon-anchor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 4px;
  font-size: 11px;
  border-radius: 3px;
  margin: 0 2px;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
body.drape-app-body .polygon-row .polygon-anchor-badge.anchor-on {
  background: rgba(245, 158, 11, 0.20);
  border: 1px solid rgba(245, 158, 11, 0.50);
}
body.drape-app-body .polygon-row .polygon-anchor-badge.anchor-off {
  background: rgba(100, 116, 139, 0.18);
  border: 1px solid rgba(100, 116, 139, 0.40);
  opacity: 0.85;
}
body.drape-app-body .polygon-row .polygon-anchor-badge:hover {
  filter: brightness(1.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v55.94 — Render Mode Segmented Control (top-right floating)
 *
 * Three-state toggle: ÇİZİM (technical drawing) | WIRE (neon dark interactive)
 * | PHOTO (hyperrealistic, deferred). Glass-morphism dark background, sharp
 * outline on active state. Sits over 3D viewport, doesn't intercept canvas
 * pointer events on inactive area.
 * ═══════════════════════════════════════════════════════════════════════════ */
.render-mode-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 60;
  display: inline-flex;
  gap: 1px;
  padding: 3px;
  background: rgba(15, 17, 21, 0.78);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
  font-family: ui-monospace, 'IBM Plex Mono', 'JetBrains Mono', monospace;
  user-select: none;
}
/* v55.98 — Status bar variant: küçük, oturmuş, status bar ile aynı yükseklikte. */
.render-mode-toggle.render-mode-toggle--statusbar {
  position: static;
  top: auto; right: auto; z-index: auto;
  padding: 2px;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.render-mode-toggle--statusbar .render-mode-btn {
  flex-direction: row;
  gap: 4px;
  min-width: 0;
  padding: 3px 8px;
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.render-mode-toggle--statusbar .render-mode-btn .rmt-icon {
  font-size: 11px;
}
.render-mode-toggle--statusbar .render-mode-btn .rmt-label {
  font-size: 9px;
}
.render-mode-toggle--statusbar .render-mode-btn.active {
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.20), 0 1px 3px rgba(251, 191, 36, 0.12);
}
.render-mode-btn {
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 64px;
  padding: 6px 10px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.render-mode-btn .rmt-icon {
  font-size: 16px;
  line-height: 1;
  filter: grayscale(35%);
  transition: filter 0.18s ease;
}
.render-mode-btn .rmt-label {
  font-size: 9px;
}
.render-mode-btn:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.05);
}
.render-mode-btn:hover .rmt-icon {
  filter: none;
}
.render-mode-btn.active {
  color: var(--ds-amber);
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.15), 0 1px 6px rgba(251, 191, 36, 0.18);
}
.render-mode-btn.active .rmt-icon {
  filter: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v55.94 — Technical Drawing Overlay (HTML/SVG, drawing mode only)
 *
 * North arrow (top-left of viewport), scale bar (bottom-left), title block
 * (bottom-right). Mounted in document.body, position:absolute over the
 * viewport. Only shown when state.renderMode === 'drawing'.
 *
 * Aesthetic: clean engineering drawing style. Monospace numerals (IBM Plex
 * Mono), thin black strokes, ample whitespace.
 * ═══════════════════════════════════════════════════════════════════════════ */
.drape-tech-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  color: #1a1a1a;
  font-family: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;
}
/* v57.93 — Robust default-on pattern. Engineer L99 hata noktası: her
 * yeni overlay child'ın `pointer-events: auto` set etmesi unutuluyordu
 * (v57.92 silüet bug → 4 saat kayıp). Şimdi direct child'lar default
 * auto, click-through istenirse .passthrough class ile explicit opt-out. */
.drape-tech-overlay > * { pointer-events: auto; }
.drape-tech-overlay > .passthrough { pointer-events: none; }
.drape-tech-overlay .drape-north-arrow {
  position: absolute;
  top: 80px;
  left: 18px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
  pointer-events: auto;
}
.drape-tech-overlay .drape-scale-bar {
  position: absolute;
  bottom: 32px;
  left: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: auto;
}
.drape-tech-overlay .scale-bar-track {
  display: flex;
  height: 8px;
  border: 1.5px solid #1a1a1a;
  background: #ffffff;
}
.drape-tech-overlay .scale-bar-segment {
  width: 30px;
  height: 100%;
}
.drape-tech-overlay .scale-bar-segment.dark {
  background: #1a1a1a;
}
.drape-tech-overlay .scale-bar-segment.light {
  background: #ffffff;
}
.drape-tech-overlay .scale-bar-labels {
  display: flex;
  justify-content: space-between;
  width: 120px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.drape-tech-overlay .scale-bar-end {
  margin-left: auto;
}
.drape-tech-overlay .drape-title-block {
  position: absolute;
  bottom: 16px;
  /* v55.147 — Engineer: "3D viewer'ın alt sağ köşesine taşı".
     Sağ panel'in solunda kalmalı (eski right:18 viewport sağı = right panel altı).
     Right panel CSS var (--right-panel-width 340px default, 310px responsive). */
  right: calc(var(--right-panel-width, 340px) + 18px);
  background: rgba(255,255,255,0.94);
  border: 1.5px solid #1a1a1a;
  padding: 8px 14px 8px 14px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  min-width: 220px;
  pointer-events: auto;
}
.drape-tech-overlay .drape-tb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
.drape-tech-overlay .drape-tb-row:last-child {
  border-bottom: none;
}
.drape-tech-overlay .drape-tb-key {
  font-weight: 700;
  opacity: 0.72;
  margin-right: 14px;
  letter-spacing: 0.08em;
}
/* v55.142 — Title block BOM sectional separator */
.drape-tech-overlay .drape-tb-sep {
  border-top: 1.2px solid #1a1a1a;
  margin: 5px 0 3px;
  height: 0;
}


/* ════════════════════════════════════════════════════════════════════════
 * v54.11 — Full-screen engineering section drawing modal
 *
 * Layout:
 *   ┌──────────────────────────────────────────────────────────┐
 *   │ Header: title + Export buttons + Close                    │
 *   ├──────────────────────────────────────────┬───────────────┤
 *   │ Drawing area (large SVG, white bg,        │ Bench list +  │
 *   │ engineering drawing convention)           │ section info  │
 *   │                                            │               │
 *   └──────────────────────────────────────────┴───────────────┘
 *
 * White drawing background is intentional — engineering plot/PDF
 * convention. Side panel shows per-bench analysis (height, width,
 * face angle, slope ratio).
 * ════════════════════════════════════════════════════════════════════════ */
body.drape-app-body .section-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 4px;
  color: #22d3ee;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
body.drape-app-body .section-expand-btn:hover {
  background: rgba(34, 211, 238, 0.16);
  border-color: rgba(34, 211, 238, 0.7);
}
body.drape-app-body .section-expand-btn .se-icon {
  font-size: 16px;
  line-height: 1;
}
body.drape-app-body .section-expand-btn .se-label {
  flex: 1 1 auto;
  text-align: left;
}

.section-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-modal[hidden] { display: none; }
.section-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
}
.section-modal-content {
  position: relative;
  width: 94vw;
  height: 92vh;
  background: var(--color-panel, #111c2e);
  border: 1px solid var(--color-panel-border, #2a3a55);
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.section-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-panel-2, #182338);
  border-bottom: 1px solid var(--color-panel-border, #2a3a55);
}
.section-modal-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #f1f5f9);
  flex: 1 1 auto;
  letter-spacing: 0.5px;
}
.section-modal-actions { display: flex; gap: 6px; }
.section-modal-actions .btn-sec {
  padding: 5px 12px;
  font-size: 12px;
}
.section-modal-actions .btn-icon {
  width: 30px; padding: 5px 0;
}
.section-modal-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  min-height: 0;
}
.section-modal-drawing {
  background: #fafafa;       /* white-ish engineering drawing background */
  position: relative;
  overflow: auto;
  padding: 16px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.section-modal-drawing svg {
  width: 100%;
  height: 100%;
  display: block;
}
.section-modal-side {
  background: var(--color-panel-2, #182338);
  border-left: 1px solid var(--color-panel-border, #2a3a55);
  padding: 12px 14px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--color-text, #f1f5f9);
}
.section-modal-side h4 {
  margin: 12px 0 6px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-muted, #cbd5e1);
  font-weight: 600;
}
.section-modal-side h4:first-child { margin-top: 0; }
.section-bench-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.section-bench-row {
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid #f59e0b;
  border-radius: 3px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  font-size: 11px;
}
.section-bench-row.face   { border-left-color: #f59e0b; }
.section-bench-row.top    { border-left-color: #22c55e; }
.section-bench-row.transition { border-left-color: #94a3b8; }
.section-bench-row .br-label {
  font-weight: 600;
  grid-column: 1 / span 2;
  color: #fde68a;
}
.section-bench-row .br-k { color: var(--color-muted, #cbd5e1); }
.section-bench-row .br-v { color: var(--color-text, #f1f5f9); font-variant-numeric: tabular-nums; text-align: right; }
.section-modal-info {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-muted, #cbd5e1);
}
.section-modal-info b { color: #fde68a; }

/* Engineering drawing-style class overrides for the modal SVG */
.section-modal-drawing .sec-dim {
  stroke: #1e293b;
  stroke-width: 0.5;
}
.section-modal-drawing .sec-dim-text {
  fill: #0f172a;
  font-size: 9px;
}
.section-modal-drawing .sec-terrain {
  fill: #f1f5f9;
  stroke: #475569;
  stroke-width: 1.2;
}
.section-modal-drawing .sec-mesh {
  fill: none;
  stroke: #1d4ed8;
  stroke-width: 1.8;
}
.section-modal-drawing .sec-bolt {
  stroke: #b91c1c;
  stroke-width: 1.4;
}
.section-modal-drawing .sec-bolt-cap {
  fill: #b91c1c;
}
/* v54.23b — Modal zone-color differentiation (engineering drawing) */
.section-modal-drawing .sec-bolt.sec-bolt-top    { stroke: #1e3a8a; stroke-width: 1.8; }
.section-modal-drawing .sec-bolt.sec-bolt-bot    { stroke: #991b1b; stroke-width: 1.8; }
.section-modal-drawing .sec-bolt.sec-bolt-side   { stroke: #ea580c; stroke-width: 1.6; }
.section-modal-drawing .sec-bolt.sec-bolt-int    { stroke: #b45309; stroke-width: 1.2; }
.section-modal-drawing .sec-bolt-cap.sec-bolt-cap-top   { fill: #1e3a8a; stroke: #0c1a4d; stroke-width: 0.6; }
.section-modal-drawing .sec-bolt-cap.sec-bolt-cap-bot   { fill: #991b1b; stroke: #4c0f0f; stroke-width: 0.6; }
.section-modal-drawing .sec-bolt-cap.sec-bolt-cap-side  { fill: #ea580c; stroke: #7c2d12; stroke-width: 0.6; }
.section-modal-drawing .sec-bolt-cap.sec-bolt-cap-int   { fill: #facc15; stroke: #854d0e; stroke-width: 0.6; }
.section-modal-drawing .sec-axis-label {
  fill: #0f172a;
  font-size: 11px;
  font-weight: 600;
}
.section-modal-drawing .sec-angle-arc {
  stroke: #ea580c;
  stroke-width: 1.2;
  fill: none;
}
.section-modal-drawing .sec-angle-text {
  fill: #ea580c;
  font-size: 11px;
  font-weight: 600;
}
.section-modal-drawing .sec-bench-label {
  fill: #0f172a;
  font-size: 9px;
  font-weight: 500;
}
.section-modal-drawing .sec-bench-bracket {
  stroke: #475569;
  stroke-width: 0.8;
  stroke-dasharray: 2 2;
  fill: none;
}
.section-modal-drawing .title-block {
  fill: #ffffff;
  stroke: #0f172a;
  stroke-width: 0.8;
}
.section-modal-drawing .title-block-text {
  fill: #0f172a;
  font-size: 10px;
}
.section-modal-drawing .title-block-text.title-main {
  font-size: 13px;
  font-weight: 700;
}
.section-modal-drawing .plan-inset-bg {
  fill: #f1f5f9;
  stroke: #0f172a;
  stroke-width: 0.6;
}
.section-modal-drawing .plan-inset-poly {
  fill: rgba(245, 158, 11, 0.25);
  stroke: #f59e0b;
  stroke-width: 1.4;
}
/* v57.15 — Non-active polygons in plan inset (engineer L99: tüm polygon'lar görünsün) */
.section-modal-drawing .plan-inset-poly-other {
  fill: rgba(148, 163, 184, 0.08);
  stroke: #94a3b8;
  stroke-width: 0.7;
  stroke-dasharray: 2 1.5;
  opacity: 0.65;
}
.section-modal-drawing .plan-inset-section-line {
  stroke: #b91c1c;
  stroke-width: 1.6;
}
.section-modal-drawing .plan-inset-label {
  fill: #0f172a;
  font-size: 8px;
  font-weight: 600;
}
.section-modal-drawing .plan-inset-label-active {
  fill: #92400e;
  font-size: 9px;
  font-weight: 800;
}
.section-modal-drawing .plan-inset-label-other {
  fill: #64748b;
  font-size: 7px;
  font-weight: 500;
  opacity: 0.75;
}
.section-modal-drawing .north-arrow {
  fill: #b91c1c;
  stroke: #0f172a;
  stroke-width: 0.6;
}
.section-modal-drawing .legend-bg {
  fill: rgba(255,255,255,0.95);
  stroke: #0f172a;
  stroke-width: 0.6;
}
.section-modal-drawing .legend-text {
  fill: #0f172a;
  font-size: 9px;
}

/* ─── v54.23 — Section catalog (save/recall) ────────────────────────── */
.drape-section-catalog {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(8, 145, 178, 0.06);
  border: 1px solid rgba(8, 145, 178, 0.25);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.drape-section-catalog .btn-sec.btn-tool {
  align-self: flex-start;
}
.saved-sections-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
}
.saved-sec-empty {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.75);
  font-style: italic;
}
.saved-sec-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 9px;
  background: rgba(8, 145, 178, 0.18);
  border: 1px solid rgba(8, 145, 178, 0.50);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #67e8f9;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
}
.saved-sec-chip:hover {
  background: rgba(8, 145, 178, 0.32);
  border-color: rgba(8, 145, 178, 0.85);
}
.saved-sec-chip .ssc-label { letter-spacing: 0.3px; }
.saved-sec-chip .ssc-del {
  background: transparent;
  border: none;
  color: rgba(248, 113, 113, 0.85);
  font-size: 11px;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
}
.saved-sec-chip .ssc-del:hover { color: #ef4444; }

/* ─── v54.23 — AI Palye/Şev segmentation stats badges ───────────────── */
.ai-seg-stats {
  margin-top: 6px;
  padding: 5px 7px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.30);
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  font-size: 11px;
}
.ai-seg-stats .ais-tag {
  padding: 2px 7px;
  border-radius: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.ai-seg-stats .ais-palye { background: rgba(34, 211, 238, 0.20); color: #67e8f9; border: 1px solid rgba(34, 211, 238, 0.45); }
.ai-seg-stats .ais-sev   { background: rgba(244,  63, 153, 0.18); color: #f9a8d4; border: 1px solid rgba(244,  63, 153, 0.45); }
.ai-seg-stats .ais-trans { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.45); }
/* v54.24d — Phase 2 Sobel magnitude bands */
.ai-seg-stats .ais-high  { background: rgba(239,  68,  68, 0.22); color: #fca5a5; border: 1px solid rgba(239,  68,  68, 0.55); }
.ai-seg-stats .ais-med   { background: rgba(249, 115,  22, 0.18); color: #fdba74; border: 1px solid rgba(249, 115,  22, 0.50); }
.ai-seg-stats .ais-low   { background: rgba(253, 224,  71, 0.15); color: #fde68a; border: 1px solid rgba(253, 224,  71, 0.40); }
.ai-seg-stats .ais-meta  { color: rgba(203, 213, 225, 0.65); font-size: 10px; margin-left: auto; }
.ai-seg-stats .ais-src   {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.55);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.30);
}
#aiSegOverlayBtn.active {
  background: rgba(99, 102, 241, 0.32);
  border-color: rgba(99, 102, 241, 0.85);
  color: #c7d2fe;
}
/* v54.24b — Phase 2 active state (red, matches bench-riser line color) */
#aiPhase2Btn.active {
  background: rgba(239, 68, 68, 0.28);
  border-color: rgba(239, 68, 68, 0.85);
  color: #fecaca;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5) inset;
}

/* v54.25 — AOF (Area of Focus) panel — Workflow B AI-assisted draw */
/* v55.12 — unified panel block style (token-based). AOF + UDG share base. */
.aof-block {
  margin: 4px 0 4px 0;          /* v55.108 compact: 8/16 → 4/4 */
  padding: 6px 8px;             /* v55.108 compact: 12 → 6/8 */
  background: rgba(15, 23, 42, 0.40);
  border: 1px solid var(--tk-border-soft);
  border-radius: var(--tk-r-2); /* compact: 8 → 5 */
  box-shadow: var(--tk-sh-1);
  transition: border-color var(--tk-trans-med);
}
.aof-block:hover { border-color: var(--tk-border-med); }
/* AOF accent variant — yellow tint for AOF + AI section */
.aof-block:not(.udg-block) {
  background: rgba(253, 224, 71, 0.04);
  border-color: rgba(253, 224, 71, 0.28);
}
.aof-block:not(.udg-block):hover { border-color: rgba(253, 224, 71, 0.50); }
.aof-block h4.acc-subhead {
  margin: 0 0 var(--tk-sp-1) 0;   /* v55.108 compact: sp-2(6) → sp-1(4) */
  color: var(--tk-acc-aof);
  font-size: var(--tk-fs-md);
  letter-spacing: 0.4px;
}
.aof-panel {
  margin-top: 8px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aof-status {
  padding: 5px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.aof-status.aof-empty {
  background: rgba(148, 163, 184, 0.10);
  color: rgba(148, 163, 184, 0.85);
  border: 1px dashed rgba(148, 163, 184, 0.40);
  font-style: italic;
}
.aof-status.aof-defined {
  background: rgba(253, 224, 71, 0.18);
  color: #fde68a;
  border: 1px solid rgba(253, 224, 71, 0.50);
}
.aof-cleanup, .aof-proposals {
  padding: 6px 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.30);
  border-radius: 4px;
}
.aof-cleanup h5, .aof-proposals h5 {
  margin: 0 0 4px 0;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: #6ee7b7;
}
.aof-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 10px;
}
.aof-stats .cs-pill {
  padding: 2px 6px;
  background: rgba(34, 197, 94, 0.18);
  color: #bbf7d0;
  border-radius: 3px;
  font-weight: 700;
}
.aof-stats .cs-meta { color: rgba(187, 247, 208, 0.75); }
.aof-stats .cs-time { margin-left: auto; color: rgba(148, 163, 184, 0.65); }
.aof-proposal {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.15);
}
.aof-proposal:first-of-type { border-top: none; padding-top: 2px; }
.aof-proposal .ap-id {
  font-weight: 700;
  color: #67e8f9;
  font-family: ui-monospace, monospace;
  font-size: 10px;
}
.aof-proposal .ap-area {
  color: #fde68a;
  font-weight: 600;
  font-size: 10px;
}
.aof-proposal .ap-verts {
  color: rgba(148, 163, 184, 0.65);
  font-size: 10px;
}
.aof-proposal .ap-adopt {
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.60);
  color: #bbf7d0;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
/* v55.17 — P3 toolbar (quality filter + batch accept/reject) */
.p3-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 8px 0;
  padding: 6px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--tk-border-soft);
  border-radius: var(--tk-r-2);
}
.p3-qfilter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.85);
  font-family: var(--tk-ff-mono);
  flex: 1 1 auto;
  min-width: 110px;
}
.p3-qfilter-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 60px;
  height: 14px;
  accent-color: var(--tk-acc-primary);
}
.p3-qfilter-val {
  min-width: 24px;
  text-align: right;
  color: var(--tk-acc-ai);
  font-weight: 700;
}
.p3-batch-accept, .p3-batch-reject {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid;
  cursor: pointer;
  font-weight: 700;
}
.p3-batch-accept {
  background: rgba(34, 197, 94, 0.20);
  border-color: rgba(34, 197, 94, 0.55);
  color: rgb(134, 239, 172);
}
.p3-batch-accept:hover:not(:disabled) { background: rgba(34, 197, 94, 0.38); }
.p3-batch-accept:disabled { opacity: 0.35; cursor: not-allowed; }
.p3-batch-reject {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.40);
  color: rgb(252, 165, 165);
}
.p3-batch-reject:hover { background: rgba(239, 68, 68, 0.28); }

/* v55.17 — P3 row grid (palye/şev tag + Q badge + area + verts + adopt) */
.p3-row {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: var(--tk-ff-mono);
}
.p3-row .ap-type {
  padding: 1px 6px;
  border-radius: var(--tk-r-pill);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.p3-row .ap-type-palye {
  background: rgba(6, 182, 212, 0.20);
  color: var(--tk-acc-ai);
  border: 1px solid rgba(6, 182, 212, 0.45);
}
.p3-row .ap-type-sev {
  background: rgba(234, 88, 12, 0.20);
  color: rgb(254, 215, 170);
  border: 1px solid rgba(234, 88, 12, 0.45);
}
.p3-row .ap-q {
  padding: 1px 5px;
  border-radius: var(--tk-r-pill);
  font-weight: 700;
  font-size: 9px;
}
.p3-row .ap-q.q-good { background: rgba(34, 197, 94, 0.22); color: rgb(134, 239, 172); border: 1px solid rgba(34, 197, 94, 0.45); }
.p3-row .ap-q.q-fair { background: rgba(251, 191, 36, 0.22); color: rgb(253, 230, 138); border: 1px solid rgba(251, 191, 36, 0.45); }
.p3-row .ap-q.q-poor { background: rgba(239, 68, 68, 0.22); color: rgb(252, 165, 165); border: 1px solid rgba(239, 68, 68, 0.45); }

.aof-proposal .ap-adopt:hover {
  background: rgba(16, 185, 129, 0.45);
  transform: scale(1.05);
}
#aofDefineBtn.active {
  background: rgba(253, 224, 71, 0.32);
  border-color: rgba(253, 224, 71, 0.85);
  color: #fef3c7;
  box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.5) inset;
}

/* v54.25e — Compact AI toolbar (single row of icon buttons + status pill) */
.aof-block.aof-compact {
  padding: 8px 10px;
}
.aof-block.aof-compact h4.acc-subhead { display: none; }
.aof-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.aof-header-row .aof-icon {
  font-size: 14px;
  line-height: 1;
}
.aof-header-row .aof-title {
  font-size: 12px;
  font-weight: 700;
  color: #fde047;
  letter-spacing: 0.3px;
  flex: 1;
}
.aof-header-row .aof-status-pill {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.18);
  color: rgba(203, 213, 225, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.35);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.aof-status-pill.state-aof    { background: rgba(253, 224, 71, 0.22); color: #fde047; border-color: rgba(253, 224, 71, 0.55); }
.aof-status-pill.state-clean  { background: rgba( 16, 185, 129, 0.22); color: #6ee7b7; border-color: rgba( 16, 185, 129, 0.55); }
.aof-status-pill.state-p3     { background: rgba(132,  92, 246, 0.22); color: #c4b5fd; border-color: rgba(132,  92, 246, 0.55); }

/* v55.12 — Token-based compact icon toolbar (no overflow on standard panel).
   v55.17b — engineer feedback: butonlar dikey stack edip yer kaybediyor.
   Explicit row + !important child override → cascading rule'lara kapı kapanır. */
.aof-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--tk-border-soft);
  border-radius: var(--tk-r-2);
  box-sizing: border-box;
  max-width: 100%;
}
/* Force every child to natural width (engineer feedback: full-width column stack) */
.aof-toolbar > * {
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: center;
}
/* v55.12 — Tighter button to fit 9+ buttons in 270px sol panel without wrap.
   Engineer feedback: "X butonu kutu dışına çıkıyor". */
.btn-aof {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;          /* was 28 → 22 (icon-only buttons fit) */
  height: 24px;             /* was 28 → 24 (compact) */
  padding: 0 var(--tk-sp-1);
  background: rgba(51, 65, 85, 0.45);
  border: 1px solid var(--tk-border-soft);
  color: var(--tk-text-primary);
  border-radius: var(--tk-r-1);
  font-size: var(--tk-fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--tk-trans-fast), border-color var(--tk-trans-fast), transform 0.08s ease;
  user-select: none;
  flex: 0 0 auto;
}
.btn-aof:hover:not(:disabled) {
  background: rgba(71, 85, 105, 0.65);
  border-color: rgba(148, 163, 184, 0.55);
  transform: scale(1.06);
}
.btn-aof:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn-aof.active {
  background: rgba(253, 224, 71, 0.30);
  border-color: rgba(253, 224, 71, 0.80);
  color: #fef3c7;
}
.btn-aof.btn-aof-primary {
  background: rgba(132, 92, 246, 0.22);
  border-color: rgba(132, 92, 246, 0.55);
  color: #c4b5fd;
}
.btn-aof.btn-aof-primary:hover:not(:disabled) {
  background: rgba(132, 92, 246, 0.42);
  border-color: rgba(132, 92, 246, 0.85);
}
.btn-aof.btn-aof-danger {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}
.btn-aof.btn-aof-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.40);
}
.aof-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: rgba(148, 163, 184, 0.22);
  margin: 0 2px;
}
/* Active state overrides for specific AI buttons */
#aiSegOverlayBtn.btn-aof.active { background: rgba( 99, 102, 241, 0.34); border-color: rgba( 99, 102, 241, 0.85); color: #c7d2fe; }
#aiPhase2Btn.btn-aof.active     { background: rgba(239,  68,  68, 0.30); border-color: rgba(239,  68,  68, 0.85); color: #fecaca; }
#aofDefineBtn.btn-aof.active    { background: rgba(253, 224,  71, 0.34); border-color: rgba(253, 224,  71, 0.85); color: #fef3c7; }

.aof-kmeans-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  font-size: 11px;
  color: rgba(203, 213, 225, 0.80);
  cursor: pointer;
}
.aof-kmeans-row .aof-kmeans-label { letter-spacing: 0.2px; }

/* v55.26 — Palye/şev rope skip toggle (compact row in UDG block) */
.udg-row-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px 0;
  font-size: 11px;
  color: rgba(203, 213, 225, 0.85);
  cursor: pointer;
  flex-wrap: wrap;
}
.udg-row-toggle input[type="checkbox"] {
  accent-color: var(--tk-acc-primary, var(--tk-acc-primary));
}
.udg-row-toggle input[type="number"] {
  width: 42px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
}
.udg-row-toggle .field-suffix {
  color: rgba(148, 163, 184, 0.75);
  font-size: 10px;
}

/* v55.26 — Surface type badge "unknown" variant + manual-lock visual */
body.drape-app-body .polygon-row .polygon-type-badge.type-unknown {
  background: rgba(148, 163, 184, 0.15);
  border: 1px dashed rgba(148, 163, 184, 0.40);
  color: rgba(203, 213, 225, 0.65);
  cursor: pointer;
}
body.drape-app-body .polygon-row .polygon-type-badge[data-toggle-type] {
  cursor: pointer;
  transition: transform 0.12s, opacity 0.12s;
}
body.drape-app-body .polygon-row .polygon-type-badge[data-toggle-type]:hover {
  transform: scale(1.15);
  opacity: 0.95;
}

/* v54.25e — Manuel + Edge Classification collapsibles */
.aof-manual-flow, .aof-edge-classify {
  margin: 8px 0;
  padding: 6px 8px;
  background: rgba(51, 65, 85, 0.20);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 5px;
}
.aof-manual-flow > summary, .aof-edge-classify > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.85);
  letter-spacing: 0.3px;
  list-style: none;
  position: relative;
  padding-left: 14px;
  user-select: none;
}
.aof-manual-flow > summary::before, .aof-edge-classify > summary::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(148, 163, 184, 0.60);
  transition: transform 0.15s;
}
.aof-manual-flow[open] > summary::before, .aof-edge-classify[open] > summary::before {
  content: '▾';
}
.aof-manual-flow > .btn-grid-2 { margin-top: 6px; }
.aof-edge-classify > .drape-classify-block { margin-top: 6px; }

/* ─── v54.23 — Geodesic brush toggle ────────────────────────────────── */
.cb-pill {
  appearance: none;
  width: 30px;
  height: 16px;
  background: rgba(71, 85, 105, 0.55);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  outline: none;
}
.cb-pill::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #f1f5f9;
  border-radius: 50%;
  transition: transform 0.15s;
}
.cb-pill:checked {
  background: rgba(16, 185, 129, 0.75);
}
.cb-pill:checked::before {
  transform: translateX(14px);
}

/* ═══════════════════ v55.0 Universal Drape Grid (UDG) ═══════════════════
 *
 * Çarşaf gibi tüm OBJ üzerine drape edilen V+H grid. AOF block ile aynı
 * tasarım, fakat farklı renk vurgusu (cyan tonları — V hatları cyan,
 * H hatları kırmızı 3D'de). UI'da soğuk-mavi/cyan border ile ayırt edilir.
 */
/* v55.12 — UDG block inherits base from .aof-block, overrides accent color only */
.udg-block {
  background: rgba(6, 182, 212, 0.05);
  border-color: rgba(6, 182, 212, 0.30);
  margin-top: var(--tk-sp-4);
}
.udg-block:hover { border-color: rgba(6, 182, 212, 0.55); }
.udg-block .aof-title { color: var(--tk-acc-ai); }
.udg-block .aof-icon  { filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.55)); }
/* v55.17 — 2-kolon grid: gx | gy / hizala | mod, dikey yer kazancı.
   Engineer feedback: "yanyana gorelim, uzamasın asagı dogru". */
.udg-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tk-sp-2) var(--tk-sp-3);
  margin: var(--tk-sp-3) 0 var(--tk-sp-2) 0;
}
.udg-controls .field-row {
  display: flex;
  align-items: center;
  gap: var(--tk-sp-1);
  font-size: var(--tk-fs-md);
  min-width: 0;
}
.udg-controls .field-label {
  flex: 0 0 auto;
  color: rgba(148, 163, 184, 0.92);
  font-weight: 700;
  font-family: var(--tk-ff-mono);
  letter-spacing: 0.2px;
  font-size: var(--tk-fs-sm);
}
.udg-controls .field-suffix {
  flex: 0 0 auto;
  font-size: var(--tk-fs-xs);
  color: rgba(148, 163, 184, 0.75);
}
.udg-controls input[type="number"],
.udg-controls select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: var(--tk-sp-1) var(--tk-sp-2);
  font-size: var(--tk-fs-md);
  font-family: var(--tk-ff-mono);
  font-weight: 600;
  background: rgba(15, 23, 42, 0.7);
  color: var(--tk-text-primary);
  border: 1px solid rgba(6, 182, 212, 0.32);
  border-radius: var(--tk-r-2);
  text-align: center;
}
.udg-controls input[type="number"]:focus,
.udg-controls select:focus {
  border-color: rgba(6, 182, 212, 0.75);
  outline: none;
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.18);
}
/* v55.17b — same bulletproof horizontal layout */
.udg-toolbar {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.udg-toolbar > * {
  flex: 0 0 auto !important;
  align-self: center;
}
.udg-toolbar .btn-aof.active {
  background: rgba(6, 182, 212, 0.28);
  border-color: rgba(6, 182, 212, 0.75);
  color: #67e8f9;
}
.udg-stats {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 10px;
  align-items: center;
}
.udg-stats .ais-meta {
  margin-left: auto;
  color: rgba(148, 163, 184, 0.75);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
/* v55.1 — Per-polygon stats breakdown */
.udg-stats-head {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-bottom: 6px;
}
.udg-poly-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid rgba(6, 182, 212, 0.18);
  padding-top: 5px;
}
.udg-poly-row {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(226, 232, 240, 0.88);
  padding: 2px 6px;
  background: rgba(6, 182, 212, 0.06);
  border-radius: 3px;
  border-left: 2px solid rgba(6, 182, 212, 0.45);
}
.udg-poly-row b {
  color: #67e8f9;
  margin-right: 6px;
}

/* v55.2 — Polygon edit toolbar (knife/merge/reverse/simplify) */
/* v55.12 — polygon edit toolbar harmonized with .aof-toolbar tokens.
   v55.17b — same !important horizontal flex bulletproof (engineer feedback:
   "burada da var" — same vertical-stretch bug as AI Asistan toolbar). */
.poly-edit-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  margin: var(--tk-sp-2) 0 var(--tk-sp-1) 0;
  background: rgba(15, 23, 42, 0.55);
  border-radius: var(--tk-r-2);
  border: 1px solid var(--tk-border-soft);
}
.poly-edit-toolbar > * {
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: center;
}

/* v57.29.26 — Polygon Toolbar Group (industry-standard organization).
 * 5 logical groups: HISTORY | TOPOLOGY | TRANSFORM | NEIGHBOR | ALIGN
 * Subtle group bg distinguishes related operations visually.
 * v57.29.27 — Compact icon-only buttons (~32px) instead of stretched. */
.poly-edit-toolbar .ptg-group {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row;
  align-items: center;
  gap: 1px;
  padding: 1px 3px;
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.08);
}
/* v57.29.28 — Icon + 1-word label (industry standard). Engineer "tuslar
 * anlasilmiyor" şikayeti. Permanent text below icon, compact ~44×38px. */
.poly-edit-toolbar .ptg-group .btn-aof,
.poly-edit-toolbar .ptg-group .ptg-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 42px;
  padding: 3px 4px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.poly-edit-toolbar .ptg-btn .ptg-icon {
  font-size: 13px;
  line-height: 1.1;
}
.poly-edit-toolbar .ptg-btn .ptg-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(203, 213, 225, 0.85);
  text-transform: none;
  line-height: 1;
}
.poly-edit-toolbar .ptg-btn:hover .ptg-label {
  color: #fde68a;
}
.poly-edit-toolbar .ptg-btn:disabled .ptg-label {
  color: rgba(148, 163, 184, 0.35);
}
.poly-edit-toolbar .ptg-group[data-group="topology"] {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.15);
}
.poly-edit-toolbar .ptg-group[data-group="neighbor"] {
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.15);
}
.poly-edit-toolbar .ptg-group[data-group="align"] {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.15);
}
.poly-edit-toolbar .ptg-group:hover {
  background: rgba(15, 23, 42, 0.55);
}
.poly-edit-toolbar .ptg-group[data-group="topology"]:hover {
  background: rgba(16, 185, 129, 0.14);
}
.poly-edit-toolbar .ptg-group[data-group="neighbor"]:hover {
  background: rgba(251, 191, 36, 0.12);
}
.poly-edit-toolbar .ptg-group[data-group="align"]:hover {
  background: rgba(59, 130, 246, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════
 * v58.1 — Polygon Edit Toolbar Redesign (Engineer L99 IQ200)
 * "tuslar anlasilmiyor" — visible per-group label above each cluster,
 * 2-row layout, ALIGN collapsed by default.
 *
 *   ┌─ DÜZENLE ──────────────────────────────── [?] ──┐
 *   │ geçmiş               topoloji                    │
 *   │ [↩][↪]               [♻ Rebuild][✨ Simplify]   │
 *   │                                                  │
 *   │ dönüşüm              komşu                       │
 *   │ [🪞][🔄]             [🔗][✏]                    │
 *   │                                                  │
 *   │ hizala ▾  (nadiren — yeni OBJ’ye re-register)    │
 *   └──────────────────────────────────────────────────┘
 * ═══════════════════════════════════════════════════════════════════════ */
.poly-edit-toolbar--v58 {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 6px !important;
}
.poly-edit-toolbar--v58 .ptg-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
}
.poly-edit-toolbar--v58 .ptg-row > .ptg-group {
  flex: 1 1 0 !important;
  min-width: 0;
}
/* Override the inline horizontal layout from v57.29.28 — each group becomes
   a vertical card (label header on top, button row below). */
.poly-edit-toolbar--v58 .ptg-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px;
  padding: 4px 6px 5px !important;
  border-radius: 6px !important;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.10);
}
.poly-edit-toolbar--v58 .ptg-group[data-group="topology"] {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.18);
}
.poly-edit-toolbar--v58 .ptg-group[data-group="neighbor"] {
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.18);
}
.poly-edit-toolbar--v58 .ptg-group[data-group="align"] {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.16);
}
.poly-edit-toolbar--v58 .ptg-group:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.poly-edit-toolbar--v58 .ptg-group[data-group="topology"]:hover {
  border-color: rgba(16, 185, 129, 0.45);
}
.poly-edit-toolbar--v58 .ptg-group[data-group="neighbor"]:hover {
  border-color: rgba(251, 191, 36, 0.45);
}
.poly-edit-toolbar--v58 .ptg-group[data-group="align"]:hover {
  border-color: rgba(59, 130, 246, 0.42);
}
/* Group label — visible header replacing previous hidden tooltip context */
.poly-edit-toolbar--v58 .ptg-group-label {
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.62);
  line-height: 1.1;
  padding-left: 1px;
  user-select: none;
}
.poly-edit-toolbar--v58 .ptg-group[data-group="topology"] .ptg-group-label {
  color: rgba(110, 231, 183, 0.85);
}
.poly-edit-toolbar--v58 .ptg-group[data-group="neighbor"] .ptg-group-label {
  color: rgba(253, 224, 71, 0.80);
}
.poly-edit-toolbar--v58 .ptg-group[data-group="align"] .ptg-group-label {
  color: rgba(147, 197, 253, 0.80);
}
.poly-edit-toolbar--v58 .ptg-group[data-group="history"] .ptg-group-label,
.poly-edit-toolbar--v58 .ptg-group[data-group="transform"] .ptg-group-label {
  color: rgba(203, 213, 225, 0.62);
}
.poly-edit-toolbar--v58 .ptg-btns {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3px;
}
.poly-edit-toolbar--v58 .ptg-btns > .ptg-btn {
  /* Override the v57.29.28 `.poly-edit-toolbar .ptg-group .ptg-btn { flex: 0 0 auto !important }` —
     in the v58.1 vertical group layout we want buttons to fill the group row equally. */
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* Primary rebuild — slightly brighter background hint */
.poly-edit-toolbar--v58 .ptg-btn--primary {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.32);
}
.poly-edit-toolbar--v58 .ptg-btn--primary:hover {
  background: rgba(16, 185, 129, 0.20);
  border-color: rgba(16, 185, 129, 0.55);
}

/* Collapsible HİZALA group (details/summary) */
.poly-edit-toolbar--v58 .ptg-group--collapsible {
  width: 100%;
}
.poly-edit-toolbar--v58 .ptg-group-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 0 1px;
  user-select: none;
  outline: none;
}
.poly-edit-toolbar--v58 .ptg-group-summary::-webkit-details-marker { display: none; }
.poly-edit-toolbar--v58 .ptg-group-summary::marker { content: ""; }
.poly-edit-toolbar--v58 .ptg-group-hint {
  flex: 1 1 auto;
  font-family: var(--ds-font-sans, 'Archivo', system-ui, sans-serif);
  font-size: 9.5px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(148, 163, 184, 0.55);
  text-transform: none;
}
.poly-edit-toolbar--v58 .ptg-group-chev {
  flex: 0 0 auto;
  font-size: 10px;
  color: rgba(147, 197, 253, 0.65);
  transition: transform 0.18s ease;
}
.poly-edit-toolbar--v58 .ptg-group--collapsible[open] .ptg-group-chev {
  transform: rotate(180deg);
}
.poly-edit-toolbar--v58 .ptg-btns--collapsible {
  margin-top: 4px;
}
/* Animate the expanded buttons appearing */
.poly-edit-toolbar--v58 .ptg-group--collapsible[open] .ptg-btns--collapsible {
  animation: ptgGroupExpand 0.18s ease-out;
}
@keyframes ptgGroupExpand {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.poly-edit-hint {
  margin: var(--tk-sp-1) 0 var(--tk-sp-2) 0;
  padding: var(--tk-sp-2) var(--tk-sp-3);
  font-size: var(--tk-fs-sm);
  color: rgb(254, 243, 199);
  background: rgba(253, 224, 71, 0.08);
  border: 1px dashed rgba(253, 224, 71, 0.45);
  border-radius: var(--tk-r-1);
  font-family: var(--tk-ff-sans);
}
/* v55.98 — Help popover variant: toolbar üstündeki "?" butona tıklayınca
   açılan modal-ish floating panel. Eski sürekli açık dev sarı blok yerine. */
.poly-edit-hint--popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  width: min(440px, 92vw);
  max-height: 78vh;
  margin: 0;
  padding: 0;
  background: #0f1115;
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: 10px;
  box-shadow:
    0 28px 80px -16px rgba(0, 0, 0, 0.7),
    0 8px 24px -6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.poly-edit-hint--popover[hidden] { display: none !important; }
.poly-edit-hint--popover .peh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.04));
  border-bottom: 1px solid rgba(251, 191, 36, 0.22);
}
.poly-edit-hint--popover .peh-title {
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-amber);
}
.poly-edit-hint--popover .peh-close {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fde68a;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.poly-edit-hint--popover .peh-close:hover {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fde047;
}
.poly-edit-hint--popover .peh-body {
  padding: 12px 14px 14px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.55;
}
.poly-edit-hint--popover .peh-body > b { color: var(--ds-amber); }
.poly-edit-hint--popover .peh-body > br + b { display: inline-block; margin-top: 4px; }
/* Backdrop overlay — pure CSS via ::backdrop-ish pseudo (uses body class) */
body.peh-popover-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1190;
  pointer-events: auto;
}
/* The "?" trigger in the toolbar */
.poly-help-btn {
  width: 28px;
  min-width: 28px;
  padding: 0;
  font-weight: 700;
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1;
  margin-left: auto;
  color: var(--ds-amber);
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.32);
}
.poly-help-btn:hover {
  background: rgba(251, 191, 36, 0.20);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde047;
}
.poly-help-btn[aria-expanded="true"] {
  background: rgba(251, 191, 36, 0.30);
  border-color: rgba(251, 191, 36, 0.65);
}

/* v55.101 — UDG collapsible <details> styling.
   Default kapalı, summary tek-tık ile açar. Görsel olarak diğer aof-block'lar
   ile uyumlu, ama "gizli ileri seviye" hissi için biraz daha sönük. */
.udg-details {
  padding: 0;
  cursor: default;
}
.udg-details > .udg-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.udg-details > .udg-summary::-webkit-details-marker { display: none; }
.udg-details > .udg-summary::marker { content: ""; }
.udg-details > .udg-summary::before {
  content: "▸";
  display: inline-block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.18s ease;
  width: 10px;
  text-align: center;
}
.udg-details[open] > .udg-summary::before {
  transform: rotate(90deg);
  color: var(--ds-amber);
}
.udg-details > .udg-summary:hover {
  background: rgba(255, 255, 255, 0.03);
}
.udg-details[open] > .udg-summary {
  background: rgba(251, 191, 36, 0.06);
  border-bottom: 1px solid rgba(251, 191, 36, 0.18);
  margin-bottom: 6px;
}
.udg-details .aof-title {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.udg-details > .udg-controls,
.udg-details > .udg-toolbar,
.udg-details > .udg-stats {
  padding: 0 10px 8px;
}

/* Palye/Şev küçük blok — UDG'den ayrı, daha az yer kaplasın (legacy v55.101) */
.palye-sev-block {
  padding: 4px 0 2px;
  margin-bottom: 4px;
}
.palye-sev-block .udg-row-toggle {
  padding: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v55.103 — POLYGON TASARIM "Numbered Workflow Strip"
 *
 * Aesthetic: Refined Engineering Toolkit (precision instrument panel).
 * 3 numbered steps (① ÜRET / ② ÇİZ / ③ SINIFLA) with intentional hierarchy.
 * Step 2 (manual draw) gets primary spotlight; 1 & 3 recede.
 *
 * Design tokens:
 *   - Step number circles in amber (--ds-amber) with hollow background
 *   - Section labels uppercase Manrope, micro-spacing 0.18em
 *   - Numerals (P1/P2/P3) in JetBrains Mono for precise feel
 *   - Hairline rules between sections (no card-on-card stacking)
 *   - Primary draw buttons get amber glow on hover
 *   - Mini secondary actions in muted slate
 * ═══════════════════════════════════════════════════════════════════════════ */
.pt-workflow {
  display: flex;
  flex-direction: column;
  gap: 8px;            /* v55.107 — compact: 14 → 8 */
  margin: 2px 0 6px;   /* compact: 4/12 → 2/6 */
  padding: 0;
}
.pt-step {
  position: relative;
  padding: 4px 0 4px;  /* compact: 8/10 → 4/4 */
  background: transparent;
  border: 0;
  border-radius: 0;
}
.pt-step + .pt-step {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;    /* compact: 12 → 6 */
}

/* Numbered step header */
.pt-step-head {
  display: flex;
  align-items: baseline;
  gap: 6px;            /* compact: 8 → 6 */
  margin-bottom: 4px;  /* compact: 8 → 4 */
  cursor: help;
  user-select: none;
}
.pt-step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-amber);
  background: transparent;
  border: 1.5px solid rgba(251, 191, 36, 0.55);
  border-radius: 50%;
  letter-spacing: 0;
  transform: translateY(2px);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.pt-step--primary .pt-step-num {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.85);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.08);
}
.pt-step-label {
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.pt-step--primary .pt-step-label {
  color: var(--ds-amber);
}
.pt-step-sub {
  flex: 1;
  font-size: 10.5px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.42);
  margin-left: 4px;
}
.pt-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;             /* compact: 8 → 4 */
  padding-left: 26px;   /* indent body to align with step number's right edge */
}

/* ── ① ÜRET: AI pill row ─────────────────────────────────────── */
.pt-ai-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.pt-ai-row .pt-ai-btn,
.pt-step-body .pt-ai-btn {
  /* Override accordion's default full-width button rule */
  width: auto !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pt-ai-btn {
  appearance: none;
  min-width: 40px;
  padding: 5px 10px;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}
.pt-ai-btn:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fde68a;
  transform: translateY(-1px);
}
.pt-ai-btn--primary {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.32);
  color: var(--ds-amber);
}
.pt-ai-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.pt-hint {
  margin: 0;            /* compact: 2 → 0 */
  padding: 0;
  font-size: 10.5px;
  line-height: 1.4;     /* compact: 1.45 → 1.4 */
  color: rgba(255, 255, 255, 0.42);
  font-style: italic;
}
.pt-hint b {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-style: normal;
}

/* ── ② ÇİZ: primary draw spotlight + secondary mini + edit toolbar ── */
.pt-draw-primary-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 5px;             /* compact: 6 → 5 */
}
.pt-draw-primary-row .pt-draw-primary-btn {
  width: auto !important;
}
.pt-draw-primary-btn {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;             /* compact: 8 → 6 */
  padding: 8px 10px;    /* compact: 12 → 8 */
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 7px;
  color: #fde68a;
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s, border-color 0.18s, transform 0.14s, box-shadow 0.18s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pt-draw-primary-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.20), rgba(251, 191, 36, 0.08));
  border-color: rgba(251, 191, 36, 0.65);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px -4px rgba(251, 191, 36, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pt-draw-primary-btn:active:not(:disabled) {
  transform: translateY(0);
}
.pt-draw-primary-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.pt-draw-primary-btn--close {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.04));
  border-color: rgba(16, 185, 129, 0.30);
  color: #6ee7b7;
}
.pt-draw-primary-btn--close:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.09));
  border-color: rgba(16, 185, 129, 0.65);
  color: #fff;
  box-shadow:
    0 4px 14px -4px rgba(16, 185, 129, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pt-draw-ico {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 4px currentColor);
  opacity: 0.85;
}
.pt-draw-text {
  font-size: 12.5px;
  letter-spacing: 0.10em;
}
.pt-draw-key {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 0;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.pt-draw-primary-btn:hover:not(:disabled) .pt-draw-key {
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.18);
}

.pt-draw-secondary-row {
  display: flex !important;
  justify-content: flex-end;
  gap: 4px;             /* compact: 6 → 4 */
  margin-top: 0;        /* compact: -2 → 0 (no overlap trick needed) */
}
.pt-draw-secondary-row .pt-draw-mini {
  width: auto !important;
  flex: 0 0 auto;
}
.pt-draw-mini {
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pt-draw-mini-label {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  opacity: 0.65;
}
.pt-draw-mini:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}
.pt-draw-mini--danger:hover {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.35);
  color: #fda4af;
}

/* ═══════════════════════════════════════════════════════════════════════
 * v58.3 — Drape Draw Mode toggle (Engineer L99 IQ200)
 * "ip bırakır gibi terrain takipli çizim" — Civil 3D Feature Line stili.
 * Compact single-row toggle below the secondary draw mini buttons.
 * ON state: cyan accent + viewport badge.
 * ═══════════════════════════════════════════════════════════════════════ */
.pt-draw-mode-row {
  margin: 5px 0 2px;
  padding: 0;
}
.pt-draw-mode-toggle {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.06), rgba(125, 211, 252, 0.02));
  border: 1px solid rgba(125, 211, 252, 0.20);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  user-select: none;
  font-family: var(--ds-font-sans, 'Archivo', system-ui, sans-serif);
}
.pt-draw-mode-toggle:hover {
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.12), rgba(125, 211, 252, 0.04));
  border-color: rgba(125, 211, 252, 0.42);
}
.pt-draw-mode-toggle input[type="checkbox"] {
  margin: 0;
  accent-color: #38bdf8;
  cursor: pointer;
}
.pt-draw-mode-toggle:has(input:checked) {
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.20), rgba(125, 211, 252, 0.06));
  border-color: rgba(125, 211, 252, 0.65);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pt-draw-mode-ico {
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.55));
}
.pt-draw-mode-text {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #bae6fd;
}
.pt-draw-mode-toggle:has(input:checked) .pt-draw-mode-text {
  color: #e0f2fe;
}
.pt-draw-mode-hint {
  flex: 1 1 auto;
  font-size: 10px;
  font-style: italic;
  color: rgba(186, 230, 253, 0.50);
  text-align: right;
  letter-spacing: 0;
}
/* Body-class indicator: drape mode active → viewport top-center badge */
body.drape-mode-drape #vp::after {
  content: "📐 DRAPE";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 4px 11px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), rgba(14, 165, 233, 0.90));
  color: #0f172a;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 4px 12px -2px rgba(56, 189, 248, 0.45);
  animation: drapeBadgePulse 2.2s ease-in-out infinite;
}
@keyframes drapeBadgePulse {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 0.65; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * v58.9 — Live Readout Overlay (Drape Draw Cursor HUD)
 * Engineer L99: "ne tıkladığımı göreyim, hata yapmayayım".
 * Floating near-cursor compact HUD: x/y/z/α/cluster/snap.
 * Industrial precision: JetBrains Mono numerals, dark glass, hairline keys.
 * Snap-active state: green accent + glow.
 * ═══════════════════════════════════════════════════════════════════════ */
.drape-live-readout {
  position: fixed;
  z-index: 90;
  min-width: 160px;
  max-width: 240px;
  padding: 7px 9px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.88));
  border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: 4px;
  box-shadow:
    0 8px 24px -6px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px;
  color: #e0f2fe;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.drape-live-readout[hidden] { display: none !important; }

.dlr-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  line-height: 1.3;
}
.dlr-row + .dlr-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 3px;
  margin-top: 1px;
}

.dlr-key {
  flex: 0 0 auto;
  width: 50px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(186, 230, 253, 0.55);
}
.dlr-val {
  flex: 1 1 auto;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  font-size: 11px;
  color: #bae6fd;
  text-align: right;
}
.dlr-row-xy .dlr-val,
.dlr-row-z  .dlr-val {
  color: #e0f2fe;
}
.dlr-row-alpha .dlr-val {
  color: #fde68a;
  font-weight: 700;
  font-size: 12px;
}
.dlr-row-cluster .dlr-val {
  font-size: 10px;
  color: rgba(186, 230, 253, 0.78);
  font-style: italic;
}
.dlr-row-snap[hidden] { display: none; }
.dlr-key-snap {
  color: #86efac;
}
.dlr-val-snap {
  color: #86efac;
  font-size: 10px;
  font-weight: 700;
}

/* Snap-active state — green accent + soft glow */
.drape-live-readout--snap-active {
  border-color: rgba(134, 239, 172, 0.55);
  box-shadow:
    0 8px 24px -6px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(134, 239, 172, 0.20),
    0 0 12px 0 rgba(134, 239, 172, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════
 * v58.5 — Polygon Face Cluster Panel
 * Engineer L99 vision: tek polygon = yarma şevi, sistem kademe şevleri
 * otomatik tanır. Panel polygon close olur olmaz açılır, cluster list
 * gösterir. Aesthetic: industrial precision, JetBrains Mono numerals,
 * light→dark amber tier (engineer chose monochrome over rainbow).
 *
 * Amber tier (5 stops, K1=lightest=alt, K5=darkest=üst):
 *   K1 #fef3c7  yellow-100 (lightest)
 *   K2 #fcd34d  yellow-300
 *   K3 var(--ds-amber)  yellow-400/amber-400
 *   K4 #d97706  amber-600
 *   K5 #92400e  amber-800 (darkest)
 *
 * Palye → cyan (distinct from amber tier, görsel ayrım)
 * Cliff → slate (skip dark accent — mesh anchorlanmaz anyway)
 * Anomaly → red border + warn icon (engineer dikkat çek)
 * ═══════════════════════════════════════════════════════════════════════ */

/* Polygon row badge — face cluster count */
.polygon-cluster-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fde68a;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.06));
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 3px;
  white-space: nowrap;
  cursor: help;
  transition: background 0.15s, border-color 0.15s;
}
.polygon-cluster-badge:hover {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.28), rgba(251, 191, 36, 0.10));
  border-color: rgba(251, 191, 36, 0.55);
}
.polygon-cluster-badge.cluster-anomaly {
  color: #fecaca;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.06));
  border-color: rgba(220, 38, 38, 0.45);
  animation: clusterAnomalyPulse 2.4s ease-in-out infinite;
}
@keyframes clusterAnomalyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10); }
}

/* ─── Cluster Panel ─────────────────────────────────────── */
.poly-cluster-panel {
  margin: 6px 0 10px;
  padding: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.40));
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 1px 2px rgba(0, 0, 0, 0.25);
}
.poly-cluster-panel[hidden] { display: none !important; }

.pcp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.03));
  border-bottom: 1px solid rgba(251, 191, 36, 0.18);
}
.pcp-icon {
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
.pcp-title {
  flex: 1 1 auto;
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fde68a;
}
.pcp-title span {
  color: var(--ds-amber);
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  letter-spacing: 0;
}
.pcp-overlay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.pcp-overlay-toggle:hover {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.30);
}
.pcp-overlay-toggle input { margin: 0; accent-color: var(--ds-amber); cursor: pointer; }
.pcp-overlay-icon { font-size: 10px; opacity: 0.85; }
.pcp-refresh {
  appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fde68a;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.18s;
}
.pcp-refresh:hover {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.50);
  transform: rotate(45deg);
}

/* ─── Cluster list rows ─────────────────────────────────── */
.pcp-list {
  display: flex;
  flex-direction: column;
}
.pcp-empty {
  padding: 14px 12px;
  color: rgba(148, 163, 184, 0.55);
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

.pcp-row {
  display: grid;
  grid-template-columns: 14px 34px 1fr 50px 38px auto auto;
  gap: 6px;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.pcp-row:last-child { border-bottom: 0; }
.pcp-row:hover { background: rgba(251, 191, 36, 0.05); }
.pcp-row--selected {
  background: rgba(251, 191, 36, 0.12);
  box-shadow: inset 2px 0 0 var(--ds-amber);
}

.pcp-row-symbol {
  font-size: 14px;
  line-height: 1;
  text-align: center;
}
.pcp-row-label {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pcp-row-alpha {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pcp-row-alpha-val {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 10.5px;
}
.pcp-row-alpha-bar {
  flex: 1 1 auto;
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1px;
  overflow: hidden;
  min-width: 40px;
}
.pcp-row-alpha-fill {
  display: block;
  height: 100%;
  border-radius: 1px;
  transition: width 0.3s ease;
}
.pcp-row-h, .pcp-row-bearing {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.60);
  font-feature-settings: "tnum" 1;
  text-align: right;
}
.pcp-row-warn {
  color: #fca5a5;
  font-size: 11px;
}
.pcp-row-crit {
  color: #fde047;
  font-size: 11px;
  filter: drop-shadow(0 0 4px rgba(253, 224, 71, 0.65));
  animation: critPulse 2.2s ease-in-out infinite;
}
@keyframes critPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.92); }
}

/* SEV — amber tier light → dark by data-tier (1=K1 lightest, 5=K5 darkest) */
.pcp-row--sev .pcp-row-symbol { color: var(--ds-amber); }
.pcp-row--sev[data-tier="1"] .pcp-row-symbol { color: #fef3c7; }   /* yellow-100 */
.pcp-row--sev[data-tier="2"] .pcp-row-symbol { color: #fcd34d; }   /* yellow-300 */
.pcp-row--sev[data-tier="3"] .pcp-row-symbol { color: var(--ds-amber); }   /* amber-400 */
.pcp-row--sev[data-tier="4"] .pcp-row-symbol { color: #d97706; }   /* amber-600 */
.pcp-row--sev[data-tier="5"] .pcp-row-symbol { color: #b45309; }   /* amber-700 */

.pcp-row--sev .pcp-row-label { color: #fde68a; }
.pcp-row--sev .pcp-row-alpha-fill {
  background: linear-gradient(90deg, #fcd34d, #f59e0b);
}
.pcp-row--sev[data-tier="1"] .pcp-row-alpha-fill { background: linear-gradient(90deg, #fef3c7, #fcd34d); }
.pcp-row--sev[data-tier="2"] .pcp-row-alpha-fill { background: linear-gradient(90deg, #fcd34d, var(--ds-amber)); }
.pcp-row--sev[data-tier="3"] .pcp-row-alpha-fill { background: linear-gradient(90deg, var(--ds-amber), #f59e0b); }
.pcp-row--sev[data-tier="4"] .pcp-row-alpha-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.pcp-row--sev[data-tier="5"] .pcp-row-alpha-fill { background: linear-gradient(90deg, #d97706, #b45309); }

/* PALYE — cyan distinct from amber */
.pcp-row--palye {
  background: rgba(6, 182, 212, 0.04);
}
.pcp-row--palye .pcp-row-symbol { color: #67e8f9; }
.pcp-row--palye .pcp-row-label  { color: #cffafe; }
.pcp-row--palye .pcp-row-alpha-fill {
  background: linear-gradient(90deg, #67e8f9, var(--tk-acc-primary));
}

/* CLIFF — slate, dim */
.pcp-row--cliff .pcp-row-symbol { color: #64748b; }
.pcp-row--cliff .pcp-row-label  { color: #94a3b8; }
.pcp-row--cliff { opacity: 0.65; }

/* CRITICAL highlight — yellow border + subtle pulse */
.pcp-row--critical {
  background: linear-gradient(90deg, rgba(253, 224, 71, 0.10), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(253, 224, 71, 0.30);
}
.pcp-row--critical:hover {
  background: linear-gradient(90deg, rgba(253, 224, 71, 0.18), rgba(251, 191, 36, 0.05));
}

/* ANOMALY — red border, warn animation */
.pcp-row--anomaly {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}
.pcp-row--anomaly.pcp-row--critical {
  box-shadow:
    inset 0 0 0 1px rgba(239, 68, 68, 0.45),
    inset 0 0 0 2px rgba(253, 224, 71, 0.30);
}

/* ─── Summary footer ────────────────────────────────────── */
.pcp-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.45);
  border-top: 1px solid rgba(251, 191, 36, 0.12);
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}
.pcp-sum-stat b {
  color: #fde68a;
  font-weight: 700;
  font-size: 11px;
  font-feature-settings: "tnum" 1;
}
.pcp-sum-stat--cliff b { color: #94a3b8; }
.pcp-sum-divider {
  width: 1px;
  height: 12px;
  background: rgba(251, 191, 36, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════════
 * v58.7 — Multi-Section Critical Table
 * Engineer L99 vision: tek polygon = tüm kombinasyon kritik kesitleri.
 * Sortable table with score bars. Top-5 default, expandable to all.
 * Industrial precision: monospace numerals, hairline rules, amber accents.
 * Single-face (α) → amber, multi-face (i) → cyan-amber, overall → yellow-300.
 * ═══════════════════════════════════════════════════════════════════════ */
.poly-multisec-panel {
  margin: 8px 0 10px;
  padding: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.40));
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 1px 2px rgba(0, 0, 0, 0.25);
}
.poly-multisec-panel[hidden] { display: none !important; }

.pms-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.04));
  border-bottom: 1px solid rgba(168, 85, 247, 0.18);
}
.pms-icon {
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.5));
}
.pms-title {
  flex: 1 1 auto;
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e9d5ff;
}
.pms-title span {
  color: #c084fc;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  letter-spacing: 0;
}
.pms-count {
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  color: #c084fc;
  padding: 2px 7px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 3px;
}

.pms-table-wrap {
  display: flex;
  flex-direction: column;
}
.pms-table-head {
  display: grid;
  grid-template-columns: 24px 1fr 56px 50px 1fr;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(15, 23, 42, 0.55);
  border-bottom: 1px solid rgba(168, 85, 247, 0.10);
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.50);
}
.pms-rows {
  display: flex;
  flex-direction: column;
}
.pms-empty {
  padding: 14px 12px;
  color: rgba(148, 163, 184, 0.55);
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

.pms-row {
  display: grid;
  grid-template-columns: 24px 1fr 56px 50px 1fr;
  gap: 6px;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.pms-row:last-child { border-bottom: 0; }
.pms-row:hover {
  background: rgba(168, 85, 247, 0.06);
}
.pms-row--selected {
  background: rgba(168, 85, 247, 0.14);
  box-shadow: inset 2px 0 0 var(--uf-purple);
}

/* Columns */
.pms-col-rank {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  font-feature-settings: "tnum" 1;
}
.pms-col-combo {
  font-weight: 600;
  color: #fde68a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.03em;
}
.pms-col-angle {
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}
.pms-angle-face { color: var(--ds-amber); }     /* amber for face-level α */
.pms-angle-i    { color: #67e8f9; }     /* cyan for inter-ramp i */

.pms-col-h {
  font-feature-settings: "tnum" 1;
  text-align: right;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}
.pms-col-h .pms-unit {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.40);
  margin-left: 1px;
}

.pms-col-score {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pms-score-bar {
  flex: 1 1 auto;
  height: 4px;
  min-width: 30px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1px;
  overflow: hidden;
}
.pms-score-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #fcd34d, #f59e0b);
  border-radius: 1px;
  transition: width 0.3s ease;
}
.pms-score-val {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  font-feature-settings: "tnum" 1;
}

/* Tier styles */
.pms-row--face .pms-score-fill {
  background: linear-gradient(90deg, #fcd34d, var(--ds-amber));
}
.pms-row--multi .pms-score-fill {
  background: linear-gradient(90deg, #67e8f9, var(--tk-acc-primary));
}
.pms-row--overall .pms-score-fill {
  background: linear-gradient(90deg, #fde047, #facc15);
}

/* Critical (rank 1) highlight — yellow accent + pulsing star */
.pms-row--critical {
  background: linear-gradient(90deg, rgba(253, 224, 71, 0.10), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(253, 224, 71, 0.28);
}
.pms-row--critical:hover {
  background: linear-gradient(90deg, rgba(253, 224, 71, 0.18), rgba(251, 191, 36, 0.05));
}
.pms-row-crit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #fde047;
  font-size: 12px;
  filter: drop-shadow(0 0 5px rgba(253, 224, 71, 0.7));
  animation: pmsCritPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pmsCritPulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.65; transform: translateY(-50%) scale(0.85); }
}

/* Footer with toggle + PDF */
.pms-footer {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.45);
  border-top: 1px solid rgba(168, 85, 247, 0.12);
}
.pms-toggle-btn {
  flex: 1 1 auto;
  padding: 5px 10px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 3px;
  color: #e9d5ff;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pms-toggle-btn:hover {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.50);
  color: #f3e8ff;
}
.pms-toggle-btn[hidden] { display: none; }

/* ─── Anomaly aggregate banner ──────────────────────────── */
.pcp-anomaly {
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.06));
  border-top: 1px solid rgba(239, 68, 68, 0.30);
  color: #fecaca;
  font-size: 10.5px;
  line-height: 1.45;
  font-family: var(--ds-font-sans, 'Archivo', system-ui, sans-serif);
}
.pcp-anomaly[hidden] { display: none; }
.pcp-anomaly b { color: #fee2e2; font-weight: 700; }

.pt-edit-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 1px;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
}
.pt-edit-rule > span {
  flex: 0 0 auto;
}
.pt-edit-rule::before,
.pt-edit-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
/* v55.109 — "?" help butonu DÜZENLE rule'unun sağ ucunda (toolbar'dan alındı) */
.pt-edit-help {
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 2px;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 4px;
  color: var(--ds-amber);
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pt-edit-help:hover {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde047;
}
.pt-edit-help[aria-expanded="true"] {
  background: rgba(251, 191, 36, 0.30);
  border-color: rgba(251, 191, 36, 0.65);
}

/* ── ③ SINIFLA: classification toggles ───────────────────────── */
.pt-classify-row {
  display: flex;
  flex-direction: column;
  gap: 3px;             /* compact: 6 → 3 */
}
.pt-toggle {
  display: flex !important;
  align-items: center;
  gap: 6px;             /* compact: 8 → 6 */
  padding: 4px 8px;     /* compact: 6/10 → 4/8 */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.pt-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.pt-toggle > input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  accent-color: var(--tk-acc-primary);
  cursor: pointer;
}
.pt-toggle-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-toggle-hint {
  font-style: normal;
  opacity: 0.55;
  margin-left: 4px;
}
.pt-toggle-thresh {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.pt-toggle-thresh input[type="number"] {
  width: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #fde68a;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  -moz-appearance: textfield;
}
.pt-toggle-thresh input[type="number"]::-webkit-outer-spin-button,
.pt-toggle-thresh input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pt-toggle-thresh .field-suffix {
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
}

/* ③ — advanced UDG details inside SINIFLA step gets sober tint */
.pt-advanced {
  margin-top: 2px;      /* compact: 4 → 2 */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
}
.pt-advanced > .udg-summary {
  padding: 4px 8px;     /* compact: 6/10 → 4/8 */
  font-size: 10.5px;
}

/* ── POLYGONS list compact header ───────────────────────────── */
.pt-polylist-head {
  display: flex;
  align-items: baseline;
  gap: 6px;             /* compact: 8 → 6 */
  margin: 8px 0 4px;    /* compact: 12/6 → 8/4 */
  padding: 0;
  border: 0;
  font-family: var(--ds-font-display, 'Archivo', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pt-polylist-title {
  flex: 0 0 auto;
}
.pt-polylist-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  font-family: var(--ds-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ds-amber);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 8px;
  letter-spacing: 0;
}
.pt-polylist-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
  align-self: center;
  margin-left: 4px;
}
.poly-edit-toolbar .btn-aof.active {
  background: rgba(253, 224, 71, 0.28);
  border-color: rgba(253, 224, 71, 0.75);
  color: #fef3c7;
}

/* v55.19 — Context-aware buttons slot (✂ Cut / 🤝 Merge / ❌ Clear).
   Empty when no selection (zero-width, no layout shift). When populated, the
   contained .poly-ctx-btn buttons inline-flex with the rest of the toolbar. */
.poly-context-slot {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}
.poly-context-slot:empty { display: none; }
.poly-ctx-btn {
  /* Visual distinction from the always-present toolbar buttons — slightly
     brighter and wider since they're conditional + action-class. */
  min-width: auto !important;
  padding: 0 8px !important;
  height: 24px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  animation: polyCtxBtnFadeIn 0.18s ease-out;
}
@keyframes polyCtxBtnFadeIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.poly-ctx-btn.poly-ctx-merge {
  background: rgba(6, 182, 212, 0.22);          /* cyan accent */
  border-color: rgba(6, 182, 212, 0.65);
  color: #cffafe;
}
.poly-ctx-btn.poly-ctx-merge:hover {
  background: rgba(6, 182, 212, 0.38);
  border-color: rgba(6, 182, 212, 0.85);
  color: #ecfeff;
}
.poly-ctx-btn.poly-ctx-cut {
  background: rgba(253, 224, 71, 0.22);         /* yellow accent (knife) */
  border-color: rgba(253, 224, 71, 0.65);
  color: #fef3c7;
}
.poly-ctx-btn.poly-ctx-cut:hover {
  background: rgba(253, 224, 71, 0.38);
  border-color: rgba(253, 224, 71, 0.85);
  color: #fef9c3;
}
.poly-ctx-btn.poly-ctx-clear {
  background: rgba(148, 163, 184, 0.15);        /* muted gray */
  border-color: rgba(148, 163, 184, 0.45);
  color: #cbd5e1;
  font-weight: 600;
  padding: 0 6px !important;
}
.poly-ctx-btn.poly-ctx-clear:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fecaca;
}
/* v55.20 — Mirror context button (chord-axis reflection of active polygon).
   Violet accent — distinct from Cut (yellow) and Merge (cyan) so engineer
   immediately sees the new tool. Toolbar 🪞 button reuses default btn-aof. */
.poly-ctx-btn.poly-ctx-mirror {
  background: rgba(167, 139, 250, 0.22);         /* violet accent */
  border-color: rgba(167, 139, 250, 0.65);
  color: #ede9fe;
}
.poly-ctx-btn.poly-ctx-mirror:hover {
  background: rgba(167, 139, 250, 0.38);
  border-color: rgba(167, 139, 250, 0.85);
  color: #f5f3ff;
}

/* v55.20 — Manuel Çizim block (always-open, was <details>).
   Visually matches .aof-block but with engineer-friendly emphasis since
   it's the PRIMARY workflow entry point in pure manual mode. */
.aof-manual-flow-open {
  border: 1px solid rgba(253, 224, 71, 0.35);    /* yellow accent: "manual = primary" */
  background: rgba(253, 224, 71, 0.05);
}
.aof-manual-flow-open .aof-header-row {
  margin-bottom: 4px;
}
.aof-manual-flow-open .aof-title {
  color: #fef3c7;
}

/* v55.19 — Polygon row multi-select highlight (Shift+click).
   Distinct from .active (orange) — uses cyan so engineer immediately sees
   the merge selection accumulating. ☑ marker replaces ●/○ in JS render. */
.polygon-row.multi-selected {
  background: rgba(6, 182, 212, 0.14);
  border-left-color: var(--tk-acc-primary);
  box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.35);
}
.polygon-row.multi-selected .polygon-marker {
  color: #22d3ee;
  font-weight: 700;
}
.polygon-row.multi-selected.active {
  /* Both states: orange border, cyan fill (precedence) */
  background: rgba(6, 182, 212, 0.18);
  border-left-color: var(--color-orange);
}

/* v55.19 — Hint banner: kbd styling for keyboard shortcut callouts */
.poly-edit-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #fef3c7;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(253, 224, 71, 0.45);
  border-radius: 3px;
  line-height: 1.4;
  margin: 0 1px;
}
.poly-edit-hint b {
  color: #fef9c3;
}

/* v55.9 — AI Vision modal (Claude Sonnet multi-view capture) */
.ai-vision-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-sans-serif, system-ui;
}
.aiv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(4px);
}
.aiv-dialog {
  position: relative;
  width: 90vw;
  height: 86vh;
  max-width: 1400px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.aiv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.95);
}
.aiv-header h3 {
  margin: 0;
  font-size: 15px;
  color: #67e8f9;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.aiv-close {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.30);
  color: #e2e8f0;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
.aiv-close:hover { background: rgba(239, 68, 68, 0.20); border-color: rgba(239, 68, 68, 0.55); }
.aiv-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  background: rgba(15, 23, 42, 0.55);
  flex-wrap: wrap;
}
.aiv-toolbar .btn-sec, .aiv-toolbar .btn-pri {
  font-size: 12px;
  padding: 5px 10px;
}
.aiv-toolbar .btn-pri {
  background: rgba(6, 182, 212, 0.32);
  border: 1px solid rgba(6, 182, 212, 0.68);
  color: #67e8f9;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
}
.aiv-toolbar .btn-pri:disabled { opacity: 0.4; cursor: not-allowed; }
.aiv-toolbar .btn-pri:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.48);
  border-color: var(--tk-acc-primary);
}
.aiv-toolbar .aiv-divider {
  width: 1px;
  height: 22px;
  background: var(--tk-border-soft);
  margin: 0 var(--tk-sp-1);
}
.aiv-toolbar .btn-danger {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.40);
  color: #fca5a5;
}
.aiv-spacer { flex: 1; }
.aiv-model-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.9);
}
.aiv-model-row > label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.aiv-stats {
  display: flex;
  justify-content: space-between;
  padding: 6px 16px;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.85);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(15, 23, 42, 0.40);
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}
.aiv-usage { color: #67e8f9; }
.aiv-gallery {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  background: #020617;
}
.aiv-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: rgba(148, 163, 184, 0.65);
  font-style: italic;
  font-size: 13px;
}
.aiv-card {
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.aiv-card img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  background: #eef2f7;
  cursor: zoom-in;
  display: block;
}
.aiv-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  font-size: 11px;
  background: rgba(15, 23, 42, 0.85);
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.aiv-card-label {
  color: #e2e8f0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-card-del {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
.aiv-card-del:hover { background: rgba(239, 68, 68, 0.20); }
.aiv-expanded {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  cursor: zoom-out;
}
.aiv-expanded img {
  max-width: 92vw;
  max-height: 88vh;
  border: 2px solid #67e8f9;
  border-radius: 4px;
  background: #fff;
}
.aiv-expanded-close {
  position: absolute;
  top: 18px;
  right: 24px;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
}

/* v55.11 — Claude response panel inside modal */
.aiv-result-panel {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 6px;
  margin: 12px 16px 0;
  padding: 10px 12px;
  font-size: 12px;
  color: #e2e8f0;
}
.aiv-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(6, 182, 212, 0.20);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #67e8f9;
}
.aiv-adopt {
  background: rgba(34, 197, 94, 0.28);
  border: 1px solid rgba(34, 197, 94, 0.65);
  color: #86efac;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.aiv-adopt:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.45);
  border-color: #22c55e;
}
.aiv-adopt:disabled { opacity: 0.4; cursor: not-allowed; }
.aiv-result-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}
.aiv-result-body ul { color: rgba(226, 232, 240, 0.92); font-size: 11px; }
.aiv-result-body b { color: #fde68a; }
.aiv-raw-toggle {
  margin-top: 8px;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.7);
}
.aiv-raw-toggle summary { cursor: pointer; }
.aiv-raw {
  background: #020617;
  color: #94a3b8;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 6px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v55.96 — ARTUSA DRAPE STUDIO redesign overlay
 *
 * "Surgical Engineering CAD" aesthetic — ANSYS/Plaxis/GeoStudio class CAE
 * tooling with design-conscious refinement. Refined dark theme, hairline
 * borders, surgical amber accents, monospace tabular numerals.
 *
 * Distinctive choices:
 *   - Manrope display + body (geometric, NOT Inter)
 *   - JetBrains Mono numerals (programmer-grade tabular figures)
 *   - Workflow phases (① ② ③ ④) as primary navigation — engineering process
 *     visible at all times
 *   - OLED-tinted true black background (#08090b)
 *   - Amber var(--ds-amber) as SOLE active accent — no UI element is amber unless
 *     it's actively engaging the user
 *
 * Architecture:
 *   - Body gets data-phase="mesh|design|solution|report" → CSS shows only
 *     relevant section accordions in left panel
 *   - Render mode toggle (v55.94) and existing engineering shell preserved;
 *     this overlay just refines look + adds phase navigation + status bar
 * ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

body.drape-app-body {
  /* Drape Studio color tokens */
  --ds-bg:             #08090b;
  --ds-surface:        #14171c;
  --ds-surface-1:      #1c2128;
  --ds-surface-2:      #242a33;
  --ds-surface-hover:  rgba(255,255,255,0.035);
  --ds-border:         rgba(255,255,255,0.06);
  --ds-border-strong:  rgba(255,255,255,0.12);
  --ds-text:           #f5f7fa;
  --ds-text-muted:     #6b7785;
  --ds-text-dim:       #4a525c;
  /* Accents */
  --ds-amber:          #fbbf24;
  --ds-amber-soft:     rgba(251,191,36,0.12);
  --ds-emerald:        #10b981;
  --ds-rose:           #f43f5e;
  --ds-cyan:           #06b6d4;
  --ds-orange:         var(--tk-acc-primary);    /* v58.67: → cyan (tek primary) */
  /* Engineering classification (synced with EDGE_COLOR in drape.js) */
  --ds-top:            #3b82f6;
  --ds-bot:            #ef4444;
  --ds-side:           #f59e0b;
  --ds-internal:       #94a3b8;
  /* Type */
  --ds-font-display:   'Archivo', system-ui, -apple-system, sans-serif;
  --ds-font-body:      'Archivo', system-ui, -apple-system, sans-serif;
  --ds-font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  /* Spacing scale */
  --ds-s1:  4px;
  --ds-s2:  8px;
  --ds-s3:  12px;
  --ds-s4:  16px;
  --ds-s5:  20px;
  --ds-s6:  24px;
  --ds-s8:  32px;
  /* Radius */
  --ds-r-sm: 4px;
  --ds-r-md: 6px;
  --ds-r-lg: 10px;
  /* Buttons (v58.53.0 — tek tier sistemi: tüm fazlar/menüler/tab'lar tutarlı) */
  --ds-btn-h:          30px;   /* standart kontrol yüksekliği */
  --ds-btn-h-sm:       24px;   /* yoğun satır / kompakt */
  --ds-btn-h-lg:       36px;   /* birincil CTA */
  --ds-btn-pad-x:      12px;
  --ds-btn-pad-x-sm:   8px;
  --ds-btn-r:          var(--ds-r-sm);
  --ds-btn-fs:         11px;
  --ds-btn-fs-lg:      12.5px;
  --ds-btn-fw:         600;
  --ds-btn-trans:      background .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease, transform .08s ease;
  --ds-btn-focus:      0 0 0 2px rgba(251,191,36,0.38);

  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  font-feature-settings: "ss01" on, "ss02" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.drape-app-body .app-shell {
  background: var(--ds-bg);
}

/* ─── TOP NAV refinement (existing topnav above phase nav) ────────────── */
body.drape-app-body .top-nav {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  padding: 0 var(--ds-s4);
  min-height: 44px;
}
body.drape-app-body .topnav {
  gap: 0;
  height: 44px;
  align-items: stretch;
}
body.drape-app-body .topnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--ds-s4);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
body.drape-app-body .topnav a:hover {
  color: var(--ds-text);
}
body.drape-app-body .topnav a.active,
body.drape-app-body .topnav a:has(b) {
  color: var(--ds-text);
  border-bottom-color: var(--ds-amber);
}
body.drape-app-body .topnav a b {
  font-weight: 600;   /* No extra weight, only bottom-border distinguishes */
}
/* v58.445 (FAZ S2 — TEK PROGRAM): üst nav ikincil-araç açılır menüsü ("Araçlar ▾").
   Mevcut .topnav a token'larıyla (--ds-*) hizalı; native <details>, JS yok. */
body.drape-app-body .topnav .topnav-tools { position: relative; display: inline-flex; align-items: stretch; }
body.drape-app-body .topnav .topnav-tools > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  padding: 0 var(--ds-s4); color: var(--ds-text-muted);
  font-family: var(--ds-font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
}
body.drape-app-body .topnav .topnav-tools > summary::-webkit-details-marker { display: none; }
body.drape-app-body .topnav .topnav-tools > summary::marker { content: ""; }
body.drape-app-body .topnav .topnav-tools[open] > summary,
body.drape-app-body .topnav .topnav-tools > summary:hover { color: var(--ds-text); }
body.drape-app-body .topnav .topnav-tools-menu {
  position: absolute; top: 100%; left: 0; z-index: 200; margin-top: 2px;
  display: flex; flex-direction: column; min-width: 190px;
  background: var(--ds-bg-elev, #0f1830); border: 1px solid var(--ds-border, #1e293b);
  border-radius: 8px; padding: 4px; box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
body.drape-app-body .topnav .topnav-tools-menu a {
  padding: 7px 10px; border-bottom: none; border-radius: 5px; white-space: nowrap;
}
body.drape-app-body .topnav .topnav-tools-menu a:hover { background: rgba(255,255,255,0.05); color: var(--ds-text); }

/* ─── PHASE NAVIGATION (new, injected below topnav) ──────────────────── */
/* ════════════════════════════════════════════════════════════════════════
 * v57.17 — PHASE NAV (Engineering Telemetry Strip)
 * Engineer /frontend-design talebi. Subway-rail metafor: 5 phase = 5
 * station, aralarında precision-rail connector. Brand chip = wedge
 * monogram + version pill. Sağ tarafta workflow telemetry chip.
 * ──────────────────────────────────────────────────────────────────── */

.phase-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  background:
    radial-gradient(120% 200% at 50% -50%, rgba(251,191,36,0.045) 0%, transparent 60%),
    linear-gradient(180deg, #16191f 0%, #1a1e25 100%);
  border-bottom: 1px solid var(--ds-border);
  padding: 0 var(--ds-s5) 0 var(--ds-s4);
  min-height: 72px;
  position: relative;
  z-index: 30;           /* v58.52.3 — aktif faz işaretçisi (::after üçgen, bottom:-7px rail dışına taşar) 3D viewer/panel içeriğinin ÜSTÜNDE görünsün */
  isolation: isolate;
}
/* Precision accent strip at the bottom — amber hairline with subtle glow */
.phase-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(251,191,36,0.45) 18%,
      rgba(251,191,36,0.85) 50%,
      rgba(251,191,36,0.45) 82%,
      transparent 100%);
  box-shadow: 0 0 12px rgba(251,191,36,0.22);
  pointer-events: none;
  z-index: 2;
}

/* ─── Brand chip ─────────────────────────────────────────────────────── */
.phase-nav .phase-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-s3);
  padding-right: var(--ds-s5);
  margin-right: var(--ds-s4);
  border-right: 1px solid var(--ds-border);
  position: relative;
}
.phase-nav .phase-brand .brand-mark {
  width: 28px;
  height: 28px;
  position: relative;
  flex-shrink: 0;
  background:
    linear-gradient(135deg, var(--ds-amber) 0%, #f59e0b 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 35%, 60% 0, 0 0);
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.35),
    0 0 12px rgba(251,191,36,0.28),
    inset 0 -8px 12px rgba(180,83,9,0.32);
}
.phase-nav .phase-brand .brand-mark::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: rgba(0,0,0,0.45);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
}
.phase-nav .phase-brand .brand-text {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.phase-nav .phase-brand-main {
  font-family: var(--ds-font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--ds-text);
  line-height: 1;
}
.phase-nav .phase-brand-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  line-height: 1;
}
.phase-nav .phase-brand-sub .brand-ver {
  color: var(--ds-amber);
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.28);
  border-radius: 3px;
  padding: 1px 5px 1px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.phase-nav .phase-brand-sub .brand-divider {
  width: 1px;
  height: 8px;
  background: var(--ds-border-strong);
}
.phase-nav .phase-brand-sub .brand-org {
  color: var(--ds-text-muted);
}

/* ─── Phase rail track ───────────────────────────────────────────────── */
.phase-nav .phase-rail-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: stretch;
  flex: 1;
  gap: 0;
  position: relative;
}
/* Continuous rail line behind all stations — sits behind status marks */
.phase-nav .phase-rail-track::before {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  top: 22px;
  height: 2px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.10) 0 6px,
      transparent 6px 12px
    );
  pointer-events: none;
  z-index: 0;
}
/* When stations are completed/active, rail segments tint amber.
 * (rail segment color is computed via :has() with neighbor states.) */
.phase-nav .phase-station {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
  z-index: 1;
}

/* ─── Phase button — single station ─────────────────────────────────── */
.phase-nav .phase-btn {
  appearance: none;
  background: transparent;
  border: none;
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "mark num"
    "mark label";
  align-items: center;
  column-gap: var(--ds-s3);
  row-gap: 4px;
  padding: var(--ds-s3) var(--ds-s4) var(--ds-s3);
  width: 100%;
  color: var(--ds-text-muted);
  cursor: pointer;
  font-family: var(--ds-font-display);
  transition:
    color 0.20s ease,
    background 0.20s ease,
    transform 0.20s ease;
  position: relative;
}
.phase-nav .phase-btn:hover {
  color: var(--ds-text);
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.025) 100%);
}
.phase-nav .phase-btn:focus-visible {
  outline: none;
  background: rgba(251,191,36,0.06);
}
.phase-nav .phase-btn:focus-visible::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  border: 1px dashed rgba(251,191,36,0.6);
  pointer-events: none;
}

/* Status mark glyph — left side, vertical center, replaces the "dot" on the rail */
.phase-nav .phase-mark {
  grid-area: mark;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ds-surface-1);
  border: 1.5px solid var(--ds-text-dim);
  position: relative;
  transition:
    background 0.20s ease,
    border-color 0.20s ease,
    box-shadow 0.20s ease,
    transform 0.20s ease;
  flex-shrink: 0;
}
.phase-nav .phase-mark .phase-mark-glyph {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-text-dim);
  transition: background 0.20s ease, transform 0.20s ease;
}
/* Status: PENDING (default) — muted dim ring + small dim dot */
.phase-nav .phase-station[data-status="pending"] .phase-mark {
  background: #1a1e25;
  border-color: rgba(255,255,255,0.14);
}
.phase-nav .phase-station[data-status="pending"] .phase-mark .phase-mark-glyph {
  background: rgba(255,255,255,0.18);
}
/* Status: ACTIVE — amber ring + pulsing solid amber center */
.phase-nav .phase-station[data-status="active"] .phase-mark {
  background: var(--ds-surface-1);
  border-color: var(--tk-acc-primary);  /* v58.68: aktif faz istasyonu = cyan */
  box-shadow:
    0 0 0 4px rgba(6,182,212,0.12),
    0 0 14px rgba(6,182,212,0.45);
}
.phase-nav .phase-station[data-status="active"] .phase-mark .phase-mark-glyph {
  background: var(--tk-acc-primary);
  width: 9px;
  height: 9px;
  animation: ds-pulse 1.6s ease-in-out infinite;
}
/* Status: COMPLETED — emerald fill + ✓ glyph */
.phase-nav .phase-station[data-status="completed"] .phase-mark {
  background: var(--ds-emerald);
  border-color: var(--ds-emerald);
  box-shadow:
    0 0 0 3px rgba(16,185,129,0.18),
    0 0 10px rgba(16,185,129,0.35);
}
.phase-nav .phase-station[data-status="completed"] .phase-mark .phase-mark-glyph {
  width: 12px;
  height: 7px;
  background: transparent;
  border-left: 2px solid #0c1320;
  border-bottom: 2px solid #0c1320;
  transform: rotate(-45deg) translate(1px, -1px);
  border-radius: 0;
}
/* Status: LOCKED — muted with diagonal hatch */
.phase-nav .phase-station[data-status="locked"] .phase-mark {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.04) 0 3px,
      transparent 3px 6px),
    #1a1e25;
  border-color: rgba(255,255,255,0.10);
}
.phase-nav .phase-station[data-status="locked"] .phase-mark .phase-mark-glyph {
  background: rgba(255,255,255,0.10);
}
.phase-nav .phase-station[data-status="locked"] .phase-btn {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Rail segment tint between completed stations (engineering-circuit look) */
.phase-nav .phase-station[data-status="completed"] + .phase-station[data-status="completed"]::before,
.phase-nav .phase-station[data-status="completed"] + .phase-station[data-status="active"]::before {
  content: '';
  position: absolute;
  left: -50%;
  right: 50%;
  top: 22px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--ds-emerald) 0%,
    rgba(16,185,129,0.7) 100%);
  box-shadow: 0 0 8px rgba(16,185,129,0.35);
  z-index: 0;
  pointer-events: none;
}

/* Phase number — top row right of mark */
.phase-nav .phase-btn .phase-num {
  grid-area: num;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-dim);
  transition: color 0.18s ease;
  line-height: 1;
  text-transform: uppercase;
}
.phase-nav .phase-btn:hover .phase-num,
.phase-nav .phase-btn.active .phase-num,
.phase-nav .phase-station[data-status="completed"] .phase-num {
  color: var(--tk-acc-primary);  /* v58.68: hover/aktif faz no = cyan (completed aşağıda emerald) */
}
.phase-nav .phase-station[data-status="completed"] .phase-num {
  color: var(--ds-emerald);
}

/* Phase label block — bottom row right of mark */
.phase-nav .phase-btn .phase-label {
  grid-area: label;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.phase-nav .phase-btn .phase-label-main {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ds-text-muted);
  transition: color 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase-nav .phase-btn .phase-label-sub {
  font-family: var(--ds-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ds-text-dim);
  text-transform: lowercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase-nav .phase-btn:hover .phase-label-main,
.phase-nav .phase-btn.active .phase-label-main {
  color: var(--ds-text);
}

/* Active station — amber underline + downward chevron pointer */
.phase-nav .phase-btn.active {
  background:
    linear-gradient(180deg,
      rgba(251,191,36,0.10) 0%,
      rgba(251,191,36,0.03) 50%,
      transparent 100%);
}
.phase-nav .phase-btn.active::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background: var(--ds-amber);
  box-shadow: 0 0 10px rgba(251,191,36,0.55);
  z-index: 3;
}
.phase-nav .phase-btn.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--ds-amber);
  filter: drop-shadow(0 1px 2px rgba(251,191,36,0.45));
  z-index: 3;
}

/* ─── Workflow telemetry chip (right side) ───────────────────────────── */
.phase-nav .phase-telemetry {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-s3);
  padding-left: var(--ds-s4);
  margin-left: var(--ds-s2);
  border-left: 1px solid var(--ds-border);
  flex-shrink: 0;
}
.phase-nav .phase-telemetry .telem-cell {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
  min-width: 0;
  position: relative;
}
.phase-nav .phase-telemetry .telem-cell + .telem-cell {
  padding-left: var(--ds-s3);
}
.phase-nav .phase-telemetry .telem-cell + .telem-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--ds-border);
}
.phase-nav .phase-telemetry .telem-key {
  font-family: var(--ds-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ds-text-dim);
  text-transform: uppercase;
  line-height: 1;
}
.phase-nav .phase-telemetry .telem-val {
  font-family: var(--ds-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase-nav .phase-telemetry .telem-cell[data-emphasis="amber"] .telem-val {
  color: var(--ds-amber);
}
.phase-nav .phase-telemetry .telem-cell[data-emphasis="emerald"] .telem-val {
  color: var(--ds-emerald);
}
.phase-nav .phase-telemetry .telem-cell[data-emphasis="muted"] .telem-val {
  color: var(--ds-text-muted);
  font-weight: 500;
}

/* Idle indicator inside telemetry — keep amber-pulse busy state legible */
.phase-nav .phase-telemetry .ds-idle-indicator {
  margin-left: var(--ds-s2);
}

/* Backward-compat hidden state slot — JS still touches dsPhaseStateText */
.phase-nav .phase-state[hidden] {
  display: none !important;
}

/* ─── Responsive: narrower viewport → hide sub-labels + first telemetry cell ─── */
@media (max-width: 1400px) {
  .phase-nav .phase-btn .phase-label-sub { display: none; }
  .phase-nav .phase-telemetry .telem-cell[data-optional] { display: none; }
}
@media (max-width: 1180px) {
  .phase-nav .phase-brand .brand-text { display: none; }
  .phase-nav .phase-telemetry .telem-cell:nth-child(n+3) { display: none; }
}

/* ─── PHASE-BASED SECTION VISIBILITY (v58.78 → v58.370 #A2 — HER İKİ PANEL) ──
 * v58.78: SOL panel (#leftPanel = girdi) faza göre filtrelenir.
 * v58.370 (#A2 progresif açığa-çıkarma): SAĞ panel (#rightPanel = çözüm/çıktı) DE
 * faza göre filtrelenir (aşağıda ayna kurallar) → her faz yalnız kendi panellerini
 * gösterir; boş panel JS'te (_phasePanelHasGroups + ws-phase-no-* sınıfı) komple
 * daraltılır, viewport genişler. (Eski "sağ panel hep görünür" kalıcı-kolon kararı
 * mühendis "ergonomik arayüz, her faz kendi paneli" talebiyle değiştirildi.)
 * KÖK NEDEN (eski kural): yalnız data-phase'i OLMAYAN grubu gizliyordu → etiketli-
 * ama-eşleşmeyen grup (örn area/design) mesh fazında sızıyordu ("poligon mesh'te").
 * FIX (v58.78.1): aktif fazda EŞLEŞMEYEN grupları gizle — default-hide+show
 * specificity savaşına girmeden (tek tip kural). Eşleşen grup default görünür kalır.
 * data-phase~="all" (inspector) gating'de gizlenmez AMA panel daraldığında onunla gider.
 * NOT: legacy !important gizleme (section grubu 1650/16605) daha güçlü → korunur. */
body.drape-app-body[data-phase="mesh"]     #leftPanel .acc-group[data-phase]:not([data-phase~="mesh"]):not([data-phase~="all"])     { display: none; }
body.drape-app-body[data-phase="design"]   #leftPanel .acc-group[data-phase]:not([data-phase~="design"]):not([data-phase~="all"])   { display: none; }
body.drape-app-body[data-phase="section"]  #leftPanel .acc-group[data-phase]:not([data-phase~="section"]):not([data-phase~="all"])  { display: none; }
body.drape-app-body[data-phase="solution"] #leftPanel .acc-group[data-phase]:not([data-phase~="solution"]):not([data-phase~="all"]) { display: none; }
body.drape-app-body[data-phase="report"]   #leftPanel .acc-group[data-phase]:not([data-phase~="report"]):not([data-phase~="all"])   { display: none; }

/* v58.370 (#A2) — SAĞ panel ayna gating (sol ile aynı; 9 faz). Aktif fazda eşleşmeyen sağ grupları gizler. */
body.drape-app-body[data-phase="mesh"]     #rightPanel .acc-group[data-phase]:not([data-phase~="mesh"]):not([data-phase~="all"])     { display: none; }
body.drape-app-body[data-phase="design"]   #rightPanel .acc-group[data-phase]:not([data-phase~="design"]):not([data-phase~="all"])   { display: none; }
body.drape-app-body[data-phase="section"]  #rightPanel .acc-group[data-phase]:not([data-phase~="section"]):not([data-phase~="all"])  { display: none; }
body.drape-app-body[data-phase="solution"] #rightPanel .acc-group[data-phase]:not([data-phase~="solution"]):not([data-phase~="all"]) { display: none; }
body.drape-app-body[data-phase="report"]   #rightPanel .acc-group[data-phase]:not([data-phase~="report"]):not([data-phase~="all"])   { display: none; }
body.drape-app-body[data-phase="jeoloji"]  #rightPanel .acc-group[data-phase]:not([data-phase~="jeoloji"]):not([data-phase~="all"])  { display: none; }
body.drape-app-body[data-phase="yenilme"]  #rightPanel .acc-group[data-phase]:not([data-phase~="yenilme"]):not([data-phase~="all"])  { display: none; }
body.drape-app-body[data-phase="global"]   #rightPanel .acc-group[data-phase]:not([data-phase~="global"]):not([data-phase~="all"])   { display: none; }
body.drape-app-body[data-phase="bariyer"]  #rightPanel .acc-group[data-phase]:not([data-phase~="bariyer"]):not([data-phase~="all"])  { display: none; }

/* v58.370 (#A2) — faz boş-panel daraltma: aktif fazda paneldeki grup yoksa panel komple
 * gizlenir + grid o kolonu bırakır → viewport (orta 1fr) genişler. JS setPhase sınıfı toggler + onResize. */
.workspace.ws-phase-no-left  { grid-template-columns: 1fr var(--right-panel-width); }
.workspace.ws-phase-no-left  > #leftPanel  { display: none !important; }
.workspace.ws-phase-no-right { grid-template-columns: var(--left-panel-width) 1fr; }
.workspace.ws-phase-no-right > #rightPanel { display: none !important; }
.workspace.ws-phase-no-left.ws-phase-no-right { grid-template-columns: 1fr; }

/* ─── PANEL surfaces refined ─────────────────────────────────────────── */
body.drape-app-body .left-panel,
body.drape-app-body .right-panel {
  background: var(--ds-surface);
  border-color: var(--ds-border);
}
body.drape-app-body .acc-group {
  background: transparent;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: 0;
}
body.drape-app-body .acc-header {
  background: transparent;
  border: none;
  padding: var(--ds-s4) var(--ds-s4) var(--ds-s2);
  gap: var(--ds-s3);
  cursor: pointer;
  transition: background 0.15s ease;
}
body.drape-app-body .acc-header:hover {
  background: rgba(var(--phase-accent, 34,211,238), 0.08);   /* v58.576 (S3 cila) — başlık hover'ı faz-rengine (border+num+hover tek-kaynak) */
}
body.drape-app-body .acc-num {
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--ds-amber);
  background: var(--ds-amber-soft);
  border: 1px solid rgba(251,191,36,0.30);
  border-radius: var(--ds-r-sm);
  padding: 2px 6px;
  min-width: 22px;
  text-align: center;
}
body.drape-app-body .acc-title {
  font-family: var(--ds-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ds-text);
  text-transform: uppercase;
}
body.drape-app-body .acc-arrow {
  color: var(--ds-text-muted);
  margin-left: auto;
  font-size: 14px;
  transition: transform 0.2s ease, color 0.15s ease;
}
body.drape-app-body .acc-group.acc-collapsed .acc-arrow {
  transform: rotate(-90deg);
}
body.drape-app-body .acc-body {
  padding: var(--ds-s2) var(--ds-s4) var(--ds-s4);
}

/* ─── Buttons refined ────────────────────────────────────────────────── */
body.drape-app-body .btn-sec,
body.drape-app-body .btn-aof {
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  border-radius: var(--ds-r-md);
  font-family: var(--ds-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s ease;
}
body.drape-app-body .btn-sec:hover:not(:disabled),
body.drape-app-body .btn-aof:hover:not(:disabled) {
  background: var(--ds-surface-2);
  border-color: var(--ds-border-strong);
}
body.drape-app-body .btn-sec:active:not(:disabled),
body.drape-app-body .btn-aof:active:not(:disabled) {
  transform: translateY(1px);
}
body.drape-app-body .btn-sec:disabled,
body.drape-app-body .btn-aof:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
body.drape-app-body .btn-sec.btn-danger,
body.drape-app-body .btn-aof.btn-aof-danger {
  color: var(--ds-rose);
  border-color: rgba(244,63,94,0.25);
}
body.drape-app-body .btn-sec.btn-danger:hover:not(:disabled) {
  background: rgba(244,63,94,0.10);
  border-color: rgba(244,63,94,0.45);
}

/* ─── Calculate button: AMBER PRIMARY ───────────────────────────────── */
body.drape-app-body #updateBtn,
body.drape-app-body #computeAllBtn,
body.drape-app-body .acc-calc-btn {
  background: linear-gradient(180deg, var(--uf-purple), #7e22ce);  /* v58.68: hesap/çıktı = MOR (.btn-primary çıkarıldı → cyan) */
  border: 1px solid var(--uf-purple);
  color: #fff;
  font-family: var(--ds-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--ds-r-md);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.20), 0 2px 8px rgba(168,85,247,0.15);
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s ease;
}
body.drape-app-body #updateBtn:hover,
body.drape-app-body #computeAllBtn:hover {
  background: linear-gradient(180deg, #c084fc, #9333ea);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.30), 0 4px 14px rgba(168,85,247,0.25);
}
body.drape-app-body #updateBtn:active,
body.drape-app-body .btn-primary:active,
body.drape-app-body #computeAllBtn:active {
  transform: translateY(1px);
}

/* ─── Field rows refined ────────────────────────────────────────────── */
body.drape-app-body .field-row {
  background: transparent;
  border: none;
  padding: 6px 0;
  gap: var(--ds-s3);
  display: flex;
  align-items: center;
}
body.drape-app-body .field-label {
  font-family: var(--ds-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  min-width: 80px;
}
body.drape-app-body .field-row input[type="number"],
body.drape-app-body .field-row input[type="text"],
body.drape-app-body .field-row select {
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border-radius: var(--ds-r-sm);
  transition: border-color 0.15s, background 0.15s;
}
body.drape-app-body .field-row input:focus,
body.drape-app-body .field-row select:focus {
  outline: none;
  border-color: var(--ds-amber);
  background: var(--ds-surface-2);
}
body.drape-app-body .field-suffix {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  color: var(--ds-text-dim);
}

/* ─── Info cards refined ────────────────────────────────────────────── */
body.drape-app-body .info-card {
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  padding: var(--ds-s3);
  gap: var(--ds-s2);
}
body.drape-app-body .info-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--ds-border);
}
body.drape-app-body .info-card-row:last-child {
  border-bottom: none;
}
body.drape-app-body .info-card-key {
  font-family: var(--ds-font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ds-text-muted);
  text-transform: uppercase;
}
body.drape-app-body .info-card-val {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
}

/* ─── STATUS BAR (bottom) ────────────────────────────────────────────── */
.drape-status-bar {
  display: flex;
  align-items: center;
  gap: var(--ds-s5);
  background: var(--ds-surface-1);
  border-top: 1px solid var(--ds-border);
  padding: 0 var(--ds-s4);
  min-height: 32px;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ds-text-muted);
  z-index: 40;
}
.drape-status-bar .ds-status-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-s2);
  white-space: nowrap;
}
.drape-status-bar .ds-status-key {
  font-family: var(--ds-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ds-text-dim);
  text-transform: uppercase;
}
.drape-status-bar .ds-status-val {
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}
.drape-status-bar .ds-status-val.accent {
  color: var(--ds-amber);
}
.drape-status-bar .ds-status-val.emerald {
  color: var(--ds-emerald);
}
.drape-status-bar .ds-status-sep {
  width: 1px;
  height: 14px;
  background: var(--ds-border);
}
.drape-status-bar .ds-status-hint {
  margin-left: auto;
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  font-style: italic;
  text-align: right;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drape-status-bar .ds-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--ds-amber-soft);
  border: 1px solid rgba(251,191,36,0.30);
  border-radius: 3px;
  color: var(--ds-amber);
  font-family: var(--ds-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.drape-status-bar .ds-mode-pill.wire { color: var(--ds-cyan); background: rgba(6,182,212,0.10); border-color: rgba(6,182,212,0.30); }
.drape-status-bar .ds-mode-pill.drawing { color: #1a1a1a; background: #f7f3eb; border-color: #d4cdb8; }
.drape-status-bar .ds-mode-pill.photo { color: var(--ds-emerald); background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.30); }

/* ─── Polygon list refined ───────────────────────────────────────────── */
body.drape-app-body .polygon-row {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--ds-border);
  padding: 6px var(--ds-s2);
  border-radius: 0;
  transition: background 0.12s ease;
}
body.drape-app-body .polygon-row:hover {
  background: var(--ds-surface-hover);
}
body.drape-app-body .polygon-row.active {
  background: var(--ds-amber-soft);
  border-color: rgba(251,191,36,0.20);
}
body.drape-app-body .polygon-label {
  font-family: var(--ds-font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ds-text);
}
body.drape-app-body .polygon-status {
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ─── BOM table refined ──────────────────────────────────────────────── */
body.drape-app-body table {
  font-family: var(--ds-font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
body.drape-app-body table th {
  font-family: var(--ds-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  background: var(--ds-surface-1);
  border-bottom: 1px solid var(--ds-border);
  padding: 8px 10px;
  text-align: left;
}
body.drape-app-body table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-text);
}
body.drape-app-body table td.qty {
  text-align: right;
  font-weight: 500;
}
body.drape-app-body table tr:hover td {
  background: var(--ds-surface-hover);
}

/* ─── Mode pill for system mode (PMP/AMP) ────────────────────────────── */
body.drape-app-body .drape-mode-pill {
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-1);
  border-radius: var(--ds-r-md);
  padding: 8px 14px;
  font-family: var(--ds-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s ease;
}
body.drape-app-body .drape-mode-pill:has(input:checked) {
  background: var(--ds-amber-soft);
  border-color: var(--ds-amber);
  color: var(--ds-amber);
}

/* ─── Drawing mode background override ───────────────────────────────── */
body.drape-app-body[data-render-mode="drawing"] .drape-viewer-canvas,
body.drape-app-body[data-render-mode="drawing"] canvas {
  /* Three.js canvas background set by scene.background, this is a fallback */
  background: #f7f3eb;
}

/* ─── Polish: render mode toggle position fix (account for phase nav) ─ */
.render-mode-toggle {
  top: 18px;
}

/* v57.17 — Eski .phase-brand::before wedge accent kaldırıldı.
 * Yeni tasarımda .brand-mark DIV monogram olarak gradient + clip-path
 * ile inline render ediliyor (üstte phase-nav redesign bloğunda). */

/* ─── v56.3 — Active Mesh Designer (AMD) panel ──────────────────────────
 * Right-panel accordion: input form + 5 proof solver + summary.
 * Clean-room implementation (not RUVOLUM trademark) for active flexible
 * mesh slope stabilization checks. */

.acc-amd {
  border-top: 2px solid rgba(168, 85, 247, 0.45);
}
.acc-amd .acc-header {
  background: linear-gradient(180deg,
    rgba(168, 85, 247, 0.14),
    rgba(126, 34, 206, 0.06));
}
.acc-amd .acc-num {
  background: rgba(168, 85, 247, 0.30);
  color: #f3e8ff;
}

.amd-hint {
  font-size: 10.5px;
  color: rgba(148, 163, 184, 0.85);
  line-height: 1.45;
  margin: 0 0 8px 0;
  padding: 6px 9px;
  background: rgba(15, 23, 42, 0.45);
  border-left: 2px solid rgba(168, 85, 247, 0.55);
  border-radius: 0 4px 4px 0;
}

.amd-section-title {
  margin: 10px 0 4px 0;
  font-size: 9.5px !important;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: rgba(168, 85, 247, 0.85);
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.amd-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 6px;
  margin-bottom: 4px;
}

/* v58.74 #218 — AMD default-collapse MODÜLLERİ (jeoloji · malzeme · geometri-ileri).
   Girilmeyen defaultlar katlı; özet güncel değerleri gösterir; tıkla → aç + override.
   Relocate-ready: data-amd-group ile bütün olarak ileride taşınabilir (Jeoloji tab vb.). */
.amd-collapse {
  margin: 5px 0;
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 6px;
  background: rgba(15,23,42,0.28);
}
.amd-collapse[open] { border-color: rgba(6,182,212,0.30); background: rgba(15,23,42,0.42); }
.amd-collapse > summary.amd-collapse-sum {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; cursor: pointer; list-style: none; user-select: none; border-radius: 6px;
}
.amd-collapse-sum::-webkit-details-marker { display: none; }
.amd-collapse-sum::before {
  content: '▸'; font-size: 9px; color: var(--tk-acc-primary, var(--tk-acc-primary));
  transition: transform 0.15s ease; flex: 0 0 auto;
}
.amd-collapse[open] > .amd-collapse-sum::before { transform: rotate(90deg); }
.amd-collapse-name {
  flex: 0 0 auto; font-weight: 700; font-size: 9.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: #cbd5e1;
}
.amd-collapse-vals {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; color: #64748b;
  font-variant-numeric: tabular-nums; text-align: right;
}
.amd-collapse[open] > .amd-collapse-sum .amd-collapse-vals { opacity: 0.45; }
.amd-collapse-sum:hover { background: rgba(6,182,212,0.07); }
/* v58.414 — Hat etüdü (#scanColl) parametre number-input'ları STİLSİZDİ → tarayıcı default beyaz/14px + değer taşması.
 * Dark-tema + 10.5px (değerler sığar) + spinner gizle. KAPSAM yalnız #scanColl (.scan-c text hücreleri + pip-* etkilenmez). */
#scanColl input[type="number"] {
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(148,163,184,0.30);
  color: #e5e7eb;
  border-radius: 3px;
  font: 10.5px ui-monospace, monospace;
  padding: 1px 4px;
  height: 19px;
  vertical-align: middle;
  box-sizing: border-box;
}
#scanColl input[type="number"]:focus { outline: none; border-color: rgba(6,182,212,0.6); }
#scanColl input[type="number"]::-webkit-outer-spin-button,
#scanColl input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amd-collapse > .amd-input-grid,
.amd-collapse > .amd-rust-row,
.amd-collapse > .amd-section-title,
.amd-collapse > .amd-grout-readout { margin-left: 8px; margin-right: 8px; }
.amd-collapse > .amd-input-grid:last-child,
.amd-collapse > .amd-grout-readout:last-child { margin-bottom: 7px; }

.amd-field {
  display: grid;
  grid-template-columns: 22px 1fr 38px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 4px;
  row-gap: 1px;
  padding: 3px 6px 4px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 4px;
  transition: border-color 0.15s ease;
  cursor: help;
}
/* v57.65 — Engineer L99: açıklama metni her input'un altında, küçük dimmed.
 * Hover'da title attribute zengin teknik detay verir. */
.amd-field-desc {
  grid-column: 1 / -1;
  font-size: 9px;
  color: rgba(148, 163, 184, 0.65);
  font-family: 'Archivo', system-ui, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  margin-top: 1px;
  font-style: italic;
}
.amd-field:hover .amd-field-desc,
.amd-field:focus-within .amd-field-desc {
  color: rgba(245, 158, 11, 0.85);
}
.amd-field:focus-within {
  border-color: rgba(168, 85, 247, 0.65);
  background: rgba(15, 23, 42, 0.75);
}
.amd-field .amd-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.95);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-align: center;
}
.amd-field input[type="number"] {
  width: 100%;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(148, 163, 184, 0.20);
  color: #fde68a;
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
  -moz-appearance: textfield;
}
.amd-field input[type="number"]::-webkit-outer-spin-button,
.amd-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.amd-field .amd-unit {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.65);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-align: right;
  letter-spacing: 0.02em;
}

.amd-sys-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.amd-sys-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.85);
  text-align: right;
  letter-spacing: 0.02em;
}
.amd-select {
  width: 100%;
  padding: 4px 6px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: rgba(226, 232, 240, 0.95);
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.amd-select:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.70);
}
.amd-sys-spec {
  padding: 4px 9px;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.80);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(15, 23, 42, 0.30);
  border-left: 2px solid rgba(168, 85, 247, 0.40);
  margin: 2px 0 4px 84px;
  border-radius: 0 3px 3px 0;
}
.amd-sys-spec b { color: #c4b5fd; }

.amd-rust-row {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  margin: 6px 0;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 4px;
  font-size: 10.5px;
  color: rgba(226, 232, 240, 0.92);
  cursor: pointer;
}
.amd-rust-row input[type="checkbox"] {
  accent-color: rgba(168, 85, 247, 0.85);
}

.amd-solve-btn {
  margin-top: 10px !important;
  background: linear-gradient(180deg, var(--uf-purple), #7e22ce) !important;
  color: white !important;
  border-color: var(--uf-purple) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35);
  transition: all 0.15s ease;
}
.amd-solve-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #c084fc, #9333ea) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.45);
}
.amd-solve-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.amd-results {
  margin-top: 10px;
  padding: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 5px;
}

/* ═══════════════════════════════════════════════════════════════════
 * v57.85 — AMD WORKFLOW-FIRST REDESIGN
 *
 * Engineer L99 IQ200: "iş akışa göre tekrar değerlendir — polgonlar
 * asagıda vs tuslar anlasılmıyor". Çözüm:
 *   (a) Scope HUD: aktif yamaç + vital chips, sticky panel başı.
 *   (b) Step Nav: 5-aşama chip; tıkla → scroll-jump, progress mark.
 *   (c) Action chevron: hesap sonrası "Uygula"ya görsel akış.
 *
 * Aesthetic: engineering console — violet accent + mono numerals +
 * subtle backdrop blur + glow on active chip.
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── SCOPE HUD ─────────────────────────────────────────────────── */
.amd-scope-hud {
  position: sticky;
  top: -1px; /* küçük negatif top = backdrop blur kenar artefact'ını kapatır */
  z-index: 6;
  /* acc-body padding 7px/8px → kenarlara taşma için negatif margin */
  margin: -7px -8px 8px;
  padding: 9px 10px 8px;
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.96) 0%,
    rgba(30, 18, 52, 0.92) 100%);
  border-bottom: 1px solid rgba(168, 85, 247, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.amd-scope-bar {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 8px;
}

.amd-scope-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: radial-gradient(circle at 35% 30%,
    rgba(192, 132, 252, 0.45),
    rgba(126, 34, 206, 0.22) 70%);
  border: 1px solid rgba(168, 85, 247, 0.55);
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(168, 85, 247, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.amd-scope-meta {
  min-width: 0;
}

.amd-scope-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(192, 132, 252, 0.88);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1;
}

.amd-scope-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(241, 245, 249, 0.97);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amd-scope-name.is-empty {
  color: rgba(148, 163, 184, 0.55);
  font-weight: 500;
  font-style: italic;
}

.amd-scope-vitals {
  display: inline-flex;
  gap: 4px;
}

.amd-scope-vital {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px 3px 5px;
  font-size: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 3px;
  cursor: help;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.amd-scope-vital .amd-vital-key {
  color: rgba(192, 132, 252, 0.88);
  font-weight: 700;
  font-size: 10.5px;
}
.amd-scope-vital .amd-vital-val {
  color: #fde68a;
  font-weight: 600;
  min-width: 24px;
  text-align: right;
}
.amd-scope-vital.is-set {
  border-color: rgba(168, 85, 247, 0.40);
  background: rgba(168, 85, 247, 0.10);
}
.amd-scope-vital.is-empty .amd-vital-val {
  color: rgba(148, 163, 184, 0.55);
}

.amd-scope-switch {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 5px;
  color: rgba(241, 245, 249, 0.85);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}
.amd-scope-switch:hover {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(168, 85, 247, 0.70);
  color: #f3e8ff;
}
.amd-scope-switch[aria-expanded="true"] {
  background: rgba(168, 85, 247, 0.32);
  border-color: rgba(168, 85, 247, 0.90);
  transform: rotate(90deg);
}
.amd-scope-switch-ico {
  display: block;
  line-height: 1;
  font-weight: 700;
}

.amd-scope-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(148, 163, 184, 0.20);
  max-height: 140px;
  overflow-y: auto;
}
.amd-scope-picker[hidden] { display: none; }

.amd-scope-pick-item {
  display: block;
  padding: 5px 7px 6px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 4px;
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  text-align: left;
}
.amd-scope-pick-item:hover {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.50);
  color: #f5f3ff;
}
.amd-scope-pick-item.is-active {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.28), rgba(126, 34, 206, 0.16));
  border-color: rgba(168, 85, 247, 0.85);
  color: #f3e8ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.amd-scope-pick-item .amd-pick-name {
  display: block;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amd-scope-pick-item .amd-pick-meta {
  display: block;
  font-size: 9px;
  color: rgba(148, 163, 184, 0.70);
  margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.amd-scope-pick-item.has-solution .amd-pick-name::before {
  content: "✓ ";
  color: rgba(34, 197, 94, 0.90);
  font-weight: 800;
}
.amd-scope-pick-item.no-section .amd-pick-name::before {
  content: "○ ";
  color: rgba(245, 158, 11, 0.75);
  font-weight: 800;
}

.amd-scope-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.55);
  font-style: italic;
  padding: 8px 6px;
}

/* ─── STEP NAV ──────────────────────────────────────────────────── */
.amd-step-nav {
  display: grid;
  grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
  align-items: center;
  margin: 0 0 10px;
  padding: 5px 4px;
  /* v57.93 — Scope HUD altında sticky → AMD acc-body scroll edilince
   * step chips kaybolmasın. Engineer step navigation her zaman erişilebilir.
   * top: ~52px = scope HUD yüksekliği. z-index 5 < scope HUD (6). */
  position: sticky;
  top: 52px;
  z-index: 5;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 5px;
}

.amd-step-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 2px;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  min-height: 38px;
  color: rgba(203, 213, 225, 0.85);
}
.amd-step-chip:hover:not(.is-locked):not(:disabled) {
  background: rgba(168, 85, 247, 0.10);
  border-color: rgba(168, 85, 247, 0.45);
  color: rgba(241, 245, 249, 0.98);
}
.amd-step-chip.is-active {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.30), rgba(126, 34, 206, 0.16));
  border-color: rgba(168, 85, 247, 0.88);
  color: #f5f3ff;
  box-shadow:
    0 0 10px rgba(168, 85, 247, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.amd-step-chip.is-done {
  border-color: rgba(34, 197, 94, 0.55);
  color: rgba(220, 252, 231, 0.95);
  background: rgba(22, 163, 74, 0.08);
}
.amd-step-chip.is-done .amd-step-mark::after {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 8.5px;
  font-weight: 800;
  color: rgba(34, 197, 94, 0.95);
  text-shadow: 0 0 4px rgba(34, 197, 94, 0.45);
}
.amd-step-chip.is-armed {
  border-color: rgba(245, 158, 11, 0.65);
  color: rgba(254, 243, 199, 0.95);
  background: rgba(245, 158, 11, 0.08);
  animation: amdStepPulse 1.8s ease-in-out infinite;
}
@keyframes amdStepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
  50%      { box-shadow: 0 0 8px 1px rgba(245, 158, 11, 0.35); }
}
.amd-step-chip.is-locked,
.amd-step-chip:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.amd-step-num {
  font-size: 11.5px;
  font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
  line-height: 1;
}
.amd-step-text {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  line-height: 1;
  margin-top: 2px;
  font-family: 'Archivo', system-ui, sans-serif;
}

.amd-step-rail {
  height: 1.5px;
  background: linear-gradient(90deg,
    rgba(148, 163, 184, 0) 0%,
    rgba(168, 85, 247, 0.35) 50%,
    rgba(148, 163, 184, 0) 100%);
  align-self: center;
  border-radius: 1px;
}
.amd-step-rail.is-active {
  background: linear-gradient(90deg,
    rgba(168, 85, 247, 0.45) 0%,
    rgba(192, 132, 252, 0.85) 50%,
    rgba(168, 85, 247, 0.45) 100%);
  box-shadow: 0 0 4px rgba(168, 85, 247, 0.45);
}

/* ─── HESAPLA / UYGULA ACTION ROW ───────────────────────────────── */
.amd-solve-row {
  margin-top: 10px;
}
.amd-solve-btn .amd-solve-ico {
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
}
.amd-solve-btn .amd-solve-text {
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.amd-solve-btn .amd-solve-chevron {
  margin-left: 6px;
  opacity: 0;
  font-weight: 800;
  font-size: 13px;
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: inline-block;
  transform: translateX(-3px);
  vertical-align: middle;
}
.amd-solve-btn.is-armed .amd-solve-chevron {
  opacity: 0.95;
  transform: translateX(2px);
}

/* ─── v58.83 Aşama-3: ÇÖZÜM apply DURUMU kartı (görünür oto-apply + Yeniden Uygula).
   Cross-section çözümü terrain'e OTO uygulanır (_xs_applyResultToPolygon); bu kart
   "sessiz-oto"yu GÖRÜNÜR yapar. Renkler TEK-KAYNAK token (Kural 10): emerald=uygulandı,
   amber=beklemede, dim=yok. ─── */
.amd-apply-status {
  display: flex; align-items: center; gap: 8px;
  margin: 9px 0 4px; padding: 7px 10px;
  font-size: 10.5px; line-height: 1.3;
  border: 1px solid var(--ds-border); border-radius: 6px;
}
.amd-apply-status-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tk-text-dim); transition: background 0.2s ease, box-shadow 0.2s ease; }
.amd-apply-status-text { flex: 1 1 auto; color: var(--tk-text-muted); }
.amd-apply-status.is-applied .amd-apply-status-dot { background: var(--uf-emerald); box-shadow: 0 0 6px var(--uf-emerald); }
.amd-apply-status.is-applied .amd-apply-status-text { color: var(--uf-emerald); }
.amd-apply-status.is-pending .amd-apply-status-dot { background: var(--ds-amber); }
.amd-apply-status.is-pending .amd-apply-status-text { color: var(--ds-amber); }
.amd-apply-status .amd-apply-reapply { flex: 0 0 auto; white-space: nowrap; }

/* Scroll target offset (sticky scope HUD + step nav take ~92px) */
.acc-amd [data-amd-anchor] {
  scroll-margin-top: 96px;
}


.amd-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.amd-summary.pass {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.20), rgba(22, 163, 74, 0.12));
  border: 1px solid rgba(34, 197, 94, 0.55);
  color: #dcfce7;
}
.amd-summary.fail {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.20), rgba(220, 38, 38, 0.12));
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #fee2e2;
}
.amd-summary-icon { font-size: 16px; }
.amd-summary-meta {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
}

.amd-proof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-bottom: 8px;
}
.amd-proof-table thead th {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.30);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(148, 163, 184, 0.65);
  text-transform: uppercase;
}
.amd-proof-table tbody tr {
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}
.amd-proof-table tbody tr:last-child { border-bottom: none; }
.amd-proof-table td {
  padding: 4px 6px;
  vertical-align: middle;
}
.amd-proof-table td.col-code {
  font-weight: 700;
  color: rgba(226, 232, 240, 0.95);
}
.amd-proof-table td.col-title {
  font-size: 10px;
  color: rgba(203, 213, 225, 0.85);
  font-family: inherit;
}
.amd-proof-table td.col-num {
  text-align: right;
  color: #fde68a;
  font-variant-numeric: tabular-nums;
}
.amd-proof-table td.col-util {
  text-align: right;
  font-weight: 700;
}
.amd-proof-table td.col-pass {
  text-align: center;
  font-size: 12px;
}
.amd-proof-table tr.proof-pass td.col-pass { color: #22c55e; }
.amd-proof-table tr.proof-fail td.col-pass { color: #ef4444; }
.amd-proof-table tr.proof-fail {
  background: rgba(239, 68, 68, 0.08);
}
.amd-proof-table tr.proof-governing {
  background: rgba(251, 191, 36, 0.10);
  border-left: 2px solid rgba(251, 191, 36, 0.65);
}
.amd-proof-table tr.proof-governing td.col-code::after {
  content: ' ★';
  color: var(--ds-amber);
}

/* Utilization bar inside col-util */
.amd-util-cell {
  position: relative;
  min-width: 60px;
}
.amd-util-bar {
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(90deg,
    rgba(34, 197, 94, 0.18) 0%,
    rgba(34, 197, 94, 0.18) calc(var(--u) * 100%),
    transparent calc(var(--u) * 100%));
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}
.amd-util-bar.over {
  background: linear-gradient(90deg,
    rgba(239, 68, 68, 0.18) 0%,
    rgba(239, 68, 68, 0.30) 100%);
}
.amd-util-text {
  position: relative;
  z-index: 1;
  padding-right: 4px;
}

.amd-intermediate {
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  font-size: 9.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(148, 163, 184, 0.70);
  line-height: 1.55;
}
.amd-intermediate b { color: rgba(226, 232, 240, 0.85); }

.amd-disclaimer {
  margin: 8px 0 0 0;
  font-size: 9.5px;
  color: rgba(251, 191, 36, 0.85);
  font-style: italic;
  line-height: 1.4;
}

.amd-error {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.55);
  border-radius: 4px;
  color: #fecaca;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ════════════════════════════════════════════════════════════════════════
 * v57.18 — Section A-A: Manuel Chord Pick (madde 4)
 * Engineer L99 IQ200: anchor yoksa detay görünümde manuel crest+toe seç.
 * Pick mode = crosshair cursor + amber pulse ring around drawing area.
 * ──────────────────────────────────────────────────────────────────── */

.section-modal-drawing.chord-pick-active {
  cursor: crosshair;
  position: relative;
  outline: 2px solid rgba(245, 158, 11, 0.7);
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 1px rgba(245, 158, 11, 0.25),
    inset 0 0 60px rgba(245, 158, 11, 0.08);
}
.section-modal-drawing.chord-pick-active::before {
  content: '🎯 CREST/TOE PICK MODE — ESC ile iptal';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: linear-gradient(180deg, var(--ds-amber) 0%, #f59e0b 100%);
  color: #451a03;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 4px;
  box-shadow:
    0 4px 14px rgba(245, 158, 11, 0.45),
    0 0 0 1px rgba(180, 83, 9, 0.7);
  animation: ds-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* Chord-pin manual override: amber halo styling already inline in SVG.
 * Pin classes added for selectability + tooltip target. */
.section-modal-drawing .sec-chord-pin {
  pointer-events: none;
}
.section-modal-drawing .sec-chord-crest,
.section-modal-drawing .sec-chord-toe {
  /* SVG attributes set inline — class kept for QA selectors */
}

/* Section modal header buttons: emphasize amber state when active */
#sectionChordPickBtn.btn-primary {
  background: linear-gradient(180deg, var(--ds-amber) 0%, #f59e0b 100%) !important;
  color: #451a03 !important;
  border-color: #92400e !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: ds-pulse 1.6s ease-in-out infinite;
}
#sectionChordResetBtn {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fde68a;
}
#sectionChordResetBtn:hover {
  background: rgba(245, 158, 11, 0.18);
  color: #fef3c7;
}

/* ════════════════════════════════════════════════════════════════════════
 * v57.21 — Silhouette style + density control (ÇİZİM mode overlay)
 * Engineer L99 IQ200: "ekran küçüldükçe yoğunluk azalsın, print için seçilebilir"
 * ──────────────────────────────────────────────────────────────────── */
.drape-silhouette-ctrl {
  position: absolute;
  bottom: 200px;
  /* v57.92 — Title block ile aynı pattern: sağ panel'in solunda kalmalı.
   * Önceki right:18px window'un sağ kenarından 18px = sağ panel altında
   * görsel overlap + click trap. */
  right: calc(var(--right-panel-width, 340px) + 18px);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #1a1a1a;
  border-radius: 4px;
  padding: 6px 8px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  /* v57.92 — Engineer L99 bug fix: parent .drape-tech-overlay has
   * pointer-events:none (so 3D viewport stays interactive). Silüet panel
   * child kendi pointer-events:auto açmıyordu → click & hover AMD inputs
   * underneath'e geçiyor, native title tooltipleri tetikleniyordu.
   * North arrow / scale bar / title block child'ları zaten auto idi —
   * sadece silhouette ctrl unutulmuştu. */
  pointer-events: auto;
}
.drape-silh-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drape-silh-label {
  width: 52px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #475569;
  font-size: 9px;
}
.drape-silh-seg {
  display: flex;
  flex: 1 1 0;
  border: 1px solid #94a3b8;
  border-radius: 3px;
  overflow: hidden;
}
.drape-silh-seg .silh-btn {
  flex: 1 1 0;
  background: #f8fafc;
  border: none;
  border-right: 1px solid #cbd5e1;
  color: #475569;
  padding: 3px 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: 0.12s;
}
.drape-silh-seg .silh-btn:last-child { border-right: none; }
.drape-silh-seg .silh-btn:hover {
  background: #e2e8f0;
  color: #1a1a1a;
}
.drape-silh-seg .silh-btn.active {
  background: #1a1a1a;
  color: #ffffff;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════
 * v57.22 — Persistent Phase Progress Card
 * Engineer L99 IQ200: her phase'in checklist'i, ✓/⏳/○ status + tıkla → scroll.
 * ──────────────────────────────────────────────────────────────────── */
.phase-progress-card {
  margin: var(--ds-s2, 8px) var(--ds-s3, 12px) var(--ds-s3, 12px);
  padding: var(--ds-s2, 8px) var(--ds-s3, 12px) var(--ds-s2, 8px);
  background: linear-gradient(180deg, rgba(28, 33, 40, 0.95) 0%, rgba(20, 23, 28, 0.95) 100%);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 6px;
  font-family: 'Archivo', system-ui, sans-serif;
  position: relative;
  overflow: hidden;
  /* v57.22.1 — Engineer "çizim ekranı geniş kalsın": kompakt vertical footprint */
}
/* v57.22.1 — Collapsed state: sadece header + progress bar, body gizli */
.phase-progress-card[data-collapsed="1"] .ppc-collapsible-body {
  display: none;
}
.phase-progress-card[data-collapsed="1"] .ppc-progress-bar {
  margin-bottom: 0;
}
.phase-progress-card .ppc-head {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
  margin: -8px -12px 6px;
  padding: 8px 12px;
}
.phase-progress-card .ppc-head:hover {
  background: rgba(255, 255, 255, 0.03);
}
.phase-progress-card .ppc-chevron {
  display: inline-block;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.6);
  margin-left: 4px;
  transition: transform 0.18s ease;
}
.phase-progress-card[data-collapsed="1"] .ppc-chevron {
  transform: rotate(-90deg);
}
.phase-progress-card[data-complete="1"] {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.12), 0 0 14px rgba(16, 185, 129, 0.15);
}

.phase-progress-card .ppc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.phase-progress-card .ppc-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-amber);
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 4px;
}
.phase-progress-card[data-complete="1"] .ppc-icon {
  color: var(--uf-emerald);
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.55);
}
.phase-progress-card .ppc-title {
  flex: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #f5f7fa;
  text-transform: uppercase;
}
.phase-progress-card .ppc-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ds-amber);
  font-variant-numeric: tabular-nums;
}

/* v57.23 — Focus Mode toggle */
.phase-progress-card .ppc-focus-toggle {
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--ds-amber);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  margin-left: 4px;
  transition: 0.15s;
}
.phase-progress-card .ppc-focus-toggle:hover {
  background: rgba(251, 191, 36, 0.18);
  color: #fef3c7;
}
.phase-progress-card .ppc-focus-toggle.focus-on {
  background: linear-gradient(180deg, var(--ds-amber) 0%, #f59e0b 100%);
  color: #451a03;
  border-color: #b45309;
}
.phase-progress-card .ppc-focus-toggle:not(.focus-on) {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.35);
}

/* v57.23 — Active step accordion (focus mode görsel vurgu) */
body.drape-app-body .acc-group[data-focus-active="1"] {
  border-left: 2px solid var(--ds-amber);
  background: rgba(251, 191, 36, 0.025);
}
body.drape-app-body .acc-group[data-focus-active="1"] .acc-num {
  background: rgba(251, 191, 36, 0.20);
  border-color: rgba(251, 191, 36, 0.55);
}

/* ════════════════════════════════════════════════════════════════════════
 * v57.24 — Slope Geology Dialog (jeoloji ata modal)
 * ──────────────────────────────────────────────────────────────────── */
.slope-geo-dialog {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.slope-geo-dialog .sgd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.slope-geo-dialog .sgd-content {
  position: relative;
  background: linear-gradient(180deg, #1c2128 0%, #14171c 100%);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 8px;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
  width: 440px;
  max-width: 92vw;
  color: #f5f7fa;
  font-family: 'Archivo', system-ui, sans-serif;
}
.slope-geo-dialog .sgd-head {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.slope-geo-dialog .sgd-title {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fde68a;
}
.slope-geo-dialog .sgd-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 16px;
}
.slope-geo-dialog .sgd-close:hover { color: #f5f7fa; }
.slope-geo-dialog .sgd-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.slope-geo-dialog .sgd-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slope-geo-dialog .sgd-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.slope-geo-dialog .sgd-select {
  background: #14171c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #f5f7fa;
  padding: 7px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.slope-geo-dialog .sgd-select:focus {
  outline: none;
  border-color: var(--ds-amber);
}
.slope-geo-dialog .sgd-num-row {
  flex-direction: row;
  gap: 10px;
}
.slope-geo-dialog .sgd-num {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.slope-geo-dialog .sgd-num span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.slope-geo-dialog .sgd-num input {
  background: #14171c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #f5f7fa;
  padding: 6px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.slope-geo-dialog .sgd-num input:focus {
  outline: none;
  border-color: var(--ds-amber);
}
.slope-geo-dialog .sgd-hint {
  font-size: 10.5px;
  color: #6b7785;
  font-style: italic;
  line-height: 1.4;
}
.slope-geo-dialog .sgd-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.slope-geo-dialog .sgd-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  border-radius: 4px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}
.slope-geo-dialog .sgd-btn:hover {
  background: rgba(255, 255, 255, 0.10);
}
.slope-geo-dialog .sgd-btn.sgd-ok {
  background: linear-gradient(180deg, var(--uf-emerald) 0%, #059669 100%);
  border-color: #047857;
  color: #022c22;
  font-weight: 700;
}
.slope-geo-dialog .sgd-btn.sgd-ok:hover {
  background: linear-gradient(180deg, #059669 0%, #047857 100%);
  color: #ffffff;
}

.phase-progress-card[data-complete="1"] .ppc-pct { color: var(--uf-emerald); }

.phase-progress-card .ppc-progress-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}
.phase-progress-card .ppc-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ds-amber) 0%, #f59e0b 100%);
  transition: width 0.4s ease;
}
.phase-progress-card[data-complete="1"] .ppc-progress-fill {
  background: linear-gradient(90deg, var(--uf-emerald) 0%, #059669 100%);
}

.phase-progress-card .ppc-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.phase-progress-card .ppc-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
  font-size: 11px;
  line-height: 1.3;
}
.phase-progress-card .ppc-item:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}
.phase-progress-card .ppc-glyph {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.phase-progress-card .ppc-label {
  flex: 1;
  color: #cbd5e1;
  letter-spacing: 0.01em;
}
.phase-progress-card .ppc-opt-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.55);
  background: rgba(148, 163, 184, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* v57.29.24 — Inline action button (e.g., "✓ OK" for edge review).
 * Önek: chip status 'inprogress' iken engineer'a tek tıkla onay imkanı. */
.phase-progress-card .ppc-action {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #fde68a;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.45);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  letter-spacing: 0.04em;
}
.phase-progress-card .ppc-action:hover {
  background: rgba(251, 191, 36, 0.30);
  border-color: rgba(251, 191, 36, 0.75);
}
.phase-progress-card .ppc-action:active {
  transform: scale(0.96);
}

.phase-progress-card .ppc-done .ppc-glyph {
  color: var(--uf-emerald);
}
.phase-progress-card .ppc-done .ppc-label {
  color: #6ee7b7;
  text-decoration: line-through;
  text-decoration-color: rgba(16, 185, 129, 0.45);
}
.phase-progress-card .ppc-inprogress .ppc-glyph {
  color: var(--ds-amber);
  animation: ds-pulse 1.6s ease-in-out infinite;
}
.phase-progress-card .ppc-inprogress .ppc-label {
  color: #fde68a;
  font-weight: 600;
}
.phase-progress-card .ppc-pending .ppc-glyph {
  color: rgba(148, 163, 184, 0.55);
}
.phase-progress-card .ppc-pending .ppc-label {
  color: rgba(203, 213, 225, 0.65);
}
.phase-progress-card .ppc-optional .ppc-label {
  font-style: italic;
}

.phase-progress-card .ppc-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(16, 185, 129, 0.32);
  display: flex;
  justify-content: flex-end;
}
.phase-progress-card .ppc-next-btn {
  background: linear-gradient(180deg, var(--uf-emerald) 0%, #059669 100%);
  color: #022c22;
  border: 1px solid #047857;
  border-radius: 4px;
  padding: 5px 12px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.15s;
}
.phase-progress-card .ppc-next-btn:hover {
  background: linear-gradient(180deg, #059669 0%, #047857 100%);
  color: #ffffff;
  transform: translateX(2px);
}

/* Scroll-target highlight pulse */
.ppc-highlight-target {
  animation: ppc-target-pulse 1.8s ease-out !important;
  position: relative;
}
@keyframes ppc-target-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.45); }
  60%  { box-shadow: 0 0 0 12px rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}



/* ════════════════════════════════════════════════════════════════════════
 * v57.19 — H Grid Manual Edit Phase A (Snap panel)
 * Engineer "bağlamak gerektiği zaman" — H snap mode'da büyük handle'lar,
 * panel polygon listin altında, strike panel ile aynı estetik dilde.
 * ──────────────────────────────────────────────────────────────────── */

.poly-hsnap-panel {
  margin: 6px 0 4px;
  padding: 8px 10px 7px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.45));
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 5px;
  font-size: 11.5px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.poly-hsnap-panel.is-snap-active {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.18),
    0 0 22px rgba(251, 191, 36, 0.22);
}
.poly-hsnap-panel.has-override {
  border-color: rgba(251, 191, 36, 0.45);
}
.poly-hsnap-panel .hsp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.poly-hsnap-panel .hsp-icon { font-size: 13px; }
.poly-hsnap-panel .hsp-title {
  flex: 1 1 0;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fde68a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}
.poly-hsnap-panel .hsp-reset {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: rgba(203, 213, 225, 0.85);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.14s;
}
.poly-hsnap-panel .hsp-reset:hover {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fef3c7;
}
/* v57.28.7 — Reset button always visible. Amber when override exists. */
.poly-hsnap-panel .hsp-reset.hsp-reset-active {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.65);
  color: #fde68a;
  font-weight: 700;
}
.poly-hsnap-panel .hsp-reset.hsp-reset-active:hover {
  background: rgba(251, 191, 36, 0.28);
  color: #fef3c7;
}
.poly-hsnap-panel .hsp-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.poly-hsnap-panel .hsp-row-2 .hsp-toggle {
  flex: 1 1 50%;
}
/* v57.19.7 — Çiz butonu (snap'tan ayrı görsel) */
.poly-hsnap-panel .hsp-draw-btn {
  background: rgba(168, 85, 247, 0.10);
  border-color: rgba(168, 85, 247, 0.45);
  color: #e9d5ff;
}
.poly-hsnap-panel .hsp-draw-btn:hover {
  background: rgba(168, 85, 247, 0.18);
  color: #faf5ff;
}
.poly-hsnap-panel .hsp-draw-btn.hsp-active {
  background: linear-gradient(180deg, var(--uf-purple) 0%, #7e22ce 100%);
  border-color: #581c87;
  color: #faf5ff;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.42);
}
.poly-hsnap-panel .hsp-draw-btn.hsp-has-from {
  background: linear-gradient(180deg, #f97316 0%, #c2410c 100%);
  border-color: #7c2d12;
  color: #ffedd5;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.45);
}
.poly-hsnap-panel .hsp-toggle:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════
 * v57.20 — Çizim mode legend + polygon rename + name label
 * Engineer L99 IQ200: teknik çizim sembol açıklaması, polygon adlandırma.
 * ──────────────────────────────────────────────────────────────────── */

/* Polygon list rename button */
.polygon-rename {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 3px;
  color: rgba(203, 213, 225, 0.7);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  margin-left: 2px;
  transition: 0.14s;
}
.polygon-rename:hover {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.45);
  color: #fde68a;
}
.polygon-label .polygon-label-id {
  font-size: 9px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.62);
  margin-left: 4px;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Legend overlay (çizim mode, sağ-alt köşe) */
.drape-legend {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: #ffffff;
  border: 1.2px solid #1a1a1a;
  border-radius: 3px;
  padding: 10px 12px 9px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: #1a1a1a;
  z-index: 60;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.drape-legend-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid #1a1a1a;
  color: #1a1a1a;
}
.drape-legend-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 0;
}
.drape-legend-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.drape-legend-item svg {
  display: block;
}
.drape-legend-item span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poly-hsnap-panel .hsp-toggle {
  flex: 1 1 0;
  background: rgba(6, 182, 212, 0.10);
  border: 1px solid rgba(6, 182, 212, 0.45);
  color: #a5f3fc;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.18s;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.poly-hsnap-panel .hsp-toggle:hover {
  background: rgba(6, 182, 212, 0.18);
  color: #cffafe;
}
/* v57.19.3 — Engineer feedback: "snap tuşu niye yanıp sönüyor".
 * Pulse animasyonu kaldırıldı — aktif/from durumu renkten zaten belli. */
.poly-hsnap-panel .hsp-toggle.hsp-active {
  background: linear-gradient(180deg, var(--ds-amber) 0%, #f59e0b 100%);
  border-color: #b45309;
  color: #451a03;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.32);
}
.poly-hsnap-panel .hsp-toggle.hsp-has-from {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border-color: #7f1d1d;
  color: #fee2e2;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.40);
}
.poly-hsnap-panel .hsp-toggle small {
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.04em;
}
/* v57.19.5 — Summary line (default visible, kompakt özet) */
.poly-hsnap-panel .hsp-z-summary-line {
  font-size: 10.5px;
  color: rgba(203, 213, 225, 0.78);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin: 2px 0 4px;
  letter-spacing: 0.02em;
  font-style: italic;
}
.poly-hsnap-panel .hsp-z-summary-line.hsp-has-override {
  color: #fde68a;
  font-style: normal;
}
.poly-hsnap-panel .hsp-z-summary-line b {
  color: var(--ds-amber);
  font-weight: 700;
}
.poly-hsnap-panel .hsp-z-summary-line .hsp-z-range {
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
.poly-hsnap-panel .hsp-z-summary-line small {
  color: rgba(148, 163, 184, 0.55);
  font-style: italic;
}

/* v57.29 — Engineering metric badge: slope angle + Δs analysis. Mounted
 * under summary line. Tabular numbers for engineer readability. Color codes:
 *   green  = Δs uniform within tolerance (Engineer can trust)
 *   amber  = Δs varying but trend OK
 *   red    = Δs reversal detected ("ters istikamet" violation) */
.poly-hsnap-panel .hsp-z-summary-line .hsp-metric {
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.4);
  border-left: 2px solid rgba(251, 191, 36, 0.5);
  border-radius: 0 4px 4px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.poly-hsnap-panel .hsp-z-summary-line .hsp-metric small {
  color: #cbd5e1;
  font-style: normal;
}
.poly-hsnap-panel .hsp-z-summary-line .hsp-metric b {
  color: #fde68a;
  font-weight: 600;
}

/* v57.19.5 — Collapsible Z chip detail (default closed) */
.poly-hsnap-panel .hsp-z-detail {
  margin-bottom: 5px;
}
.poly-hsnap-panel .hsp-z-detail-summary {
  cursor: pointer;
  font-size: 9.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(148, 163, 184, 0.6);
  font-style: italic;
  padding: 2px 4px;
  margin-bottom: 4px;
  border: 1px dashed rgba(148, 163, 184, 0.25);
  border-radius: 3px;
  list-style: none;
  user-select: none;
  letter-spacing: 0.02em;
  transition: 0.14s;
}
.poly-hsnap-panel .hsp-z-detail-summary::-webkit-details-marker { display: none; }
.poly-hsnap-panel .hsp-z-detail-summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.14s ease;
  margin-right: 2px;
}
.poly-hsnap-panel .hsp-z-detail[open] .hsp-z-detail-summary::before {
  transform: rotate(90deg);
}
.poly-hsnap-panel .hsp-z-detail-summary:hover {
  color: rgba(203, 213, 225, 0.85);
  border-color: rgba(251, 191, 36, 0.35);
}
.poly-hsnap-panel .hsp-z-detail[open] .hsp-z-detail-summary {
  color: rgba(203, 213, 225, 0.7);
  border-color: rgba(251, 191, 36, 0.3);
}

.poly-hsnap-panel .hsp-z-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
  min-height: 20px;
}
.poly-hsnap-panel .hsp-empty {
  font-size: 10px;
  font-style: italic;
  color: rgba(148, 163, 184, 0.7);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.poly-hsnap-panel .hsp-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px 2px 7px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 3px;
  color: #fde68a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.poly-hsnap-panel .hsp-chip-x {
  background: transparent;
  border: none;
  color: rgba(254, 215, 170, 0.75);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  font-weight: 700;
}
.poly-hsnap-panel .hsp-chip-x:hover {
  color: #fef3c7;
}

/* v57.28 — Parametrik H grid panel */
.poly-hsnap-panel .hsp-param-detail {
  margin-top: 6px;
}
.poly-hsnap-panel .hsp-param-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 6px 0;
}
.poly-hsnap-panel .hsp-param-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.poly-hsnap-panel .hsp-param-row span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: rgba(148, 163, 184, 0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.poly-hsnap-panel .hsp-param-row input {
  background: rgba(20, 23, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  color: #f5f7fa;
  padding: 3px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.poly-hsnap-panel .hsp-param-row input:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(20, 23, 28, 0.92);
}
.poly-hsnap-panel .hsp-param-actions {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.poly-hsnap-panel .hsp-param-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.32);
  color: #cbd5e1;
  border-radius: 3px;
  padding: 4px 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.14s;
}
.poly-hsnap-panel .hsp-param-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fef3c7;
}
.poly-hsnap-panel .hsp-param-btn.hsp-param-apply {
  background: linear-gradient(180deg, var(--ds-amber) 0%, #f59e0b 100%);
  border-color: #b45309;
  color: #451a03;
  font-weight: 700;
}
.poly-hsnap-panel .hsp-param-btn.hsp-param-apply:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}
.poly-hsnap-panel .hsp-param-preview {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-style: italic;
  color: #fde68a;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
/* v57.28.6 — POLYGONS list visible undo button */
.pt-polylist-head .pt-undo-btn {
  margin-left: auto;
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  border-radius: 3px;
  padding: 2px 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.14s;
}
.pt-polylist-head .pt-undo-btn:hover {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fef3c7;
}

/* v57.28.2 — Diagnostic output */
.poly-hsnap-panel .hsp-debug-detail { margin-top: 6px; }
.poly-hsnap-panel .hsp-diag-output {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 3px;
  padding: 6px 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  line-height: 1.45;
  color: #cbd5e1;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  margin: 4px 0 6px;
  letter-spacing: 0.01em;
}

/* v57.27.1 / v57.27.2 — Otomatik chip: dim italic, × ile silinince auto→manual convert */
.poly-hsnap-panel .hsp-chip.hsp-chip-auto {
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(148, 163, 184, 0.32);
  color: rgba(203, 213, 225, 0.72);
  font-style: italic;
}
.poly-hsnap-panel .hsp-chip-x.hsp-chip-x-auto {
  color: rgba(148, 163, 184, 0.55);
}
.poly-hsnap-panel .hsp-chip-x.hsp-chip-x-auto:hover {
  color: #ef4444;       /* red on hover — destructive intent */
}

/* v57.27.1 — Auto state summary line */
.poly-hsnap-panel .hsp-z-summary-line.hsp-is-auto {
  color: rgba(148, 163, 184, 0.85);
  font-style: italic;
}
.poly-hsnap-panel .hsp-z-summary-line.hsp-is-auto b {
  color: #cbd5e1;
}
.poly-hsnap-panel .hsp-hint {
  font-size: 9.5px;
  color: rgba(148, 163, 184, 0.7);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* Body-level cursor override when H snap mode is active (canvas overrides
 * per-element, but a fallback for the whole drape app feels engineering-grade) */
body.drape-app-body[data-h-snap="1"] .drape-viewer canvas {
  cursor: crosshair !important;
}

/* ────────────────────────────────────────────────────────────────
 * v57.29.38 — Camera preset radio (Plan / Front / Iso)
 * 3D viewport sağ köşe Fit yanına, tek tıkla kamera açısı.
 * Klavye: T (Top/Plan) / F (Front) / I (Iso).
 * ──────────────────────────────────────────────────────────────── */
.vp-preset-group {
  display: inline-flex;
  gap: 1px;
  margin-left: 6px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px;
}
.vp-preset-btn {
  padding: 3px 8px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px !important;
  font-weight: 600;
  background: transparent !important;
  border: none !important;
  color: rgba(203, 213, 225, 0.7) !important;
  border-radius: 3px !important;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease;
}
.vp-preset-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e5e7eb !important;
}
.vp-preset-btn.vp-preset-active {
  background: rgba(6, 182, 212, 0.22) !important;
  color: #67e8f9 !important;
  box-shadow: inset 0 -1px 0 rgba(6, 182, 212, 0.5);
}
.vp-heatmap-btn {
  margin-left: 6px !important;
  padding: 3px 9px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(203, 213, 225, 0.75) !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.vp-heatmap-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e5e7eb !important;
}
.vp-heatmap-btn.vp-heatmap-active {
  background: linear-gradient(90deg, rgba(16,185,129,0.18), rgba(245,158,11,0.18), rgba(239,68,68,0.22)) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #fde68a !important;
}
/* v57.29.42 — Heatmap renk legend (sağ alt köşe, toggle ile birlikte) */
.vp-heatmap-legend {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 7px 9px 5px 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(203, 213, 225, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  user-select: none;
}
.vp-hm-bar {
  height: 12px;
  width: 280px;
  background: linear-gradient(to right,
    var(--uf-emerald) 0%,
    #84cc16 22%,
    #facc15 44%,
    #f97316 61%,
    #ef4444 78%,
    #be185d 94%,
    #8b5cf6 100%);
  border-radius: 3px;
  margin-bottom: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.vp-hm-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  padding: 0 1px;
  letter-spacing: 0.02em;
}
.vp-hm-caption {
  text-align: center;
  font-size: 8.5px;
  color: rgba(148, 163, 184, 0.75);
  margin-top: 2px;
  letter-spacing: 0.05em;
}

/* ────────────────────────────────────────────────────────────────
 * v57.29.36 — Genel Kesitler accordion stilleri
 * Auto-section sweep'inden çıkarılan kritik kesitler için panel.
 * RUVOLUM hesabı en kritik kesite göre yapılır.
 * ──────────────────────────────────────────────────────────────── */
.acc-gk .acc-num { color: #f59e0b; }
.gk-intro {
  font-size: 11px;
  color: rgba(203,213,225,0.75);
  padding: 6px 10px 10px 10px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gk-settings {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  flex-wrap: wrap;
  background: rgba(15,23,42,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gk-setting {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: rgba(203,213,225,0.85);
}
.gk-setting input[type="number"], .gk-setting select {
  width: 52px;
  height: 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  padding: 1px 4px;
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  color: #e5e7eb;
  border-radius: 3px;
}
.gk-site-card, .gk-polygon-card {
  margin: 8px 10px;
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(245,158,11,0.05), rgba(15,23,42,0.4));
  overflow: hidden;
}
.gk-site-card { border-color: rgba(239,68,68,0.4); background: linear-gradient(180deg, rgba(239,68,68,0.08), rgba(15,23,42,0.4)); }
.gk-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0,0,0,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gk-card-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 0.04em;
}
.gk-site-card .gk-card-title { color: #fca5a5; }
.gk-empty {
  font-size: 11px;
  color: rgba(148,163,184,0.7);
  padding: 14px 12px;
  text-align: center;
  font-style: italic;
}
.gk-row {
  /* v57.41.1 — Engineer L99 okunabilirlik fix */
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
}
.gk-row:last-child { border-bottom: none; }
.gk-row:hover { background: rgba(245,158,11,0.06); }
.gk-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(245,158,11,0.22);
  color: #fde68a;
  border: 1px solid rgba(245,158,11,0.35);
}
.gk-row.is-critical .gk-rank { background: rgba(239,68,68,0.28); color: #fca5a5; border-color: rgba(239,68,68,0.42); }
.gk-row-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #cbd5e1;
  min-width: 0;
}
.gk-row-info .gk-row-label {
  font-weight: 700;
  color: #f1f5f9;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.gk-row-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.4;
  align-items: center;
}
.gk-row-stats-sub {
  font-size: 10.5px;
  color: rgba(148,163,184,0.85);
}
.gk-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}
.gk-stat > b {
  font-weight: 500;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(148,163,184,0.75);
}
.gk-row-actions {
  display: flex;
  gap: 4px;
}
.gk-row-actions button {
  width: 30px;
  height: 26px;
  padding: 0;
  font-size: 12.5px;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(203,213,225,0.9);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gk-row-actions button:hover { background: rgba(245,158,11,0.22); border-color: rgba(245,158,11,0.55); color: #fde68a; }
.gk-polygon-card .gk-card-meta {
  font-size: 10.5px;
  color: rgba(203,213,225,0.85);
  padding: 6px 10px;
  background: rgba(0,0,0,0.18);
  line-height: 1.55;
}
.gk-polygon-card .gk-card-meta b { color: #fde68a; font-weight: 600; }
.gk-polygon-card .gk-card-actions {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.15);
  border-top: 1px solid rgba(255,255,255,0.03);
  justify-content: flex-end;
}
.gk-bulk-actions {
  display: flex;
  gap: 6px;
  padding: 10px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.05);
  justify-content: center;
  flex-wrap: wrap;
}
.gk-verdict {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gk-verdict.alarm  { background: rgba(239,68,68,0.25); color: #fca5a5; }
.gk-verdict.design { background: rgba(245,158,11,0.25); color: #fde68a; }
.gk-verdict.watch  { background: rgba(59,130,246,0.25); color: #93c5fd; }
.gk-verdict.stable { background: rgba(16,185,129,0.25); color: #86efac; }

/* v57.29.37 — Proje Bilgi Formu (Sev/Palye kapsam) */
.pip-details {
  margin-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  padding-top: 8px;
}
.pip-summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 0.03em;
  padding: 4px 0;
}
.pip-summary:hover { color: #fef3c7; }
.pip-body {
  padding: 8px 4px;
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
  margin-top: 6px;
}
.pip-section { padding: 8px 10px; border-bottom: 1px dashed rgba(255,255,255,0.05); }
.pip-section:last-child { border-bottom: none; }
.pip-section-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.pip-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  color: #e5e7eb;
  cursor: pointer;
}
.pip-toggle input[type="checkbox"] {
  width: 13px; height: 13px;
  accent-color: #f59e0b;
}
.pip-hint {
  font-size: 10px;
  color: rgba(148,163,184,0.7);
  font-style: italic;
  margin-left: 4px;
}
.pip-note {
  font-size: 10px;
  color: rgba(148,163,184,0.75);
  padding: 6px 10px;
  background: rgba(59,130,246,0.08);
  border-left: 2px solid rgba(59,130,246,0.4);
  margin-top: 6px;
  line-height: 1.4;
}
.pip-note code {
  background: rgba(0,0,0,0.3);
  padding: 1px 4px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
}

/* v57.30 Sprint 2 — Engineering Input Form (jeoloji + sismik + hidroloji + korozyon) */
.pip-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 4px;
}
.pip-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: rgba(203,213,225,0.85);
}
.pip-field > span:first-child {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(148,163,184,0.85);
  letter-spacing: 0.02em;
}
.pip-field-full { grid-column: 1 / -1; }
.pip-field input[type="number"],
.pip-field textarea,
.pip-select {
  height: 24px;
  padding: 1px 6px;
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(148,163,184,0.25);
  color: #e5e7eb;
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
}
.pip-field input[type="number"]:focus,
.pip-field textarea:focus,
.pip-select:focus {
  outline: none;
  border-color: rgba(6,182,212,0.7);
  box-shadow: 0 0 0 2px rgba(6,182,212,0.18);
}
/* v58.402 (R-C1) — jeoloji-prose textarea (paylaşımlı pip-field stilini miras alır; sadece textarea'ya özgü ezme) */
.pip-field textarea {
  height: auto;
  min-height: 32px;
  padding: 3px 6px;
  line-height: 1.35;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}
.pip-unit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(148,163,184,0.65);
  margin-left: 4px;
}
.pip-life-result {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 4px;
}
.pip-life-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.pip-life-label {
  font-size: 10px;
  color: rgba(148,163,184,0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pip-life-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pip-life-value.pip-life-ok    { color: #86efac; }
.pip-life-value.pip-life-fail  { color: #fca5a5; }
.pip-life-detail {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(203,213,225,0.7);
  margin-bottom: 4px;
}
.pip-life-table {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(203,213,225,0.6);
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.05);
}
.pip-hint-block {
  display: block;
  margin-top: 6px;
  font-size: 9.5px;
  color: rgba(148,163,184,0.7);
  line-height: 1.45;
}
.pip-section-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
/* v57.43 — AMD Design Apply card (engineer L99 workflow gate post-AMD) */
.amd-design-apply {
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(16,185,129,0.08), rgba(15,23,42,0.4));
  border: 1px solid rgba(16,185,129,0.35);
  border-radius: 6px;
}
.amd-design-summary { margin-bottom: 8px; }
.amd-design-spec {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(226,232,240,0.92);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.amd-design-spec b { color: #fde68a; font-weight: 600; }
.amd-design-spec > div { margin: 2px 0; }
.amd-design-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-right: 8px;
}
.amd-design-badge.ok { background: rgba(34,197,94,0.25); color: #86efac; border: 1px solid rgba(34,197,94,0.5); }
.amd-design-badge.fail { background: rgba(239,68,68,0.22); color: #fca5a5; border: 1px solid rgba(239,68,68,0.45); }
.amd-design-rationale {
  margin-top: 4px;
  font-size: 10px;
  font-style: italic;
  color: rgba(148,163,184,0.85);
}
#amdApplyBtn {
  margin-top: 8px;
  background: linear-gradient(180deg, var(--uf-emerald), #059669);
  border-color: rgba(16,185,129,0.6);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px;
}
#amdApplyBtn:hover { background: linear-gradient(180deg, #14d399, var(--uf-emerald)); }
.amd-design-hint {
  margin-top: 6px;
  font-size: 10px;
  font-style: italic;
  color: rgba(148,163,184,0.75);
  line-height: 1.5;
}
/* v57.49.6 — Engineer L99: "ankrajlarda gorulmuyor" → 5-Proof PASS sonrası
   Apply card pulse animation dikkat çeker. designApplied=false iken 6s pulse */
.amd-design-pulse {
  animation: amdDesignPulse 1.4s ease-in-out 0s 4;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
}
@keyframes amdDesignPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); border-color: rgba(16,185,129,0.9); }
  50%  { box-shadow: 0 0 0 14px rgba(16,185,129,0); border-color: rgba(16,185,129,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); border-color: rgba(16,185,129,0.35); }
}

.pip-geology   .pip-section-title { color: #d6c4f6; }
.pip-seismic   .pip-section-title { color: #f3b97f; }
.pip-hydrology .pip-section-title { color: #93c5fd; }
.pip-corrosion .pip-section-title { color: #fde68a; }

/* ═══════════════════════════════════════════════════════════════════════════
 * v57.31 — POLYGON TASARIM IA REFACTOR
 *
 * Engineer L99 IQ200: "bu menuye daha guzel bir yerleşim ve tasarım
 * düzenlemesi yapalım. polygon tasarım diyoruz polgonlar asagıda vs
 * tuslar anlaşılmıyor."
 *
 * v55.158 polygon-finalize-card için yapılan refactor şimdi TÜM polygon
 * accordion'una uygulandı. 4-card console layout (industrial precision
 * instrument):
 *
 *   ① POLYGONS         (state    — slate)
 *   ② İŞ AKIŞI         (workflow — amber)   ÜRET / ÇİZ / SINIFLA
 *   ③ AKTİF POLYGON    (context  — cyan)    Strike / H-Grid / Edge
 *   ④ BİTİR & GRUPLA   (finalize — violet)  Group / Lock / Union / Shotcrete
 *
 * Aesthetic: CNC controller + geological survey console.
 *   • Section labels JetBrains Mono uppercase, 0.16em tracking
 *   • Zone-tinted subtle bg + 30% border
 *   • Hairline divider stroke right of label (schematic convention)
 *   • Section number circle filled with zone accent
 *   • Hover lifts border to 55% alpha (subtle interaction feedback)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section card base ───────────────────────────────────────────────── */
.pt-section {
  position: relative;
  margin: 6px 0;                 /* v58.73 kompakt: 10 → 6 (uniform menü densite) */
  padding: 7px 10px 8px;         /* v58.73 kompakt: 10/12/12 → 7/10/8 */
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.36) 0%,
    rgba(15, 23, 42, 0.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.18s, background 0.18s;
}
.pt-section:first-child { margin-top: 4px; }
.pt-section:last-child  { margin-bottom: 4px; }
.pt-section:hover {
  border-color: rgba(148, 163, 184, 0.32);
}

/* Vertical accent rail on the left of each section (zone color) */
.pt-section::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 1px;
  background: rgba(148, 163, 184, 0.32);
  transition: background 0.2s;
}

/* ── Section header (number + label + rule + sublabel) ──────────────── */
.pt-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 0 0 7px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pt-section-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  background: rgba(148, 163, 184, 0.14);
  color: rgba(226, 232, 240, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.28);
  transition: all 0.2s;
}
.pt-section-name {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.95);
}
.pt-section-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 9px;
  color: rgba(226, 232, 240, 0.88);
  letter-spacing: 0;
}
/* Hairline rule extends to right of label (schematic convention) */
.pt-section-rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(148, 163, 184, 0.22) 0%,
    rgba(148, 163, 184, 0.05) 100%);
  margin: 0 4px;
}
.pt-section-sublabel {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: lowercase;
  color: rgba(148, 163, 184, 0.55);
  font-style: italic;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pt-section-action {
  appearance: none;
  flex: 0 0 auto;
  width: auto;          /* v58.53.3 — panelin geniş button{width:100%} mirasını ez; aksi halde flex-basis:auto o %100'ü (279px) alıp shrink:0 ile küçülmüyor → flex head'i + paneli SAĞDAN AŞIYORDU (engineer: "Geri al pencereyi aşıyor") */
  padding: 3px 8px;
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  color: rgba(226, 232, 240, 0.82);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pt-section-action:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.20);
  border-color: rgba(148, 163, 184, 0.42);
  color: #fff;
}
.pt-section-action:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

/* ── Zone variants ──────────────────────────────────────────────────── */

/* ① STATE — slate (neutral) */
.pt-section--state {
  background: linear-gradient(180deg,
    rgba(51, 65, 85, 0.18) 0%,
    rgba(30, 41, 59, 0.10) 100%);
  border-color: rgba(148, 163, 184, 0.22);
}
.pt-section--state::before { background: rgba(148, 163, 184, 0.55); }
.pt-section--state:hover { border-color: rgba(148, 163, 184, 0.45); }
.pt-section--state .pt-section-num {
  background: rgba(148, 163, 184, 0.28);
  border-color: rgba(148, 163, 184, 0.55);
  color: #f1f5f9;
}
.pt-section--state .pt-section-name { color: #f1f5f9; }

/* ② WORKFLOW — amber (action zone) */
.pt-section--workflow {
  background: linear-gradient(180deg,
    rgba(251, 191, 36, 0.05) 0%,
    rgba(251, 191, 36, 0.02) 100%);
  border-color: rgba(251, 191, 36, 0.22);
}
.pt-section--workflow::before {
  background: linear-gradient(180deg,
    rgba(251, 191, 36, 0.85) 0%,
    rgba(251, 191, 36, 0.45) 100%);
  box-shadow: 0 0 5px rgba(251, 191, 36, 0.55);
}
.pt-section--workflow:hover { border-color: rgba(251, 191, 36, 0.42); }
.pt-section--workflow .pt-section-num {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.65);
  color: var(--ds-amber);
}
.pt-section--workflow .pt-section-name { color: #fde68a; }

/* ③ CONTEXT — cyan (active polygon) */
.pt-section--context {
  background: linear-gradient(180deg,
    rgba(6, 182, 212, 0.05) 0%,
    rgba(6, 182, 212, 0.02) 100%);
  border-color: rgba(6, 182, 212, 0.22);
}
.pt-section--context::before {
  background: linear-gradient(180deg,
    rgba(6, 182, 212, 0.85) 0%,
    rgba(6, 182, 212, 0.45) 100%);
  box-shadow: 0 0 5px rgba(6, 182, 212, 0.55);
}
.pt-section--context:hover { border-color: rgba(6, 182, 212, 0.42); }
.pt-section--context .pt-section-num {
  background: rgba(6, 182, 212, 0.18);
  border-color: rgba(6, 182, 212, 0.65);
  color: #67e8f9;
}
.pt-section--context .pt-section-name { color: #cffafe; }

/* ④ FINALIZE — violet (terminal step) */
.pt-section--finalize {
  background: linear-gradient(180deg,
    rgba(168, 85, 247, 0.05) 0%,
    rgba(168, 85, 247, 0.02) 100%);
  border-color: rgba(168, 85, 247, 0.22);
}
.pt-section--finalize::before {
  background: linear-gradient(180deg,
    rgba(168, 85, 247, 0.85) 0%,
    rgba(168, 85, 247, 0.45) 100%);
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.55);
}
.pt-section--finalize:hover { border-color: rgba(168, 85, 247, 0.42); }
.pt-section--finalize .pt-section-num {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.65);
  color: #c4b5fd;
}
.pt-section--finalize .pt-section-name { color: #e9d5ff; }

/* ── Override v57.31: poly-finalize-card içeride wrapper olduğunda
 *    eski outer margin/border'ı yumuşat (wrapper zaten kart) ────── */
.pt-section--finalize .poly-finalize-card {
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.pt-section--finalize .poly-finalize-card::before { display: none; }
.pt-section--finalize .poly-finalize-card .pfc-head {
  padding: 4px 0 6px;
  background: transparent;
  border-bottom: 1px dashed rgba(168, 85, 247, 0.18);
}
.pt-section--finalize .poly-finalize-card .pfc-title { display: none; }
.pt-section--finalize .poly-finalize-card .pfc-icon { display: none; }
.pt-section--finalize .poly-finalize-card .pfc-state-row {
  margin-left: auto;
}
.pt-section--finalize .poly-finalize-card .pfc-body { padding: 8px 0 6px; }
.pt-section--finalize .poly-finalize-card .pfc-foot {
  margin: 4px -12px -12px -12px;
  padding: 6px 12px;
  border-radius: 0 0 6px 6px;
  border-top: 1px solid rgba(168, 85, 247, 0.18);
}

/* ── Override v57.31: existing element placement inside new wrappers ── */
.pt-section--state .pt-polylist-head {
  display: none; /* Replaced by .pt-section-label */
}
.pt-section--state .polygon-list {
  margin-top: 0;
}
.pt-section--state #addPolygonBtn {
  margin-top: 6px;
}

/* When workflow section wraps existing .pt-workflow, reduce double-spacing */
.pt-section--workflow .pt-workflow {
  margin: 0;
}
.pt-section--workflow .pt-step + .pt-step {
  border-top-color: rgba(251, 191, 36, 0.10);
}

/* Context section: when empty (no panels visible) show helpful hint */
.pt-section--context .pt-context-empty {
  display: block;
  padding: 8px 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-style: italic;
  color: rgba(148, 163, 184, 0.55);
  text-align: center;
  letter-spacing: 0.04em;
}
.pt-section--context .pt-context-empty::before {
  content: "▸ ";
  color: rgba(6, 182, 212, 0.55);
  font-style: normal;
}

/* Strike + H-Grid panels inside context section: tighten spacing */
.pt-section--context > .poly-strike-panel,
.pt-section--context > .poly-hsnap-panel {
  margin: 6px 0;
}
.pt-section--context > .poly-strike-panel:not([hidden]) ~ .pt-context-empty,
.pt-section--context > .poly-hsnap-panel:not([hidden]) ~ .pt-context-empty {
  display: none;
}

/* Edge classification details inside context: harmonize border */
.pt-section--context > .aof-edge-classify {
  margin-top: 6px;
  background: rgba(6, 182, 212, 0.03);
  border: 1px solid rgba(6, 182, 212, 0.14);
  border-radius: 5px;
}
.pt-section--context > .aof-edge-classify > summary {
  color: rgba(207, 250, 254, 0.82);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pt-section--context > .aof-edge-classify[open] > summary {
  color: #cffafe;
}

/* ── ② İŞ AKIŞI: refined step heads now that wrapper provides context ─ */
.pt-section--workflow .pt-step-head {
  margin-bottom: 5px;
}
.pt-section--workflow .pt-step-num {
  width: 18px;
  height: 18px;
  font-size: 10px;
  border-color: rgba(251, 191, 36, 0.42);
  color: rgba(251, 191, 36, 0.85);
}
.pt-section--workflow .pt-step--primary .pt-step-num {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.92);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.10);
  color: #fde047;
}
.pt-section--workflow .pt-step-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
}

/* Edit toolbar inside workflow section: refined tier separation */
.pt-section--workflow .poly-edit-toolbar {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.12);
  padding: 4px;
  gap: 3px;
}
.pt-section--workflow .poly-edit-toolbar .ptg-group {
  background: rgba(15, 23, 42, 0.45);
  padding: 2px 4px;
}
.pt-section--workflow .poly-edit-toolbar .ptg-group[data-group="topology"] {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.22);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08);
}
.pt-section--workflow .poly-edit-toolbar .ptg-group[data-group="topology"] .ptg-btn {
  background: linear-gradient(180deg,
    rgba(16, 185, 129, 0.12),
    rgba(16, 185, 129, 0.04));
}

/* ── Edit zone divider rule label refinement ─────────────────────────── */
.pt-section--workflow .pt-edit-rule {
  margin: 6px 0 3px;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(251, 191, 36, 0.42);
}
.pt-section--workflow .pt-edit-rule::before,
.pt-section--workflow .pt-edit-rule::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(251, 191, 36, 0.18),
    transparent);
}

/* ── ④ BİTİR: state chips bigger + clearer ──────────────────────────── */
.pt-section--finalize .poly-finalize-card .pfc-state-chip {
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  font-size: 10px;
  border-radius: 4px;
}
.pt-section--finalize .poly-finalize-card .pfc-btn {
  height: 32px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.pt-section--finalize .poly-finalize-card .pfc-btn-ico {
  font-size: 14px;
}

/* Responsive: very narrow panel (< 240px) — drop sublabels */
@media (max-width: 920px) {
  .pt-section-sublabel { display: none; }
  .pt-section-rule    { display: none; }
  .pt-section         { padding: 8px 10px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v57.50 — Floating Action Bar (FAB) + Right-Click Context + Nested Tree
 * Engineer L99: "yamaç oluştururken poligonlardan uzaktayız, menude
 * in çık yapıyoruz". 1-action flow: polygon select → inline name → done.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── FAB: bottom-center floating bar ── */
.slope-fab {
  position: fixed;
  bottom: 88px;            /* viewport-status bar üstü (yaklaşık 60px) + margin */
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 4800;
  min-width: 320px;
  max-width: 520px;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(2,6,23,0.96));
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(34,211,238,0.12);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.slope-fab:not([hidden]) {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.slope-fab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.85);
}
.slope-fab-count b {
  color: #22d3ee;
  font-weight: 700;
  font-size: 13px;
  margin-right: 6px;
}
.slope-fab-close {
  background: transparent;
  border: 1px solid rgba(148,163,184,0.25);
  color: rgba(148,163,184,0.7);
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: all 0.15s;
}
.slope-fab-close:hover { background: rgba(239,68,68,0.18); color: #fca5a5; border-color: rgba(239,68,68,0.4); }
.slope-fab-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
}
.slope-fab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: rgba(30,41,59,0.85);
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 6px;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.slope-fab-btn:hover { background: rgba(51,65,85,0.95); border-color: rgba(148,163,184,0.5); }
.slope-fab-btn-primary {
  background: linear-gradient(180deg, #0891b2, #0e7490);
  border-color: rgba(34,211,238,0.6);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(8,145,178,0.35);
}
.slope-fab-btn-primary:hover {
  background: linear-gradient(180deg, var(--tk-acc-primary), #0891b2);
  box-shadow: 0 4px 14px rgba(8,145,178,0.5);
}
.slope-fab-btn-ghost {
  background: transparent;
  border-color: rgba(148,163,184,0.25);
  color: rgba(148,163,184,0.85);
}
.slope-fab-btn-ghost:hover { background: rgba(148,163,184,0.1); }
.slope-fab-btn-small { padding: 6px 10px; font-size: 11px; }
.slope-fab-icon { font-size: 14px; line-height: 1; }
.slope-fab-chevron { font-size: 10px; opacity: 0.7; }

.slope-fab-submenu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: rgba(15,23,42,0.98);
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  z-index: 4900;
}
.slope-fab-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.slope-fab-submenu-item:hover { background: rgba(34,211,238,0.15); }
.slope-fab-submenu-empty {
  padding: 14px;
  text-align: center;
  font-size: 11px;
  color: rgba(148,163,184,0.6);
  font-style: italic;
}
.slope-fab-submenu-color {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.slope-fab-name-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,0.15);
}
.slope-fab-name-input {
  flex: 1;
  padding: 8px 10px;
  background: rgba(2,6,23,0.7);
  border: 1px solid rgba(34,211,238,0.4);
  border-radius: 5px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s;
}
.slope-fab-name-input:focus { border-color: #22d3ee; box-shadow: 0 0 0 2px rgba(34,211,238,0.2); }
.slope-fab-name-input::placeholder { color: rgba(148,163,184,0.5); }

/* ── Right-click context menu (3D viewport polygon) ── */
.poly-ctx-menu {
  position: fixed;
  z-index: 4900;
  min-width: 220px;
  background: rgba(15,23,42,0.98);
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  animation: ctxMenuFadeIn 0.12s ease-out;
}
@keyframes ctxMenuFadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.poly-ctx-header {
  padding: 8px 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.6);
  border-bottom: 1px solid rgba(148,163,184,0.15);
  margin-bottom: 4px;
}
.poly-ctx-poly-name {
  color: #22d3ee;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.poly-ctx-items { display: flex; flex-direction: column; }
.poly-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  position: relative;
  transition: background 0.12s;
}
.poly-ctx-item:hover { background: rgba(34,211,238,0.15); }
.poly-ctx-icon {
  width: 16px;
  text-align: center;
  color: rgba(148,163,184,0.85);
  font-size: 13px;
}
.poly-ctx-chevron {
  margin-left: auto;
  font-size: 9px;
  color: rgba(148,163,184,0.6);
}
.poly-ctx-separator {
  height: 1px;
  background: rgba(148,163,184,0.15);
  margin: 4px 8px;
}
.poly-ctx-submenu-anchor:hover > .poly-ctx-submenu { display: block; }
.poly-ctx-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -4px;
  min-width: 200px;
  background: rgba(15,23,42,0.98);
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}

/* ── Phase 03 Nested Tree (polygons-under-slopes) ── */
.slope-tree { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.slope-tree-node {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.15);
  border-left: 3px solid var(--slope-accent, rgba(148,163,184,0.4));
  border-radius: 5px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.slope-tree-node.is-active {
  border-left-color: var(--slope-accent, #22d3ee);
  border-color: rgba(34,211,238,0.35);
  background: rgba(15,23,42,0.85);
}
.slope-tree-node.is-orphan { border-left-color: rgba(148,163,184,0.3); opacity: 0.85; }
.slope-tree-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  transition: background 0.12s;
}
.slope-tree-header:hover { background: rgba(34,211,238,0.08); }
.slope-tree-expand {
  width: 14px;
  font-size: 10px;
  color: rgba(148,163,184,0.7);
  transition: transform 0.18s;
}
.slope-tree-node.is-expanded .slope-tree-expand { transform: rotate(90deg); }
.slope-tree-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--slope-accent, rgba(148,163,184,0.5));
  border: 1px solid rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.slope-tree-name {
  font-weight: 700;
  color: #f1f5f9;
  flex: 1;
}
.slope-tree-meta {
  font-size: 10px;
  color: rgba(148,163,184,0.7);
  font-weight: 500;
}
.slope-tree-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.slope-tree-status.pass { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.slope-tree-status.fail { background: rgba(239,68,68,0.18); color: #fca5a5; }
.slope-tree-status.pending { background: rgba(245,158,11,0.18); color: #fcd34d; }
.slope-tree-menu-btn {
  background: transparent;
  border: none;
  color: rgba(148,163,184,0.6);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  border-radius: 3px;
}
.slope-tree-menu-btn:hover { background: rgba(148,163,184,0.15); color: #e2e8f0; }

.slope-tree-children {
  display: none;
  padding: 0 0 6px 0;
  background: rgba(2,6,23,0.4);
  border-top: 1px solid rgba(148,163,184,0.1);
}
.slope-tree-node.is-expanded .slope-tree-children { display: block; }

.slope-tree-poly-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 32px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(226,232,240,0.88);
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}
.slope-tree-poly-row:hover { background: rgba(34,211,238,0.08); }
.slope-tree-poly-row.is-active { background: rgba(34,211,238,0.18); color: #67e8f9; }
.slope-tree-poly-row.is-dragging { opacity: 0.4; }
.slope-tree-poly-bullet {
  font-size: 10px;
  color: rgba(148,163,184,0.5);
}
.slope-tree-poly-name { flex: 1; }
.slope-tree-poly-meta {
  font-size: 9.5px;
  color: rgba(148,163,184,0.6);
}
.slope-tree-poly-menu-btn {
  background: transparent;
  border: none;
  color: rgba(148,163,184,0.5);
  cursor: pointer;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.12s;
}
.slope-tree-poly-row:hover .slope-tree-poly-menu-btn { opacity: 1; }
.slope-tree-poly-menu-btn:hover { background: rgba(148,163,184,0.15); color: #e2e8f0; }

.slope-tree-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0 32px;
  padding: 4px 10px;
  background: transparent;
  border: 1px dashed rgba(148,163,184,0.3);
  border-radius: 4px;
  color: rgba(148,163,184,0.75);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  cursor: pointer;
  transition: all 0.12s;
}
.slope-tree-add-btn:hover {
  border-color: rgba(34,211,238,0.5);
  color: #67e8f9;
  background: rgba(34,211,238,0.06);
}

.slope-tree-empty {
  padding: 14px;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: rgba(148,163,184,0.55);
}

/* Drag-drop visual states */
.slope-tree-header.is-drop-target {
  background: rgba(34,211,238,0.25);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,0.6);
}

/* ═══════════════════════════════════════════════════════════════════
 * v57.51 — Mesh Hazırlık 2.0 Frontend Redesign
 * Engineer L99 IQ200: "Mesh Hazırlık menüsü /frontend-design"
 * Hero OBJ card + 3-step Pipeline + compact Proje bar.
 * Dark theme, JetBrains Mono, electric cyan accents, industrial CNC vibe.
 * ═══════════════════════════════════════════════════════════════════ */

.mesh-prep-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
}

/* ── Proje bar (compact top strip) ── */
.mp-project-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(15,23,42,0.55), rgba(2,6,23,0.7));
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.mp-project-icon { font-size: 12px; flex-shrink: 0; }
.mp-project-chip {
  flex: 1;
  font-size: 10.5px;
  color: #e2e8f0;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-project-chip.dirty::before { content: '● '; color: #facc15; }
.mp-project-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.mp-icon-btn {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30,41,59,0.7);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 4px;
  color: rgba(226,232,240,0.85);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
  padding: 0;
  font-family: inherit;
}
.mp-icon-btn:hover {
  background: rgba(51,65,85,0.95);
  border-color: rgba(34,211,238,0.45);
  color: #67e8f9;
}
.mp-icon-btn-primary {
  background: linear-gradient(180deg, #0891b2, #0e7490);
  border-color: rgba(34,211,238,0.6);
  color: #fff;
  box-shadow: 0 1px 4px rgba(8,145,178,0.35);
}
.mp-icon-btn-primary:hover {
  background: linear-gradient(180deg, var(--tk-acc-primary), #0891b2);
  color: #fff;
}

/* ── Card base ── */
.mp-card {
  background: linear-gradient(180deg, rgba(15,23,42,0.65), rgba(2,6,23,0.85));
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.85);
}
.mp-card-icon {
  font-size: 13px;
  filter: drop-shadow(0 0 6px rgba(34,211,238,0.3));
}
.mp-card-title {
  flex: 1;
  color: #f1f5f9;
  font-weight: 700;
}
.mp-card-status {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}
.mp-card-status[data-status="empty"]   { background: rgba(148,163,184,0.18); color: rgba(148,163,184,0.85); }
.mp-card-status[data-status="ready"]   { background: rgba(34,211,238,0.18); color: #67e8f9; }
.mp-card-status[data-status="done"]    { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.mp-card-status[data-status="warning"] { background: rgba(245,158,11,0.18); color: #fcd34d; }

/* v58.573 (Dilim B/S2) — kart FAZ-rengini (--phase-accent) kullanır. Model C: renk=FAZ,
   içerik-tipi değil → data/draw/proc renk-ayrımı KALKTI; tek .geo-card her panelde kendi
   faz-rengini alır (① cyan · ② mor · ④ mavi · ⑥ turuncu …). mevcut .mp-card yapısı
   (padding/grid/status) KORUNUR; içerik/ID dokunulmaz. İçerik-tipi ayrımı ikon+başlıkla. */
.mp-card.geo-card { background: rgba(var(--phase-accent, 148,163,184), 0.07); border-color: rgba(var(--phase-accent, 148,163,184), 0.32); }
.geo-card .mp-card-title { color: rgba(var(--phase-accent, 203,213,225), 1); }
.geo-card .mp-card-icon { filter: none; }

/* ── OBJ hero card ── */
.mp-obj-card { border-color: rgba(34,211,238,0.22); }
.mp-obj-filerow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-obj-file { display: none; }
.mp-obj-filebtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  background: rgba(30,41,59,0.85);
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 5px;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.mp-obj-filebtn:hover {
  background: rgba(51,65,85,0.95);
  border-color: rgba(34,211,238,0.5);
  color: #67e8f9;
}
.mp-obj-filename {
  flex: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(226,232,240,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 2px;
  background: rgba(2,6,23,0.6);
  border-radius: 5px;
}
.mp-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 4px 6px;
  background: linear-gradient(180deg, rgba(15,23,42,0.85), rgba(2,6,23,0.7));
  border-radius: 4px;
  gap: 2px;
  text-align: center;
}
.mp-stat-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(148,163,184,0.75);
  text-transform: uppercase;
}
.mp-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #22d3ee;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

/* ── Pipeline card ── */
.mp-pipeline-card { gap: 4px; padding: 10px 12px 12px; }
.mp-step {
  background: rgba(2,6,23,0.5);
  border: 1px solid rgba(148,163,184,0.12);
  border-left: 3px solid rgba(148,163,184,0.3);
  border-radius: 5px;
  padding: 8px 10px 9px;
  margin-top: 6px;
  transition: border-color 0.18s;
}
.mp-step[data-step-active="true"] {
  border-left-color: #22d3ee;
  background: rgba(15,23,42,0.7);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.15);
}
.mp-step[data-step-done="true"] {
  border-left-color: var(--uf-emerald);
}

.mp-step-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
}
.mp-step-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.mp-step-summary::-webkit-details-marker { display: none; }
.mp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(34,211,238,0.18);
  color: #67e8f9;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.mp-step[data-step-done="true"] .mp-step-num {
  background: rgba(16,185,129,0.25);
  color: #6ee7b7;
}
.mp-step-label { flex: 1; }
.mp-step-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.mp-step-pill[data-step-status="pending"]  { background: rgba(245,158,11,0.18); color: #fcd34d; }
.mp-step-pill[data-step-status="ready"]    { background: rgba(34,211,238,0.18); color: #67e8f9; }
.mp-step-pill[data-step-status="done"]     { background: rgba(16,185,129,0.2); color: #6ee7b7; }
.mp-step-pill[data-step-status="optional"] { background: rgba(148,163,184,0.18); color: rgba(148,163,184,0.85); }
.mp-step-chevron {
  font-size: 10px;
  color: rgba(148,163,184,0.6);
  transition: transform 0.18s;
}
.mp-step-vegetation[open] .mp-step-chevron { transform: rotate(180deg); }

.mp-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.mp-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  background: rgba(30,41,59,0.75);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 4px;
  color: rgba(226,232,240,0.92);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  flex: 1 1 auto;
  width: auto;          /* v58.52.4 — panelin geniş `button{width:100%}` mirasını ez. Aksi halde flex-basis:auto o %100'ü alıp her ikincil tuş kendi tam-genişlik satırına wrap oluyordu (mesh hazırlıkta 12+ tuş = sol panel uzadıkça uzuyordu). Artık içerik boyuna göre yan yana paketlenir; `-wide` olanlar flex-basis:100% ile tam genişlik kalır. */
  min-width: 60px;
  justify-content: center;
}
.mp-tool-btn:hover:not(:disabled) {
  background: rgba(51,65,85,0.95);
  border-color: rgba(34,211,238,0.45);
  color: #fff;
}
.mp-tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mp-tool-btn-primary {
  background: linear-gradient(180deg, #0891b2, #0e7490);
  border-color: rgba(34,211,238,0.55);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 5px rgba(8,145,178,0.3);
}
.mp-tool-btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--tk-acc-primary), #0891b2);
  color: #fff;
}
.mp-tool-btn-warn {
  background: linear-gradient(180deg, #ca8a04, #a16207);
  border-color: rgba(250,204,21,0.5);
  color: #fef3c7;
  font-weight: 700;
}
.mp-tool-btn-warn:hover:not(:disabled) {
  background: linear-gradient(180deg, #eab308, #ca8a04);
}
.mp-tool-btn-danger {
  background: rgba(127,29,29,0.45);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}
.mp-tool-btn-danger:hover:not(:disabled) {
  background: rgba(153,27,27,0.65);
  color: #fff;
}
.mp-tool-btn-wide { flex: 1 1 100%; padding: 8px 12px; font-size: 11px; }
.mp-tool-icon { font-size: 12px; line-height: 1; }
.mp-tool-label { font-size: 10.5px; }

.mp-step-detail {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed rgba(148,163,184,0.15);
  font-size: 10.5px;
  color: rgba(148,163,184,0.85);
  font-family: 'JetBrains Mono', monospace;
}
.mp-step-detail .aof-status { padding: 4px 0; }

.mp-step-body { margin-top: 7px; display: flex; flex-direction: column; gap: 6px; }

.mp-field-row, .mp-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(2,6,23,0.45);
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
}
.mp-field-label { flex: 1; color: rgba(226,232,240,0.85); font-weight: 600; }
.mp-field-input {
  width: 56px;
  padding: 3px 6px;
  background: rgba(15,23,42,0.85);
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 3px;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  text-align: center;
}
.mp-field-input:focus { outline: none; border-color: rgba(34,211,238,0.6); }
.mp-field-suffix { color: rgba(148,163,184,0.65); font-size: 10px; }
.mp-toggle-row > span { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
 * v58.6 — Mesh Tools Clean Grouping (Engineer L99 /frontend-design)
 *
 * Manuel Düzeltme step içinde 3 zone hierarchy:
 *   [seç] → [uygula primary] → [yardımcı mini row]
 * View Layers ayrı kart (cleanup'tan ayrılmış, her zaman görünür).
 *
 * Aesthetic: industrial precision, hairline zone rules, JetBrains Mono
 * monospace labels, monochrome amber accents. Bauhaus + jeoteknik teknik
 * çizim — no decorative motion.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Zone container — separates Manuel Düzeltme into hierarchy levels */
.mp-zone {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 6px 0;
}
.mp-zone:first-child { margin-top: 3px; }
.mp-zone:last-child  { margin-bottom: 0; }
.mp-zone[data-zone="apply"] {
  /* Primary action zone gets breathing room */
  margin: 8px 0;
}

/* Zone hairline rule with inline label (e.g. "seç", "yardımcı") */
.mp-zone-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin: 0;
}
.mp-zone-rule > span {
  flex: 0 0 auto;
  padding-right: 4px;
}
.mp-zone-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
}

/* Mini buttons in utility zone — smaller than primary tool buttons */
.mp-tool-btn.mp-tool-btn-mini {
  padding: 4px 8px;
  font-size: 10.5px;
  min-height: 26px;
  flex: 1 1 auto;
}
.mp-tool-btn.mp-tool-btn-mini .mp-tool-icon { font-size: 11px; }
.mp-tool-btn.mp-tool-btn-mini .mp-tool-label { font-size: 9.5px; opacity: 0.85; }

/* Manuel Düzeltme step sub-label — "bitki · araç · yapı" muted descriptor */
.mp-step-sub {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10px;
  font-style: italic;
  color: rgba(148, 163, 184, 0.55);
  margin-left: 4px;
  letter-spacing: 0;
}

/* Hint box — info variant with green accent rail (already used inline before;
   now extracted to class for consistency) */
.mp-step-hint.mp-step-hint--info {
  margin: 0 0 8px;
  padding: 6px 9px;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(203, 213, 225, 0.78);
  font-family: 'Archivo', system-ui, sans-serif;
  background: rgba(34, 197, 94, 0.06);
  border-radius: 4px;
  border-left: 2px solid rgba(34, 197, 94, 0.4);
  font-style: normal;
}

/* ─── View Layers — separate card ─────────────────────────── */
.mp-view-card {
  /* Inherits .mp-card base style */
  margin-top: 8px;
}
.mp-view-card .mp-card-head {
  padding-bottom: 7px;
}
/* v58.52.7 — Görünüm Katmanları <details> ile DEFAULT-COLLAPSED. Engineer:
   "bazen kullanıyorum, silme" → fonksiyon korunur, normalde panel yeri yemez,
   başlığa tıkla aç. Layer toggle handler'ları + layerVis default'ları değişmez
   (collapse tamamen kozmetik; kapalıyken bile butonlar DOM'da, listener bağlı). */
.mp-view-card.mp-card--collapsible > summary.mp-card-head {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.mp-view-card.mp-card--collapsible > summary.mp-card-head::-webkit-details-marker { display: none; }
/* .view-layer-group--card'ın display:grid'i <details> kapalı-gizlemesini ezer →
   collapsed iken açıkça gizle (yoksa kart hep açık görünür). */
.mp-view-card.mp-card--collapsible:not([open]) > .view-layer-group--card { display: none; }
.mp-view-card.mp-card--collapsible > summary .mp-card-status--hint::after {
  content: " ▾";
  display: inline-block;
  transition: transform 0.15s ease;
}
.mp-view-card.mp-card--collapsible[open] > summary .mp-card-status--hint::after {
  transform: rotate(180deg);
}
.mp-card-status--hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
.view-layer-group--card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 7px 10px 9px;
}

/* Legacy mp-veg-layers — kept for backwards-compat but visually deprecated */
.mp-veg-layers {
  background: rgba(2,6,23,0.45);
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: 4px;
}
.mp-veg-layers-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.7);
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
 * v57.56 — INTERNAL Grid panel redesign (engineer L99 /frontend-design)
 * "Yazılar okunmuyor, kutular gelişi güzel dizilmiş, düzen yok".
 * Section-grouped layout: ANCHOR / GRID / PATTERN / DRILLING / SEED.
 * ═══════════════════════════════════════════════════════════════════ */

.ig-card {
  border: 1px solid rgba(34,211,238,0.22);
  border-left: 3px solid rgba(34,211,238,0.6);
  background: linear-gradient(180deg, rgba(15,23,42,0.55), rgba(2,6,23,0.75));
  border-radius: 6px;
  margin: 8px 0;
  overflow: hidden;
}
.ig-card[open] { border-color: rgba(34,211,238,0.35); }

.ig-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(180deg, rgba(34,211,238,0.06), transparent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  user-select: none;
}
.ig-summary::-webkit-details-marker { display: none; }
.ig-icon {
  font-size: 14px;
  color: #67e8f9;
  filter: drop-shadow(0 0 6px rgba(34,211,238,0.4));
}
.ig-title {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f1f5f9;
}
.ig-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(148,163,184,0.85);
  font-family: inherit;
}
.ig-toggle input { margin: 0; cursor: pointer; }

.ig-body {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Section group ── */
.ig-section {
  background: rgba(2,6,23,0.4);
  border: 1px solid rgba(148,163,184,0.1);
  border-radius: 5px;
  padding: 7px 9px 9px;
}
.ig-section-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(103,232,249,0.85);
  margin-bottom: 7px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(148,163,184,0.15);
}

/* ── Radio group ── */
.ig-radio-row {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
}
.ig-radio {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(30,41,59,0.75);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(226,232,240,0.85);
  cursor: pointer;
  transition: all 0.12s;
}
.ig-radio:hover { border-color: rgba(34,211,238,0.4); }
.ig-radio input { margin: 0; cursor: pointer; }
.ig-radio:has(input:checked) {
  background: rgba(8,145,178,0.25);
  border-color: rgba(34,211,238,0.55);
  color: #67e8f9;
  font-weight: 700;
}

/* ── Field layouts ── */
.ig-field-grid { display: grid; gap: 6px; }
.ig-grid-2 { grid-template-columns: 1fr 1fr; }
.ig-grid-3 { grid-template-columns: 1fr 1fr 1.2fr; }
.ig-field-stack { display: flex; flex-direction: column; gap: 5px; }

.ig-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ig-field-wide { grid-column: span 2; }

.ig-field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(148,163,184,0.95);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-field-sub {
  font-size: 8.5px;
  color: rgba(148,163,184,0.55);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Field row (label left, input right) — for PATTERN section */
.ig-field-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ig-field-row > .ig-field-label { padding: 2px 0; }

/* ── Inputs ── */
.ig-input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  background: rgba(2,6,23,0.7);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 4px;
  color: #f1f5f9;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.ig-input:focus {
  border-color: rgba(34,211,238,0.6);
  box-shadow: 0 0 0 2px rgba(34,211,238,0.15);
}
.ig-input-primary {
  color: #67e8f9;
  background: rgba(15,23,42,0.85);
  border-color: rgba(34,211,238,0.35);
}
select.ig-input {
  background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
                    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
  cursor: pointer;
}

.ig-input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}
.ig-input-with-unit .ig-input { padding-right: 24px; }
.ig-unit {
  position: absolute;
  right: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: rgba(148,163,184,0.65);
  pointer-events: none;
  font-weight: 500;
}

/* ── Action buttons ── */
.ig-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 11px;
  background: rgba(30,41,59,0.85);
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 4px;
  color: rgba(226,232,240,0.9);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  margin-top: 7px;
  width: 100%;
}
.ig-action-btn:hover {
  background: rgba(51,65,85,0.95);
  border-color: rgba(34,211,238,0.5);
  color: #fff;
}
.ig-action-btn-primary {
  flex: 1;
  background: linear-gradient(180deg, #0891b2, #0e7490);
  border-color: rgba(34,211,238,0.55);
  color: #fff;
  font-weight: 700;
}
.ig-action-btn-primary:hover { background: linear-gradient(180deg, var(--tk-acc-primary), #0891b2); }
.ig-action-btn-icon {
  flex: 0 0 auto;
  width: 36px;
  padding: 7px 0;
}

.ig-seed-row { display: flex; gap: 6px; }
.ig-seed-info {
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(2,6,23,0.5);
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(148,163,184,0.75);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
 * v57.58 — Proje Sonuçları Aggregation Panel
 * Engineer L99 priority #2: per-slope summary + total BOM dashboard.
 * ═══════════════════════════════════════════════════════════════════ */

.pr-card {
  border: 1px solid rgba(168,85,247,0.28);
  border-left: 3px solid rgba(168,85,247,0.65);
  background: linear-gradient(180deg, rgba(15,23,42,0.7), rgba(2,6,23,0.85));
  border-radius: 6px;
  margin: 8px 0;
  overflow: hidden;
}
.pr-header {
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(168,85,247,0.08), transparent);
}
.pr-header-badge {
  margin-left: auto;
  margin-right: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(168,85,247,0.2);
  color: #d8b4fe;
  letter-spacing: 0.05em;
}
.pr-card.is-open .acc-arrow { transform: rotate(180deg); }
.pr-card:not(.is-open) .pr-body { display: none; }

.pr-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Header stats grid */
.pr-header-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 3px;
  background: rgba(2,6,23,0.55);
  border-radius: 5px;
}
.pr-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 4px 6px;
  background: linear-gradient(180deg, rgba(15,23,42,0.85), rgba(2,6,23,0.7));
  border-radius: 4px;
  gap: 2px;
  text-align: center;
}
.pr-stat-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(148,163,184,0.75);
  text-transform: uppercase;
}
.pr-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #d8b4fe;
}

/* Slope list */
.pr-slope-list { display: flex; flex-direction: column; gap: 5px; }
.pr-slope-row {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.15);
  border-left: 3px solid var(--slope-accent, rgba(148,163,184,0.5));
  border-radius: 5px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.pr-slope-row.is-expanded { border-color: rgba(34,211,238,0.3); background: rgba(15,23,42,0.85); }

.pr-slope-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  user-select: none;
  transition: background 0.12s;
}
.pr-slope-summary:hover { background: rgba(34,211,238,0.06); }
.pr-slope-chevron {
  font-size: 9px;
  color: rgba(148,163,184,0.65);
  transition: transform 0.18s;
  width: 10px;
}
.pr-slope-row.is-expanded .pr-slope-chevron { transform: rotate(90deg); }
.pr-slope-color {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.pr-slope-name {
  font-weight: 700;
  color: #f1f5f9;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-slope-polys {
  font-size: 9.5px;
  color: rgba(148,163,184,0.65);
  font-weight: 500;
}
.pr-verdict {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.pr-verdict.pass    { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.pr-verdict.fail    { background: rgba(239,68,68,0.18); color: #fca5a5; }
.pr-verdict.pending { background: rgba(245,158,11,0.18); color: #fcd34d; }
.pr-verdict.empty   { background: rgba(148,163,184,0.15); color: rgba(148,163,184,0.7); }
.pr-slope-meta {
  font-size: 10px;
  color: rgba(148,163,184,0.85);
  font-weight: 600;
  flex-shrink: 0;
}

/* Detail (expanded body) */
.pr-slope-detail {
  display: none;
  padding: 10px;
  background: rgba(2,6,23,0.6);
  border-top: 1px solid rgba(148,163,184,0.12);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
}
.pr-slope-row.is-expanded .pr-slope-detail { display: block; }

.pr-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.pr-detail-block {
  background: rgba(15,23,42,0.65);
  border: 1px solid rgba(148,163,184,0.1);
  border-radius: 4px;
  padding: 7px 9px;
}
.pr-detail-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(103,232,249,0.85);
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px dashed rgba(148,163,184,0.15);
}
.pr-detail-block-empty {
  padding: 6px 0;
  font-size: 10px;
  color: rgba(148,163,184,0.55);
  font-style: italic;
}

.pr-kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}
.pr-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  font-size: 10.5px;
}
.pr-kv-wide { grid-column: span 2; }
.pr-k {
  color: rgba(148,163,184,0.75);
  font-size: 9.5px;
  text-transform: lowercase;
}
.pr-v {
  color: #e2e8f0;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.pr-v-pass { color: #6ee7b7; }
.pr-v-fail { color: #fca5a5; }

/* BOM table */
.pr-detail-bom {
  margin-top: 8px;
  background: rgba(15,23,42,0.65);
  border: 1px solid rgba(148,163,184,0.1);
  border-radius: 4px;
  padding: 7px 9px;
}
.pr-bom-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
}
.pr-bom-table td {
  padding: 3px 4px;
  border-bottom: 1px dashed rgba(148,163,184,0.08);
}
.pr-bom-table td:first-child { color: rgba(148,163,184,0.85); }
.pr-bom-table td.pr-num {
  text-align: right;
  font-weight: 700;
  color: #67e8f9;
}
.pr-bom-table td:last-child {
  color: rgba(148,163,184,0.55);
  font-size: 9.5px;
  width: 30px;
}
.pr-bom-table tr.pr-bom-total td {
  border-top: 2px solid rgba(168,85,247,0.4);
  font-weight: 700;
  color: #d8b4fe;
  padding-top: 5px;
}

/* Per-slope action buttons */
.pr-slope-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(148,163,184,0.15);
}
.pr-action-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 9px;
  background: rgba(30,41,59,0.75);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 4px;
  color: rgba(226,232,240,0.9);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  min-width: 50px;
}
.pr-action-btn:hover {
  background: rgba(51,65,85,0.95);
  border-color: rgba(168,85,247,0.5);
  color: #d8b4fe;
}
.pr-action-btn-primary {
  background: linear-gradient(180deg, #7c3aed, #6d28d9);
  border-color: rgba(168,85,247,0.5);
  color: #fff;
  font-weight: 700;
}
.pr-action-btn-primary:hover { background: linear-gradient(180deg, var(--uf-purple), #7c3aed); }

/* Master actions */
.pr-master-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pr-master-btn {
  flex: 1 1 auto;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(168,85,247,0.25), rgba(124,58,237,0.15));
  border: 1px solid rgba(168,85,247,0.4);
  border-radius: 4px;
  color: #f1f5f9;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.pr-master-btn:hover {
  background: linear-gradient(180deg, rgba(168,85,247,0.45), rgba(124,58,237,0.25));
  color: #fff;
}

/* Total BOM card */
.pr-total-bom-card {
  background: linear-gradient(180deg, rgba(168,85,247,0.1), rgba(2,6,23,0.5));
  border: 1px solid rgba(168,85,247,0.35);
  border-radius: 5px;
  padding: 9px 11px;
  margin-top: 4px;
}
.pr-total-bom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #d8b4fe;
  margin-bottom: 7px;
}
.pr-total-bom-btn {
  padding: 5px 10px;
  background: rgba(168,85,247,0.3);
  border: 1px solid rgba(168,85,247,0.55);
  border-radius: 3px;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.pr-total-bom-btn:hover { background: rgba(168,85,247,0.5); }
.pr-total-bom-body {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(148,163,184,0.8);
  font-style: italic;
}
.pr-total-bom-table { font-style: normal; }

.pr-empty {
  padding: 14px;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: rgba(148,163,184,0.55);
}

/* ═══════════════════════════════════════════════════════════════════
 * v57.59 — Visual Unification (Engineer L99 IQ200 /frontend-design)
 *
 * Bütüncül design language layer: tüm phase'lerde tutarlı görsel kimlik.
 * Mevcut .acc-group / .acc-header / .field-row sınıflarına override ile
 * yeni "industrial CNC + engineering CAD" estetiği uygulanır. Eski layout'lar
 * korunur (regression sıfır), sadece visual tier yükseltilir.
 *
 * Stil prensipleri (Mesh Hazırlık 2.0 + Internal Grid + Proje Sonuçları
 * pattern'ini tüm panele yay):
 *   • JetBrains Mono headers (uppercase, letter-spacing)
 *   • Phase-aware accent borders (cyan ◌ purple ◌ amber)
 *   • Focus glow on inputs (cyan ring)
 *   • Status pills + chips (consistent shape)
 *   • Card backgrounds with subtle gradients
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  --uf-cyan:   #22d3ee;
  --uf-cyan-d: #67e8f9;
  --uf-purple: #a855f7;
  --uf-amber:  #f59e0b;
  --uf-rose:   #f43f5e;
  --uf-emerald:#10b981;
  --uf-blue:   #3b82f6;    /* v58.573 (Dilim B/S1) — ④ Global faz-rengi */
  --uf-orange: #f97316;    /* v58.573 (Dilim B/S1) — ⑥ Bariyer faz-rengi */
  --uf-slate:  rgba(148,163,184,0.85);
  /* v58.573 — faz-rengi RGB varyantları (TEK-KAYNAK; rgba(var(--uf-X-rgb),α) → --phase-accent + border + kart) */
  --uf-cyan-rgb:    34, 211, 238;
  --uf-purple-rgb:  168, 85, 247;
  --uf-amber-rgb:   245, 158, 11;
  --uf-emerald-rgb: 16, 185, 129;
  --uf-rose-rgb:    244, 63, 94;
  --uf-blue-rgb:    59, 130, 246;
  --uf-orange-rgb:  249, 115, 22;
  --uf-text:   #f1f5f9;
  --uf-mono:   'JetBrains Mono', ui-monospace, 'Menlo', monospace;
}

/* ── Accordion header upgrade (all .acc-group's get unified style) ── */
.acc-group .acc-header {
  font-family: var(--uf-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  background: linear-gradient(180deg, rgba(15,23,42,0.95), var(--color-panel-2, rgba(2,6,23,0.85)));
  transition: background 0.15s;
}
.acc-group .acc-header:hover {
  background: linear-gradient(180deg, rgba(34,211,238,0.06), rgba(15,23,42,0.95));
}
.acc-group .acc-num {
  background: rgba(var(--phase-accent, 34,211,238), 0.16);   /* v58.575 (S3) — panel numarası faz-rengine (border+num tek-kaynak) */
  color: var(--uf-cyan-d);
  font-family: var(--uf-mono);
}

/* v58.573 (Dilim B/S1) — FAZ-RENK SİSTEMİ tek-kaynak: her faz --phase-accent (RGB) tanımlar →
   border + kart(geo-card, S2) + başlık hep bu değişkenden türer (Kural 10). design→jeoloji fix;
   ③ yenilme(amber) · ④ global(mavi) · ⑥ bariyer(turuncu) eklendi. data-phase ÇOKLU olabilir
   ("design mesh"/"section mesh") → ~= word-match + mesh EN SONDA = ① alt-grupları cyan (baskın). */
.acc-group[data-phase~="report"]   { --phase-accent: var(--uf-rose-rgb); }
.acc-group[data-phase~="bariyer"]  { --phase-accent: var(--uf-orange-rgb); }
.acc-group[data-phase~="solution"] { --phase-accent: var(--uf-emerald-rgb); }
.acc-group[data-phase~="global"]   { --phase-accent: var(--uf-blue-rgb); }
.acc-group[data-phase~="yenilme"]  { --phase-accent: var(--uf-amber-rgb); }
.acc-group[data-phase~="jeoloji"]  { --phase-accent: var(--uf-purple-rgb); }
.acc-group[data-phase~="design"]   { --phase-accent: var(--uf-purple-rgb); }
.acc-group[data-phase~="section"]  { --phase-accent: var(--uf-amber-rgb); }
.acc-group[data-phase~="mesh"]     { --phase-accent: var(--uf-cyan-rgb); }
.acc-group[data-phase~="all"]      { --phase-accent: 148, 163, 184; }
.acc-group[data-phase]             { border-left: 3px solid rgba(var(--phase-accent, 148, 163, 184), 0.5); }

/* Subhead (h4) — JetBrains Mono uniform */
.acc-group .acc-subhead {
  font-family: var(--uf-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--uf-cyan-d);
  border-bottom: 1px dashed rgba(148,163,184,0.15);
  padding-bottom: 3px;
  margin: 8px 0 4px;
}

/* ── Form field unified style ── */
.field-row {
  font-family: var(--uf-mono);
  font-size: 11px;
  gap: 6px;
  padding: 3px 0;
}
.field-row .field-label {
  font-family: var(--uf-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--uf-slate);
  letter-spacing: 0.03em;
}
.field-row select,
.field-row input[type="number"],
.field-row input[type="text"] {
  font-family: var(--uf-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--uf-text);
  background: rgba(2,6,23,0.7);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 4px;
  padding: 5px 7px;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.field-row select:focus,
.field-row input[type="number"]:focus,
.field-row input[type="text"]:focus {
  border-color: rgba(34,211,238,0.6);
  box-shadow: 0 0 0 2px rgba(34,211,238,0.18);
}
.field-row .field-suffix {
  font-family: var(--uf-mono);
  font-size: 10px;
  color: rgba(148,163,184,0.65);
  font-weight: 500;
}

/* ── Button unified hover/focus ── */
.btn-sec, .btn-primary, .btn-aof {
  font-family: var(--uf-mono);
  letter-spacing: 0.03em;
  transition: all 0.12s;
}
.btn-sec:hover, .btn-aof:hover {
  border-color: rgba(34,211,238,0.45);
}
.btn-primary {
  background: linear-gradient(180deg, #0891b2, #0e7490);
  border-color: rgba(34,211,238,0.55);
  font-weight: 700;
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--tk-acc-primary), #0891b2);
}

/* ── Status badge consistency ── */
.acc-header[data-status="done"]::after {
  content: '✓';
  margin-left: 6px;
  color: var(--uf-emerald);
  font-size: 12px;
  font-weight: 700;
}
.acc-header[data-status="warning"]::after {
  content: '⚠';
  margin-left: 6px;
  color: var(--uf-amber);
  font-size: 12px;
}

/* ── Anchor zones (top/bot/side details) unified ── */
.anchor-zone summary {
  font-family: var(--uf-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, rgba(15,23,42,0.6), transparent);
  border-radius: 4px;
  transition: background 0.12s;
}
.anchor-zone summary:hover { background: rgba(34,211,238,0.06); }
.anchor-zone[open] summary { background: linear-gradient(180deg, rgba(34,211,238,0.08), transparent); }
.anchor-zone-body {
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── Toggle / radio inline unified ── */
.drape-toggle-inline, .drape-radio {
  font-family: var(--uf-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* ── BOM table unified ── */
#drapeBomBox, #statsBox {
  font-family: var(--uf-mono);
  font-size: 10.5px;
}

/* ── Rope row unified ── */
.rope-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(15,23,42,0.5);
  border-radius: 4px;
  margin: 3px 0;
  font-family: var(--uf-mono);
  font-size: 10.5px;
}
.rope-toggle { flex: 0 0 auto; min-width: 80px; }
.rope-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--uf-slate);
}
.rope-inline select, .rope-inline input {
  font-family: var(--uf-mono);
  font-size: 10.5px;
  padding: 3px 6px;
  background: rgba(2,6,23,0.7);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 3px;
  color: var(--uf-text);
}

/* ── Section A-A (moved to left panel) unified header ── */
[data-group="section"][data-moved-by="v57.57"] .acc-header {
  background: linear-gradient(180deg, rgba(245,158,11,0.06), rgba(15,23,42,0.95));
}

/* ── Sistem Detayları (moved to right panel) unified header ── */
[data-group="anchors-ropes"][data-moved-by="v57.57"] .acc-header {
  background: linear-gradient(180deg, rgba(16,185,129,0.06), rgba(15,23,42,0.95));
}

/* ── Phase nav rail subtle tweaks ── */
.phase-station[data-status="completed"] {
  filter: drop-shadow(0 0 4px rgba(16,185,129,0.4));
}
.phase-station[data-status="active"] {
  filter: drop-shadow(0 0 6px rgba(34,211,238,0.5));
}

/* ═══════════════════════════════════════════════════════════════════
 * v57.61 — Section A-A panel redesign (compact + ig-card pattern)
 * Engineer L99 /frontend-design: "kompakt ve duzgun yapalım aynı format"
 * ═══════════════════════════════════════════════════════════════════ */

.sec-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
}

/* Tool row — Kesit pick + expand */
.sec-tool-row {
  display: flex;
  gap: 6px;
}
.sec-tool-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #0891b2, #0e7490);
  border: 1px solid rgba(34,211,238,0.6);
  border-radius: 5px;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.12s;
}
.sec-tool-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--tk-acc-primary), #0891b2);
  box-shadow: 0 2px 8px rgba(8,145,178,0.4);
}
.sec-tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sec-tool-btn-expand {
  flex: 0 0 auto;
  width: 40px;
  padding: 9px 0;
  background: rgba(30,41,59,0.85);
  border-color: rgba(148,163,184,0.3);
  color: rgba(226,232,240,0.9);
}
.sec-tool-btn-expand:hover {
  background: rgba(51,65,85,0.95);
  border-color: rgba(168,85,247,0.5);
  color: #d8b4fe;
}
.sec-tool-icon { font-size: 14px; }
.sec-tool-label { font-size: 11px; }

/* Section group (matches ig-section + mp-section pattern) */
.sec-section {
  background: rgba(2,6,23,0.4);
  border: 1px solid rgba(148,163,184,0.1);
  border-radius: 5px;
  padding: 7px 9px 9px;
}
.sec-section-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,158,11,0.9);    /* amber accent for Section phase */
  margin-bottom: 7px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(148,163,184,0.15);
}

/* Field grid 2-col */
.sec-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.sec-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sec-field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(148,163,184,0.95);
  text-transform: uppercase;
}

/* Input with unit + reset button */
.sec-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sec-input {
  flex: 1;
  min-width: 0;
  padding: 6px 36px 6px 8px;
  background: rgba(2,6,23,0.7);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 4px;
  color: #f1f5f9;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sec-input:focus {
  border-color: rgba(245,158,11,0.6);
  box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
}
.sec-input::placeholder { color: rgba(148,163,184,0.45); font-style: italic; }
.sec-unit {
  position: absolute;
  right: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: rgba(148,163,184,0.65);
  pointer-events: none;
}
.sec-reset-btn {
  position: absolute;
  right: 2px;
  width: 18px; height: 22px;
  background: transparent;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 3px;
  color: rgba(148,163,184,0.7);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.sec-reset-btn:hover {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.4);
  color: #fcd34d;
}

/* Compact compass — half-size, label on left */
.sec-compass-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 2px;
}
.sec-compass-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(148,163,184,0.6);
  text-transform: uppercase;
}
.sec-compass-mini {
  width: 56px;
  height: 56px;
  display: inline-block;
}
.sec-compass-mini .compass-rim { fill: rgba(2,6,23,0.6); stroke: rgba(148,163,184,0.3); stroke-width: 1; }
.sec-compass-mini .compass-tick { stroke: rgba(148,163,184,0.55); stroke-width: 1.2; cursor: pointer; }
.sec-compass-mini .compass-tick:hover { stroke: #fcd34d; stroke-width: 1.8; }
.sec-compass-mini .compass-arrow { stroke: #22d3ee; stroke-width: 2; }
.sec-compass-mini .compass-center { fill: #22d3ee; }
.sec-compass-mini .compass-cardinal { fill: rgba(226,232,240,0.85); font-size: 8px; font-family: 'JetBrains Mono', monospace; font-weight: 700; }

/* Field-row (label + control inline) for DISPLAY section */
.sec-field-stack { display: flex; flex-direction: column; gap: 7px; }
.sec-field-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 8px;
}
.sec-field-row .sec-field-label { padding-top: 1px; }

/* V exag button group */
.sec-exag-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.sec-exag-btn {
  padding: 5px 0;
  background: rgba(30,41,59,0.75);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 3px;
  color: rgba(226,232,240,0.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.sec-exag-btn:hover {
  background: rgba(51,65,85,0.95);
  border-color: rgba(245,158,11,0.4);
  color: #fcd34d;
}
.sec-exag-btn.active {
  background: linear-gradient(180deg, rgba(245,158,11,0.3), rgba(202,138,4,0.2));
  border-color: rgba(245,158,11,0.55);
  color: #fcd34d;
}

/* Filter row (5 toggle pills) */
.sec-filter-row .drape-section-filter {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  min-width: 0;
}
.sec-filter-tog {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: rgba(2,6,23,0.55);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: rgba(226,232,240,0.85);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.sec-filter-tog:has(input:checked) {
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.06);
}
.sec-filter-tog input {
  margin: 0;
  width: 12px;
  height: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.sec-sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Section catalog (saved sections list) — keep existing but unified styles */
.drape-section-catalog {
  padding: 6px 8px;
  background: rgba(15,23,42,0.4);
  border-radius: 4px;
  border: 1px solid rgba(148,163,184,0.1);
  margin-top: 4px;
}
.saved-sections-list {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.saved-sec-empty {
  color: rgba(148,163,184,0.55);
  font-style: italic;
  display: block;
  padding: 4px 0;
}

/* SVG preview wrap + empty state */
.drape-section-svg-wrap {
  margin-top: 4px;
}
.drape-section-empty {
  padding: 12px 10px;
  background: rgba(2,6,23,0.4);
  border: 1px dashed rgba(148,163,184,0.18);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(148,163,184,0.75);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
 * v57.67 — Kullanım Kılavuzu Modal
 * Tab'lı manual: Genel + Geometri + Jeoloji + 5 Proof + Sistem + İş Akışı.
 * AMD accordion'da 📖 Kılavuz butonuyla açılır. Dark theme + purple accent.
 * ═══════════════════════════════════════════════════════════════ */

.amd-hint-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.amd-hint-row .amd-hint { flex: 1; margin: 0; }
.amd-glossary-btn {
  flex-shrink: 0;
  /* v57.85 — global rule "input, select, textarea, button { width: 100% }"
   * butonu flex row içinde 100% genişliğe zorluyor → hint ezilen kolon olur.
   * Explicit width:auto override (content-fit) + max-width güvenlik. */
  width: auto !important;
  max-width: 120px;
  padding: 5px 9px;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.18), rgba(124, 58, 237, 0.12));
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 4px;
  color: #e9d5ff;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.amd-glossary-btn:hover {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.32), rgba(124, 58, 237, 0.22));
  border-color: rgba(168, 85, 247, 0.75);
  color: #fff;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

.glossary-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.glossary-modal[hidden] { display: none; }
.glossary-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(4px);
  animation: glossFadeIn 0.18s ease;
}
@keyframes glossFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.glossary-panel {
  position: relative;
  width: min(900px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(168, 85, 247, 0.15);
  overflow: hidden;
  animation: glossPopIn 0.22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes glossPopIn {
  from { transform: translateY(8px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}
.glossary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.15), rgba(124, 58, 237, 0.05));
  border-bottom: 1px solid rgba(168, 85, 247, 0.30);
}
.glossary-head h3 {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f3e8ff;
}
.glossary-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.12s ease;
}
.glossary-close:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.65);
  color: #fff;
}

.glossary-tabs {
  display: flex;
  gap: 0;
  padding: 0 12px;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  overflow-x: auto;
  scrollbar-width: thin;
}
.glossary-tab {
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(148, 163, 184, 0.75);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.glossary-tab:hover {
  color: #e9d5ff;
  background: rgba(168, 85, 247, 0.08);
}
.glossary-tab.active {
  color: #fcd34d;
  border-bottom-color: #f59e0b;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.06), transparent);
}

.glossary-body {
  flex: 1;
  padding: 18px 22px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.4) transparent;
}
.glossary-body::-webkit-scrollbar { width: 8px; }
.glossary-body::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.4);
  border-radius: 4px;
}

.glossary-panel-content[hidden] { display: none; }

/* ── Genel intro ── */
.g-intro h4 {
  margin: 0 0 8px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
}
.g-intro p {
  margin: 0 0 14px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.85);
}
.g-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.g-card {
  padding: 11px 13px;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
}
.g-card-head {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fcd34d;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.g-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.82);
}
.g-note {
  margin-top: 12px;
  padding: 10px 13px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid rgba(245, 158, 11, 0.55);
  border-radius: 0 4px 4px 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(254, 215, 170, 0.88);
}
.g-warn {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.10);
  border-left: 3px solid rgba(239, 68, 68, 0.55);
  border-radius: 0 4px 4px 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(252, 165, 165, 0.92);
}
.g-intro-txt {
  margin: 0 0 14px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.85);
}

/* ── v58.192 #163 — Kılavuz şema figürü (TECCO/RUVOLUM görseli) ── */
.g-figure {
  margin: 0 0 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.55));
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
}
.g-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 4px;
}
.g-figure figcaption {
  margin-top: 9px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.80);
}
.g-figure figcaption b { color: #fde68a; font-weight: 600; }

/* ── Detail kart (parametre + proof + system) ── */
.g-card-detail {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.55));
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
}
.g-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.g-big-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(202, 138, 4, 0.10));
  border: 1px solid rgba(245, 158, 11, 0.40);
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px;
  font-weight: 700;
  color: #fcd34d;
  flex-shrink: 0;
}
.g-detail-head > div {
  flex: 1;
  min-width: 0;
}
.g-detail-head h5 {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.01em;
}
.g-en {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(148, 163, 184, 0.70);
}
.g-unit-tag {
  flex-shrink: 0;
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.85);
}
.g-card-detail p {
  margin: 0 0 6px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.85);
}
.g-card-detail p:last-child { margin-bottom: 0; }
.g-card-detail b {
  color: #fde68a;
  font-weight: 600;
}
.g-list {
  margin: 4px 0 6px 16px;
  padding: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.82);
}
.g-list li::marker { color: rgba(245, 158, 11, 0.65); }

.g-dl {
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 4px 12px;
  font-size: 12px;
}
.g-dl dt {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #fcd34d;
}
.g-dl dd {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  color: rgba(226, 232, 240, 0.85);
  line-height: 1.5;
}

/* ── Proof renkleri ── */
.g-big-sym.proof-P { background: linear-gradient(180deg, rgba(239, 68, 68, 0.20), rgba(185, 28, 28, 0.10)); border-color: rgba(239, 68, 68, 0.45); color: #fecaca; }
.g-big-sym.proof-Z { background: linear-gradient(180deg, rgba(59, 130, 246, 0.20), rgba(37, 99, 235, 0.10)); border-color: rgba(59, 130, 246, 0.45); color: #bfdbfe; }
.g-big-sym.proof-D { background: linear-gradient(180deg, rgba(20, 184, 166, 0.20), rgba(13, 148, 136, 0.10)); border-color: rgba(20, 184, 166, 0.45); color: #99f6e4; }
.g-big-sym.proof-T { background: linear-gradient(180deg, rgba(168, 85, 247, 0.20), rgba(124, 58, 237, 0.10)); border-color: rgba(168, 85, 247, 0.45); color: #e9d5ff; }
.g-big-sym.proof-S { background: linear-gradient(180deg, rgba(245, 158, 11, 0.22), rgba(202, 138, 4, 0.12)); border-color: rgba(245, 158, 11, 0.55); color: #fcd34d; }

.proof-P-card { border-left: 3px solid rgba(239, 68, 68, 0.45); }
.proof-Z-card { border-left: 3px solid rgba(59, 130, 246, 0.45); }
.proof-D-card { border-left: 3px solid rgba(20, 184, 166, 0.45); }
.proof-T-card { border-left: 3px solid rgba(168, 85, 247, 0.45); }
.proof-S-card { border-left: 3px solid rgba(245, 158, 11, 0.55); }

/* ── İş akışı liste ── */
.g-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.g-flow > li {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.08), rgba(15, 23, 42, 0.45));
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 6px;
}
.g-flow-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.25), rgba(202, 138, 4, 0.12));
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #fcd34d;
}
.g-flow > li > div {
  flex: 1;
  min-width: 0;
}
.g-flow > li > div b {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 3px;
}
.g-flow > li > div small {
  display: block;
  margin-top: 5px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(148, 163, 184, 0.75);
  line-height: 1.4;
}

/* ── Footer ── */
.glossary-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(15, 23, 42, 0.65);
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.65);
  letter-spacing: 0.04em;
}

/* Responsive */
@media (max-width: 720px) {
  .glossary-panel { width: 95vw; max-height: 92vh; }
  .g-grid-2 { grid-template-columns: 1fr; }
  .glossary-body { padding: 14px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
 * v57.68 — Sistem Detayları AMD'ye merge edildikten sonra görsel
 * ayrım: subtle horizontal rule + accent border. Anchor zones,
 * Internal Grid, Wire Ropes hep aynı renkte input alanı olarak görünür.
 * ═══════════════════════════════════════════════════════════════ */
.amd-merged-systemdetails {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(168, 85, 247, 0.30);
}
.amd-merged-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(168, 85, 247, 0.85);
  text-transform: uppercase;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.18);
}
.amd-merged-head::before {
  content: '⚙';
  font-size: 12px;
  opacity: 0.7;
}
/* Anchor Specifications sub-header inside merged block — daha küçük */
.amd-merged-systemdetails > h4.acc-subhead:not(.amd-merged-head) {
  font-size: 9.5px;
  margin-top: 10px;
  margin-bottom: 4px;
  color: rgba(148, 163, 184, 0.75);
}

/* ═══════════════════════════════════════════════════════════════
 * v57.69 — Magic Wand (yüzey sınıflama) styling
 * Mesh Hazırlık 2.0 mp-step pattern + magenta accent (Wand identity).
 * ═══════════════════════════════════════════════════════════════ */
.mp-step-wand .mp-step-head {
  border-left: 3px solid rgba(217, 70, 239, 0.35);
}
.mp-step-wand[open] .mp-step-head {
  border-left-color: rgba(217, 70, 239, 0.65);
}
.mp-step-wand .mp-step-hint {
  margin: 0 0 8px;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(203, 213, 225, 0.72);
  font-family: 'Archivo', system-ui, sans-serif;
  padding: 6px 8px;
  background: rgba(217, 70, 239, 0.06);
  border-radius: 4px;
  border-left: 2px solid rgba(217, 70, 239, 0.35);
}
/* Activate button — when wand is active, give magenta glow */
#wandActivateBtn.wand-active {
  background: linear-gradient(180deg, rgba(217, 70, 239, 0.30), rgba(168, 85, 247, 0.20));
  border-color: rgba(217, 70, 239, 0.75);
  color: #f5d0fe;
  box-shadow: 0 0 12px rgba(217, 70, 239, 0.40), inset 0 0 8px rgba(217, 70, 239, 0.18);
}

/* Sub-mode pills (Palye/Şev/Zemin) */
.wand-mode-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 6px;
}
.wand-mode-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(148, 163, 184, 0.75);
  text-transform: uppercase;
}
.wand-mode-pills {
  display: flex;
  gap: 3px;
  flex: 1;
}
.wand-pill {
  flex: 1;
  padding: 5px 6px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  color: rgba(203, 213, 225, 0.85);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.14s ease;
  white-space: nowrap;
}
.wand-pill:hover {
  background: rgba(30, 41, 59, 0.75);
  color: #fff;
}
.wand-pill-palye.active {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.20), rgba(8, 145, 178, 0.12));
  border-color: rgba(34, 211, 238, 0.60);
  color: #cffafe;
}
.wand-pill-sev.active {
  background: linear-gradient(180deg, rgba(244, 114, 182, 0.22), rgba(219, 39, 119, 0.14));
  border-color: rgba(244, 114, 182, 0.60);
  color: #fce7f3;
}
.wand-pill-zemin.active {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.22), rgba(100, 116, 139, 0.14));
  border-color: rgba(148, 163, 184, 0.60);
  color: #e2e8f0;
}

/* Slider */
.wand-slider {
  flex: 1;
  height: 4px;
  background: rgba(148, 163, 184, 0.20);
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.wand-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #d946ef, var(--uf-purple));
  border-radius: 50%;
  border: 1px solid rgba(217, 70, 239, 0.55);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(217, 70, 239, 0.45);
}
.wand-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #d946ef, var(--uf-purple));
  border-radius: 50%;
  border: 1px solid rgba(217, 70, 239, 0.55);
  cursor: pointer;
}

/* Selection status chip */
.wand-status {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 8px 0;
  padding: 6px 9px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px dashed rgba(217, 70, 239, 0.30);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.wand-status-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.75);
  text-transform: uppercase;
}
.wand-status-count {
  font-size: 14px;
  font-weight: 700;
  color: #f0abfc;
  font-feature-settings: 'tnum';
}
.wand-status-meta {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.60);
  font-style: italic;
}
.wand-status.has-selection {
  background: linear-gradient(90deg, rgba(217, 70, 239, 0.10), rgba(15, 23, 42, 0.65));
  border-style: solid;
  border-color: rgba(217, 70, 239, 0.55);
}
.wand-status.has-selection .wand-status-count {
  color: #f5d0fe;
}

/* ═══════════════════════════════════════════════════════════════════════
   v58.11 — POLYGON · ÇİZ workflow-first IA (L99/IQ200 audit response)
   Engineer feedback: "polygonlar aşağıda vs tuslar anlasilmiyor"
   Root cause: 4-level numbering theater (phase rail "02" → accordion "2"
   → inner ①②③④ → step 1/2/3) and DRAW button visually equal-weighted
   with mostly-disabled CLOSE. This block ONLY uses CSS reorder + opacity
   tricks — zero HTML changes, zero JS rewires. All IDs preserved.

   Strategy:
   ① Reorder children of Polygon Tasarım accordion body via flex `order`
     so workflow (DRAW) sits on top, list reads as passive state below.
   ② Hide inner ①②③④ numbers + section-label headers — phase rail
     already says "02 Polygon", the inner numbering was redundant.
   ③ Promote DRAW to a HERO band (60px tall, 18px text, 7:3 ratio).
   ④ Hide + Yeni Polygon button — DRAW covers same intent.
   ⑤ Replace POLYGONS section header with a compact one-line readout.
   ═══════════════════════════════════════════════════════════════════════ */

/* ① Reorder accordion children: workflow first, then list, then context, finalize */
.acc-group[data-group="area"] > .acc-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acc-group[data-group="area"] .pt-section--workflow { order: 1; }
.acc-group[data-group="area"] .pt-section--state    { order: 2; }
.acc-group[data-group="area"] .pt-section--context  { order: 3; }
.acc-group[data-group="area"] .pt-section--finalize { order: 4; }
.acc-group[data-group="area"] #polyEditHint         { order: 99; }
/* Within workflow, reorder steps: ÇİZ (2) first, ÜRET (1=heatmap) below, SINIFLA (3) last */
.acc-group[data-group="area"] .pt-workflow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acc-group[data-group="area"] .pt-step[data-step="2"] { order: 1; }
.acc-group[data-group="area"] .pt-step[data-step="1"] { order: 2; }
.acc-group[data-group="area"] .pt-step[data-step="3"] { order: 3; }

/* ② Kill the inner numbering theater + redundant section headers */
.acc-group[data-group="area"] .pt-section--workflow > .pt-section-label,
.acc-group[data-group="area"] .pt-section--state > .pt-section-label > .pt-section-num,
.acc-group[data-group="area"] .pt-section--state > .pt-section-label > .pt-section-name,
.acc-group[data-group="area"] .pt-section--state > .pt-section-label > .pt-section-rule,
.acc-group[data-group="area"] .pt-section--context > .pt-section-label > .pt-section-num,
.acc-group[data-group="area"] .pt-section--context > .pt-section-label > .pt-section-rule,
.acc-group[data-group="area"] .pt-section--finalize > .pt-section-label > .pt-section-num,
.acc-group[data-group="area"] .pt-section--finalize > .pt-section-label > .pt-section-rule,
.acc-group[data-group="area"] .pt-step-head {
  display: none !important;
}
/* Compact state-section label: "polygon listesi · N" inline mini-chip */
.acc-group[data-group="area"] .pt-section--state > .pt-section-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px 2px;
  margin: 0;
  border: 0;
  background: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.70);
}
.acc-group[data-group="area"] .pt-section--state > .pt-section-label::before {
  content: "polygon listesi";
}
.acc-group[data-group="area"] .pt-section--state > .pt-section-label .pt-section-count {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.18);
  padding: 1px 7px;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.acc-group[data-group="area"] .pt-section--state > .pt-section-label .pt-section-sublabel {
  display: none;
}
.acc-group[data-group="area"] .pt-section--state > .pt-section-label .pt-section-action {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 8px;
}

/* ③ Hero DRAW band — biggest, most prominent control in Polygon Tasarım */
.acc-group[data-group="area"] .pt-step[data-step="2"] .pt-draw-primary-row {
  grid-template-columns: 7fr 3fr;
  gap: 8px;
  margin: 4px 0 8px;
}
.acc-group[data-group="area"] .pt-step[data-step="2"] .pt-draw-primary-btn {
  min-height: 58px;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  border-width: 2px;
}
.acc-group[data-group="area"] .pt-step[data-step="2"] .pt-draw-primary-btn .pt-draw-ico {
  font-size: 22px;
  margin-right: 6px;
}
.acc-group[data-group="area"] .pt-step[data-step="2"] .pt-draw-primary-btn .pt-draw-text {
  font-size: 16px;
  letter-spacing: 0.18em;
}
.acc-group[data-group="area"] .pt-step[data-step="2"] .pt-draw-primary-btn .pt-draw-key {
  font-size: 10px;
  opacity: 0.75;
}
.acc-group[data-group="area"] .pt-step[data-step="2"] .pt-draw-primary-btn:not(:disabled) {
  box-shadow:
    0 4px 14px -4px rgba(251, 191, 36, 0.45),
    0 2px 4px -1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.acc-group[data-group="area"] .pt-step[data-step="2"] .pt-draw-primary-btn--close:disabled {
  opacity: 0.32;
}
.acc-group[data-group="area"] .pt-step[data-step="2"] .pt-draw-secondary-row {
  margin-bottom: 4px;
  opacity: 0.85;
}

/* ④ Hide + Yeni Polygon (DRAW already starts a polygon — duplicate CTA) */
.acc-group[data-group="area"] #addPolygonBtn {
  display: none !important;
}

/* ⑤ Workflow card padding & visual rhythm tighten */
.acc-group[data-group="area"] .pt-section--workflow {
  padding-top: 8px;
}
.acc-group[data-group="area"] .pt-section--state {
  padding: 8px 10px 10px;
}
.acc-group[data-group="area"] .polygon-list-empty {
  font-size: 10.5px;
  padding: 6px 4px;
  color: rgba(148, 163, 184, 0.55);
  font-style: italic;
}

/* ⑥ Edit toolbar collapsed wrapper — wraps the existing .poly-edit-toolbar
   when .pt-edit-tools <details> is added in HTML. Closed by default;
   summary line says "⚙ Araçlar (...)" with chevron. */
.pt-edit-tools {
  margin: 6px 0 4px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.30);
  overflow: hidden;
}
.pt-edit-tools[open] {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(148, 163, 184, 0.30);
}
.pt-edit-tools > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.78);
  transition: background 0.18s ease, color 0.18s ease;
}
.pt-edit-tools > summary:hover {
  background: rgba(148, 163, 184, 0.06);
  color: #f1f5f9;
}
.pt-edit-tools > summary::-webkit-details-marker { display: none; }
.pt-edit-tools > summary::marker { content: ""; }
.pt-edit-tools > summary::before {
  content: "▸";
  font-size: 11px;
  opacity: 0.65;
  transition: transform 0.18s ease;
}
.pt-edit-tools[open] > summary::before { transform: rotate(90deg); }
.pt-edit-tools-icon {
  font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.pt-edit-tools-title {
  letter-spacing: 0.14em;
}
.pt-edit-tools-hint {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: none;
  color: rgba(148, 163, 184, 0.65);
}
.pt-edit-tools > .poly-edit-toolbar {
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v58.39 — TEPE/TOPUK TANIMLA card (#214). Instrument-grade edge-definition UI.
 * .poly-kesit-panel'in kardeşi ama AMBER-çerçeveli (aktif KURULUM adımı, hemen
 * altındaki sky-blue KESİT kartını besleyen ön koşul). Crest/toe renkleri
 * .vertex-pill dilini yeniden kullanır (mavi=top, kırmızı=toe, turuncu=side).
 * 180-pill listesi → kompakt chip özeti + 4-adım rail'li 2-tık aracı.
 * /frontend-design: rafine, tactile, JetBrains-Mono aksanlar, DS_TOKENS uyumlu.
 * ═══════════════════════════════════════════════════════════════════════════ */
.edge-def-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 12px 13px;
  margin: 8px 0 10px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.07), rgba(15, 23, 42, 0.55));
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
}
.edge-def-card.is-picking {
  border-color: rgba(251, 191, 36, 0.85);
  animation: edcArmed 1.6s ease-in-out infinite;
}
@keyframes edcArmed {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(251,191,36,0.30), 0 0 12px rgba(251,191,36,0.14); }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(251,191,36,0.55), 0 0 20px rgba(251,191,36,0.28); }
}
/* [hidden] guard — .edc-stepper'a display:flex verdiğimiz için UA [hidden]
   kuralı eziliyordu; stepper hep görünür kalıyordu. JS hidden toggle'ı çalışsın
   diye re-assert. Kart da defansif olarak. */
.edge-def-card[hidden],
.edge-def-card .edc-stepper[hidden] { display: none; }

.edge-def-card .edc-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(251, 191, 36, 0.25);
}
.edge-def-card .edc-icon { font-size: 13px; color: #fcd34d; }
.edge-def-card .edc-title {
  flex: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fde68a;
}
.edge-def-card .edc-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 9px;
  white-space: nowrap;
}
.edge-def-card .edc-badge[data-state="empty"]   { color: #fca5a5; background: rgba(185,28,28,0.16); border: 1px solid rgba(239,68,68,0.40); }
.edge-def-card .edc-badge[data-state="partial"] { color: #fde68a; background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.45); }
.edge-def-card .edc-badge[data-state="ok"]      { color: #6ee7b7; background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.45); }

.edge-def-card .edc-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
  align-items: center;
}
.edge-def-card .edc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1.5px solid rgba(148,163,184,0.4);
  background: rgba(15,23,42,0.65);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: rgba(203,213,225,0.85);
  white-space: nowrap;
}
.edge-def-card .edc-chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.edge-def-card .edc-chip--top   { border-color: #3b82f6; color: #93c5fd; background: rgba(29,78,216,0.18); }
.edge-def-card .edc-chip--toe   { border-color: #ef4444; color: #fca5a5; background: rgba(185,28,28,0.18); }
.edge-def-card .edc-chip--side  { border-color: #f97316; color: #fdba74; background: rgba(234,88,12,0.18); }
.edge-def-card .edc-chip--empty { border-style: dashed; color: #64748b; font-style: italic; font-family: inherit; }

.edge-def-card .edc-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.edge-def-card .edc-tool-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 13px;
  background: linear-gradient(180deg, rgba(251,191,36,0.22), rgba(251,191,36,0.08));
  border: 1px solid rgba(251,191,36,0.55);
  border-radius: 8px;
  color: #fffbeb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.edge-def-card .edc-tool-btn:hover {
  background: linear-gradient(180deg, rgba(251,191,36,0.32), rgba(251,191,36,0.14));
  box-shadow: 0 0 14px rgba(251,191,36,0.22);
  transform: translateY(-1px);
}
.edge-def-card .edc-tool-btn:active { transform: translateY(0); }
.edge-def-card .edc-tool-ico { font-size: 14px; }
.edge-def-card .edc-tool-kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 5px;
  color: #fde68a;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(251,191,36,0.45);
}
.edge-def-card .edc-auto-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 7px 12px;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 8px;
  color: rgba(203,213,225,0.85);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.edge-def-card .edc-auto-btn:hover { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.5); color: #e2e8f0; }
/* v58.39.2 — Auto + Yan İşaretle yan yana (eşit genişlik) */
.edge-def-card .edc-actions-row { display: flex; gap: 6px; }
.edge-def-card .edc-actions-row > * { flex: 1; justify-content: center; }
.edge-def-card .edc-side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  background: rgba(234,88,12,0.12);
  border: 1px solid rgba(249,115,22,0.45);
  border-radius: 8px;
  color: #fdba74;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.edge-def-card .edc-side-btn:hover { background: rgba(234,88,12,0.22); border-color: rgba(249,115,22,0.7); }

/* ═══ v58.40 — ÇÖZÜM METRAJI (BOM) — instrument table ═══ */
.xbom-rope-input { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 11px; color: rgba(203,213,225,0.85); }
.xbom-rope-input .xbom-rope-lbl { font-weight: 600; color: #94a3b8; }
.xbom-rope-input label { display: inline-flex; align-items: center; gap: 4px; }
.xbom-rope-input input { width: 50px; padding: 3px 5px; background: rgba(15,23,42,0.65); border: 1px solid rgba(148,163,184,0.3); border-radius: 5px; color: #e2e8f0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
.xbom-wrap { display: flex; flex-direction: column; gap: 8px; }
.xbom-head { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #7dd3fc; padding-bottom: 4px; border-bottom: 1px dashed rgba(56,189,248,0.25); }
.xbom-head-sub { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: #64748b; font-size: 9.5px; }
.xbom-poly { background: rgba(15,23,42,0.5); border: 1px solid rgba(148,163,184,0.18); border-radius: 8px; padding: 6px 8px; }
.xbom-poly-head { font-size: 10.5px; font-weight: 600; color: #bae6fd; margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.xbom-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.xbom-table td { padding: 3px 4px; border-bottom: 1px solid rgba(148,163,184,0.10); vertical-align: top; }
.xbom-table td:first-child { color: rgba(148,163,184,0.85); white-space: nowrap; padding-right: 10px; }
.xbom-table td:last-child { color: #e2e8f0; text-align: right; font-variant-numeric: tabular-nums; }
.xbom-table tr:last-child td { border-bottom: 0; }
.xbom-row-tot td { border-top: 1px solid rgba(148,163,184,0.25); padding-top: 5px; }
.xbom-sub { color: #64748b; font-size: 9.5px; }
.xbom-warn { color: #fca5a5; font-weight: 700; }
.xbom-ok { color: #6ee7b7; font-weight: 700; }
.xbom-total { background: linear-gradient(180deg, rgba(16,185,129,0.08), rgba(15,23,42,0.55)); border: 1px solid rgba(16,185,129,0.3); border-radius: 8px; padding: 8px 9px; }
.xbom-total-head { font-size: 11px; font-weight: 800; letter-spacing: 0.10em; color: #6ee7b7; margin-bottom: 5px; }
/* v58.40.1 — Mesh Karşılaştır: design olarak SEÇİLEN satır (yeşil) */
.xs-combo-row.xs-mesh-selected { border-left: 3px solid var(--uf-emerald); background: rgba(16,185,129,0.14); }

.edge-def-card .edc-stepper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(8,9,11,0.55);
  border: 1px solid rgba(251,191,36,0.30);
  border-radius: 8px;
}
.edge-def-card .edc-step-rail {
  display: flex;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: edc;
}
.edge-def-card .edc-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.5);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(148,163,184,0.65);
  text-align: center;
  transition: all .2s ease;
}
.edge-def-card .edc-step::before {
  counter-increment: edc;
  content: counter(edc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  border-radius: 50%;
  font-size: 8px; font-weight: 800;
  background: rgba(148,163,184,0.18);
  color: rgba(203,213,225,0.7);
}
.edge-def-card .edc-step.is-active {
  border-color: rgba(6,182,212,0.7);
  background: rgba(6,182,212,0.12);
  color: #a5f3fc;
  box-shadow: 0 0 10px rgba(6,182,212,0.20);
}
.edge-def-card .edc-step.is-active::before { background: var(--tk-acc-primary); color: #042f33; }
.edge-def-card .edc-step.is-done {
  border-color: rgba(16,185,129,0.5);
  background: rgba(16,185,129,0.10);
  color: #6ee7b7;
}
.edge-def-card .edc-step.is-done::before { content: '\2713'; background: var(--ds-emerald); color: #052e16; }
.edge-def-card .edc-step-hint {
  font-size: 11px;
  color: #e2e8f0;
  line-height: 1.4;
}
.edge-def-card .edc-step-hint b { color: #fde68a; }
.edge-def-card .edc-step-foot { display: flex; gap: 6px; }
.edge-def-card .edc-step-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,0.3);
  background: rgba(15,23,42,0.6);
  color: rgba(203,213,225,0.85);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.edge-def-card .edc-step-btn:hover { background: rgba(30,41,59,0.85); }
.edge-def-card .edc-step-btn--cancel { color: #fca5a5; border-color: rgba(239,68,68,0.35); }
.edge-def-card .edc-step-btn--cancel:hover { background: rgba(185,28,28,0.2); }

.edge-def-card .edc-advanced {
  border-top: 1px dashed rgba(148,163,184,0.2);
  padding-top: 7px;
}
.edge-def-card .edc-advanced > summary {
  list-style: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.7);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.edge-def-card .edc-advanced > summary::-webkit-details-marker { display: none; }
.edge-def-card .edc-advanced > summary::before {
  content: '\25B8';
  font-size: 9px;
  transition: transform .15s ease;
}
.edge-def-card .edc-advanced[open] > summary::before { transform: rotate(90deg); }
.edge-def-card .edc-advanced > .drape-classify-block { margin-top: 8px; }

/* ⑦ Cross-section KESIT TARAMA card (KATMAN 3 scaffold) */
.poly-kesit-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 14px;
  margin: 8px 0;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.06), rgba(15, 23, 42, 0.55));
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.poly-kesit-panel .pkp-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(56, 189, 248, 0.25);
}
.poly-kesit-panel .pkp-icon { font-size: 14px; }
.poly-kesit-panel .pkp-title {
  flex: 1;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7dd3fc;
}
.poly-kesit-panel .pkp-badge {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fef3c7;
  background: rgba(251, 191, 36, 0.16);
  border: 1px solid rgba(251, 191, 36, 0.4);
  padding: 2px 7px;
  border-radius: 9px;
}
.poly-kesit-panel .pkp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.poly-kesit-panel .pkp-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(186, 230, 253, 0.8);
  min-width: 56px;
}
.poly-kesit-panel .pkp-radio-group {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 7px;
  overflow: hidden;
}
.poly-kesit-panel .pkp-radio-group label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(186, 230, 253, 0.7);
  cursor: pointer;
  border-right: 1px solid rgba(56, 189, 248, 0.15);
  transition: background 0.12s ease, color 0.12s ease;
}
.poly-kesit-panel .pkp-radio-group label:last-child { border-right: 0; }
.poly-kesit-panel .pkp-radio-group label:has(input:checked) {
  background: rgba(56, 189, 248, 0.18);
  color: #f0f9ff;
}
.poly-kesit-panel .pkp-radio-group input { position: absolute; opacity: 0; pointer-events: none; }
.poly-kesit-panel .pkp-strike-display {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #bae6fd;
  background: rgba(15, 23, 42, 0.55);
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid rgba(56, 189, 248, 0.18);
}
.poly-kesit-panel .pkp-sample-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.20), rgba(56, 189, 248, 0.08));
  border: 1px solid rgba(56, 189, 248, 0.55);
  border-radius: 8px;
  color: #f0f9ff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.16s ease;
}
.poly-kesit-panel .pkp-sample-btn:hover {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0.14));
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.poly-kesit-panel .pkp-sample-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.poly-kesit-panel .pkp-sample-btn .pkp-sample-ico { font-size: 16px; }
.poly-kesit-panel .pkp-preview {
  min-height: 32px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px dashed rgba(56, 189, 248, 0.2);
  border-radius: 7px;
  font-size: 10.5px;
  color: rgba(186, 230, 253, 0.7);
  font-style: italic;
  text-align: center;
}
.poly-kesit-panel .pkp-preview.has-data {
  font-style: normal;
  text-align: left;
}
.poly-kesit-panel .pkp-hint {
  font-size: 10px;
  line-height: 1.45;
  color: rgba(186, 230, 253, 0.62);
  border-top: 1px dashed rgba(56, 189, 248, 0.15);
  padding-top: 8px;
}

/* Legacy cluster paneli — collapsed altında, eskimiş yöntem */
.pt-legacy-cluster {
  margin: 6px 0;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.30);
  overflow: hidden;
}
.pt-legacy-cluster > summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.68);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.pt-legacy-cluster > summary::-webkit-details-marker { display: none; }
.pt-legacy-cluster > summary::before {
  content: "▸";
  font-size: 10px;
  opacity: 0.65;
  transition: transform 0.18s ease;
}
.pt-legacy-cluster[open] > summary::before { transform: rotate(90deg); }
.pt-legacy-cluster > summary:hover { background: rgba(148, 163, 184, 0.06); color: #cbd5e1; }
.pt-legacy-cluster .pt-legacy-cluster-tag {
  margin-left: auto;
  font-size: 9px;
  background: rgba(251, 146, 60, 0.18);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #fed7aa;
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 0.08em;
}
.pt-legacy-cluster[open] {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(148, 163, 184, 0.28);
}

/* Accordion title micro-refinement — engineer mental model "Çiz + Düzenle" */
.acc-group[data-group="area"] > .acc-header .acc-title {
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════════
   v58.12 — Cross-section pipeline visuals
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide legacy cluster panel + multi-section panel + the <details> wrapper —
   engineer pivot "cluster falan olacagını düşünmüyorum". */
#polyFaceClusterPanel,
#polyMultiSecPanel,
.pt-legacy-cluster {
  display: none !important;
}

/* Canvas blocks inside KESIT TARAMA panel */
.pkp-canvas-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.pkp-canvas-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7dd3fc;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pkp-canvas-hint {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: none;
  color: rgba(186, 230, 253, 0.55);
}
/* v58.43 — FAZ A: Çözümlü/çözümsüz toggle (section view başlığı sağında) */
.xs-sol-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #34d399;
  cursor: pointer;
  user-select: none;
}
.xs-sol-toggle input { accent-color: var(--uf-emerald); cursor: pointer; margin: 0; }
.pkp-canvas {
  width: 100%;
  height: auto;
  display: block;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.pkp-canvas--plan {
  aspect-ratio: 15 / 7;
  min-height: 200px;
  max-height: 320px;
}
.pkp-canvas--section {
  aspect-ratio: 15 / 6;
  min-height: 170px;
  max-height: 280px;
}
.pkp-canvas--elev {
  aspect-ratio: 15 / 5.5;
  min-height: 150px;
  max-height: 250px;
}
.pkp-canvas:hover {
  border-color: rgba(56, 189, 248, 0.42);
}

/* ═══════════════════════════════════════════════════════════════════════
   v58.13 — Workflow-aligned simplification + instrument aesthetic
   (engineer L99/IQ200 — sanatçı + matematikçi: minimal, deterministic UI)

   PHILOSOPHY
   ──────────
   The new workflow has 4 verbs: MESH → ÇİZ → KESİT → HESAP. Everything that
   doesn't serve one of those four is hidden (not deleted — CSS only, IDs
   preserved). The cross-section panel is the new instrument; it gets
   engineering-grade visual weight (JetBrains Mono, tabular numerals, sharp
   corners, dark glass, cyan accent, one hero CTA).

   Cardinal rules:
   ① 1 accent color (cyan) + 1 warning (amber) — no rainbow.
   ② All numbers in monospace, tabular-nums.
   ③ Sharp 3-4px corners (instrument-like, not soft-app-like).
   ④ One bold verb per panel.
   ⑤ Generous breathing room around what remains.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── A · HIDE OBSOLETE UI (yeni workflow'da yer yok) ─────────────────── */

/* Phase rail: "03 Kesit" station obsolete — KESİT TARAMA card now lives
   inside Polygon phase, no separate slope-grouping needed. */
.phase-rail-track .phase-station[data-phase="section"] {
  display: none !important;
}

/* v58.243 — buradaki İKİNCİ .acc-group[data-group="slopes"] kill-kuralı da
   KALDIRILDI (yamaç revival; bkz. ~satır 1644 bloğu — "Yol 3" kök nedeni). */

/* Polygon SINIFLA step (palye threshold + skip-ropes toggle) — segment
   classification now per-cross-section, not per-polygon best-fit plane. */
.acc-group[data-group="area"] .pt-step[data-step="3"] {
  display: none !important;
}

/* Polygon SET BİTİR card (Group / Lock / Union / Shotcrete) — obsolete.
   Group/Lock/Union assume multi-polygon set; new workflow is single-polygon. */
.acc-group[data-group="area"] .pt-section--finalize {
  display: none !important;
}

/* Polygon edit toolbar — strip rarely-used buttons.
   Keep: Undo / Redo / Rebuild / Mirror.
   Hide: Simplify (Rebuild includes), Weld+Bridge (auto-weld), Reverse,
   entire transform+neighbor+align groups. */
.acc-group[data-group="area"] #polySimplifyBtn,
.acc-group[data-group="area"] #polyWeldBtn,
.acc-group[data-group="area"] #polyReverseBtn,
.acc-group[data-group="area"] #polySharedEdgeCizBtn {
  display: none !important;
}
.acc-group[data-group="area"] .ptg-group[data-group="neighbor"],
.acc-group[data-group="area"] .ptg-group--collapsible[data-group="align"] {
  display: none !important;
}

/* Auto Edge Weld toggle — implicit/always-on in new workflow */
.acc-group[data-group="area"] .pt-toggle-compact:has(#autoEdgeWeldCb) {
  display: none !important;
}

/* Polygon "Aktif Polygon · faces · strike · h-grid · kenar" sub-label —
   noise; KESİT TARAMA replaces this whole concept */
.acc-group[data-group="area"] .pt-section--context > .pt-section-label > .pt-section-name,
.acc-group[data-group="area"] .pt-section--context > .pt-section-label > .pt-section-sublabel {
  display: none !important;
}

/* Phase progress card: drop slope-related steps if injected by JS */
#phaseProgressCard .ppc-checklist li[data-phase="section"] {
  display: none !important;
}

/* ─── B · CROSS-SECTION PANEL — engineering instrument aesthetic ──────── */

.poly-kesit-panel {
  background:
    linear-gradient(180deg,
      rgba(7, 16, 28, 0.92) 0%,
      rgba(15, 23, 42, 0.62) 100%);
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 28px -14px rgba(0, 0, 0, 0.6);
  padding: 14px 14px 16px;
  gap: 12px;
  position: relative;
}
/* Top accent rail — instrument identification stripe */
.poly-kesit-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 10px; right: 10px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(56, 189, 248, 0.6) 30%,
    rgba(56, 189, 248, 0.6) 70%,
    transparent);
}

.poly-kesit-panel .pkp-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.16);
}
.poly-kesit-panel .pkp-icon {
  font-size: 15px;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.40));
}
.poly-kesit-panel .pkp-title {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e0f2fe;
}
.poly-kesit-panel .pkp-title #pkpPolyId {
  font-weight: 700;
  color: #fde047;
  margin-left: 2px;
}
.poly-kesit-panel .pkp-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fef3c7;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.36);
  padding: 2px 7px;
  border-radius: 3px;
}

.poly-kesit-panel .pkp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.poly-kesit-panel .pkp-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(125, 211, 252, 0.65);
  min-width: 52px;
}

.poly-kesit-panel .pkp-strike-display {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: #bae6fd;
  background: rgba(7, 16, 28, 0.72);
  padding: 5px 11px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 3px;
  letter-spacing: 0.04em;
}

/* Radio segmented control — like a hardware dip-switch */
.poly-kesit-panel .pkp-radio-group {
  display: inline-flex;
  background: rgba(7, 16, 28, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 3px;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
}
.poly-kesit-panel .pkp-radio-group label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(186, 230, 253, 0.65);
  cursor: pointer;
  border-right: 1px solid rgba(56, 189, 248, 0.14);
  transition: all 0.14s ease;
}
.poly-kesit-panel .pkp-radio-group label:last-child { border-right: 0; }
.poly-kesit-panel .pkp-radio-group label:hover {
  color: #e0f2fe;
  background: rgba(56, 189, 248, 0.06);
}
.poly-kesit-panel .pkp-radio-group label:has(input:checked) {
  background: rgba(56, 189, 248, 0.22);
  color: #f0f9ff;
  box-shadow: inset 0 -2px 0 rgba(125, 211, 252, 0.65);
}

/* Hero CTA — Kesitleri Üret. Sharp corners + monospace + tracking = power switch */
.poly-kesit-panel .pkp-sample-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 3px;
  background: linear-gradient(180deg,
    rgba(56, 189, 248, 0.28) 0%,
    rgba(56, 189, 248, 0.10) 100%);
  border: 1px solid rgba(56, 189, 248, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 14px -4px rgba(56, 189, 248, 0.32);
  color: #f0f9ff;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.poly-kesit-panel .pkp-sample-btn .pkp-sample-ico {
  font-size: 14px;
  margin-right: -2px;
}
.poly-kesit-panel .pkp-sample-btn:hover {
  background: linear-gradient(180deg,
    rgba(56, 189, 248, 0.40) 0%,
    rgba(56, 189, 248, 0.16) 100%);
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 3px rgba(56, 189, 248, 0.18),
    0 6px 18px -4px rgba(56, 189, 248, 0.50);
}
.poly-kesit-panel .pkp-sample-btn:active { transform: translateY(1px); }
.poly-kesit-panel .pkp-sample-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background: rgba(56, 189, 248, 0.06);
}

/* Status readout — telemetry strip */
.poly-kesit-panel .pkp-preview {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  background: rgba(7, 16, 28, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-left: 2px solid rgba(56, 189, 248, 0.45);
  border-radius: 3px;
  padding: 9px 12px;
  color: rgba(186, 230, 253, 0.72);
  text-align: left;
  font-style: normal;
}
.poly-kesit-panel .pkp-preview.has-data {
  color: #e0f2fe;
  border-left-color: rgba(253, 224, 71, 0.55);
}
.poly-kesit-panel .pkp-preview b {
  color: #fde047;
  font-weight: 700;
}

/* Canvas blocks — precision drawing aesthetic */
.pkp-canvas-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}
.pkp-canvas-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7dd3fc;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-left: 1px;
}
.pkp-canvas-hint {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(186, 230, 253, 0.40);
}
.pkp-canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #050b14;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 1px 0 rgba(56, 189, 248, 0.05),
    0 3px 8px -3px rgba(0, 0, 0, 0.45);
  transition: border-color 0.20s ease, box-shadow 0.20s ease;
}
.pkp-canvas:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(56, 189, 248, 0.08),
    0 4px 12px -3px rgba(0, 0, 0, 0.55);
}

.pkp-hint {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 9.5px;
  line-height: 1.55;
  color: rgba(186, 230, 253, 0.48);
  border-top: 1px dashed rgba(56, 189, 248, 0.12);
  padding-top: 10px;
  margin-top: 2px;
}
.pkp-hint b {
  color: rgba(125, 211, 252, 0.80);
  font-weight: 600;
}

/* ─── C · POLYGON ACCORDION BREATHING ROOM (less visible buttons = more space) ── */

.acc-group[data-group="area"] > .acc-body {
  gap: 14px;
  padding-top: 10px;
}

/* Hero DRAW band — bump prominence even higher since fewer competing elements */
.acc-group[data-group="area"] .pt-step[data-step="2"] .pt-draw-primary-btn {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.22em;
  font-weight: 800;
}

/* The remaining edit-tools <details> gets a tighter, more refined look */
.pt-edit-tools {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 4px;
  background: rgba(7, 16, 28, 0.55);
}
.pt-edit-tools > summary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 7px 11px;
}

/* ─── D · PHASE RAIL: 5 → 4 (visual rebalance after hiding section) ───── */

/* When 4 stations visible, give each a touch more horizontal room.
   The grid is flexible so this is automatic — just ensure 4-up layout
   doesn't break on narrow viewports. */
.phase-rail-track {
  /* keep original flex; section hidden auto-rebalances */
}

/* ─── E · POLYGON LIST: tighten ──────────────────────────────────────── */

/* Polygon list rows: a single polygon is the norm; list rarely > 1. Compact. */
.acc-group[data-group="area"] .polygon-list {
  margin-top: 4px;
}

/* ─── F · OVERALL: reduce visual noise on hidden sub-numerals ──────── */

/* Remaining context-section label sublabel is no longer needed */
.acc-group[data-group="area"] .pt-section--context .pt-section-rule { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   v58.14 — Engineer feedback patch
   ═══════════════════════════════════════════════════════════════════════ */

/* (4) Hide GENEL KESİTLER (auto) accordion — engineer "ne iş yapıyor?":
   This is v57.74 legacy "auto critical face per slope" panel. Replaced by
   KESİT TARAMA per-polygon (true cross-section pipeline). Hidden to stop
   duplicate critical-section computation flows + RUVOLUM trademark text. */
.acc-group.acc-gk[data-group="genel-kesitler"] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v58.14.2 — Engineer L99 deep architectural insight:
   "U-shape tek polygon'da global strike override bir yeri düzeltirken
   diğerini bozuyor — derin düşün, her olasılıkta ne olur?"

   Verdict: Strike panel is MISLEADING in new curved-alignment workflow.
   _xs_extractCurvedAlignment ignores polygon.metadata.strikeBearing —
   uses crest-to-toe geometry + per-station local tangent. Engineer's
   global override is a NO-OP for U-shapes. Hiding eliminates confusion.
   ═══════════════════════════════════════════════════════════════════════ */
#polyStrikePanel {
  display: none !important;
}

/* H-Grid panel — AMD anchor placement still uses hZManual (118 refs deep).
   v58.15'te cross-section bench points → auto H-grid wire edilecek.
   O zamana kadar engineer manuel kontrol için açabilsin → collapsed details
   tarzı görünüm. Default kapalı, header tıkla → açılır. */
#polyHSnapPanel {
  position: relative;
  padding: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 4px;
  background: rgba(7, 16, 28, 0.45);
  overflow: hidden;
  cursor: default;
}
#polyHSnapPanel:not(.hgrid-expanded) > * {
  display: none;
}
#polyHSnapPanel:not(.hgrid-expanded)::before {
  content: '📏 H-Grid kontrolleri (legacy) · v58.15\'te otomatik · tıkla → aç';
  display: block;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: rgba(148, 163, 184, 0.62);
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease, background 0.18s ease;
}
#polyHSnapPanel:not(.hgrid-expanded):hover::before {
  color: #cbd5e1;
  background: rgba(56, 189, 248, 0.06);
}
#polyHSnapPanel.hgrid-expanded {
  padding: 8px !important;
}
#polyHSnapPanel.hgrid-expanded::before {
  content: '📏 H-Grid kontrolleri (legacy · v58.15\'te otomatik) · tıkla → kapat';
  display: block;
  padding: 0 4px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: rgba(125, 211, 252, 0.55);
  border-bottom: 1px dashed rgba(56, 189, 248, 0.18);
  margin-bottom: 6px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   v58.17 — AMD Panel: 5 step nav → 1 flat row (engineer L99 üçlü kural)

   PHILOSOPHY
   ──────────
   Engineer: "as simple as possible ama matematik gibi doğru".
   AMD 5 step nav (geometri/jeoloji/sistem/çöz/uygula) sahte ilerleme
   yaratıyordu — gerçekte hepsi tek hesap. Bu CSS:
     • Step nav 5 chip → hidden (sahte iş akışı)
     • Section header'lar (GEOMETRİ/JEOLOJİ/SİSTEM) → hidden
     • Tüm input'lar tek dense grid'de görünür
     • amd-field-desc kaldırıldı (tooltip yeter)
     • Hint paragraph → küçültüldü, Kılavuz button minik
     • Scope picker (yamaç switcher) → hidden (tek polygon workflow)
     • Apply Design section → hidden (v58.16 ile zaten kalktı)
     • 5-proof verdict tablosu → compact monospace, default expanded
     • Disclaimer → hairline tek satır
   Math kalıyor, sahte UI temizleniyor.
   ═══════════════════════════════════════════════════════════════════════ */

/* Step nav: 5 fake-progress chip → sil */
#amdStepNav { display: none !important; }

/* Section headers: AMD içinde GEOMETRİ / JEOLOJİ / SİSTEM / ÇÖZÜM / UYGULA → sil */
.amd-section-title { display: none !important; }

/* AMD hint paragraph (uzun açıklama) → sil. Kılavuz button küçük chip */
.amd-hint-row { padding: 4px 0 8px !important; }
.amd-hint-row .amd-hint { display: none !important; }
.amd-glossary-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 3px 7px;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 3px;
  color: rgba(186, 230, 253, 0.65);
  cursor: pointer;
  margin-left: auto;
}
.amd-glossary-btn:hover {
  color: #e0f2fe;
  border-color: rgba(125, 211, 252, 0.45);
  background: rgba(56, 189, 248, 0.06);
}

/* Scope picker (yamaç switcher) — tek polygon workflow, gereksiz */
.amd-scope-switch,
#amdScopePicker,
.amd-scope-current { display: none !important; }

/* v58.25.2 — Engineer L99: "AKTİF ÇÖZÜM — yamaç... a/t/ψ" ne işe yarıyor?
   Eski slope-workflow HUD. Yeni workflow'da yamaç yok, α/t/φ zaten AMD
   panelinde input. Tüm scope HUD container gizle (parent kalmıştı). */
#amdScopeHud,
.amd-scope-hud { display: none !important; }

/* Input grid: tüm input'lar tek dense layout */
.amd-input-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 8px !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
.amd-field {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 4px 7px !important;
  background: rgba(7, 16, 28, 0.55);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 3px;
  margin: 0 !important;
  transition: border-color 0.16s ease;
}
.amd-field:hover {
  border-color: rgba(125, 211, 252, 0.40);
}
.amd-field input {
  background: transparent;
  border: 0;
  color: #e0f2fe;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  width: 100%;
  padding: 2px 4px;
  outline: none;
}
.amd-field input:focus {
  background: rgba(56, 189, 248, 0.08);
  border-radius: 2px;
}
.amd-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fde047;
  min-width: 18px;
}
.amd-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: rgba(186, 230, 253, 0.55);
}
/* amd-field-desc inline description gizle (tooltip yeter) */
.amd-field-desc { display: none !important; }

/* v58.21 — α auto field: kesit analizinden otomatik, readonly. Engineer
   "açı kesitten geleceği için girmeye gerek yok". */
.amd-field--auto {
  border-color: rgba(125, 211, 252, 0.32) !important;
  background: rgba(56, 189, 248, 0.05) !important;
}
.amd-field--auto input[readonly] {
  color: #7dd3fc !important;
  cursor: not-allowed;
  opacity: 0.85;
}
.amd-field--auto .amd-label::after {
  content: ' ↪';
  font-size: 8px;
  color: rgba(125, 211, 252, 0.7);
  vertical-align: super;
}
.amd-field--auto .amd-field-desc {
  display: block !important;
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  color: rgba(125, 211, 252, 0.6);
  text-align: right;
  margin-top: -2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   v58.23 — DISCRETE heatmap legend (engineer L99: "daha anlaşılır")
   Keskin sınıf band'ları, açı aralığı yazılı, hover'da Türkçe anlam.
   ═══════════════════════════════════════════════════════════════════════ */
.vp-hm-discrete .vp-hm-bands {
  display: flex;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.vp-hm-discrete .vp-hm-band {
  flex: 1;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 2px;
  color: rgba(0,0,0,0.78);
  cursor: help;
  border-right: 1px solid rgba(0,0,0,0.18);
  transition: transform 0.1s ease;
}
.vp-hm-discrete .vp-hm-band:last-child { border-right: 0; }
.vp-hm-discrete .vp-hm-band:hover {
  transform: scaleY(1.25);
  position: relative;
  z-index: 2;
}
.vp-hm-discrete .vp-hm-caption {
  margin-top: 4px;
  font-size: 8.5px;
  color: rgba(186, 230, 253, 0.6);
  font-family: system-ui, sans-serif;
}

/* ════════════ v58.305 — RİSK ÖLÇEĞİ EDİTÖRÜ (proje-başına düzenlenebilir heatmap skalası) ════════════ */
.vp-hm-edit-btn {
  display: block; margin: 5px auto 0; pointer-events: auto;   /* legend pointer-events:none → buton tıklanabilir */
  background: rgba(125,211,252,0.12); border: 1px solid rgba(125,211,252,0.4); color: #7dd3fc;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 4px; cursor: pointer; transition: background 0.12s ease;
}
.vp-hm-edit-btn:hover { background: rgba(125,211,252,0.22); }
.vp-hm-scale-editor {
  position: absolute; bottom: 14px; right: 14px; z-index: 140; width: 322px; max-height: 72vh; overflow-y: auto;
  background: rgba(8,14,26,0.96); border: 1px solid rgba(125,211,252,0.28); border-radius: 8px; padding: 11px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgba(203,213,225,0.92);
  box-shadow: 0 10px 34px rgba(0,0,0,0.6); pointer-events: auto; user-select: none;
}
.vphse-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.vphse-title { font-size: 12px; color: #e2e8f0; font-weight: 500; }
.vphse-title em { color: rgba(125,211,252,0.7); font-style: normal; font-size: 9.5px; margin-left: 4px; }
.vphse-close { background: none; border: 0; color: rgba(148,163,184,0.8); font-size: 13px; cursor: pointer; padding: 0 4px; }
.vphse-close:hover { color: #f87171; }
.vphse-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.vphse-lbl { color: rgba(148,163,184,0.85); min-width: 70px; }
.vphse-seg { display: inline-flex; border: 1px solid rgba(125,211,252,0.25); border-radius: 5px; overflow: hidden; }
.vphse-seg button { background: transparent; border: 0; color: rgba(148,163,184,0.85); font: inherit; font-size: 10px; padding: 4px 9px; cursor: pointer; }
.vphse-seg button.on { background: rgba(125,211,252,0.18); color: #7dd3fc; font-weight: 500; }
.vphse-seg button:not(.on):hover { background: rgba(125,211,252,0.07); }
.vphse-cellwrap { font-size: 10px; color: rgba(148,163,184,0.75); }
.vphse-cell { width: 46px; }
.vphse-bandshead { color: rgba(148,163,184,0.85); margin: 9px 0 5px; }
.vphse-bands { display: flex; flex-direction: column; gap: 4px; }
.vphse-band { display: flex; align-items: center; gap: 6px; }
.vphse-band .vphse-bc { width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255,255,255,0.18); border-radius: 5px; background: none; cursor: pointer; }
.vphse-from { color: rgba(148,163,184,0.6); min-width: 20px; text-align: right; font-size: 10px; }
.vphse-dash { color: rgba(148,163,184,0.5); }
.vphse-band .vphse-bmax { width: 48px; }
.vphse-deg { color: rgba(148,163,184,0.6); font-size: 10px; }
.vphse-band .vphse-blabel { flex: 1; min-width: 40px; }
.vphse-bdel { background: none; border: 0; color: rgba(148,163,184,0.6); font-size: 12px; cursor: pointer; padding: 0 4px; }
.vphse-bdel:hover { color: #f87171; }
.vphse-add { width: 100%; margin-top: 6px; background: rgba(125,211,252,0.08); border: 1px dashed rgba(125,211,252,0.35); color: #7dd3fc; font: inherit; font-size: 10px; padding: 5px; border-radius: 5px; cursor: pointer; }
.vphse-add:hover { background: rgba(125,211,252,0.16); }
.vphse-oh { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.08); flex-wrap: nowrap; white-space: nowrap; justify-content: space-between; }
.vphse-oh label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; min-width: 0; }
.vphse-ohc { width: 26px; height: 24px; padding: 0; border: 1px solid rgba(255,255,255,0.18); border-radius: 5px; background: none; cursor: pointer; }
.vphse-foot { display: flex; gap: 8px; margin-top: 12px; }
.vphse-foot button { flex: 1; font: inherit; font-size: 10.5px; padding: 6px; border-radius: 5px; cursor: pointer; background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.25); color: rgba(203,213,225,0.9); }
.vphse-foot .vphse-primary { background: rgba(125,211,252,0.18); border-color: rgba(125,211,252,0.5); color: #7dd3fc; font-weight: 500; }
.vphse-foot button:hover { filter: brightness(1.25); }
.vp-hm-scale-editor input[type="number"], .vp-hm-scale-editor input[type="text"] {
  background: rgba(15,23,42,0.85); border: 1px solid rgba(125,211,252,0.22); color: #e2e8f0; font: inherit; font-size: 10px; padding: 4px 6px; border-radius: 4px;
}
.vp-hm-scale-editor input[type="number"]:focus, .vp-hm-scale-editor input[type="text"]:focus { outline: none; border-color: rgba(125,211,252,0.6); }

/* AKTİF ÇÖZÜM dropdown row (yamaç-N picker) — tek polygon = gereksiz */
.amd-active-pick { display: none !important; }

/* 5-proof verdict tablosu: compact monospace */
.amd-proof-table {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.amd-proof-table th {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(125, 211, 252, 0.62);
  padding: 3px 5px;
  border-bottom: 1px solid rgba(125, 211, 252, 0.18);
  text-align: left;
}
.amd-proof-table td {
  padding: 3px 5px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  color: #e2e8f0;
}
.amd-intermediate {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  opacity: 0.62;
  margin: 6px 0;
  padding-top: 6px;
  border-top: 1px dashed rgba(148, 163, 184, 0.16);
}

/* Apply Design block — v58.16'da zaten kapatıldı, CSS de gizle */
#amdDesignApply,
.amd-design-apply { display: none !important; }

/* Disclaimer — hairline tek satır */
.amd-disclaimer {
  font-size: 8.5px;
  font-family: system-ui, sans-serif;
  font-style: italic;
  opacity: 0.55;
  padding: 6px 0 0;
  margin: 6px 0 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.12);
  line-height: 1.4;
}

/* Solve / Calculate button — hero CTA stili */
#amdSolveBtn,
.amd-solve-btn {
  display: block !important;
  width: 100%;
  min-height: 40px;
  margin: 10px 0 8px;
  padding: 10px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 3px;
  background: linear-gradient(180deg,
    rgba(253, 224, 71, 0.30) 0%,
    rgba(253, 224, 71, 0.10) 100%);
  border: 1px solid rgba(253, 224, 71, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 14px -4px rgba(253, 224, 71, 0.32);
  color: #fef9c3;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
#amdSolveBtn:hover,
.amd-solve-btn:hover {
  background: linear-gradient(180deg,
    rgba(253, 224, 71, 0.42) 0%,
    rgba(253, 224, 71, 0.16) 100%);
  border-color: rgba(253, 224, 71, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 3px rgba(253, 224, 71, 0.18),
    0 6px 18px -4px rgba(253, 224, 71, 0.50);
}

/* ═══════════════════════════════════════════════════════════════════════
   v58.18 — Quick wins batch (audit list 19-22 birleşik)
   ═══════════════════════════════════════════════════════════════════════ */

/* ① PHASE RAIL — 01/02/03/04 sequential numbering
   v58.13'te "03 section" station hidden edildi → görünür numara
   01-02-04-05 gibi geliyordu (boşluk). CSS counter ile yeniden numarala. */
.phase-rail-track {
  counter-reset: phase-counter;
}
.phase-rail-track .phase-station[data-phase]:not([style*="display: none"]):not([hidden]) {
  counter-increment: phase-counter;
}
.phase-rail-track .phase-station .phase-num {
  position: relative;
  color: transparent !important;
}
.phase-rail-track .phase-station .phase-num::before {
  content: counter(phase-counter, decimal-leading-zero);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font: inherit;
}
/* Reset color for ::before (phase-num inherits) */
.phase-rail-track .phase-station {
  color: rgba(148, 163, 184, 0.68);
}
.phase-rail-track .phase-station.active,
.phase-rail-track .phase-station[data-status="active"] {
  color: #fde047;
}

/* ② SECTION A-A (legacy critical-section chord pick) → tamamen gizle
   KESİT TARAMA pipeline (v58.12+) bu işi yapıyor. Manuel chord pick + açı
   ölçme legacy workflow'a ait, yeni cross-section ile redundant.
   Engineer "as simple as possible" → sil. */
.acc-group[data-group="section"][data-phase="report"] {
  display: none !important;
}

/* ── v58.139 #213 — RAPOR MERKEZİ (Raporlar): state-grup görünümler (① İlk Durum | ⑥ Çözüm Uygulanmış) ── */
.xs-report-picker {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 9px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(148,163,184,0.14);
}
.xs-report-hint, .xs-report-empty {
  font: 10.5px "JetBrains Mono", ui-monospace, monospace;
  color: var(--tk-text-soft,#94a3b8); opacity: 0.7;
}
.xs-report-empty { text-align: center; padding: 16px 6px; }
.xs-report-chip {
  font: 10.5px "JetBrains Mono", ui-monospace, monospace;
  padding: 3px 8px; border-radius: 5px; cursor: pointer;
  background: rgba(30,41,59,0.6); color: var(--tk-text-soft,#94a3b8);
  border: 1px solid rgba(148,163,184,0.22);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.xs-report-chip:hover { border-color: rgba(125,211,252,0.5); color: #e2e8f0; }
.xs-report-chip.is-on {
  background: rgba(8,145,178,0.22); color: #7dd3fc;
  border-color: rgba(125,211,252,0.6);
}
.xs-report-chip.is-critical {
  background: rgba(244,63,94,0.18); color: #fda4af;
  border-color: rgba(244,63,94,0.5); cursor: default;
}
.xs-report-stack { display: flex; flex-direction: column; gap: 12px; }
.xs-report-row {
  border: 1px solid rgba(148,163,184,0.16); border-radius: 7px;
  padding: 7px; background: rgba(15,23,42,0.4);
}
.xs-report-row-label {
  font: 600 11px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em; color: #cbd5e1; margin-bottom: 6px;
}
.xs-report-row-label.is-critical { color: #fda4af; }
.xs-report-view { margin-bottom: 8px; }
.xs-report-view-tag {
  font: 8.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em; color: var(--tk-text-soft,#94a3b8);
  opacity: 0.85; margin-bottom: 2px;
}
.xs-report-view-tag.is-after { color: #7dd3fc; opacity: 0.95; }
.xs-report-cv2 {                 /* plan / cephe — tam genişlik, yüksek */
  width: 100%; height: 190px; display: block;
  background: #0a0f1c; border-radius: 4px;
  border: 1px solid rgba(148,163,184,0.1);
}
.xs-report-cv1 {                 /* kesit — tam genişlik tek sütun */
  width: 100%; height: 158px; display: block;
  background: #0a0f1c; border-radius: 3px;
}
.xs-report-mirror { max-height: 440px; overflow-y: auto; }   /* ② ③ ⑦ read-only tablo aynası */
.xs-report-mirror .xs-combo-row { cursor: default !important; }   /* salt-okunur: tıklama nötr */
/* ④ 5-proof breakdown + ⑤ nail catalog */
.xs-proof-head { font: 10px "JetBrains Mono", ui-monospace, monospace; color: #cbd5e1; margin-bottom: 6px; line-height: 1.5; }
.xs-proof-list { display: flex; flex-direction: column; gap: 3px; }
.xs-proof-row {
  display: grid; grid-template-columns: 22px 1fr 40px 16px; gap: 5px; align-items: center;
  padding: 4px 5px; background: rgba(15,23,42,0.5); border-radius: 4px;
  border-left: 2px solid rgba(74,222,128,0.4);
}
.xs-proof-row.is-fail { border-left-color: #ef4444; }
.xs-proof-row.is-gov { background: rgba(245,158,11,0.1); border-left-color: #f59e0b; }
.xs-proof-code { font: 600 11px "JetBrains Mono", ui-monospace, monospace; color: #7dd3fc; text-align: center; }
.xs-proof-title { font: 9.5px "JetBrains Mono", ui-monospace, monospace; color: #cbd5e1; line-height: 1.35; }
.xs-proof-expr { display: block; font-size: 8px; color: #64748b; margin-top: 1px; }
.xs-proof-util { font: 600 10px "JetBrains Mono", ui-monospace, monospace; color: #e2e8f0; text-align: right; }
.xs-nail-cat-row { font: 10px "JetBrains Mono", ui-monospace, monospace; color: var(--tk-text-soft,#94a3b8); margin: 4px 0; }
.xs-nail-cat {
  display: inline-block; padding: 2px 6px; margin: 2px; border-radius: 4px;
  background: rgba(30,41,59,0.6); border: 1px solid rgba(148,163,184,0.2); color: #94a3b8;
}
.xs-nail-cat.is-pick { background: rgba(8,145,178,0.25); color: #7dd3fc; border-color: rgba(125,211,252,0.6); font-weight: 600; }
.xs-report-foot { font: 8.5px "JetBrains Mono", ui-monospace, monospace; color: #64748b; margin-top: 6px; line-height: 1.4; }

/* ③ CALCULATION accordion → gizle (AMD ile redundant)
   AMD panel zaten 5-proof verdict + designSpacing veriyor. Ayrı
   CALCULATION accordion = duplicate flow. v58.16'da Hesapla zaten
   sadece grid yapıyor, CALCULATION'a gerek yok. */
.acc-group[data-group="calc"] {
  display: none !important;
}

/* ④ Proje Sonuçları aggregation panel → gizle
   Multi-yamaç aggregation idi; tek-polygon workflow'da redundant.
   v58.19'da multi-kombinasyon AMD geldiğinde yeniden tasarlanır. */
#projectResultsCard,
.acc-group[data-group="project-results"],
.acc-project-results {
  display: none !important;
}

/* ⑤ Inspector accordion (object inspector) → gizle (kullanılmıyor) */
.acc-group[data-group="inspector"] {
  display: none !important;
}

/* ⑥ Anchors & Ropes accordion → gizle
   v58.16'da Hesapla sadece grid → anchor/rope panel artık anlamsız.
   🛠 toggle ile zaten anchor/rope visibility'si kontrol ediliyor. */
.acc-group[data-group="anchors-ropes"] {
  display: none !important;
}

/* ⑦ STATUS BAR — anlamsız item'lar gizle */
#statusMode,                          /* "tool: select" — anlamsız */
#statusCleaned,                       /* "mesh: 100%" — telemObj ile redundant */
#statusPlanes                         /* "v×h: 0×0" — zaten gizli ama defensive */
{
  display: none !important;
}

/* Bottom status bar separator '|' fix (after hiding some items) */
.bottom-status .ds-status-sep + .ds-status-sep {
  display: none;
}
/* If hidden status item leaves dangling separator, hide it too */
.bottom-status .ds-status-sep:first-child,
.bottom-status .ds-status-sep:last-child {
  display: none;
}

/* ⑧ AMD section comment "İpucu: Birden fazla yamaç varsa..." — tek polygon
   workflow'da anlamsız hint. Gizle. */
.amd-tip,
.amd-multiyamac-tip,
.amd-hint-multi {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v58.18.1 — Engineer L99 debug: "karışık grid noktası nereden geldi"
   ROOT CAUSE: #planesPanel (eski V+H plane editor) + genRopesBtn hala
   visible. Bu eski mantık (RopeEngine v54.20d gy=2 parametrik H planes
   + placeAnchors v43.17 V×H intersection) bench-Z auto-derive (v58.15)
   ile çakışıyor. Engineer "V+H grid mantığını legacy olarak tut".

   Eylem: planesPanel + Halatları oluştur button → CSS hide.
   v58.19'da kod-level legacy namespace + multi-kombinasyon AMD.
   ═══════════════════════════════════════════════════════════════════════ */
#planesPanel,
.drape-area-planes {
  display: none !important;
}
#genRopesBtn,
.planes-gen-btn,
button[title*="Halat"],
button[id*="Halat" i] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v58.19 — Multi-Kombinasyon AMD tablosu (engineer L99 asıl vision)
   Instrument-grade: JetBrains Mono tabular, dark glass, sharp corners.
   K1/K2/K3/K1+K2/… aynı jeoloji, her satır kendi α+H+verdict+a×b.
   ═══════════════════════════════════════════════════════════════════════ */
.xs-combo-block {
  margin-top: 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(7,16,28,0.85) 0%, rgba(15,23,42,0.55) 100%);
  border: 1px solid rgba(253, 224, 71, 0.28);
  border-radius: 5px;
  position: relative;
}
.xs-combo-block::before {
  content: '';
  position: absolute; top: 0; left: 10px; right: 10px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253,224,71,0.5) 30%, rgba(253,224,71,0.5) 70%, transparent);
}
.xs-combo-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(253, 224, 71, 0.16);
}
.xs-combo-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: #fde047;
}
.xs-combo-hint {
  font-family: system-ui, sans-serif; font-size: 9px;
  color: rgba(253, 230, 138, 0.5); margin-left: auto;
}
.xs-combo-solve-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 40px; padding: 10px 16px; margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; border-radius: 3px;
  background: linear-gradient(180deg, rgba(253,224,71,0.28) 0%, rgba(253,224,71,0.10) 100%);
  border: 1px solid rgba(253,224,71,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px -4px rgba(253,224,71,0.32);
  color: #fef9c3; cursor: pointer; transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
}
.xs-combo-solve-btn:hover {
  background: linear-gradient(180deg, rgba(253,224,71,0.42) 0%, rgba(253,224,71,0.16) 100%);
  border-color: rgba(253,224,71,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 3px rgba(253,224,71,0.18), 0 6px 18px -4px rgba(253,224,71,0.50);
}
.xs-combo-solve-btn:active { transform: translateY(1px); }
.xs-combo-solve-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.xs-combo-table {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  background: rgba(5, 11, 20, 0.72);
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 3px; overflow: hidden;
}
.xs-combo-thead, .xs-combo-row {
  display: grid;
  grid-template-columns: 1.0fr 1.6fr 0.6fr 1.1fr 0.9fr;
  align-items: center; gap: 4px;
  padding: 5px 9px;
}
/* v58.380 — Mesh Karşılaştır tablosu: İKİNCİ yük durumu (blok-impakt V.2.1) sütunu → 6 kolon.
   YALNIZ .xs-mc-thead/.xs-mc-row'a uygulanır (kombinasyon tablosu 5 kolon kalır). Rapor aynası
   satırları da xs-mc-row taşır (innerHTML kopya) → orada da 6 kolon hizalanır. */
.xs-combo-thead.xs-mc-thead, .xs-combo-row.xs-mc-row {
  grid-template-columns: 0.85fr 1.15fr 0.42fr 0.98fr 0.98fr 0.78fr;
}
.xs-combo-thead.xs-mc-thead .xc-impact { color: rgba(199,210,254,0.7); }
.xs-combo-row.xs-mc-row .xc-impact {
  font-weight: 700; font-size: 8.5px; letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.xs-combo-row.xs-mc-row .xc-impact.pass { color: #4ade80; }
.xs-combo-row.xs-mc-row .xc-impact.warn { color: #fbbf24; }
.xs-combo-row.xs-mc-row .xc-impact.fail { color: #f87171; }
.xs-combo-row.xs-mc-row .xc-impact.na   { color: rgba(148,163,184,0.45); }
.xs-combo-thead {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(125,211,252,0.6);
  border-bottom: 1px solid rgba(125,211,252,0.18);
  background: rgba(7,16,28,0.6);
}
.xs-combo-row {
  font-size: 10.5px; color: #e2e8f0;
  border-bottom: 1px solid rgba(148,163,184,0.08);
  cursor: default; transition: background 0.14s ease;
}
.xs-combo-row:last-child { border-bottom: 0; }
.xs-combo-row:hover { background: rgba(56,189,248,0.06); }
.xs-combo-row.critical {
  background: rgba(253,224,71,0.10);
  box-shadow: inset 2px 0 0 #fde047;
}
.xs-combo-row .xc-label { font-weight: 700; color: #bae6fd; }
.xs-combo-row.critical .xc-label { color: #fde047; }
.xs-combo-row .xc-alpha { color: #fde68a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.xs-combo-row .xc-h { color: rgba(186,230,253,0.8); }
.xs-combo-row .xc-spacing { color: #a7f3d0; font-weight: 600; }
.xs-combo-row .xc-verdict { font-weight: 700; font-size: 9.5px; letter-spacing: 0.04em; }
.xs-combo-row .xc-verdict.pass { color: #4ade80; }
.xs-combo-row .xc-verdict.warn { color: #fde047; }
.xs-combo-row .xc-verdict.fail { color: #f87171; }
.xs-combo-row .xc-verdict.err  { color: #fb923c; }
.xs-combo-row .xc-verdict.na   { color: rgba(148,163,184,0.5); }
.xs-combo-empty {
  padding: 14px 10px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  color: rgba(148,163,184,0.5); letter-spacing: 0.06em;
}
/* v58.75 #215 — Per-bench HAFİF çözüm karar-destek kartı (çıktı domeni → mor) */
.xs-pb-compare {
  margin-top: 7px; padding: 6px 8px;
  border: 1px solid rgba(168,85,247,0.30); border-left: 3px solid var(--uf-purple);
  border-radius: 6px; background: linear-gradient(180deg, rgba(168,85,247,0.07), rgba(2,6,23,0.30));
}
.xs-pb-head { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: #c084fc; text-transform: uppercase; margin-bottom: 4px; }
.xs-pb-head .xs-pb-sub { font-weight: 500; letter-spacing: 0; text-transform: none; color: #64748b; font-size: 8.5px; }
.xs-pb-row { display: grid; grid-template-columns: 1fr 30px 62px 38px; gap: 4px; align-items: center; font-size: 9.5px; padding: 1px 0; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.xs-pb-row--hdr { color: #64748b; font-size: 8px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgba(148,163,184,0.15); padding-bottom: 2px; }
.xs-pb-lbl { color: #cbd5e1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs-pb-ang { color: #94a3b8; text-align: right; }
.xs-pb-sp { color: #c084fc; text-align: right; }
.xs-pb-n { color: #e2e8f0; text-align: right; font-weight: 700; }
.xs-pb-tot { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(148,163,184,0.18); font-size: 10px; color: #cbd5e1; }
.xs-pb-tot b { color: #f1f5f9; }
.xs-pb-arrow { color: #475569; }
.xs-pb-sav { margin-left: auto; color: #22c55e; font-weight: 800; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.xs-pb-apply {
  width: 100%; margin-top: 6px; padding: 5px 8px; cursor: pointer; letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--uf-purple), #7e22ce); color: #fff;
  border: 1px solid var(--uf-purple); border-radius: 5px; font-weight: 700; font-size: 10px;
}
.xs-pb-apply:hover { background: linear-gradient(180deg, #c084fc, #9333ea); }
.xs-pb-apply.is-chosen { background: rgba(34,197,94,0.18); color: #86efac; border-color: rgba(34,197,94,0.5); cursor: default; }
.xs-pb-note { font-size: 8px; color: #64748b; margin-top: 3px; line-height: 1.3; }

/* v58.76 #215/#220 — ÇÖZÜM PAFTASI: açma butonu + 3-senaryo modal.
   Mor=çıktı domeni, TEK KAYNAK var(--uf-purple) → rgba(var(--uf-purple-rgb),α). Hardcoded mor literal YOK.
   Nötr yapı renkleri (slate #0f172a/#0b1120/#0a0f1c, #cbd5e1) marka değil → anayasa-dışı, kalır. */
.xs-pb-sheet {
  width: 100%; margin-top: 6px; padding: 7px 10px;
  font: 600 11px 'Archivo', system-ui, sans-serif; color: #e2e8f0;
  background: rgba(var(--uf-purple-rgb), 0.16); border: 1px solid rgba(var(--uf-purple-rgb), 0.42);
  border-radius: 6px; cursor: pointer; transition: background .15s, border-color .15s;
}
.xs-pb-sheet:hover { background: rgba(var(--uf-purple-rgb), 0.28); border-color: rgba(var(--uf-purple-rgb), 0.65); }
/* v58.150 #215 C-2 — ALTERNATİF OPTİMİZED BOM (rapor ⑧) satır türleri: per-bench (alan kolonlu) + uniform↔optimized metraj */
.xs-pb-row--bom { grid-template-columns: 1fr 26px 54px 44px 34px; }
.xs-pb-ar { color: #94a3b8; text-align: right; }
.xs-pb-cmp-head { font-size: 8.5px; font-weight: 800; letter-spacing: 0.05em; color: #c084fc; text-transform: uppercase; margin: 7px 0 2px; padding-top: 5px; border-top: 1px solid rgba(148,163,184,0.18); }
.xs-pb-row--cmp { grid-template-columns: 1fr 56px 56px 30px; }
.xs-pb-cu { color: #94a3b8; text-align: right; }
.xs-pb-co { color: #e2e8f0; font-weight: 700; text-align: right; }
.xs-pb-uom { color: #64748b; text-align: right; font-size: 8px; }
/* v58.151 #215 C-3 — per-bench bolt yoğunluğu görseli (rapor ⑧, salt-okunur developed-elevation canvas) */
.xs-report-optcv { width: 100%; height: 156px; margin-top: 8px; display: block; border: 1px solid rgba(148,163,184,0.16); border-radius: 6px; background: #0b1322; }

/* ══ v58.153 #213 — ÇÖZÜM KARŞILAŞTIRMA çekmecesi (rapor fazı · full-width bottom drawer) ══
   Mor=çıktı domeni (var(--uf-purple-rgb)) · ürün-karşılaştırma estetiği · instrument-dark korunur. */
.xs-cmp-drawer { display: none; }
body[data-phase="report"] .xs-cmp-drawer {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; pointer-events: none;
}
.xs-cmp-handle {
  pointer-events: auto; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 22px;
  background: linear-gradient(180deg, rgba(30,41,59,0.97), rgba(13,19,34,0.99));
  border: 1px solid rgba(var(--uf-purple-rgb), 0.5); border-bottom: none; border-radius: 11px 11px 0 0;
  color: var(--tk-text-primary); font: 700 11px var(--ds-font-display, 'Archivo', sans-serif);
  letter-spacing: 0.09em; cursor: pointer; box-shadow: 0 -7px 26px rgba(0,0,0,0.42);
  transition: transform .16s ease, border-color .16s, background .16s;
}
.xs-cmp-handle:hover { transform: translateX(-50%) translateY(-2px); border-color: rgba(var(--uf-purple-rgb), 0.9); }
.xs-cmp-handle-ico { color: rgb(var(--uf-purple-rgb)); font-size: 13px; }
.xs-cmp-handle-arrow { color: var(--tk-text-dim); font-size: 9px; }
.xs-cmp-drawer.is-open .xs-cmp-handle { opacity: 0; pointer-events: none; }
.xs-cmp-sheet {
  pointer-events: auto; position: absolute; left: 0; right: 0; bottom: 0; height: min(58vh, 560px);
  transform: translateY(100%); transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  background: linear-gradient(180deg, rgba(13,19,34,0.99), rgba(8,12,24,0.995));
  border-top: 1px solid rgba(var(--uf-purple-rgb), 0.45); box-shadow: 0 -16px 52px rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
}
.xs-cmp-drawer.is-open .xs-cmp-sheet { transform: translateY(0); }
.xs-cmp-head { flex: 0 0 auto; display: flex; align-items: baseline; gap: 12px; padding: 12px 22px 10px; border-bottom: 1px solid rgba(148,163,184,0.14); }
.xs-cmp-title { font: 800 13px var(--ds-font-display, 'Archivo', sans-serif); letter-spacing: 0.11em; color: rgb(var(--uf-purple-rgb)); text-transform: uppercase; }
.xs-cmp-sub { font: 500 10px var(--ds-font-mono, monospace); color: var(--tk-text-dim); }
.xs-cmp-close { margin-left: auto; pointer-events: auto; width: 32px; height: 24px; border-radius: 6px; border: 1px solid rgba(148,163,184,0.25); background: transparent; color: var(--tk-text-muted); cursor: pointer; font-size: 11px; transition: border-color .15s, color .15s; }
.xs-cmp-close:hover { border-color: rgba(var(--uf-purple-rgb), 0.7); color: var(--tk-text-primary); }
.xs-cmp-body { flex: 1 1 auto; overflow: auto; padding: 16px 22px 20px; }
.xs-cmp-grid { display: grid; grid-template-columns: minmax(132px, 0.9fr) repeat(var(--cmp-cols, 3), minmax(116px, 1fr)); max-width: 1120px; margin: 0 auto; }
.xs-cmp-corner { position: sticky; left: 0; background: linear-gradient(180deg, rgba(13,19,34,0.99), rgba(8,12,24,0.995)); z-index: 2; }
.xs-cmp-colhead {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 10px 13px;
  border: 1px solid rgba(148,163,184,0.13); border-bottom: none; border-radius: 12px 12px 0 0;
  background: rgba(148,163,184,0.035); animation: xsCmpColIn .42s both; animation-delay: calc(var(--i, 0) * 0.06s + 0.04s);
}
@keyframes xsCmpColIn { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: translateY(0); } }
.xs-cmp-colhead.is-ref { opacity: 0.66; border-style: dashed; }
.xs-cmp-colhead.is-worst { border-color: rgba(248,113,113,0.32); }
.xs-cmp-colhead.is-rec {
  background: linear-gradient(180deg, rgba(var(--uf-purple-rgb), 0.2), rgba(var(--uf-purple-rgb), 0.05));
  border-color: rgba(var(--uf-purple-rgb), 0.62); box-shadow: 0 -3px 26px rgba(var(--uf-purple-rgb), 0.24), inset 0 0 0 1px rgba(var(--uf-purple-rgb), 0.18);
}
.xs-cmp-colhead.is-opt { border-color: rgba(34,197,94,0.34); }
.xs-cmp-tag { font: 800 8px var(--ds-font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tk-text-dim); }
.xs-cmp-colhead.is-rec .xs-cmp-tag { color: rgb(var(--uf-purple-rgb)); }
.xs-cmp-colhead.is-opt .xs-cmp-tag { color: #4ade80; }
.xs-cmp-colhead.is-worst .xs-cmp-tag { color: #fca5a5; }
.xs-cmp-name { font: 800 13px var(--ds-font-display, 'Archivo', sans-serif); letter-spacing: 0.04em; color: var(--tk-text-primary); }
.xs-cmp-bignum { font: 800 26px var(--ds-font-mono, monospace); line-height: 1.04; color: var(--tk-text-primary); margin-top: 3px; }
.xs-cmp-colhead.is-rec .xs-cmp-bignum { color: #fff; text-shadow: 0 0 18px rgba(var(--uf-purple-rgb), 0.65); }
.xs-cmp-colhead.is-ref .xs-cmp-bignum { color: var(--tk-text-muted); }
.xs-cmp-unit { font: 600 8px var(--ds-font-mono, monospace); color: var(--tk-text-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.xs-cmp-colsub { font: 500 8.5px var(--ds-font-body, 'Archivo', sans-serif); color: var(--tk-text-muted); margin-top: 3px; text-align: center; line-height: 1.2; }
.xs-cmp-rlabel { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 7px 10px; font: 600 10px var(--ds-font-body, 'Archivo', sans-serif); color: var(--tk-text-muted); border-top: 1px solid rgba(148,163,184,0.08); background: linear-gradient(180deg, rgba(13,19,34,0.99), rgba(8,12,24,0.995)); }
.xs-cmp-rlabel.is-big { font-weight: 800; color: var(--tk-text-primary); }
.xs-cmp-rhint { color: var(--tk-text-dim); cursor: help; font-size: 9px; }
.xs-cmp-cell { display: flex; align-items: center; justify-content: center; padding: 7px 8px; font: 600 11px var(--ds-font-mono, monospace); color: var(--tk-text-primary); border-top: 1px solid rgba(148,163,184,0.08); border-left: 1px solid rgba(148,163,184,0.05); text-align: center; }
.xs-cmp-cell.is-ref { opacity: 0.6; }
.xs-cmp-cell.is-big { font-size: 15px; }
.xs-cmp-cell.is-big b { font-weight: 800; }
.xs-cmp-cell.is-rec { background: rgba(var(--uf-purple-rgb), 0.08); border-left-color: rgba(var(--uf-purple-rgb), 0.22); }
.xs-cmp-cell.is-rec.is-big { background: rgba(var(--uf-purple-rgb), 0.15); }
.xs-cmp-cell.is-rec.is-big b { color: #fff; }
.xs-cmp-yes { color: #4ade80; font-weight: 800; }
.xs-cmp-no { color: rgba(148,163,184,0.5); }
.xs-cmp-warn { color: var(--ds-amber, #f59e0b); }
.xs-cmp-base { color: var(--tk-text-dim); font-style: italic; }
.xs-cmp-down { color: #4ade80; font-weight: 800; }
.xs-cmp-up { color: #fca5a5; font-weight: 700; }
.xs-cmp-purpose { font: 500 9px var(--ds-font-body, 'Archivo', sans-serif); color: var(--tk-text-muted); }
.xs-cmp-foot { max-width: 1120px; margin: 13px auto 0; font: 500 9px var(--ds-font-body, 'Archivo', sans-serif); line-height: 1.55; color: var(--tk-text-dim); border-top: 1px solid rgba(148,163,184,0.1); padding-top: 9px; }
@media (max-width: 720px) { .xs-cmp-bignum { font-size: 21px; } .xs-cmp-sheet { height: min(66vh, 600px); } }
.xs-sheet-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; }
.xs-sheet-modal[hidden] { display: none; }
.xs-sheet-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,0.80); backdrop-filter: blur(4px); animation: glossFadeIn .18s ease; }
.xs-sheet-panel {
  position: relative; width: min(1100px, 95vw); max-height: 93vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
  border: 1px solid rgba(var(--uf-purple-rgb), 0.35); border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(var(--uf-purple-rgb), 0.15);
  overflow: hidden; animation: glossPopIn .22s cubic-bezier(.2,.9,.3,1.2);
}
.xs-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: linear-gradient(180deg, rgba(var(--uf-purple-rgb), 0.15), rgba(var(--uf-purple-rgb), 0.05)); border-bottom: 1px solid rgba(var(--uf-purple-rgb), 0.30); }
.xs-sheet-head h3 { margin: 0; font-family: 'Archivo', system-ui, sans-serif; font-size: 14px; font-weight: 700; color: #e2e8f0; letter-spacing: .01em; }
.xs-sheet-actions { display: flex; gap: 8px; align-items: center; }
.xs-sheet-pdf { font: 600 10.5px 'Archivo', sans-serif; color: #e2e8f0; background: rgba(var(--uf-purple-rgb), 0.18); border: 1px solid rgba(var(--uf-purple-rgb), 0.4); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.xs-sheet-pdf:disabled { opacity: .4; cursor: not-allowed; }
.xs-sheet-close { font-size: 17px; line-height: 1; color: #cbd5e1; background: transparent; border: none; cursor: pointer; padding: 2px 6px; }
.xs-sheet-close:hover { color: #fff; }
.xs-sheet-body { padding: 14px; overflow: auto; background: #0a0f1c; }
#xsSheetCanvas { display: block; width: 100%; height: 660px; background: #0b1322; border: 1px solid rgba(148,163,184,0.14); border-radius: 6px; }
@media (max-height: 760px) { #xsSheetCanvas { height: 560px; } }

/* v58.24 — 2 birim grup (Kritik Kesit + Worst Option) başlıkları */
.xs-unit-group { margin-bottom: 2px; }
.xs-unit-group + .xs-unit-group { margin-top: 8px; }
.xs-unit-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 9px 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fde047;
  background: rgba(253, 224, 71, 0.08);
  border-bottom: 1px solid rgba(253, 224, 71, 0.22);
}
.xs-unit-head b { font-weight: 800; }
.xs-unit-sub {
  margin-left: auto;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(186, 230, 253, 0.5);
}
/* Worst Option grubu amber yerine turuncu accent (ayrım) */
.xs-unit-group:nth-child(2) .xs-unit-head {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.08);
  border-bottom-color: rgba(251, 146, 60, 0.22);
}

/* v58.25 — Mesh karşılaştırma bloğu (combo block ile aynı instrument stili,
   yeşil accent — mesh = malzeme seçimi) */
.xs-mesh-block {
  margin-top: 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(7,16,28,0.85) 0%, rgba(15,23,42,0.55) 100%);
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: 5px;
  position: relative;
}
.xs-mesh-block::before {
  content: '';
  position: absolute; top: 0; left: 10px; right: 10px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74,222,128,0.6) 30%, rgba(74,222,128,0.6) 70%, transparent);
}
.xs-mesh-block .xs-combo-title { color: #4ade80; }
.xs-mesh-block .xs-combo-head { border-bottom-color: rgba(74,222,128,0.16); }
.xs-mesh-block .xs-combo-solve-btn {
  background: linear-gradient(180deg, rgba(74,222,128,0.24) 0%, rgba(74,222,128,0.08) 100%);
  border-color: rgba(74,222,128,0.50);
  color: #dcfce7;
}
.xs-mesh-block .xs-combo-solve-btn:hover {
  background: linear-gradient(180deg, rgba(74,222,128,0.36) 0%, rgba(74,222,128,0.14) 100%);
  border-color: rgba(74,222,128,0.80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 3px rgba(74,222,128,0.16), 0 6px 18px -4px rgba(74,222,128,0.45);
}
.xs-mesh-block .xs-combo-row.critical {
  background: rgba(74,222,128,0.10);
  box-shadow: inset 2px 0 0 #4ade80;
}
.xs-mesh-block .xs-combo-row.critical .xc-label { color: #4ade80; }
.xs-combo-note {
  font-family: system-ui, sans-serif; font-size: 8.5px; line-height: 1.5;
  color: rgba(186,230,253,0.42); margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed rgba(125,211,252,0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v58.53.1 — BUTON FONT NORMALİZASYONU (engineer kararı: HEPSİ MONO, her yerde tutarlı)
   Dosya SONUNDA → cascade'i kazanır (bare selector, sonra-gelen kazanır). Tüm buton
   ailelerini tek mono font + tutarlı transition + letter-spacing'e çeker. Renk/boyut/
   kimlik korunur — tier (yükseklik/renk/state) hizalaması faz-faz ayrı adımda.
   Alias katman: ileride per-aile temiz .ds-btn kurallarına katlanabilir.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-small, .btn-sec, .btn-primary, .btn-primary-yellow, .btn-icon,
.tk-icon-btn, .mp-tool-btn, .mp-icon-btn, .view-layer-btn, .edc-tool-btn,
.pkp-sample-btn, .xs-combo-solve-btn, .amd-solve-btn, .pt-draw-primary-btn,
.pt-ai-btn, .btn-aof, .poly-act-btn, .render-mode-btn, .vp-preset-btn,
.vp-heatmap-btn, .slope-fab-btn, .poly-ctx-btn, .pms-toggle-btn, .drape-seed-btn,
.planes-gen-btn, .poly-help-btn, .slope-tree-menu-btn, .slope-tree-poly-menu-btn,
.slope-tree-add-btn, .pt-section-action, .polygon-rename, .drape-update-btn,
.ribbon-lang-btn, .poly-finalize-btn, .amd-apply-btn {
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.01em;
  transition: var(--ds-btn-trans);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v58.53.2 — TIER HİZALAMASI (2. dalga): tutarlı focus halkası + secondary yükseklik
   ═══════════════════════════════════════════════════════════════════════════ */
/* a) Klavye focus halkası — TÜM ailelerde tutarlı (erişilebilirlik + pro polish, additive) */
.btn-small:focus-visible, .btn-sec:focus-visible, .btn-primary:focus-visible, .btn-primary-yellow:focus-visible,
.btn-icon:focus-visible, .tk-icon-btn:focus-visible, .mp-tool-btn:focus-visible, .mp-icon-btn:focus-visible,
.view-layer-btn:focus-visible, .edc-tool-btn:focus-visible, .pkp-sample-btn:focus-visible, .xs-combo-solve-btn:focus-visible,
.amd-solve-btn:focus-visible, .pt-draw-primary-btn:focus-visible, .pt-ai-btn:focus-visible, .btn-aof:focus-visible,
.poly-act-btn:focus-visible, .render-mode-btn:focus-visible, .vp-preset-btn:focus-visible, .vp-heatmap-btn:focus-visible,
.slope-fab-btn:focus-visible, .poly-ctx-btn:focus-visible, .pms-toggle-btn:focus-visible, .drape-seed-btn:focus-visible,
.planes-gen-btn:focus-visible, .poly-help-btn:focus-visible, .slope-tree-menu-btn:focus-visible, .slope-tree-add-btn:focus-visible,
.pt-section-action:focus-visible, .polygon-rename:focus-visible {
  outline: none;
  box-shadow: var(--ds-btn-focus);
}
/* b) Secondary tier — tutarlı kontrol yüksekliği (min-height: kısaları 30px'e çeker, kırpmaz/küçültmez) */
.btn-sec, .mp-tool-btn, .edc-tool-btn, .poly-act-btn, .vp-preset-btn,
.drape-seed-btn, .poly-ctx-btn, .pms-toggle-btn, .pt-section-action,
.btn-aof, .pt-ai-btn, .planes-gen-btn {
  min-height: var(--ds-btn-h);
}



/* ═══ v58.223 FAZ B / B1 — 7-ADIM STEPPER: NUMARALI DURAK RAYI ═══
 * 5→7 istasyon. "Geometri"→"Geom…" kök neden: text-overflow:ellipsis + dar istasyon.
 * Çözüm: numara disk İÇİNE (metro durağı) → genislik kazan → tam etiket, kirpma yok.
 * Mevcut DNA korunur (metro-rayi, cyan=aktif/emerald=tamam, amber marka alt-hatti).
 * Faz anahtarlari KORUNDU; yeni jeoloji/yenilme/global/bariyer = placeholder. */
.phase-nav .phase-rail-track { gap: 0; }
.phase-nav .phase-station { flex: 1 1 0; min-width: 0; }
.phase-nav .phase-btn {
  display: flex; align-items: center; gap: 9px;
  grid-template-columns: none; grid-template-rows: none; grid-template-areas: none;
  padding: 8px 9px; width: 100%; min-width: 0;
}
.phase-nav .phase-mark { width: 26px; height: 26px; flex-shrink: 0; position: relative; }
.phase-nav .phase-btn .phase-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0; line-height: 1; margin: 0;
}
.phase-rail-track .phase-station .phase-num::before { color: rgba(148,163,184,0.80); }
.phase-rail-track .phase-station[data-status="active"] .phase-num::before { color: var(--tk-acc-primary); }
.phase-rail-track .phase-station[data-status="completed"] .phase-num::before { color: transparent; }
.phase-nav .phase-mark .phase-mark-glyph { display: none; }
.phase-nav .phase-station[data-status="completed"] .phase-mark .phase-mark-glyph { display: block; }
.phase-nav .phase-station[data-status="active"] .phase-mark { animation: fazbRailRing 1.8s ease-in-out infinite; }
@keyframes fazbRailRing {
  0%,100% { box-shadow: 0 0 0 3px rgba(6,182,212,0.10), 0 0 12px rgba(6,182,212,0.35); }
  50%     { box-shadow: 0 0 0 5px rgba(6,182,212,0.18), 0 0 18px rgba(6,182,212,0.55); }
}
.phase-nav .phase-btn .phase-label { flex: 1; min-width: 0; display: flex; }
.phase-nav .phase-btn .phase-label-main {
  font-size: 12px; font-weight: 650; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: clip; color: var(--ds-text-muted);
}
.phase-nav .phase-btn.active .phase-label-main, .phase-nav .phase-btn:hover .phase-label-main { color: var(--ds-text); }
.phase-nav .phase-btn:hover .phase-mark { transform: translateY(-1px); }
.phase-nav .phase-btn.active { background: linear-gradient(180deg, rgba(6,182,212,0.10) 0%, rgba(6,182,212,0.03) 50%, transparent 100%); }
.phase-nav .phase-btn.active::before { background: var(--tk-acc-primary); box-shadow: 0 0 10px rgba(6,182,212,0.6); }
.phase-nav .phase-btn.active::after { border-top-color: var(--tk-acc-primary); filter: drop-shadow(0 1px 2px rgba(6,182,212,0.5)); }
/* ═══ v58.382 — FAZ RAYI: TAŞMA-FİX (akıcı ölçek) + PARALEL-MANTIK ZON GRUPLAMA ═══
 * Mühendis: "butonlar pencereye sığmamış" + "tertemiz, paralel mantığı olan flow".
 * (1) Eski crude @1300px label-nuke KALDIRILDI → akıcı küçülme (clamp); etiketler ~1120px'e dek okunur.
 * (2) 7 faz = 2 GİRDİ (Geometri·Jeoloji) | 4 ANALİZ paralel (Yenilme·Global·Mesh·Bariyer) | 1 ÇIKTI;
 *     zon-ayraçları + hafif tint + (geniş ekranda) zon başlıkları ile paralel analiz blokları görünür. */
.phase-nav .phase-btn { padding: 8px clamp(5px, 0.7vw, 10px); gap: clamp(5px, 0.6vw, 9px); }
.phase-nav .phase-mark { width: clamp(20px, 1.7vw, 26px); height: clamp(20px, 1.7vw, 26px); }
.phase-nav .phase-btn .phase-num { font-size: clamp(9px, 0.72vw, 10.5px); }
.phase-nav .phase-btn .phase-label-main { font-size: clamp(10.5px, 0.82vw, 12px); text-overflow: ellipsis; }
.phase-nav .phase-telemetry { gap: clamp(4px, 0.5vw, var(--ds-s3)); padding-left: clamp(6px, 0.7vw, var(--ds-s4)); }
.phase-nav .phase-telemetry .telem-val { max-width: clamp(60px, 8vw, 140px); }
/* zon ayraçları: 3. (ANALİZ başı) ve 7. (ÇIKTI başı) istasyonların solunda dikey ayraç + boşluk */
.phase-nav .phase-rail-track .phase-station:nth-child(3),
.phase-nav .phase-rail-track .phase-station:nth-child(7) {
  margin-left: clamp(7px, 0.9vw, 16px);
  border-left: 1px solid var(--ds-border-strong, rgba(148,163,184,0.30));
}
/* zon tini (çok hafif): ANALİZ cyan-ışıltı · ÇIKTI amber-ışıltı (GİRDİ nötr) */
.phase-nav .phase-rail-track .phase-station:nth-child(n+3):nth-child(-n+6) { background: linear-gradient(180deg, rgba(6,182,212,0.04), transparent 72%); }
.phase-nav .phase-rail-track .phase-station:nth-child(7) { background: linear-gradient(180deg, rgba(251,191,36,0.05), transparent 72%); }
/* zon başlıkları (paralel mantık etiketleri) — yalnız geniş ekranda */
.phase-nav .phase-rail-track .phase-station:nth-child(1)::after,
.phase-nav .phase-rail-track .phase-station:nth-child(3)::after,
.phase-nav .phase-rail-track .phase-station:nth-child(7)::after {
  position: absolute; top: 2px; left: 10px; font: 700 7.5px/1 var(--ds-font-mono, ui-monospace), monospace;
  letter-spacing: 0.14em; color: rgba(148,163,184,0.55); text-transform: uppercase; pointer-events: none; z-index: 3; white-space: nowrap;
}
.phase-nav .phase-rail-track .phase-station:nth-child(1)::after { content: 'GİRDİ'; }
.phase-nav .phase-rail-track .phase-station:nth-child(3)::after { content: 'ANALİZ · paralel'; color: rgba(34,211,238,0.62); }
.phase-nav .phase-rail-track .phase-station:nth-child(7)::after { content: 'ÇIKTI'; color: rgba(251,191,36,0.65); }
@media (max-width: 1380px) { .phase-nav .phase-rail-track .phase-station::after { display: none; } }   /* zon başlıkları gizlen (sığmazlık öncesi) */
@media (max-width: 1366px) { .phase-nav .phase-brand .brand-text { display: none; } }                   /* marka metni gizle (üst tab'da zaten var) → faz rayına ~170px yer aç (1280px taşma fix) */
@media (max-width: 1120px) {                                                                            /* en dar: yalnız numaralı disk (etiket gizli) */
  .phase-nav .phase-btn .phase-label { display: none; }
  .phase-nav .phase-rail-track .phase-station:nth-child(3),
  .phase-nav .phase-rail-track .phase-station:nth-child(7) { margin-left: 8px; }
}
/* v58.382 — sol panel "adım adım" anlatım SADELEŞTİRİLDİ (mühendis onayı: üst faz çubuğu zaten akışı veriyor → tekrar kaldır).
 * Yalnız sade başlık + Focus toggle kalır; ① ikon · 0/0 · chevron · ilerleme çubuğu · checklist · "sonraki phase" GİZLENDİ. */
.phase-progress-card { border-color: rgba(148,163,184,0.16); background: rgba(20,23,28,0.55); margin: 6px 12px 6px; padding: 6px 10px; }
.phase-progress-card .ppc-icon,
.phase-progress-card .ppc-pct,
.phase-progress-card .ppc-chevron,
.phase-progress-card .ppc-progress-bar,
.phase-progress-card .ppc-collapsible-body { display: none !important; }
.phase-progress-card .ppc-head { cursor: default; margin: 0; padding: 0; }
.phase-progress-card .ppc-head:hover { background: transparent; }
.phase-progress-card .ppc-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #94a3b8; }
/* v58.382 — Mesh Karşılaştır: panel-içi taşma fix (Liste butonu kırpılmasın, tablo panele sığsın) */
.xs-mesh-block { overflow: hidden; }
.xs-mesh-block .xs-combo-table { width: 100%; max-width: 100%; }
#xsMeshListPdfBtn, #kinRosePdfBtn { letter-spacing: 0.06em; padding-left: 11px; padding-right: 11px; }   /* v58.385 — ŞEK.3 de kompakt (taşma fix) */
/* yeni faz anahtarlari icin sol-panel gorunurluk hide-kurali */
body.drape-app-body[data-phase="jeoloji"] #leftPanel .acc-group[data-phase]:not([data-phase~="jeoloji"]):not([data-phase~="all"]) { display: none; }
body.drape-app-body[data-phase="yenilme"] #leftPanel .acc-group[data-phase]:not([data-phase~="yenilme"]):not([data-phase~="all"]) { display: none; }
body.drape-app-body[data-phase="global"]  #leftPanel .acc-group[data-phase]:not([data-phase~="global"]):not([data-phase~="all"])  { display: none; }
body.drape-app-body[data-phase="bariyer"] #leftPanel .acc-group[data-phase]:not([data-phase~="bariyer"]):not([data-phase~="all"]) { display: none; }
.acc-group[data-phase~="jeoloji"] { border-left: 3px solid rgba(125,211,252,0.5); }
.acc-group[data-phase~="yenilme"] { border-left: 3px solid rgba(251,191,36,0.5); }
.acc-group[data-phase~="global"]  { border-left: 3px solid rgba(248,113,113,0.5); }
.acc-group[data-phase~="bariyer"] { border-left: 3px solid rgba(52,211,153,0.5); }
.fazb-ph-note {
  margin: 0; padding: 12px 14px;
  font: 12px/1.5 var(--ds-font-mono, ui-monospace), monospace;
  color: #94a3b8; background: rgba(125,211,252,0.04);
  border: 1px dashed rgba(125,211,252,0.28); border-radius: 8px;
}
/* ═══ /FAZ B B1 ═══