/* Salsa component styles. Every value comes from a token — no raw hex/px/ms. */

/* ── Button ─────────────────────────────────────────── */
.slsa-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--salsa-space-8);font-family:var(--salsa-font-body);font-weight:600;border:1px solid transparent;border-radius:var(--salsa-radius-control);cursor:pointer;transition:var(--salsa-transition-control);white-space:nowrap;text-decoration:none}
.slsa-btn:disabled,.slsa-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.slsa-btn[data-size="sm"]{height:28px;padding:0 var(--salsa-space-8);font-size:var(--salsa-body-sm-size)}
.slsa-btn[data-size="md"]{height:36px;padding:0 var(--salsa-space-12);font-size:var(--salsa-body-md-size)}
.slsa-btn[data-size="lg"]{height:44px;padding:0 var(--salsa-space-20);font-size:var(--salsa-body-lg-size)}
.slsa-btn[data-variant="primary"]{background:var(--salsa-accent);color:var(--salsa-accent-fg)}
.slsa-btn[data-variant="primary"]:hover:not(:disabled){background:var(--salsa-accent-hover)}
.slsa-btn[data-variant="primary"]:active:not(:disabled){background:var(--salsa-accent-pressed)}
.slsa-btn[data-variant="secondary"]{background:var(--salsa-bg-raised);color:var(--salsa-text-primary);border-color:var(--salsa-border-default)}
.slsa-btn[data-variant="secondary"]:hover:not(:disabled){background:var(--salsa-bg-overlay);border-color:var(--salsa-border-strong)}
.slsa-btn[data-variant="ghost"]{background:transparent;color:var(--salsa-text-secondary)}
.slsa-btn[data-variant="ghost"]:hover:not(:disabled){background:var(--salsa-bg-raised);color:var(--salsa-text-primary)}
.slsa-btn[data-variant="danger"]{background:var(--salsa-danger);color:var(--salsa-crema-500)}
.slsa-btn[data-variant="danger"]:hover:not(:disabled){background:var(--salsa-danger-hover)}
.slsa-btn[data-variant="danger"]:active:not(:disabled){background:var(--salsa-danger-pressed)}
.slsa-btn[data-variant="pixel"]{background:var(--salsa-masa-500);color:var(--salsa-accent-fg);border-radius:var(--salsa-radius-pixel);font-family:var(--salsa-font-pixel);box-shadow:inset -2px -2px 0 var(--salsa-masa-700),inset 2px 2px 0 var(--salsa-masa-100);text-transform:uppercase;font-size:var(--salsa-caption-size)}
.slsa-btn[data-variant="pixel"]:active:not(:disabled){box-shadow:inset 2px 2px 0 var(--salsa-masa-700),inset -2px -2px 0 var(--salsa-masa-100)}
.slsa-btn[data-block="true"]{width:100%}

/* ── IconButton ─────────────────────────────────────── */
.slsa-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;color:var(--salsa-text-secondary);border-radius:var(--salsa-radius-control);cursor:pointer;transition:var(--salsa-transition-control)}
.slsa-iconbtn[data-size="sm"]{width:28px;height:28px}
.slsa-iconbtn[data-size="md"]{width:36px;height:36px}
.slsa-iconbtn[data-size="lg"]{width:44px;height:44px}
.slsa-iconbtn:hover:not(:disabled){background:var(--salsa-bg-raised);color:var(--salsa-text-primary)}
.slsa-iconbtn[data-variant="secondary"]{background:var(--salsa-bg-raised);border-color:var(--salsa-border-default)}
.slsa-iconbtn[data-variant="danger"]:hover:not(:disabled){background:var(--salsa-danger);color:var(--salsa-crema-500)}
.slsa-iconbtn:disabled{opacity:.45;cursor:not-allowed}

/* ── Fields ─────────────────────────────────────────── */
.slsa-field{display:flex;flex-direction:column;gap:var(--salsa-space-4)}
.slsa-field-label{font-size:var(--salsa-label-size);line-height:var(--salsa-label-lh);font-weight:var(--salsa-label-weight);letter-spacing:var(--salsa-label-tracking);text-transform:uppercase;color:var(--salsa-text-secondary)}
.slsa-field-req{color:var(--salsa-danger);margin-left:var(--salsa-space-2)}
.slsa-field-hint{font-size:var(--salsa-caption-size);line-height:var(--salsa-caption-lh);color:var(--salsa-text-tertiary)}
.slsa-field-error{font-size:var(--salsa-caption-size);line-height:var(--salsa-caption-lh);color:var(--salsa-danger)}
.slsa-input{width:100%;background:var(--salsa-bg-sunken);border:1px solid var(--salsa-border-default);border-radius:var(--salsa-radius-control);color:var(--salsa-text-primary);font-family:var(--salsa-font-body);font-size:var(--salsa-body-md-size);padding:0 var(--salsa-space-12);height:36px;transition:var(--salsa-transition-control)}
textarea.slsa-input{height:auto;padding:var(--salsa-space-8) var(--salsa-space-12);line-height:var(--salsa-body-md-lh);resize:vertical}
.slsa-input::placeholder{color:var(--salsa-text-tertiary)}
.slsa-input:hover:not(:disabled){border-color:var(--salsa-border-strong)}
.slsa-input:focus{outline:none;border-color:var(--salsa-accent);box-shadow:0 0 0 3px rgba(232,179,63,.18)}
.slsa-input[aria-invalid="true"]{border-color:var(--salsa-danger)}
.slsa-input:disabled{opacity:.5;cursor:not-allowed}
.slsa-input-wrap{position:relative;display:flex;align-items:center}
.slsa-input-wrap .slsa-adorn{position:absolute;display:flex;align-items:center;color:var(--salsa-text-tertiary);pointer-events:none}
.slsa-input-wrap .slsa-adorn[data-side="left"]{left:var(--salsa-space-8)}
.slsa-input-wrap .slsa-adorn[data-side="right"]{right:var(--salsa-space-8)}
.slsa-input[data-pad-left="true"]{padding-left:var(--salsa-space-32)}
.slsa-input[data-pad-right="true"]{padding-right:var(--salsa-space-32)}
select.slsa-input{appearance:none;cursor:pointer;padding-right:var(--salsa-space-32)}

/* ── Checkbox / Radio / Switch ──────────────────────── */
.slsa-choice{display:inline-flex;align-items:flex-start;gap:var(--salsa-space-8);cursor:pointer;font-size:var(--salsa-body-md-size);color:var(--salsa-text-primary);min-height:var(--salsa-space-20)}
.slsa-choice[data-disabled="true"]{opacity:.45;cursor:not-allowed}
.slsa-box{flex:none;width:18px;height:18px;border:1px solid var(--salsa-border-strong);background:var(--salsa-bg-sunken);display:flex;align-items:center;justify-content:center;transition:var(--salsa-transition-control);margin-top:1px}
.slsa-box[data-shape="check"]{border-radius:var(--salsa-radius-xs)}
.slsa-box[data-shape="radio"]{border-radius:var(--salsa-radius-pill)}
.slsa-box[data-on="true"]{background:var(--salsa-accent);border-color:var(--salsa-accent);color:var(--salsa-accent-fg)}
.slsa-choice:hover .slsa-box{border-color:var(--salsa-accent)}
.slsa-choice-desc{display:block;font-size:var(--salsa-body-sm-size);color:var(--salsa-text-tertiary)}
.slsa-switch{flex:none;width:36px;height:20px;border-radius:var(--salsa-radius-pill);background:var(--salsa-border-default);position:relative;transition:background var(--salsa-motion-fast) var(--salsa-ease-fast)}
.slsa-switch[data-on="true"]{background:var(--salsa-accent)}
.slsa-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--salsa-radius-pill);background:var(--salsa-crema-500);transition:transform var(--salsa-motion-fast) var(--salsa-ease-fast)}
.slsa-switch[data-on="true"]::after{transform:translateX(16px)}

/* ── Slider ─────────────────────────────────────────── */
.slsa-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--salsa-radius-pill);background:var(--salsa-border-default);outline:none}
.slsa-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:var(--salsa-radius-pill);background:var(--salsa-accent);border:2px solid var(--salsa-bg-base);cursor:pointer}
.slsa-slider::-moz-range-thumb{width:16px;height:16px;border-radius:var(--salsa-radius-pill);background:var(--salsa-accent);border:2px solid var(--salsa-bg-base);cursor:pointer}

/* ── Avatar / Badge / Chip ──────────────────────────── */
.slsa-avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:var(--salsa-bg-overlay);color:var(--salsa-text-secondary);font-weight:600;flex:none;border-radius:var(--salsa-radius-pill);position:relative}
.slsa-avatar[data-kind="pixel"]{border-radius:var(--salsa-radius-pixel);image-rendering:pixelated}
.slsa-avatar img{width:100%;height:100%;object-fit:cover}
.slsa-badge{display:inline-flex;align-items:center;gap:var(--salsa-space-4);height:20px;padding:0 var(--salsa-space-8);border-radius:var(--salsa-radius-xs);font-size:var(--salsa-caption-size);line-height:var(--salsa-caption-lh);font-weight:600;border:1px solid transparent}
.slsa-badge[data-size="lg"]{height:24px;font-size:var(--salsa-body-sm-size)}
.slsa-chip{display:inline-flex;align-items:center;gap:var(--salsa-space-4);height:26px;padding:0 var(--salsa-space-8);border-radius:var(--salsa-radius-pill);border:1px solid var(--salsa-border-default);background:var(--salsa-bg-raised);color:var(--salsa-text-secondary);font-size:var(--salsa-body-sm-size);cursor:default;transition:var(--salsa-transition-control)}
.slsa-chip[data-selected="true"]{background:rgba(232,179,63,.14);border-color:var(--salsa-accent);color:var(--salsa-accent)}
.slsa-chip[data-clickable="true"]{cursor:pointer}
.slsa-chip[data-clickable="true"]:hover{border-color:var(--salsa-border-strong);color:var(--salsa-text-primary)}
.slsa-chip-x{display:inline-flex;border:none;background:none;color:inherit;cursor:pointer;padding:0;opacity:.6}
.slsa-chip-x:hover{opacity:1}

/* ── Divider / Skeleton / Spinner / Progress ────────── */
.slsa-divider{border:none;background:var(--salsa-border-subtle);margin:0}
.slsa-divider[data-orientation="horizontal"]{height:1px;width:100%}
.slsa-divider[data-orientation="vertical"]{width:1px;align-self:stretch}
.slsa-divider-labeled{display:flex;align-items:center;gap:var(--salsa-space-12);color:var(--salsa-text-tertiary);font-size:var(--salsa-caption-size);text-transform:uppercase;letter-spacing:var(--salsa-label-tracking)}
.slsa-divider-labeled::before,.slsa-divider-labeled::after{content:"";flex:1;height:1px;background:var(--salsa-border-subtle)}
.slsa-skeleton{background:linear-gradient(90deg,var(--salsa-bg-raised) 25%,var(--salsa-bg-overlay) 37%,var(--salsa-bg-raised) 63%);background-size:200% 100%;animation:salsa-shimmer 1.4s var(--salsa-ease-base) infinite;border-radius:var(--salsa-radius-xs)}
.slsa-spinner{display:inline-block;animation:salsa-spin 1s linear infinite;border-radius:var(--salsa-radius-pill);border-style:solid;border-color:var(--salsa-border-default);border-top-color:var(--salsa-accent)}
.slsa-progress{width:100%;height:6px;border-radius:var(--salsa-radius-pill);background:var(--salsa-bg-sunken);overflow:hidden}
.slsa-progress-fill{height:100%;border-radius:var(--salsa-radius-pill);background:var(--salsa-accent);transition:width var(--salsa-motion-base) var(--salsa-ease-base)}
.slsa-progress[data-indeterminate="true"] .slsa-progress-fill{width:35%;animation:salsa-indeterminate 1.2s var(--salsa-ease-base) infinite}
@keyframes salsa-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}

/* ── Tooltip / Popover ──────────────────────────────── */
.slsa-tip-anchor{position:relative;display:inline-flex}
.slsa-tip{position:absolute;z-index:var(--salsa-z-tooltip);background:var(--salsa-bg-overlay);color:var(--salsa-text-primary);border:1px solid var(--salsa-border-default);border-radius:var(--salsa-radius-xs);padding:var(--salsa-space-4) var(--salsa-space-8);font-size:var(--salsa-caption-size);line-height:var(--salsa-caption-lh);white-space:nowrap;box-shadow:var(--salsa-elev-2);pointer-events:none}
.slsa-tip[data-side="top"]{bottom:calc(100% + var(--salsa-space-4));left:50%;transform:translateX(-50%)}
.slsa-tip[data-side="bottom"]{top:calc(100% + var(--salsa-space-4));left:50%;transform:translateX(-50%)}
.slsa-tip[data-side="right"]{left:calc(100% + var(--salsa-space-4));top:50%;transform:translateY(-50%)}
.slsa-tip[data-side="left"]{right:calc(100% + var(--salsa-space-4));top:50%;transform:translateY(-50%)}
.slsa-pop{position:absolute;z-index:var(--salsa-z-dropdown);background:var(--salsa-bg-overlay);border:1px solid var(--salsa-border-default);border-radius:var(--salsa-radius-md);box-shadow:var(--salsa-elev-3);padding:var(--salsa-space-12);min-width:200px}
.slsa-pop[data-side="bottom"]{top:calc(100% + var(--salsa-space-4));left:0}
.slsa-pop[data-side="top"]{bottom:calc(100% + var(--salsa-space-4));left:0}

/* ── Tabs / Accordion / Breadcrumbs / Pagination ────── */
.slsa-tabs{display:flex;gap:var(--salsa-space-4);border-bottom:1px solid var(--salsa-border-subtle)}
.slsa-tab{display:inline-flex;align-items:center;gap:var(--salsa-space-8);background:none;border:none;border-bottom:2px solid transparent;color:var(--salsa-text-secondary);font-family:var(--salsa-font-body);font-size:var(--salsa-body-md-size);font-weight:500;padding:var(--salsa-space-8) var(--salsa-space-12);cursor:pointer;margin-bottom:-1px;transition:var(--salsa-transition-control)}
.slsa-tab:hover{color:var(--salsa-text-primary)}
.slsa-tab[aria-selected="true"]{color:var(--salsa-accent);border-bottom-color:var(--salsa-accent)}
.slsa-tabs[data-variant="pill"]{border-bottom:none;background:var(--salsa-bg-sunken);padding:var(--salsa-space-2);border-radius:var(--salsa-radius-sm);display:inline-flex}
.slsa-tabs[data-variant="pill"] .slsa-tab{border-bottom:none;margin-bottom:0;border-radius:var(--salsa-radius-xs);padding:var(--salsa-space-4) var(--salsa-space-12)}
.slsa-tabs[data-variant="pill"] .slsa-tab[aria-selected="true"]{background:var(--salsa-bg-raised);color:var(--salsa-text-primary)}
.slsa-tab-count{font-size:var(--salsa-caption-size);background:var(--salsa-bg-overlay);border-radius:var(--salsa-radius-pill);padding:0 var(--salsa-space-4);min-width:18px;text-align:center}
.slsa-acc-item{border-bottom:1px solid var(--salsa-border-subtle)}
.slsa-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--salsa-space-8);background:none;border:none;color:var(--salsa-text-primary);font-family:var(--salsa-font-body);font-size:var(--salsa-heading-sm-size);font-weight:600;padding:var(--salsa-space-12) 0;cursor:pointer;text-align:left}
.slsa-acc-head:hover{color:var(--salsa-accent)}
.slsa-acc-body{padding:0 0 var(--salsa-space-16);color:var(--salsa-text-secondary);font-size:var(--salsa-body-md-size)}
.slsa-crumbs{display:flex;align-items:center;gap:var(--salsa-space-8);font-size:var(--salsa-body-sm-size);color:var(--salsa-text-tertiary);flex-wrap:wrap}
.slsa-crumbs a{color:var(--salsa-text-secondary);text-decoration:none}
.slsa-crumbs a:hover{color:var(--salsa-accent);text-decoration:underline}
.slsa-crumbs [aria-current="page"]{color:var(--salsa-text-primary);font-weight:500}
.slsa-pager{display:flex;align-items:center;gap:var(--salsa-space-4)}
.slsa-pager-btn{min-width:32px;height:32px;padding:0 var(--salsa-space-8);border-radius:var(--salsa-radius-xs);border:1px solid var(--salsa-border-default);background:var(--salsa-bg-raised);color:var(--salsa-text-secondary);font-size:var(--salsa-body-sm-size);cursor:pointer;transition:var(--salsa-transition-control)}
.slsa-pager-btn:hover:not(:disabled){border-color:var(--salsa-border-strong);color:var(--salsa-text-primary)}
.slsa-pager-btn[aria-current="true"]{background:var(--salsa-accent);border-color:var(--salsa-accent);color:var(--salsa-accent-fg);font-weight:600}
.slsa-pager-btn:disabled{opacity:.4;cursor:not-allowed}
.slsa-pager-gap{color:var(--salsa-text-tertiary);padding:0 var(--salsa-space-4)}

/* ── Surfaces ───────────────────────────────────────── */
.slsa-card{background:var(--salsa-bg-surface);border:1px solid var(--salsa-border-subtle);border-radius:var(--salsa-radius-card);box-shadow:var(--salsa-elev-1)}
.slsa-card[data-interactive="true"]{cursor:pointer;transition:border-color var(--salsa-motion-fast) var(--salsa-ease-fast),box-shadow var(--salsa-motion-fast) var(--salsa-ease-fast)}
.slsa-card[data-interactive="true"]:hover{border-color:var(--salsa-border-strong);box-shadow:var(--salsa-elev-2)}

/* ── Agent status ───────────────────────────────────── */
.slsa-status{display:inline-flex;align-items:center;gap:var(--salsa-space-4);min-height:22px;white-space:nowrap;padding:0 var(--salsa-space-8);border-radius:var(--salsa-radius-pill);font-size:var(--salsa-caption-size);font-weight:600;border:1px solid}
.slsa-status-dot{width:6px;height:6px;border-radius:var(--salsa-radius-pill);flex:none}
.slsa-status[data-live="true"] .slsa-status-dot{animation:salsa-pulse 1.6s var(--salsa-ease-base) infinite}
.slsa-agent-av{position:relative;display:inline-flex}
.slsa-agent-ring{position:absolute;inset:-3px;border-radius:var(--salsa-radius-pill);border:2px solid;pointer-events:none}
.slsa-agent-pip{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:var(--salsa-radius-pill);border:2px solid var(--salsa-bg-surface)}

/* ── Data ───────────────────────────────────────────── */
.slsa-table{width:100%;border-collapse:collapse;font-size:var(--salsa-body-md-size)}
.slsa-table th{position:sticky;top:0;z-index:1;background:var(--salsa-bg-sunken);color:var(--salsa-text-secondary);text-align:left;font-size:var(--salsa-label-size);font-weight:var(--salsa-label-weight);letter-spacing:var(--salsa-label-tracking);text-transform:uppercase;padding:var(--salsa-space-8) var(--salsa-space-12);border-bottom:1px solid var(--salsa-border-default);white-space:nowrap}
.slsa-table th[data-sortable="true"]{cursor:pointer;user-select:none}
.slsa-table th[data-sortable="true"]:hover{color:var(--salsa-text-primary)}
.slsa-table td{padding:0 var(--salsa-space-12);border-bottom:1px solid var(--salsa-border-subtle);color:var(--salsa-text-primary);vertical-align:middle}
.slsa-table tbody tr{transition:background var(--salsa-motion-instant) var(--salsa-ease-instant)}
.slsa-table tbody tr:hover{background:var(--salsa-bg-raised)}
.slsa-table tbody tr[aria-selected="true"]{background:rgba(232,179,63,.10)}
.slsa-table[data-density="compact"] td{height:var(--salsa-row-height-compact)}
.slsa-table[data-density="default"] td{height:var(--salsa-row-height-default)}
.slsa-table[data-density="comfortable"] td{height:var(--salsa-row-height-comfortable)}
.slsa-num{font-family:var(--salsa-font-mono);font-variant-numeric:tabular-nums}
.slsa-metric{padding:var(--salsa-space-16);display:flex;flex-direction:column;gap:var(--salsa-space-4)}
.slsa-metric-value{font-family:var(--salsa-font-display);font-size:var(--salsa-heading-lg-size);line-height:var(--salsa-heading-lg-lh);font-weight:700;font-variant-numeric:tabular-nums}
.slsa-kpibar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;background:var(--salsa-border-subtle);border:1px solid var(--salsa-border-subtle);border-radius:var(--salsa-radius-card);overflow:hidden}
.slsa-kpibar>*{background:var(--salsa-bg-surface)}
.slsa-timeline{display:flex;flex-direction:column}
.slsa-tl-row{display:grid;grid-template-columns:auto 1fr;gap:var(--salsa-space-12);position:relative;padding-bottom:var(--salsa-space-16)}
.slsa-tl-rail{display:flex;flex-direction:column;align-items:center;gap:var(--salsa-space-4)}
.slsa-tl-node{width:24px;height:24px;border-radius:var(--salsa-radius-pill);display:flex;align-items:center;justify-content:center;background:var(--salsa-bg-raised);border:1px solid var(--salsa-border-default);flex:none}
.slsa-tl-line{flex:1;width:1px;background:var(--salsa-border-subtle)}
.slsa-log{display:grid;grid-template-columns:auto auto auto 1fr auto;gap:var(--salsa-space-8);align-items:baseline;font-family:var(--salsa-font-mono);font-size:var(--salsa-mono-md-size);line-height:var(--salsa-mono-md-lh);padding:var(--salsa-space-2) var(--salsa-space-8);border-radius:var(--salsa-radius-xs)}
.slsa-log:hover{background:var(--salsa-bg-raised)}
.slsa-log-json{margin:var(--salsa-space-4) 0 var(--salsa-space-8);background:var(--salsa-bg-sunken);border:1px solid var(--salsa-border-subtle);border-radius:var(--salsa-radius-xs);padding:var(--salsa-space-8);font-family:var(--salsa-font-mono);font-size:var(--salsa-mono-sm-size);line-height:var(--salsa-mono-sm-lh);color:var(--salsa-text-secondary);overflow:auto;max-height:200px}
.slsa-matrix{border-collapse:collapse;font-size:var(--salsa-body-sm-size)}
.slsa-matrix th,.slsa-matrix td{border:1px solid var(--salsa-border-subtle);padding:var(--salsa-space-4) var(--salsa-space-8);text-align:center}
.slsa-matrix th:first-child,.slsa-matrix td:first-child{text-align:left;white-space:nowrap;color:var(--salsa-text-secondary)}
.slsa-matrix thead th{background:var(--salsa-bg-sunken);font-size:var(--salsa-label-size);text-transform:uppercase;letter-spacing:var(--salsa-label-tracking);color:var(--salsa-text-secondary)}
.slsa-cell{width:100%;border:none;background:none;cursor:pointer;font-size:var(--salsa-caption-size);font-weight:700;padding:var(--salsa-space-2);border-radius:var(--salsa-radius-xs)}
.slsa-cell[data-v="allow"]{color:var(--salsa-success);background:rgba(95,174,88,.12)}
.slsa-cell[data-v="deny"]{color:var(--salsa-danger);background:rgba(222,78,50,.12)}
.slsa-cell[data-v="inherit"]{color:var(--salsa-text-tertiary)}

/* ── Office scene (geometric placeholder — see readme) ─ */
.slsa-office{position:relative;background:var(--salsa-bg-sunken);border:1px solid var(--salsa-border-subtle);border-radius:var(--salsa-radius-card);overflow:hidden;image-rendering:pixelated}
.slsa-office-floor{position:absolute;inset:0;background-image:linear-gradient(rgba(70,84,95,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(70,84,95,.16) 1px,transparent 1px);background-size:var(--salsa-tile-w) var(--salsa-tile-h);transform:rotateX(55deg) rotateZ(45deg) scale(1.5);transform-origin:center}
.slsa-desk{position:absolute;width:104px;border-radius:var(--salsa-radius-pixel);background:var(--salsa-bg-raised);border:1px solid var(--salsa-border-default);padding:var(--salsa-space-8);text-align:center;cursor:pointer;transition:var(--salsa-transition-control)}
.slsa-desk:hover{border-color:var(--salsa-accent);box-shadow:var(--salsa-elev-glow-accent)}
.slsa-desk-name{font-family:var(--salsa-font-pixel);font-size:var(--salsa-caption-size);color:var(--salsa-text-primary);display:block;margin-top:var(--salsa-space-4)}
.slsa-desk-screen{height:26px;border-radius:var(--salsa-radius-pixel);border:1px solid var(--salsa-border-strong)}

/* ── Overlay / palette ──────────────────────────────── */
.slsa-scrim{position:absolute;inset:0;background:rgba(8,11,15,.72);z-index:var(--salsa-z-modal);display:flex;justify-content:center;padding-top:var(--salsa-space-80)}
.slsa-palette{width:560px;max-width:92%;height:fit-content;background:var(--salsa-bg-overlay);border:1px solid var(--salsa-border-default);border-radius:var(--salsa-radius-modal);box-shadow:var(--salsa-elev-3);overflow:hidden}
.slsa-palette-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--salsa-border-subtle);color:var(--salsa-text-primary);font-family:var(--salsa-font-body);font-size:var(--salsa-body-lg-size);padding:var(--salsa-space-16)}
.slsa-palette-input:focus{outline:none}
.slsa-palette-item{display:flex;align-items:center;gap:var(--salsa-space-12);padding:var(--salsa-space-8) var(--salsa-space-16);cursor:pointer;font-size:var(--salsa-body-md-size)}
.slsa-palette-item[data-active="true"]{background:var(--salsa-bg-raised)}
.slsa-palette-group{padding:var(--salsa-space-8) var(--salsa-space-16) var(--salsa-space-4);font-size:var(--salsa-label-size);text-transform:uppercase;letter-spacing:var(--salsa-label-tracking);color:var(--salsa-text-tertiary)}

/* ── States ─────────────────────────────────────────── */
.slsa-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--salsa-space-12);padding:var(--salsa-space-48) var(--salsa-space-24);text-align:center}
.slsa-state-art{width:96px;height:96px;border-radius:var(--salsa-radius-pixel);border:1px dashed var(--salsa-border-default);display:flex;align-items:center;justify-content:center;font-family:var(--salsa-font-pixel);font-size:var(--salsa-caption-size);color:var(--salsa-text-tertiary);background:var(--salsa-bg-sunken)}
.slsa-state-title{font-family:var(--salsa-font-display);font-size:var(--salsa-heading-md-size);font-weight:600}
.slsa-state-body{font-size:var(--salsa-body-md-size);color:var(--salsa-text-secondary);max-width:44ch}

/* ── App shell (UI kit) ─────────────────────────────── */
.slsa-shell{display:grid;grid-template-columns:auto 1fr;height:100%;background:var(--salsa-bg-base)}
.slsa-rail{width:var(--salsa-rail-expanded);background:var(--salsa-bg-surface);border-right:1px solid var(--salsa-border-subtle);display:flex;flex-direction:column;transition:width var(--salsa-motion-base) var(--salsa-ease-base)}
.slsa-rail[data-collapsed="true"]{width:var(--salsa-rail-collapsed)}
.slsa-navitem{display:flex;align-items:center;gap:var(--salsa-space-12);height:var(--salsa-row-height-comfortable);padding:0 var(--salsa-space-16);color:var(--salsa-text-secondary);border:none;background:none;font-family:var(--salsa-font-body);font-size:var(--salsa-body-md-size);cursor:pointer;width:100%;border-left:2px solid transparent;transition:var(--salsa-transition-control)}
.slsa-navitem:hover{background:var(--salsa-bg-raised);color:var(--salsa-text-primary)}
.slsa-navitem[aria-current="page"]{color:var(--salsa-accent);border-left-color:var(--salsa-accent);background:rgba(232,179,63,.08)}
.slsa-topbar{height:var(--salsa-topbar-height);border-bottom:1px solid var(--salsa-border-subtle);display:flex;align-items:center;gap:var(--salsa-space-12);padding:0 var(--salsa-space-24);background:var(--salsa-bg-surface)}
.slsa-wordmark{font-family:var(--salsa-font-display);font-weight:800;letter-spacing:-.01em;color:var(--salsa-text-primary)}