/* ============================================================
   Design System — Components
   Faz 0: preview/index.html'den birebir taşındı (görsel-nötr).
   Faz 1'de kanonik modifier sözlüğüne (--_tint/--_fg/--_edge +
   ds-c-{role} + -sm/-md/-lg) refactor edilecek.

   Bağımlılık: tokens/base.css (renk token'ları, --radius, font)
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   KANONİK MODİFİER SÖZLÜĞÜ (Faz 1) — DRY motoru

   Base component private rol değişkenlerini okur (--_tint/--_fg/
   --_edge/--_solid/--_text); ds-c-{role} sadece bunları remap eder.
   → Her renk TEK tanım, TÜM componentlerde bedava çalışır.

   Kullanım:
     <span class="ds-badge ds-c-success">Aktif</span>
     <button class="ds-btn ds-btn-solid ds-c-danger">Sil</button>
     <div class="ds-alert ds-c-warning">Dikkat</div>

   Size sözlüğü: -sm / (default) / -lg  → density-aware control-height
   ════════════════════════════════════════════════════════════ */
.ds-c-primary   { --_solid:var(--primary);   --_fg:var(--primary-foreground);   --_text:var(--primary);   --_tint:color-mix(in oklch,var(--primary) 15%,transparent);   --_edge:color-mix(in oklch,var(--primary) 30%,transparent); }
.ds-c-secondary { --_solid:var(--secondary); --_fg:var(--secondary-foreground); --_text:var(--secondary-foreground); --_tint:color-mix(in oklch,var(--secondary) 60%,transparent); --_edge:var(--border); }
.ds-c-success   { --_solid:var(--success);   --_fg:var(--success-foreground);   --_text:var(--success);   --_tint:color-mix(in oklch,var(--success) 15%,transparent);   --_edge:color-mix(in oklch,var(--success) 30%,transparent); }
.ds-c-warning   { --_solid:var(--warning);   --_fg:var(--warning-foreground);   --_text:color-mix(in oklch,var(--warning) 70%,var(--foreground)); --_tint:color-mix(in oklch,var(--warning) 15%,transparent); --_edge:color-mix(in oklch,var(--warning) 35%,transparent); }
.ds-c-danger    { --_solid:var(--danger);    --_fg:var(--danger-foreground);    --_text:var(--danger);    --_tint:color-mix(in oklch,var(--danger) 15%,transparent);    --_edge:color-mix(in oklch,var(--danger) 30%,transparent); }
.ds-c-info      { --_solid:var(--info);      --_fg:var(--info-foreground);      --_text:var(--info);      --_tint:color-mix(in oklch,var(--info) 15%,transparent);      --_edge:color-mix(in oklch,var(--info) 30%,transparent); }
.ds-c-accent    { --_solid:var(--accent);    --_fg:var(--accent-foreground);    --_text:var(--accent);    --_tint:color-mix(in oklch,var(--accent) 15%,transparent);    --_edge:color-mix(in oklch,var(--accent) 30%,transparent); }
.ds-c-muted     { --_solid:var(--muted-foreground); --_fg:var(--foreground);     --_text:var(--muted-foreground); --_tint:color-mix(in oklch,var(--muted-foreground) 12%,transparent); --_edge:var(--border); }

/* ── Unified Button (ds-btn) — density-aware, ds-c-{role} destekli ── */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);height:var(--control-h-md);padding:0 var(--pad-x);border-radius:var(--radius-md);border:1px solid transparent;font-size:calc(0.8125rem * var(--font-scale));font-weight:500;font-family:inherit;cursor:pointer;transition:opacity .15s,background .15s;white-space:nowrap;background:var(--_solid,var(--primary));color:var(--_fg,var(--primary-foreground))}
.ds-btn:disabled{opacity:.5;cursor:not-allowed}
.ds-btn-sm{height:var(--control-h-sm);padding:0 calc(var(--pad-x) * .72);font-size:calc(0.75rem * var(--font-scale))}
.ds-btn-lg{height:var(--control-h-lg);padding:0 calc(var(--pad-x) * 1.3);font-size:calc(0.875rem * var(--font-scale))}
.ds-btn-soft{background:var(--_tint,color-mix(in oklch,var(--foreground) 7%,transparent));color:var(--_text,var(--foreground));border-color:var(--_edge,color-mix(in oklch,var(--foreground) 18%,transparent))}
.ds-btn-outline{background:transparent;color:var(--_text,var(--foreground));border-color:var(--_edge,var(--border))}
.ds-btn-ghost{background:transparent;color:var(--_text,var(--foreground));border-color:transparent}
.ds-btn-ghost:hover{background:var(--_tint,color-mix(in oklch,var(--foreground) 8%,transparent))}

/* ── Unified Badge (ds-badge) — ds-c-{role} destekli ── */
.ds-badge{display:inline-flex;align-items:center;gap:var(--ds-space-1);padding:var(--ds-space-1) var(--ds-space-2);border-radius:var(--radius-full);font-size:calc(0.6875rem * var(--font-scale));font-weight:500;border:1px solid var(--_edge,transparent);background:var(--_tint,color-mix(in oklch,var(--muted-foreground) 12%,transparent));color:var(--_text,var(--muted-foreground))}
.ds-badge-solid{background:var(--_solid,var(--primary));color:var(--_fg,var(--primary-foreground));border-color:transparent}
.ds-badge-sm{font-size:calc(0.625rem * var(--font-scale));padding:1px var(--ds-space-1)}
.ds-badge-lg{font-size:calc(0.75rem * var(--font-scale));padding:var(--ds-space-1) var(--ds-space-3)}

/* ── Unified Tag (ds-tag) — kare köşeli badge, ds-c-{role} ── */
.ds-tag{display:inline-flex;align-items:center;gap:var(--ds-space-1);padding:var(--ds-space-1) var(--ds-space-2);border-radius:var(--radius-sm);font-size:calc(0.6875rem * var(--font-scale));font-weight:500;background:var(--_tint,color-mix(in oklch,var(--muted-foreground) 12%,transparent));color:var(--_text,var(--muted-foreground));border:1px solid var(--_edge,var(--border))}

/* ── Unified Alert (ds-alert) — density-aware, ds-c-{role} ── */
.ds-alert{display:flex;gap:var(--ds-space-2);padding:var(--pad-y) var(--pad-x);border-radius:var(--radius-md);border-left:3px solid var(--_solid,var(--info));background:var(--_tint,color-mix(in oklch,var(--info) 10%,transparent));font-size:calc(0.8125rem * var(--font-scale));line-height:1.5;color:var(--foreground)}
.ds-alert .ds-alert-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--_solid,var(--info))}

/* ── Unified Input (ds-input) — density-aware height ── */
.ds-input{width:100%;height:var(--control-h-md);padding:0 var(--pad-x);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--card);color:var(--foreground);font-size:calc(0.8125rem * var(--font-scale));font-family:inherit;outline:none;transition:border-color .15s}
.ds-input::placeholder{color:var(--muted-foreground)}
.ds-input:focus{border-color:var(--primary)}
.ds-input-sm{height:var(--control-h-sm);font-size:calc(0.75rem * var(--font-scale))}
.ds-input-lg{height:var(--control-h-lg);font-size:calc(0.875rem * var(--font-scale))}

/* ── Unified Table (ds-dtable) — density-aware padding ── */
.ds-dtable{width:100%;border-collapse:collapse;font-size:calc(0.8125rem * var(--font-scale))}
.ds-dtable th{text-align:left;padding:var(--ds-space-2) var(--ds-space-3);font-size:calc(0.6875rem * var(--font-scale));font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground);border-bottom:1px solid var(--border)}
.ds-dtable td{padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid color-mix(in oklch,var(--border) 60%,transparent);color:var(--foreground)}
.ds-dtable tr:last-child td{border-bottom:none}

/* ════════════════════════════════════════════════════════════
   LEGACY componentler (Faz 4'te ds-* eşlerine göç edecek — geriye uyumlu)
   ════════════════════════════════════════════════════════════ */

/* ── Button ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius);font-size:13px;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:opacity .15s}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-secondary{background:var(--secondary);color:var(--secondary-foreground);border-color:var(--border)}
.btn-outline{background:transparent;color:var(--foreground);border-color:var(--border)}
.btn-ghost{background:transparent;color:var(--foreground);border-color:transparent}
.btn-ghost:hover{background:color-mix(in oklch,var(--foreground) 8%,transparent)}
.btn-destructive{background:var(--destructive);color:var(--destructive-foreground)}
.btn-sm{padding:3px 10px;font-size:12px}
.btn-lg{padding:10px 20px;font-size:14px}
.btn-soft{background:color-mix(in oklch,var(--foreground) 7%,transparent);color:var(--foreground);border:1px solid color-mix(in oklch,var(--foreground) 18%,transparent);cursor:pointer;border-radius:var(--radius);font-family:inherit;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.btn-soft:hover{background:color-mix(in oklch,var(--foreground) 13%,transparent)}

/* ── Badge ──────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid transparent}
.badge-primary{background:color-mix(in oklch,var(--primary) 15%,transparent);color:var(--primary);border-color:color-mix(in oklch,var(--primary) 30%,transparent)}
.badge-success{background:color-mix(in oklch,var(--success) 15%,transparent);color:var(--success);border-color:color-mix(in oklch,var(--success) 30%,transparent)}
.badge-warning{background:color-mix(in oklch,var(--warning) 15%,transparent);color:color-mix(in oklch,var(--warning) 70%,var(--foreground));border-color:color-mix(in oklch,var(--warning) 35%,transparent)}
.badge-destructive{background:color-mix(in oklch,var(--destructive) 15%,transparent);color:var(--destructive);border-color:color-mix(in oklch,var(--destructive) 30%,transparent)}
.badge-info{background:color-mix(in oklch,var(--info) 15%,transparent);color:var(--info);border-color:color-mix(in oklch,var(--info) 30%,transparent)}
.badge-muted{background:color-mix(in oklch,var(--muted-foreground) 12%,transparent);color:var(--muted-foreground);border-color:var(--border)}
.badge-solid-primary{background:var(--primary);color:var(--primary-foreground)}
.badge-solid-success{background:var(--success);color:var(--success-foreground)}
.badge-solid-destructive{background:var(--destructive);color:var(--destructive-foreground)}

/* ── Card ───────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-header{padding:var(--pad-y) var(--pad-x);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-body{padding:var(--pad-y) var(--pad-x)}
.card-footer{padding:var(--ds-space-2) var(--pad-x);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:var(--ds-space-2)}

/* Semantic Card Variants — .card + .card-XX + padding (inline veya .card-body) */
.card-success{border-color:var(--success);background:color-mix(in oklch,var(--success) 8%,transparent)}
.card-warning{border-color:var(--warning);background:color-mix(in oklch,var(--warning) 8%,transparent)}
.card-destructive{border-color:var(--destructive);background:color-mix(in oklch,var(--destructive) 8%,transparent)}
.card-info{border-color:var(--info);background:color-mix(in oklch,var(--info) 8%,transparent)}
.card-accent{border-color:var(--accent);background:color-mix(in oklch,var(--accent) 8%,transparent)}
.card-top-accent{position:relative;overflow:hidden}
.card-top-accent::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.card-top-primary::before{background:var(--primary)}
.card-top-success::before{background:var(--success)}
.card-top-warning::before{background:var(--warning)}
.card-top-info::before{background:var(--info)}

/* ── Alert ──────────────────────────────────────────────────── */
.alert{display:flex;gap:var(--ds-space-2);padding:calc(var(--pad-y) - 2px) calc(var(--pad-x) - 4px);border-radius:var(--radius);border-left:3px solid;font-size:13px;line-height:1.5}
.alert-info{background:color-mix(in oklch,var(--info) 10%,transparent);border-left-color:var(--info)}
.alert-success{background:color-mix(in oklch,var(--success) 10%,transparent);border-left-color:var(--success)}
.alert-warning{background:color-mix(in oklch,var(--warning) 10%,transparent);border-left-color:var(--warning)}
.alert-destructive{background:color-mix(in oklch,var(--destructive) 10%,transparent);border-left-color:var(--destructive)}
.alert-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.alert-info .alert-icon{color:var(--info)}.alert-success .alert-icon{color:var(--success)}.alert-warning .alert-icon{color:var(--warning)}.alert-destructive .alert-icon{color:var(--destructive)}

/* ── Table ──────────────────────────────────────────────────── */
.ds-table{width:100%;border-collapse:collapse;font-size:13px}
.ds-table th{text-align:left;padding:15px 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);border-bottom:1px solid var(--border)}
.ds-table td{padding:10px;border-bottom:1px solid color-mix(in oklch,var(--border) 60%,transparent);color:var(--foreground)}
.ds-table tr:last-child td{border-bottom:none}
.ds-table tr:hover td{background:color-mix(in oklch,var(--foreground) 3%,transparent)}
.ds-table-sm th{padding:8px 10px}.ds-table-sm td{padding:5px 10px}
.ds-table-lg th{padding:22px 15px}.ds-table-lg td{padding:15px}

/* ── Form ───────────────────────────────────────────────────── */
.form-label{display:block;font-size:12px;font-weight:500;color:var(--foreground);margin-bottom:4px}
.form-input{width:100%;padding:calc(7px * var(--density-mult,1)) calc(10px * var(--density-mult,1));border-radius:var(--radius);border:1px solid var(--border);background:var(--card);color:var(--foreground);font-size:13px;font-family:inherit;outline:none}
.form-input:focus{border-color:var(--primary)}
.form-input.error{border-color:var(--destructive)}
.form-helper{font-size:11.5px;color:var(--muted-foreground);margin-top:3px}
.form-error{font-size:11.5px;color:var(--destructive);margin-top:3px}

/* ── Tab bar ────────────────────────────────────────────────── */
.tab-bar{display:flex;border-bottom:1px solid var(--border)}
.tab{padding:7px 0;margin-right:1.25rem;font-size:13px;font-weight:500;color:var(--muted-foreground);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--foreground)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ── Multi-select dropdown ──────────────────────────────────── */
.ms-wrap{position:relative;display:inline-block}
.ms-trigger{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;cursor:pointer;font-size:12px;color:var(--foreground);font-family:inherit;white-space:nowrap}
.ms-trigger.applied{border-color:var(--primary);color:var(--primary);background:color-mix(in oklch,var(--primary) 8%,transparent)}
.ms-trigger svg{color:var(--muted-foreground);flex-shrink:0}
.ms-panel{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px color-mix(in oklch,var(--foreground) 8%,transparent);z-index:300;display:none}
.ms-panel.open{display:block}
.ms-search-row{padding:7px 7px 4px;border-bottom:1px solid var(--border);position:relative}
.ms-search-row svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted-foreground);pointer-events:none}
.ms-search{width:100%;padding:5px 8px 5px 28px;border-radius:calc(var(--radius) - 2px);border:1px solid var(--border);background:var(--muted);color:var(--foreground);font-size:12px;font-family:inherit;outline:none}
.ms-clear{display:flex;align-items:center;gap:6px;width:100%;padding:5px 10px;background:none;border:none;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted-foreground);cursor:pointer;font-family:inherit;text-align:left}
.ms-clear:hover{color:var(--foreground)}
.ms-list{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:transparent transparent}
.ms-list::-webkit-scrollbar{width:4px}
.ms-list::-webkit-scrollbar-track{background:transparent}
.ms-list::-webkit-scrollbar-thumb{background:transparent;border-radius:2px}
.ms-list:hover{scrollbar-color:color-mix(in oklch,var(--foreground) 20%,transparent) transparent}
.ms-list:hover::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--foreground) 20%,transparent)}
.ms-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:13px;color:var(--foreground);cursor:pointer;gap:8px}
.ms-item:hover{background:var(--muted)}
.ms-item .ms-check{width:14px;height:14px;color:var(--primary);flex-shrink:0;opacity:0}
.ms-item.sel .ms-check{opacity:1}
.ms-item.sel{color:var(--primary)}
.result-count{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;border:1px solid color-mix(in oklch,var(--primary) 30%,transparent);background:color-mix(in oklch,var(--primary) 12%,transparent);font-size:11px;font-weight:500;color:var(--primary);white-space:nowrap}

/* ── Empty state ────────────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center}

/* ── Skeleton ───────────────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.skeleton{background:color-mix(in oklch,var(--foreground) 10%,transparent);border-radius:4px;animation:pulse 1.5s ease-in-out infinite}

/* ── Inline code ────────────────────────────────────────────── */
code{font-family:var(--font-mono);font-size:11.5px;background:color-mix(in oklch,var(--foreground) 8%,transparent);padding:2px 6px;border-radius:4px;color:var(--primary)}

/* ── Code Block ─────────────────────────────────────────────── */
.code-block{background:color-mix(in oklch,var(--foreground) 5%,transparent);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;overflow-x:auto;color:var(--foreground);white-space:pre;display:block;margin:0}
.code-block-wrap{position:relative}
.code-block-wrap .code-lang{position:absolute;top:8px;right:10px;font-family:var(--font-mono);font-size:10px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em}

/* ── Inline Value / Val ─────────────────────────────────────── */
.val{font-family:var(--font-mono);font-size:11px;background:color-mix(in oklch,var(--foreground) 7%,transparent);border:1px solid color-mix(in oklch,var(--foreground) 15%,transparent);padding:1px 5px;border-radius:3px;color:var(--accent);white-space:nowrap;display:inline}

/* ── Step Block ─────────────────────────────────────────────── */
.step-block{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:10px}
.step-header{background:color-mix(in oklch,var(--foreground) 4%,transparent);border-bottom:1px solid var(--border);padding:calc(8px * var(--density-mult,1)) calc(14px * var(--density-mult,1));display:flex;align-items:center;gap:10px}
.step-num{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--primary);background:color-mix(in oklch,var(--primary) 12%,transparent);border:1px solid color-mix(in oklch,var(--primary) 30%,transparent);padding:2px 7px;border-radius:4px;flex-shrink:0}
.step-title{font-size:13px;font-weight:600;color:var(--foreground);flex:1}
.step-where{font-family:var(--font-mono);font-size:10px;color:var(--muted-foreground)}
.step-body{padding:calc(14px * var(--density-mult,1)) calc(16px * var(--density-mult,1))}

/* ── Checklist (visual, non-form) ───────────────────────────── */
.checklist{list-style:none;display:flex;flex-direction:column;gap:4px}
.checklist li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--foreground);padding:2px 0}
.checklist li::before{content:'☐';font-size:19px;line-height:16px;color:var(--muted-foreground);flex-shrink:0;font-family:var(--font-mono)}
.checklist li.done{color:var(--muted-foreground)}
.checklist li.done::before{content:'☑';font-size:19px;line-height:16px;color:var(--success)}

/* ── Search ─────────────────────────────────────────────────── */
.search-wrap{position:relative;width:100%}
.search-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);transition:border-color .15s}
.search-row:focus-within{border-color:var(--primary)}
.search-row-icon{color:var(--muted-foreground);flex-shrink:0;display:flex}
.search-input{flex:1;background:none;border:none;outline:none;font-size:13px;color:var(--foreground);font-family:var(--font-sans)}
.search-input::placeholder{color:var(--muted-foreground)}
.search-clear{display:none;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;border:none;background:none;cursor:pointer;color:var(--muted-foreground);flex-shrink:0;padding:0}
.search-clear:hover{background:var(--muted);color:var(--foreground)}
.search-clear.visible{display:flex}
.search-kbd{font-size:10px;font-family:var(--font-mono);color:var(--muted-foreground);background:var(--muted);border:1px solid var(--border);border-radius:3px;padding:1px 5px;white-space:nowrap;flex-shrink:0}
.search-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px color-mix(in oklch,var(--foreground) 8%,transparent);z-index:300;display:none;overflow:hidden}
.search-panel.open{display:block}
.search-panel .ds-scroll-y{max-height:380px;padding:5px 0}
.search-group-label{padding:8px 12px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.search-item{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:13px;color:var(--foreground);cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:var(--font-sans)}
.search-item:hover,.search-item.active{background:var(--muted)}
.search-item-icon{width:14px;height:14px;flex-shrink:0;color:var(--muted-foreground)}
.search-item-label{flex:1;font-weight:500}
.search-item-meta{font-size:11px;color:var(--muted-foreground)}
.search-divider{height:1px;background:var(--border);margin:4px 0}
.search-empty{padding:24px 12px;text-align:center;font-size:13px;color:var(--muted-foreground)}

/* ── Lists ──────────────────────────────────────────────────── */
.ds-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ds-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--foreground);line-height:1.6}
.ds-list-bullet li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:8px}
.ds-list-numbered{counter-reset:ds-counter}
.ds-list-numbered li{counter-increment:ds-counter}
.ds-list-numbered li::before{content:counter(ds-counter);min-width:18px;height:18px;border-radius:50%;background:color-mix(in oklch,var(--primary) 12%,transparent);border:1px solid color-mix(in oklch,var(--primary) 25%,transparent);color:var(--primary);font-size:10px;font-weight:600;font-family:var(--font-mono);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ds-list-sm li{font-size:12px;gap:8px}.ds-list-sm.ds-list-bullet li::before{width:4px;height:4px;margin-top:7px}
.ds-list-lg li{font-size:14px;gap:12px}.ds-list-lg.ds-list-bullet li::before{width:6px;height:6px;margin-top:8px}

/* ── Accordion ──────────────────────────────────────────────── */
.accordion{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.ac-item{border-bottom:1px solid var(--border)}
.ac-item:last-child{border-bottom:none}
.ac-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(12px * var(--density-mult,1)) calc(16px * var(--density-mult,1));background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--foreground);text-align:left;gap:8px}
.ac-trigger:hover{background:color-mix(in oklch,var(--foreground) 3%,transparent)}
.ac-chevron{flex-shrink:0;color:var(--muted-foreground);transition:transform .2s;width:14px;height:14px}
.ac-trigger.open .ac-chevron{transform:rotate(90deg)}
.ac-content{max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;opacity:0}
.ac-content.open{max-height:600px;opacity:1}
.ac-body{padding:0 calc(16px * var(--density-mult,1)) calc(14px * var(--density-mult,1));font-size:13px;color:var(--muted-foreground);line-height:1.6}
.ac-controls{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-bottom:6px}
.ac-ctrl-btn{background:none;border:none;font-size:12px;color:var(--muted-foreground);cursor:pointer;font-family:inherit;padding:2px 6px;border-radius:4px}
.ac-ctrl-btn:hover{color:var(--foreground);background:color-mix(in oklch,var(--foreground) 6%,transparent)}

/* ── Progress Steps (horizontal segmented) ──────────────────── */
.progress-steps{display:flex;gap:3px;margin-bottom:8px}
.progress-step{flex:1;height:4px;border-radius:2px;background:var(--muted)}
.progress-step.done{background:var(--success)}
.progress-step.active{background:var(--primary)}
.progress-labels{display:flex;gap:3px}
.progress-label{flex:1;font-size:10px;font-family:var(--font-mono);color:var(--muted-foreground);text-align:center}
.progress-label.done{color:var(--success)}
.progress-label.active{color:var(--primary);font-weight:600}

/* ── ds-glow — ambient radial glow layer ───────────────────────────────
   Drop one (or more) inside a position:relative box. Color comes from the
   canonical dictionary (ds-c-{role} → --_solid); position from ds-glow-{pos};
   intensity from ds-glow-soft/strong. Multiple glows = multiple .ds-glow
   elements in the same box. Keep content above (position:relative;z-index:1).
   Scales with the box (size is %), so it works on big sections and small cards. */
.ds-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.ds-glow::before{
  content:"";position:absolute;width:var(--glow-size,72%);aspect-ratio:1;border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    color-mix(in oklch, var(--_solid,var(--primary)) var(--glow-intensity,22%), transparent) 0%,
    transparent 70%);
  filter:blur(var(--glow-blur,40px));
}
/* Position = origin of the glow within the box */
.ds-glow-top::before          {top:0;    left:50%;  transform:translate(-50%,-50%)}
.ds-glow-bottom::before       {top:100%; left:50%;  transform:translate(-50%,-50%)}
.ds-glow-left::before         {top:50%;  left:0;    transform:translate(-50%,-50%)}
.ds-glow-right::before        {top:50%;  left:100%; transform:translate(-50%,-50%)}
.ds-glow-center::before       {top:50%;  left:50%;  transform:translate(-50%,-50%)}
.ds-glow-top-left::before     {top:0;    left:0;    transform:translate(-50%,-50%)}
.ds-glow-top-right::before    {top:0;    left:100%; transform:translate(-50%,-50%)}
.ds-glow-bottom-left::before  {top:100%; left:0;    transform:translate(-50%,-50%)}
.ds-glow-bottom-right::before {top:100%; left:100%; transform:translate(-50%,-50%)}
/* Intensity (color strength) */
.ds-glow-soft  {--glow-intensity:14%}
.ds-glow-strong{--glow-intensity:34%}
/* Size (glow radius; md = default 72%) */
.ds-glow-sm{--glow-size:48%}
.ds-glow-md{--glow-size:72%}
.ds-glow-lg{--glow-size:104%}

/* ── ds-dots — dot-grid texture layer ──────────────────────────────────
   Same layering model as ds-glow: an absolute layer inside a position:relative
   box. Color from ds-c-{role} (default muted). Combine with ds-glow freely
   (stack both in the same box). Gap via ds-dots-sm/lg or --dots-gap. */
.ds-dots{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:radial-gradient(circle,
    color-mix(in oklch, var(--_solid,var(--muted-foreground)) var(--dots-intensity,26%), transparent) 1px,
    transparent 1px);
  background-size:var(--dots-gap,20px) var(--dots-gap,20px);
}
/* Gap (spacing between dots — the dot size stays 1px) */
.ds-dots-tight{--dots-gap:14px}
.ds-dots-loose{--dots-gap:28px}