/* ============================================================
   NESYLAB — Components stylesheet (single source of truth)
   Reusable component classes extracted from the library pages.
   Load order: tokens.css → base.css → responsive.css → components.css
   ============================================================ */

/* ============================================================
     BUTTONS
     ============================================================ */
  .btn {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--fg);
    background: transparent;
  }
  .btn svg { width: 16px; height: 16px; }
  .btn.primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
  .btn.primary:hover { background: var(--btn-primary-bg-hover); }
  .btn.secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--border); }
  .btn.secondary:hover { background: var(--tint-2); border-color: var(--border-strong); }
  .btn.ghost { background: transparent; color: var(--btn-ghost-fg); }
  .btn.ghost:hover { background: var(--tint-2); }
  .btn.outline { background: var(--bg-elevated); color: var(--fg); border-color: var(--border-strong); }
  .btn.outline:hover { border-color: var(--primary); color: var(--primary); }
  .btn.glow { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-glow); }
  .btn.danger { background: var(--danger); color: white; }
  .btn.danger:hover { background: var(--error-600); }
  .btn.sm { padding: 7px 12px; font-size: 13px; border-radius: var(--radius-xs); }
  .btn.lg { padding: 14px 22px; font-size: 15px; border-radius: var(--radius-md); }
  .btn[disabled], .btn.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
  /* press / active feedback — universal, works on any fill */
  .btn:not([disabled]):not(.is-disabled):active,
  .btn.is-active { transform: translateY(1px); filter: brightness(0.92); }
  /* loading — hide label, show spinner that inherits the variant's text colour */
  .btn.loading, .btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
  .btn.loading > *, .btn.is-loading > * { opacity: 0; }
  .btn.loading::after, .btn.is-loading::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--fg) 28%, transparent);
    border-top-color: var(--fg);
    animation: btn-spin 0.6s linear infinite;
  }
  .btn.primary.loading::after, .btn.glow.loading::after, .btn.danger.loading::after,
  .btn.primary.is-loading::after, .btn.glow.is-loading::after, .btn.danger.is-loading::after {
    border-color: color-mix(in srgb, var(--primary-fg) 35%, transparent);
    border-top-color: var(--primary-fg);
  }
  .btn.danger.loading::after, .btn.danger.is-loading::after {
    border-color: rgba(255,255,255,0.4); border-top-color: #fff;
  }
  @keyframes btn-spin { to { transform: rotate(360deg); } }

  /* ===== STATE MATRIX — forced :hover / :focus mirrors for static docs ===== */
  .is-hover.btn.primary { background: var(--primary-hover); }
  .is-hover.btn.secondary { background: var(--tint-2); border-color: var(--border-strong); }
  .is-hover.btn.ghost { background: var(--tint-2); }
  .is-hover.btn.outline { border-color: var(--primary); color: var(--primary); }
  .is-hover.btn.danger { background: var(--error-600); }
  .is-focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--shadow-ring); }
  .is-focus.input, .is-focus.field-input { border-color: var(--primary); }

  .smx { display: flex; flex-direction: column; gap: 26px; }
  .smx-row { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elevated); }
  .smx-row > .smx-head { display: flex; align-items: baseline; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-sunken); }
  .smx-head .name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
  .smx-head .sel { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); }
  .smx-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
  @media (max-width: 1080px) { .smx-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px)  { .smx-grid { grid-template-columns: repeat(2, 1fr); } }
  .smx-cell { padding: 22px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 96px; justify-content: space-between; }
  .smx-cell .demo { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
  .smx-cell .st { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-subtle); display: flex; align-items: center; gap: 5px; }
  .smx-cell .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
  .smx-cell.on .st { color: var(--primary); }
  .smx-cell.on .st::before { background: var(--primary); }
  .smx-cell .tok { font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); text-align: center; line-height: 1.4; }
  .smx-legend { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-bottom: 22px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-sunken); }
  .smx-legend .li { display: flex; gap: 8px; font-size: 12.5px; color: var(--fg-muted); align-items: flex-start; }
  .smx-legend .li b { color: var(--fg); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
  .btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .btn:focus-visible { outline: none; box-shadow: var(--shadow-ring); }

  .btn-group { display: inline-flex; }
  .btn-group .btn {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--fg);
  }
  .btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .btn-group .btn + .btn { border-left: none; }
  /* segmented active = soft (primary-soft + primary text), NOT full mint —
     keeps a single full-primary action per view (e.g. Save) dominant */
  .btn-group .btn.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); position: relative; z-index: 1; font-weight: 600; }

  /* ============================================================
     INPUTS
     ============================================================ */
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
  .field .ftitle { font-size: 13px; font-weight: 500; color: var(--fg); }
  .field .hint { font-size: 12px; color: var(--fg-subtle); }
  .field .hint.error { color: var(--danger); }
  /* Wired to the v4.2 component-token layer (--input-*). Values resolve
     to the same semantic roles → visually identical, theme-aware; tune one
     field without touching global roles or other components. */
  .input, .textarea {
    font-family: var(--font-body);
    font-size: 14px;
    padding: var(--input-pad-y) var(--input-pad-x);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background: var(--input-bg);
    color: var(--input-fg);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    width: 100%;
  }
  .input::placeholder, .textarea::placeholder { color: var(--input-placeholder); }
  .input:focus, .textarea:focus { outline: none; border-color: var(--input-border-focus); box-shadow: var(--shadow-ring); }
  .input.error { border-color: var(--danger); }
  .input.error:focus { box-shadow: 0 0 0 4px var(--danger-soft); }
  /* disabled — recede the field: sunken bg, dim text, not-allowed.
     -webkit-text-fill-color keeps the value dim on iOS Safari. */
  .input:disabled, .input.is-disabled,
  .textarea:disabled, .textarea.is-disabled,
  .select-wrap select:disabled,
  .field-input:disabled {
    background: var(--bg-sunken);
    color: var(--fg-subtle);
    -webkit-text-fill-color: var(--fg-subtle);
    border-color: var(--border);
    cursor: not-allowed;
    box-shadow: none;
  }
  .input:disabled::placeholder, .textarea:disabled::placeholder { color: var(--fg-subtle); }
  .select-wrap:has(select:disabled)::after { opacity: var(--opacity-disabled); }
  /* read-only — value stays readable but the field reads locked
     (sunken bg, no focus ring emphasis). Excludes disabled (handled above). */
  .input:read-only:not(:disabled), .input.is-readonly,
  .textarea:read-only:not(:disabled) {
    background: var(--bg-sunken);
    border-color: var(--border);
    cursor: default;
  }
  .input:read-only:not(:disabled):focus, .textarea:read-only:not(:disabled):focus {
    border-color: var(--border-strong);
    box-shadow: none;
  }
  .textarea { min-height: 88px; resize: vertical; font-family: var(--font-body); }

  .input-group { display: flex; align-items: stretch; border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); overflow: hidden; }
  .input-group:focus-within { border-color: var(--input-border-focus); box-shadow: var(--shadow-ring); }
  .input-group .input { border: none; }
  .input-group .input:focus { box-shadow: none; }
  .input-group .prefix, .input-group .suffix {
    padding: 0 12px;
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--bg-sunken);
  }

  /* OTP */
  .otp { display: flex; gap: 8px; }
  .otp input {
    width: 44px; height: 52px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--fg);
  }
  .otp input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-ring); }

  /* Checkbox / Radio / Switch */
  .check, .radio, .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
  .check input, .radio input, .switch input { display: none; }
  .check .box {
    width: 18px; height: 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .check input:checked + .box { background: var(--primary); border-color: var(--primary); }
  .check input:checked + .box::after {
    content: "";
    width: 5px; height: 9px;
    border: solid var(--primary-fg);
    border-width: 0 var(--border-width-2) var(--border-width-2) 0;
    transform: rotate(45deg) translate(-1px, -1px);
  }
  .radio .dot {
    width: 18px; height: 18px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .radio input:checked + .dot { border-color: var(--primary); }
  .radio input:checked + .dot::after {
    content: "";
    width: 8px; height: 8px;
    background: var(--primary);
    border-radius: 50%;
  }
  .switch .track {
    width: 36px; height: 20px;
    border-radius: 999px;
    background: var(--border-strong);
    position: relative;
    transition: background var(--dur-base) var(--ease-out);
  }
  .switch .track::after {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-xs);
  }
  .switch input:checked + .track { background: var(--primary); }
  .switch input:checked + .track::after { transform: translateX(16px); }
  .check .lbl, .radio .lbl, .switch .lbl { font-size: 14px; }
  /* hover / focus / disabled states for selection controls */
  .check:hover .box, .check.is-hover .box,
  .radio:hover .dot, .radio.is-hover .dot { border-color: var(--primary); }
  .check input:focus-visible + .box, .check.is-focus .box,
  .radio input:focus-visible + .dot, .radio.is-focus .dot,
  .switch input:focus-visible + .track, .switch.is-focus .track { box-shadow: var(--shadow-ring); }
  .switch:hover .track, .switch.is-hover .track { border-color: var(--primary); }
  .check.is-disabled, .radio.is-disabled, .switch.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
  .switch .track { border: 1px solid transparent; }

  /* Slider */
  .slider-row { display: flex; align-items: center; gap: 16px; min-width: 280px; }
  .slider-row input[type=range] {
    flex: 1;
    -webkit-appearance: none; appearance: none;
    height: 4px;
    background: var(--border-strong);
    border-radius: 999px;
    outline: none;
  }
  .slider-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-elevated);
    box-shadow: var(--shadow-sm);
  }
  .slider-row .val { font-family: var(--font-mono); font-size: 13px; color: var(--fg); min-width: 36px; text-align: right; }

  /* Select */
  .select-wrap { position: relative; min-width: 200px; }
  .select-wrap select {
    appearance: none;
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background: var(--input-bg);
    color: var(--input-fg);
    cursor: pointer;
  }
  .select-wrap select:focus { outline: none; border-color: var(--input-border-focus); box-shadow: var(--shadow-ring); }
  .select-wrap::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
    width: 6px; height: 6px;
    border-right: 2px solid var(--fg-muted);
    border-bottom: 2px solid var(--fg-muted);
    pointer-events: none;
  }

  /* ============================================================
     BADGES / CHIPS / TAGS
     ============================================================ */
  /* Wired to the v4.6 component-token layer (--badge-*). Statusne variante
     se razrešijo na iste -soft/-fg vloge → vizualno nespremenjeno, theme-aware.
     (.info zdaj uporablja --badge-info-bg = --info-soft, ne surov rgba.) */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--badge-pad-y) var(--badge-pad-x);
    border-radius: var(--badge-radius);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }
  .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .badge.success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
  .badge.info { background: var(--badge-info-bg); color: var(--badge-info-fg); }
  .badge.warn { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
  .badge.danger { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
  .badge.neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
  .badge.solid { background: var(--badge-solid-bg); color: var(--badge-solid-fg); }

  .tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--fg);
  }
  .tag-pill .label-mini {
    background: var(--primary);
    color: var(--primary-fg);
    padding: 2px 7px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  /* ============================================================
     AVATARS
     ============================================================ */
  .avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    position: relative;
  }
  .avatar.sm { width: 28px; height: 28px; font-size: 11px; }
  .avatar.lg { width: 56px; height: 56px; font-size: 18px; }
  .avatar.xl { width: 80px; height: 80px; font-size: 26px; }
  .avatar.amber { background: var(--accent); color: var(--void-900); }
  .avatar.info { background: var(--info); color: var(--void-900); }
  .avatar.danger { background: var(--danger); color: white; }
  .avatar.muted { background: var(--bg-sunken); color: var(--fg); border: 1px solid var(--border); }
  .avatar .presence {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg-elevated);
    bottom: 0; right: 0;
  }
  .avatar.has-img { background: var(--bg-sunken); }
  .avatar.has-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, transparent 0, transparent 4px, var(--tint-2) 4px, var(--tint-2) 8px);
    border-radius: inherit;
  }
  .avatar-stack { display: flex; }
  .avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--bg-elevated); }
  .avatar-stack .avatar:first-child { margin-left: 0; }

  /* ============================================================
     NAVIGATION
     ============================================================ */
  .navbar-mock {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .navbar-mock .left { display: flex; align-items: center; gap: 24px; }
  .navbar-mock .brand-mini { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; color: var(--fg); }
  .navbar-mock nav { display: flex; gap: 2px; font-size: 13px; }
  .navbar-mock nav a { padding: 6px 10px; border-radius: var(--radius-sm); color: var(--fg-muted); }
  .navbar-mock nav a.active { background: var(--tint-2); color: var(--fg); }
  .navbar-mock .right { display: flex; align-items: center; gap: 10px; }

  .sidebar-mock {
    width: 220px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sidebar-mock .group { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); padding: 12px 8px 6px; }
  .sidebar-mock .item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--fg-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .sidebar-mock .item:hover { background: var(--tint-2); color: var(--fg); }
  .sidebar-mock .item.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
  .sidebar-mock .item svg { width: 16px; height: 16px; }
  .sidebar-mock .item .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); }

  .breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-muted); }
  .breadcrumbs a { color: var(--fg-muted); }
  .breadcrumbs .sep { color: var(--fg-subtle); }
  .breadcrumbs .cur { color: var(--fg); font-weight: 500; }

  /* Tabs wired to --tab-* component tokens (v4.6) — visually unchanged. */
  .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--tab-border); width: 100%; }
  .tab { padding: 10px 14px; font-size: 13px; color: var(--tab-fg); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
  .tab.active { color: var(--tab-fg-active); border-color: var(--tab-indicator); }

  .pagination { display: flex; gap: 4px; align-items: center; }
  .pagination .p-btn {
    min-width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--fg);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-mono);
    padding: 0 8px;
  }
  .pagination .p-btn.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
  .pagination .p-btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
  .pagination .p-dots { padding: 0 4px; color: var(--fg-subtle); }

  /* ============================================================
     CARDS
     ============================================================ */
  .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  @media (max-width: 880px) { .card-grid { grid-template-columns: 1fr; } }

  /* Card surfaces wired to the v4.2 component-token layer (--card-*).
     Same resolved values as before — theme-aware, visually unchanged. */
  .feat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color var(--dur-base) var(--ease-out);
  }
  .feat-card:hover { border-color: var(--border-strong); }
  .feat-card .icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
  }
  .feat-card h4 { font-size: 17px; font-weight: 600; }
  .feat-card p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; }

  .stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 18px 20px;
  }
  .stat-card .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-subtle);
  }
  .stat-card .val {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
    margin-top: 6px;
  }
  .stat-card .delta { font-family: var(--font-mono); font-size: 11px; color: var(--primary); margin-top: 6px; }
  .stat-card .delta.down { color: var(--danger); }

  .image-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .image-card .img {
    aspect-ratio: 16 / 9;
    background:
      linear-gradient(135deg, var(--primary-soft), var(--accent-soft)),
      var(--bg-sunken);
    position: relative;
  }
  .image-card .img::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, var(--tint-2) 1px, transparent 0);
    background-size: 14px 14px;
  }
  .image-card .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
  .image-card .body h4 { font-size: 18px; font-weight: 600; }
  .image-card .body p { font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
  .image-card .body .meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-subtle); }

  .profile-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .profile-card .info h4 { font-size: 16px; font-weight: 600; }
  .profile-card .info p { font-size: 13px; color: var(--fg-muted); }
  .profile-card .actions { margin-inline-start: auto; }

  .testimonial-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 28px;
    position: relative;
  }
  .testimonial-card .quote-mark {
    position: absolute;
    top: 16px; right: 24px;
    font-family: var(--font-display);
    font-size: 64px;
    color: var(--primary-soft);
    line-height: 1;
  }
  .testimonial-card p {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
  }
  .testimonial-card .author { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
  .testimonial-card .author .name { font-weight: 600; font-size: 14px; }
  .testimonial-card .author .role { color: var(--fg-muted); font-size: 12px; }

  .pricing-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .pricing-card.featured { border-color: var(--primary); box-shadow: var(--shadow-glow); }
  .pricing-card .plan-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); display: flex; align-items: center; gap: 10px; }
  .pricing-card .plan-name .recommended { background: var(--primary); color: var(--primary-fg); padding: 3px 8px; border-radius: 999px; font-size: 10px; }
  .pricing-card .price { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
  .pricing-card .price .amount { font-size: 56px; }
  .pricing-card .price .period { font-size: 16px; color: var(--fg-muted); margin-left: 6px; font-weight: 400; }
  .pricing-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .pricing-card li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-muted); }
  .pricing-card li svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }

  /* ============================================================
     TABLE
     ============================================================ */
  .table-wrap {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  table.dstable { width: 100%; border-collapse: collapse; font-size: 14px; }
  table.dstable th {
    text-align: left;
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-subtle);
    border-bottom: 1px solid var(--border);
    background: var(--bg-sunken);
    font-weight: 500;
  }
  table.dstable td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
  }
  table.dstable tr:last-child td { border-bottom: none; }
  table.dstable tr:hover td { background: var(--tint-1); }
  table.dstable .mono { font-family: var(--font-mono); color: var(--fg-subtle); font-size: 12px; }

  /* ============================================================
     ALERTS
     ============================================================ */
  .alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid;
    background: var(--bg-elevated);
  }
  .alert .icon-circ {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .alert .body { flex: 1; }
  .alert .body strong { display: block; font-weight: 600; font-size: 14px; }
  .alert .body p { color: var(--fg-muted); font-size: 13px; margin-top: 2px; }
  .alert.info { border-color: rgba(99,91,255,0.32); background: rgba(99,91,255,0.06); }
  .alert.info .icon-circ { background: var(--info); color: var(--void-900); }
  .alert.success { border-color: rgba(0,229,188,0.32); background: var(--primary-soft); }
  .alert.success .icon-circ { background: var(--primary); color: var(--primary-fg); }
  .alert.warn { border-color: rgba(245,158,11,0.32); background: var(--warning-soft); }
  .alert.warn .icon-circ { background: var(--warning); color: var(--void-900); }
  .alert.error { border-color: rgba(239,68,68,0.32); background: var(--danger-soft); }
  .alert.error .icon-circ { background: var(--danger); color: white; }

  /* ============================================================
     MODAL
     ============================================================ */
  .modal-stage {
    background: var(--bg-sunken);
    background-image: radial-gradient(circle at 1px 1px, var(--tint-2) 1px, transparent 0);
    background-size: 16px 16px;
    border-radius: var(--radius-lg);
    padding: 56px 32px;
    display: flex;
    justify-content: center;
  }
  /* Modal surface wired to --modal-* component tokens (v4.6) — unchanged look. */
  .modal-mock {
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    padding: 28px;
    max-width: 460px;
    width: 100%;
  }
  .modal-mock h4 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
  .modal-mock p { margin-top: 8px; color: var(--fg-muted); font-size: 14px; line-height: 1.55; }
  .modal-mock .actions { margin-top: 24px; display: flex; gap: 8px; justify-content: flex-end; }

  /* Popover wired to --popover-* component tokens (v4.6). */
  .popover {
    background: var(--popover-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--popover-shadow);
    padding: 8px;
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .popover .opt {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fg);
  }
  .popover .opt:hover { background: var(--tint-2); }
  .popover .opt svg { width: 16px; height: 16px; color: var(--fg-muted); }
  .popover .opt .kb { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); }
  .popover .opt.danger { color: var(--danger); }
  .popover .opt.danger svg { color: var(--danger); }
  .popover hr { margin: 4px 0; }

  /* ============================================================
     E-COMMERCE
     ============================================================ */
  .product-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all var(--dur-base) var(--ease-out);
  }
  .product-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
  .product-card .product-img {
    aspect-ratio: 1;
    background: var(--bg-sunken);
    position: relative;
    overflow: hidden;
  }
  .product-card .product-img::after {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 30% 30%, var(--primary-soft) 0%, transparent 50%),
      radial-gradient(circle at 70% 70%, var(--accent-soft) 0%, transparent 50%);
  }
  .product-card .product-img .placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-subtle);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    z-index: 1;
  }
  .product-card .badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    gap: 6px;
    flex-direction: column;
    align-items: flex-start;
  }
  .product-card .wish {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--fg-muted);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .product-card .wish:hover, .product-card .wish.active { color: var(--danger); }
  .product-card .info { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
  .product-card .info .cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); }
  .product-card .info h4 { font-size: 15px; font-weight: 600; }
  .product-card .info .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
  .product-card .info .price { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
  .product-card .info .price-old { color: var(--fg-subtle); text-decoration: line-through; font-size: 14px; }
  .product-card .info .rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); }
  .product-card .info .rating svg { color: var(--accent); fill: var(--accent); width: 14px; height: 14px; }
  .product-card .actions { padding: 0 18px 18px; display: flex; gap: 8px; }

  /* Cart line */
  .cart-line {
    display: grid;
    grid-template-columns: 64px 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  .cart-line:last-child { border-bottom: none; }
  .cart-line .thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background:
      radial-gradient(circle at 30% 30%, var(--primary-soft), transparent 60%),
      var(--bg-sunken);
    border: 1px solid var(--border);
  }
  .cart-line .name { font-size: 14px; font-weight: 500; }
  .cart-line .sku { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); margin-top: 2px; }

  .qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elevated); }
  .qty-stepper button {
    width: 32px; height: 32px;
    background: transparent;
    border: none;
    color: var(--fg);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 14px;
  }
  .qty-stepper button:hover { background: var(--tint-2); }
  .qty-stepper input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 14px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    height: 32px;
  }
  .qty-stepper input:focus { outline: none; }

  /* Cart summary */
  .cart-summary {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cart-summary h4 { font-size: 16px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
  .cart-summary .row { display: flex; justify-content: space-between; font-size: 14px; color: var(--fg-muted); }
  .cart-summary .row.total { font-family: var(--font-display); font-size: 22px; color: var(--fg); font-weight: 600; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 4px; letter-spacing: -0.02em; }

  /* Order tracker (stepper) */
  .stepper {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 0;
  }
  .stepper .step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
  }
  .stepper .step-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
  }
  .stepper .step-circle.done { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
  .stepper .step-circle.active { background: var(--bg-elevated); color: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
  .stepper .step-label { font-size: 12px; color: var(--fg-muted); text-align: center; }
  .stepper .step-label.cur { color: var(--fg); font-weight: 500; }
  .stepper .step-line {
    flex: 1;
    height: 1.5px;
    background: var(--border);
    margin-top: -22px;
  }
  .stepper .step-line.done { background: var(--primary); }

  /* Rating */
  .rating-row { display: flex; align-items: center; gap: 8px; }
  .rating-stars { display: inline-flex; gap: 2px; color: var(--accent); }
  .rating-stars svg { width: 16px; height: 16px; fill: var(--accent); }
  .rating-stars .empty svg { fill: var(--bg-sunken); stroke: var(--border-strong); stroke-width: 1; }

  /* Promo banner */
  .promo {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--void-900);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .promo strong { font-weight: 600; }
  .promo .code {
    background: rgba(12,15,14,0.18);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
  }
  .promo .x { margin-left: auto; cursor: pointer; opacity: 0.8; }

  /* ============================================================
     PROGRESS / LOADING
     ============================================================ */
  .progress-bar {
    height: 6px;
    background: var(--bg-sunken);
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
  }
  .progress-bar > div { height: 100%; background: var(--primary); border-radius: inherit; }

  .spinner {
    width: 24px; height: 24px;
    border: 2px solid var(--bg-sunken);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .skeleton {
    background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--tint-2) 50%, var(--bg-sunken) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    border-radius: var(--radius-xs);
  }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  /* ============================================================
     EMPTY STATE
     ============================================================ */
  .empty {
    background: var(--bg-elevated);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .empty .illus {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--bg-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-muted);
  }
  .empty h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
  .empty p { color: var(--fg-muted); font-size: 14px; max-width: 38ch; }

  /* ============================================================
     KEYBOARD, CODE, TOOLTIP
     ============================================================ */
  .kbd {
    display: inline-block;
    padding: 2px 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    color: var(--fg);
  }
  .tooltip-demo {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--void-700);
    color: var(--void-50);
    border-radius: var(--radius-sm);
    font-size: 12px;
    position: relative;
  }
  [data-theme="light"] .tooltip-demo { background: var(--void-900); color: white; }
  .tooltip-demo::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 20px;
    border: 6px solid transparent;
    border-top-color: var(--void-700);
  }
  [data-theme="light"] .tooltip-demo::after { border-top-color: var(--void-900); }

  /* ===== TOOLTIP — reusable, CSS-only (hover + keyboard focus) =====
     Add data-tooltip="…" to ANY element. Use a natively focusable
     element (button/a/input) or add tabindex="0" so keyboard users
     also get it. Direction: data-tip-pos="top"(default)|"bottom"|
     "start"|"end" (start/end are logical → RTL-safe).
     Bubble matches the collapsed-nav tooltip (raised surface, inverts
     on light theme for contrast). */
  [data-tooltip] { position: relative; }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; z-index: var(--z-tooltip);
    left: 50%; bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: var(--neutral-100); color: var(--neutral-800);
    border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
    padding: 6px 10px; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.35;
    white-space: nowrap; max-width: 260px; text-align: center;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  [data-tooltip]::before {
    content: ""; position: absolute; z-index: var(--z-tooltip);
    left: 50%; bottom: calc(100% + 3px);
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent; border-top-color: var(--neutral-100);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after,
  [data-tooltip]:hover::before, [data-tooltip]:focus-visible::before {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }
  /* below */
  [data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); }
  [data-tip-pos="bottom"]::before {
    bottom: auto; top: calc(100% + 3px);
    border-top-color: transparent; border-bottom-color: var(--neutral-100);
  }
  /* sides — logical (RTL-safe), bubble only (no arrow) */
  [data-tip-pos="start"]::after, [data-tip-pos="end"]::after {
    left: auto; right: auto; bottom: auto; top: 50%;
    transform: translateY(-50%); white-space: nowrap;
  }
  [data-tip-pos="start"]::after { inset-inline-end: calc(100% + 8px); }
  [data-tip-pos="end"]::after   { inset-inline-start: calc(100% + 8px); }
  [data-tip-pos="start"]::before, [data-tip-pos="end"]::before { display: none; }
  [data-tip-pos="start"]:hover::after, [data-tip-pos="start"]:focus-visible::after,
  [data-tip-pos="end"]:hover::after, [data-tip-pos="end"]:focus-visible::after {
    transform: translateY(-50%);
  }

  pre.code-block {
    width: 100%;
    background: var(--void-900);
    color: var(--neon-200);
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin: 0;
    overflow-x: auto;
    border: 1px solid var(--border);
  }
  pre.code-block .com { color: var(--fg-subtle); }
  pre.code-block .key { color: var(--cyan-400); }

  /* ============================================================
     ACCORDION
     ============================================================ */
  .accordion {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    width: 100%;
    overflow: hidden;
  }
  .accordion details { border-bottom: 1px solid var(--border); }
  .accordion details:last-child { border-bottom: none; }
  .accordion summary {
    list-style: none;
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: var(--fg);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--fg-muted);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .accordion details[open] summary::after { content: "−"; }
  .accordion .acc-content { padding: 0 20px 16px; color: var(--fg-muted); font-size: 14px; line-height: 1.55; }



/* ============================================================
   ADVANCED COMPONENTS (from components-advanced.html)
   toast · form validation · data-table · date-picker · file-upload ·
   stepper · command palette · micro-interactions · chip picker
   ============================================================ */

/* ===== TOAST ===== */
  .toast-wrap { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:10px; z-index:var(--z-toast); pointer-events:none; }
  .toast { pointer-events:auto; display:flex; align-items:flex-start; gap:11px; min-width:280px; max-width:380px; padding:13px 14px; border-radius:var(--radius-md); background:var(--bg-raised); border:1px solid var(--border-strong); box-shadow:var(--shadow-lg); transform:translateX(120%); opacity:0; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
  .toast.show { transform:translateX(0); opacity:1; }
  .toast .ic { flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
  .toast .ic svg { width:13px; height:13px; }
  .toast.success .ic { background:var(--success-soft); color:var(--success); }
  .toast.error .ic { background:var(--danger-soft); color:var(--danger); }
  .toast.warning .ic { background:var(--warning-soft); color:var(--warning); }
  .toast.info .ic { background:var(--info-soft); color:var(--info); }
  .toast .body { flex:1; min-width:0; }
  .toast .t { font-weight:600; font-size:13.5px; color:var(--fg); }
  .toast .m { font-size:12.5px; color:var(--fg-muted); margin-top:2px; line-height:1.45; }
  .toast .cl { flex:none; background:none; border:0; color:var(--fg-subtle); cursor:pointer; padding:2px; }
  .toast .cl:hover { color:var(--fg); }
  .toast .bar { position:absolute; left:0; bottom:0; height:2px; background:var(--primary); border-radius:0 0 0 var(--radius-md); animation:toastbar 4s linear forwards; }
  @keyframes toastbar { from{width:100%} to{width:0} }

  /* ===== FORM VALIDATION ===== */
  .vform { max-width:420px; display:flex; flex-direction:column; gap:18px; }
  .vfield label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; }
  .vfield .wrap { position:relative; }
  .vfield input { width:100%; font-family:var(--font-body); font-size:14px; padding:10px 38px 10px 13px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg); color:var(--fg); transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
  .vfield input:focus { outline:none; border-color:var(--primary); box-shadow:var(--shadow-ring); }
  .vfield .vic { position:absolute; right:11px; top:50%; transform:translateY(-50%); width:18px; height:18px; opacity:0; transition:opacity var(--dur-fast); }
  .vfield .vic svg { width:18px; height:18px; }
  .vfield .msg { font-size:12px; margin-top:5px; min-height:1em; transition:color var(--dur-fast); }
  .vfield.valid input { border-color:var(--success); }
  .vfield.valid .vic.ok { opacity:1; color:var(--success); }
  .vfield.valid .msg { color:var(--success); }
  .vfield.invalid input { border-color:var(--danger); }
  .vfield.invalid input:focus { box-shadow:0 0 0 4px var(--danger-soft); }
  .vfield.invalid .vic.no { opacity:1; color:var(--danger); }
  .vfield.invalid .msg { color:var(--danger); }

  /* ===== DATA TABLE ===== */
  .dt-wrap { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-elevated); }
  .dt-tools { display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .dt-search { flex:1; min-width:160px; display:flex; align-items:center; gap:8px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:7px 11px; background:var(--bg); }
  .dt-search:focus-within { border-color:var(--primary); box-shadow:var(--shadow-ring); }
  .dt-search input { flex:1; border:0; outline:0; background:none; color:var(--fg); font-family:var(--font-body); font-size:13px; }
  .dt-search svg { width:15px; height:15px; color:var(--fg-subtle); }
  .dt-tools .count { font-family:var(--font-mono); font-size:12px; color:var(--fg-subtle); }
  table.dt { width:100%; border-collapse:collapse; font-size:13.5px; }
  table.dt th { text-align:left; padding:11px 14px; font-size:11px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-subtle); font-family:var(--font-mono); font-weight:500; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; white-space:nowrap; }
  table.dt th:hover { color:var(--fg); }
  table.dt th .sort { display:inline-block; margin-left:5px; opacity:0.4; }
  table.dt th.asc .sort, table.dt th.desc .sort { opacity:1; color:var(--primary); }
  table.dt th.asc .sort::after { content:"↑"; } table.dt th.desc .sort::after { content:"↓"; } table.dt th .sort::after { content:"↕"; }
  table.dt td { padding:11px 14px; border-bottom:1px solid var(--border); color:var(--fg); }
  table.dt tbody tr:last-child td { border-bottom:0; }
  table.dt tbody tr:hover { background:var(--tint-2); }
  table.dt .mono { font-family:var(--font-mono); font-size:12px; color:var(--fg-muted); }
  .dt-foot { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-top:1px solid var(--border); }
  .dt-page { display:flex; gap:4px; }
  .dt-page button { width:30px; height:30px; border:1px solid var(--border-strong); background:var(--bg); border-radius:var(--radius-sm); color:var(--fg-muted); font-family:var(--font-mono); font-size:12px; cursor:pointer; }
  .dt-page button.on { background:var(--primary-soft); color:var(--primary); border-color:var(--primary); }
  .dt-page button:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
  .st-badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; padding:3px 9px; border-radius:var(--radius-full); }
  .st-badge.a { background:var(--success-soft); color:var(--success); }
  .st-badge.p { background:var(--warning-soft); color:var(--warning); }
  .st-badge.i { background:var(--tint-2); color:var(--fg-subtle); }

  /* ===== DATE PICKER ===== */
  .dp { width:300px; border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:var(--bg-raised); box-shadow:var(--shadow-lg); padding:16px; }
  .dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .dp-head .mo { font-family:var(--font-display); font-weight:600; font-size:15px; }
  .dp-head button { width:30px; height:30px; border:1px solid var(--border); background:var(--bg); border-radius:var(--radius-sm); color:var(--fg-muted); cursor:pointer; display:grid; place-items:center; }
  .dp-head button:hover { border-color:var(--primary); color:var(--primary); }
  .dp-head button svg { width:15px; height:15px; }
  .dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
  .dp-grid .dow { font-family:var(--font-mono); font-size:10px; color:var(--fg-subtle); text-align:center; padding:4px 0; text-transform:uppercase; }
  .dp-day { aspect-ratio:1; display:grid; place-items:center; border-radius:var(--radius-sm); font-size:13px; color:var(--fg); cursor:pointer; border:1px solid transparent; }
  .dp-day:hover { background:var(--tint-2); }
  .dp-day.muted { color:var(--fg-subtle); opacity:0.45; }
  .dp-day.today { border-color:var(--border-strong); }
  .dp-day.sel { background:var(--primary); color:var(--primary-fg); font-weight:600; }

  /* ===== FILE UPLOAD ===== */
  .fu { max-width:460px; }
  .fu-drop { border:2px dashed var(--border-strong); border-radius:var(--radius-lg); padding:32px 24px; text-align:center; background:var(--bg-sunken); transition:all var(--dur-fast) var(--ease-out); cursor:pointer; }
  .fu-drop.over { border-color:var(--primary); background:var(--primary-soft); }
  .fu-drop .ic { width:44px; height:44px; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); display:grid; place-items:center; margin:0 auto 12px; color:var(--primary); }
  .fu-drop .ic svg { width:22px; height:22px; }
  .fu-drop .t { font-weight:600; font-size:14px; }
  .fu-drop .t b { color:var(--primary); }
  .fu-drop .h { font-size:12px; color:var(--fg-subtle); margin-top:4px; }
  .fu-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
  .fu-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-elevated); }
  .fu-item .fi { flex:none; width:32px; height:32px; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
  .fu-item .fi svg { width:16px; height:16px; }
  .fu-item .meta { flex:1; min-width:0; }
  .fu-item .nm { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fu-item .pr { height:4px; background:var(--tint-2); border-radius:var(--radius-full); margin-top:5px; overflow:hidden; }
  .fu-item .pr i { display:block; height:100%; background:var(--primary); border-radius:var(--radius-full); transition:width var(--dur-base); }
  .fu-item .sz { font-family:var(--font-mono); font-size:11px; color:var(--fg-subtle); }

  /* ===== STEPPER ===== */
  .stp { display:flex; align-items:flex-start; max-width:560px; }
  .stp .step { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; }
  .stp .step:not(:last-child)::after { content:""; position:absolute; top:17px; left:50%; width:100%; height:2px; background:var(--border); z-index:0; }
  .stp .step.done:not(:last-child)::after { background:var(--primary); }
  .stp .circle { width:34px; height:34px; border-radius:50%; border:2px solid var(--border-strong); background:var(--bg-elevated); display:grid; place-items:center; font-family:var(--font-mono); font-size:13px; color:var(--fg-muted); position:relative; z-index:1; }
  .stp .step.done .circle { background:var(--primary); border-color:var(--primary); color:var(--primary-fg); }
  .stp .step.active .circle { border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
  .stp .step.done .circle svg { width:16px; height:16px; }
  .stp .lab { font-size:12.5px; color:var(--fg-muted); text-align:center; }
  .stp .step.active .lab, .stp .step.done .lab { color:var(--fg); font-weight:500; }

  /* ===== COMMAND PALETTE ===== */
  .cmd-scrim { position:fixed; inset:0; background:var(--bg-overlay); display:none; align-items:flex-start; justify-content:center; padding-top:14vh; z-index:var(--z-modal); }
  .cmd-scrim.open { display:flex; }
  .cmd { width:min(560px,92vw); background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); overflow:hidden; }
  .cmd-in { display:flex; align-items:center; gap:11px; padding:15px 17px; border-bottom:1px solid var(--border); }
  .cmd-in svg { width:18px; height:18px; color:var(--fg-subtle); }
  .cmd-in input { flex:1; border:0; outline:0; background:none; color:var(--fg); font-family:var(--font-body); font-size:16px; }
  .cmd-in kbd { font-family:var(--font-mono); font-size:10px; color:var(--fg-subtle); border:1px solid var(--border); border-radius:5px; padding:2px 6px; }
  .cmd-list { max-height:320px; overflow-y:auto; padding:8px; }
  .cmd-sec { font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-subtle); padding:8px 10px 4px; }
  .cmd-item { display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--radius-sm); cursor:pointer; }
  .cmd-item svg { width:17px; height:17px; color:var(--fg-muted); flex:none; }
  .cmd-item .l { flex:1; font-size:14px; color:var(--fg); }
  .cmd-item .k { font-family:var(--font-mono); font-size:11px; color:var(--fg-subtle); }
  .cmd-item.sel, .cmd-item:hover { background:var(--primary-soft); }
  .cmd-item.sel .l, .cmd-item:hover .l { color:var(--primary); }
  .cmd-item.sel svg, .cmd-item:hover svg { color:var(--primary); }

  /* ===== MICRO-INTERACTIONS TABLE ===== */
  .mi { width:100%; border-collapse:collapse; font-size:13.5px; }
  .mi th { text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--fg-subtle); font-family:var(--font-mono); font-weight:500; border-bottom:1px solid var(--border-strong); }
  .mi td { padding:11px 12px; border-bottom:1px solid var(--border); color:var(--fg-muted); vertical-align:top; }
  .mi tr:last-child td { border-bottom:0; }
  .mi .c { color:var(--fg); font-weight:600; }
  .mi code { font-family:var(--font-mono); font-size:12px; color:var(--primary); }
  .mi-demo { display:inline-block; padding:7px 14px; border-radius:var(--radius-sm); background:var(--primary); color:var(--primary-fg); font-size:13px; font-weight:500; cursor:pointer; }
  .mi-demo.fast { transition:transform 120ms cubic-bezier(0.16,1,0.3,1); }
  .mi-demo.fast:active { transform:scale(0.95); }

  /* ===== CHIP PICKER + CALLOUT MODAL ===== */
  .pick-wrap { display:flex; flex-direction:column; gap:16px; }
  .pick-group .pl { font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-subtle); margin-bottom:9px; }
  .chips { display:flex; flex-wrap:wrap; gap:8px; }

  /* ===== MENU / MENUBAR (23) — ARIA menu pattern with submenus =====
     Menubar = horizontal trigger bar (app menu: Datoteka/Uredi/Pogled).
     Reuses the dropdown look but adds submenu nesting + keyboard.
     Items are role=menuitem divs (so .has-sub can nest a .menu). */
  .menubar { display:inline-flex; align-items:center; gap:2px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); padding:4px; }
  .mb-slot { position:relative; }
  .mb-item { font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--fg); background:transparent; border:0; padding:6px 11px; border-radius:var(--radius-sm); cursor:pointer; }
  .mb-item:hover { background:var(--tint-2); }
  .mb-slot.open > .mb-item { background:var(--primary-soft); color:var(--primary); }
  .mb-slot > .menu { position:absolute; top:calc(100% + 5px); inset-inline-start:0; display:none; }
  .mb-slot.open > .menu { display:block; }

  .menu { min-width:220px; background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:6px; z-index:var(--z-popover); }
  .menu-label { font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-subtle); padding:8px 10px 5px; }
  .menu-item { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:var(--radius-sm); color:var(--fg); font-family:var(--font-body); font-size:13px; font-weight:500; cursor:pointer; text-align:start; position:relative; }
  .menu-item:hover, .menu-item.hl { background:var(--tint-2); }
  .menu-item > svg { width:16px; height:16px; color:var(--fg-subtle); flex:none; }
  .menu-item .mi-kbd { margin-inline-start:auto; font-family:var(--font-mono); font-size:11px; color:var(--fg-subtle); }
  .menu-item .mi-caret { margin-inline-start:auto; color:var(--fg-subtle); display:inline-flex; }
  .menu-item .mi-caret svg { width:15px; height:15px; }
  [dir="rtl"] .menu-item .mi-caret { transform:scaleX(-1); }
  .menu-item .mi-check { margin-inline-start:auto; color:var(--primary); display:none; }
  .menu-item.checked .mi-check { display:inline-flex; }
  .menu-item.checked .mi-check svg { width:15px; height:15px; }
  .menu-item.danger { color:var(--danger); }
  .menu-item.danger > svg { color:var(--danger); }
  .menu-item.is-disabled { opacity:var(--opacity-disabled); pointer-events:none; }
  .menu-sep { height:1px; background:var(--border); margin:5px 0; }
  /* submenu */
  .menu-item.has-sub > .menu { position:absolute; top:-7px; inset-inline-start:100%; margin-inline-start:4px; display:none; }
  .menu-item.has-sub:hover > .menu, .menu-item.has-sub.open > .menu { display:block; }

  /* ===== NUMBER INPUT / SPINNER (24) — generic numeric field =====
     Two variants: stacked chevrons (default) and .sides (− value +).
     data-min / data-max / data-step on the input; wired in JS. */
  .num { display:inline-flex; align-items:stretch; height:38px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-elevated); overflow:hidden; }
  .num:focus-within { border-color:var(--primary); box-shadow:var(--shadow-ring); }
  .num input { width:64px; min-width:0; border:0; background:transparent; color:var(--fg); font-family:var(--font-mono); font-size:14px; text-align:center; outline:none; -moz-appearance:textfield; appearance:textfield; }
  .num input::-webkit-outer-spin-button, .num input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .num .num-suffix { display:flex; align-items:center; padding-inline-end:10px; color:var(--fg-subtle); font-family:var(--font-mono); font-size:12px; }
  .num .num-spin { display:flex; flex-direction:column; border-inline-start:1px solid var(--border); flex:none; }
  .num .num-spin button { flex:1; width:30px; border:0; background:var(--bg-sunken); color:var(--fg-muted); cursor:pointer; display:grid; place-items:center; padding:0; }
  .num .num-spin button:hover { background:var(--tint-2); color:var(--primary); }
  .num .num-spin button:active { background:var(--primary-soft); }
  .num .num-spin button + button { border-top:1px solid var(--border); }
  .num .num-spin svg { width:11px; height:11px; }
  /* side variant: − [value] + */
  .num.sides .num-spin { display:none; }
  .num.sides input { width:52px; }
  .num .num-side { width:38px; flex:none; border:0; background:var(--bg-sunken); color:var(--fg); font-family:var(--font-mono); font-size:17px; line-height:1; cursor:pointer; display:grid; place-items:center; }
  .num.sides .num-side { display:grid; }
  .num:not(.sides) .num-side { display:none; }
  .num .num-side:hover { background:var(--tint-2); color:var(--primary); }
  .num .num-side:active { background:var(--primary-soft); }
  .num .num-side.dec { border-inline-end:1px solid var(--border); }
  .num .num-side.inc { border-inline-start:1px solid var(--border); }
  .num.is-disabled, .num:has(input:disabled) { opacity:0.5; pointer-events:none; }

  /* ===== DRAWER / SIDE SHEET (25) — generic slide-in panel =====
     Slides from inline-end by default; .start slides from inline-start.
     RTL-aware via logical inset + dir overrides. */
  .drawer-scrim { position:fixed; inset:0; background:var(--bg-overlay); opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); z-index:var(--z-scrim); }
  .drawer-scrim.open { opacity:1; visibility:visible; }
  .drawer { position:fixed; top:0; inset-inline-end:0; height:100%; width:min(420px,92vw); background:var(--bg-raised); border-inline-start:1px solid var(--border-strong); box-shadow:var(--shadow-xl); z-index:var(--z-drawer); display:flex; flex-direction:column; transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out); }
  [dir="rtl"] .drawer { transform:translateX(-100%); }
  .drawer.open { transform:translateX(0) !important; }
  .drawer.start { inset-inline-end:auto; inset-inline-start:0; border-inline-start:0; border-inline-end:1px solid var(--border-strong); transform:translateX(-100%); }
  [dir="rtl"] .drawer.start { transform:translateX(100%); }
  .drawer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); flex:none; }
  .drawer-head h3 { font-family:var(--font-display); font-weight:600; font-size:18px; }
  .drawer-head .cl { background:none; border:0; color:var(--fg-subtle); cursor:pointer; padding:4px; border-radius:var(--radius-sm); display:inline-flex; }
  .drawer-head .cl:hover { color:var(--fg); background:var(--tint-2); }
  .drawer-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
  .drawer-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); flex:none; }
  @media (prefers-reduced-motion: reduce) { .drawer { transition:none; } }

  /* ===== DATE RANGE (26) — range states layered onto .dp calendar ===== */
  .dp-day.in-range { background:var(--primary-soft); border-radius:0; color:var(--fg); }
  .dp-day.range-start, .dp-day.range-end { background:var(--primary); color:var(--primary-fg); font-weight:600; }
  .dp-day.range-start { border-start-start-radius:var(--radius-sm); border-end-start-radius:var(--radius-sm); }
  .dp-day.range-end { border-start-end-radius:var(--radius-sm); border-end-end-radius:var(--radius-sm); }
  .dp-range-out { display:flex; align-items:center; gap:8px; margin-top:12px; font-family:var(--font-mono); font-size:12px; color:var(--fg-muted); }
  .dp-range-out b { color:var(--fg); }

  /* ===== TIME PICKER (26) — field + popover list of slots ===== */
  .tp { position:relative; display:inline-block; }
  .tp-field { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--fg); font-family:var(--font-mono); font-size:14px; cursor:pointer; min-width:132px; }
  .tp-field:focus-visible, .tp.open .tp-field { border-color:var(--primary); box-shadow:var(--shadow-ring); outline:none; }
  .tp-field svg { width:16px; height:16px; color:var(--fg-subtle); flex:none; }
  .tp-field .tp-val { flex:1; text-align:start; }
  .tp-list { position:absolute; top:calc(100% + 5px); inset-inline-start:0; width:132px; max-height:220px; overflow-y:auto; background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:6px; z-index:var(--z-popover); display:none; }
  .tp.open .tp-list { display:block; }
  .tp-opt { padding:7px 11px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:13px; color:var(--fg); cursor:pointer; }
  .tp-opt:hover, .tp-opt.hl { background:var(--tint-2); }
  .tp-opt.sel { background:var(--primary-soft); color:var(--primary); font-weight:600; }

  /* ===== COMBOBOX / AUTOCOMPLETE (27) — single-select, type-ahead =====
     Polje z živim filtriranjem + listbox. Tipkovnica ↑↓ Enter Esc, ARIA
     combobox/listbox (aria-activedescendant). Veže na --input-* (polje) in
     --popover-* (seznam). Ena izbrana vrednost — loči od .tg (več-izbirni tag input). */
  .cmb { position:relative; display:inline-block; width:280px; max-width:100%; }
  .cmb-control { display:flex; align-items:center; gap:6px; height:40px; padding-inline:12px 6px; background:var(--input-bg); border:var(--border-width-1) solid var(--input-border); border-radius:var(--input-radius); transition:border-color var(--dur-fast) var(--ease-out); }
  .cmb.open .cmb-control, .cmb-control:focus-within { border-color:var(--input-border-focus); box-shadow:var(--shadow-ring); }
  .cmb-lead { width:16px; height:16px; flex:none; color:var(--input-placeholder); }
  .cmb-input { flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--input-fg); font-family:var(--font-body); font-size:var(--fs-body); }
  .cmb-input::placeholder { color:var(--input-placeholder); }
  .cmb-clear, .cmb-toggle { flex:none; display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; background:transparent; color:var(--fg-subtle); cursor:pointer; border-radius:var(--radius-sm); }
  .cmb-clear:hover, .cmb-toggle:hover { color:var(--fg); background:var(--tint-2); }
  .cmb-clear svg { width:14px; height:14px; }
  .cmb-toggle svg { width:16px; height:16px; transition:transform var(--dur-fast) var(--ease-out); }
  .cmb.open .cmb-toggle svg { transform:rotate(180deg); }
  .cmb-list { position:absolute; inset-inline:0; top:calc(100% + 6px); z-index:var(--z-popover); max-height:240px; overflow-y:auto; padding:6px; background:var(--popover-bg); border:var(--border-width-1) solid var(--border); border-radius:var(--radius-md); box-shadow:var(--popover-shadow); display:none; }
  .cmb.open .cmb-list { display:block; }
  .cmb-opt { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); font-size:var(--fs-body); color:var(--fg); cursor:pointer; }
  .cmb-opt .cmb-lbl { flex:1; min-width:0; }
  .cmb-opt .check { width:15px; height:15px; flex:none; color:var(--primary); opacity:0; }
  .cmb-opt[aria-selected="true"] .check { opacity:1; }
  .cmb-opt.active { background:var(--primary-soft); color:var(--primary); }
  .cmb-mark { color:var(--primary); font-weight:600; }
  .cmb-empty { padding:14px 10px; text-align:center; font-size:var(--fs-body-sm); color:var(--fg-subtle); }

  /* ============================================================
     FORCED-COLORS AUDIT v4.4 — posamezne kontrole (1:1).
     Globalni blok (base.css) da površinam sistemsko obrobo. Tu
     popravimo KONTROLE, kjer pomen nosi barva/fill, ki ga Windows
     High-Contrast splahni — izbrana/aktivna stanja, izbirne
     kontrole, napredek, onemogočeno. Sistemske barve: Highlight /
     HighlightText (izbrano), CanvasText (besedilo/rob), Canvas
     (površina), GrayText (onemogočeno). Blok je ZADNJI v
     components.css → prevlada nad rednimi pravili (enaka
     specifičnost, kasnejši vir).
     ============================================================ */
  @media (forced-colors: active) {
    /* — izbrano / aktivno / trenutno: enotni sistemski poudarek — */
    .btn-group .btn.active,
    .pagination .p-btn.active,
    .chip.active,
    .cmb-opt.active,
    .tp-opt.sel,
    .dp-day.range-start, .dp-day.range-end {
      background: Highlight;
      color: HighlightText;
      border-color: Highlight;
    }
    .dp-day.in-range { background: Highlight; color: HighlightText; }
    .cmb-opt[aria-selected="true"] .check { color: CanvasText; opacity: 1; }
    .cmb-opt.active .check { color: HighlightText; }
    /* tab uporablja le spodnji rob — naredi ga viden + odebeli besedilo */
    .tab.active { color: CanvasText; border-color: Highlight; font-weight: 700; }

    /* — izbirne kontrole: checked stanje mora ostati razločno — */
    .check input:checked + .box { background: Highlight; border-color: Highlight; }
    .check input:checked + .box::after { border-color: HighlightText; }   /* kljukica */
    .radio input:checked + .dot { border-color: Highlight; }
    .radio input:checked + .dot::after { background: Highlight; }          /* notranja pika */
    .switch .track { border-color: CanvasText; }
    .switch input:checked + .track { background: Highlight; }
    .switch .track::after { background: CanvasText; }                      /* gumb stikala */
    .switch input:checked + .track::after { background: HighlightText; }

    /* — napredek & vrtavka: barva = pomen, ohrani kontrast — */
    .progress-bar { border: 1px solid CanvasText; }
    .progress-bar > div { background: Highlight; }
    .spinner { border-color: Canvas; border-top-color: CanvasText; }

    /* — onemogočeno: sistemski GrayText namesto zatemnitve — */
    .btn:disabled, .btn[disabled],
    .input:disabled, .textarea:disabled, .select-wrap select:disabled,
    .check.is-disabled, .radio.is-disabled, .switch.is-disabled,
    .pagination .p-btn:disabled {
      color: GrayText;
      border-color: GrayText;
    }

    /* — grafi: barva JE podatek → izklopi sistemsko prepisovanje,
         da serije ostanejo ločljive (legende imajo tudi besedilo) — */
    [id^="s-charts"] svg { forced-color-adjust: none; }
  }