/* Slip-Split.
   Builds on the dashboard's own CSS variables rather than declaring a second
   palette, so both themes come for free. Everything below is scoped by the
   ss- prefix; the local tokens keep field height, radius and spacing identical
   across the history screen, the workspace and the modals. */

#slipsplit-root {
  --ss-radius: 16px;
  --ss-radius-md: 12px;
  --ss-radius-sm: 9px;
  --ss-field-h: 38px;
  --ss-gap: 1.1rem;
  --ss-pad: 1.15rem;
  --ss-ok: #10b981;
  --ss-warn: #f59e0b;
  --ss-danger: #ef4444;
  --ss-inset: color-mix(in srgb, var(--text-main) 5%, transparent);
  --ss-line: color-mix(in srgb, var(--border) 70%, transparent);
}

.ss-sr { position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ---------- toolbar ---------- */

.ss-bar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  justify-content:space-between; margin-bottom:1.15rem; min-height:var(--ss-field-h); }
.ss-bar-meta { margin:0; font-size:.85rem; color:var(--text-muted); }
.ss-bar-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-left:auto; }

.ss-back { display:inline-flex; align-items:center; gap:.5rem; background:transparent;
  border:none; padding:.4rem .1rem; font:inherit; font-size:.86rem; font-weight:600;
  color:var(--text-muted); cursor:pointer; border-radius:var(--ss-radius-sm);
  transition:color .15s ease; }
.ss-back:hover { color:var(--primary); }
.ss-back:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }

/* ---------- buttons ---------- */

.ss-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:var(--ss-field-h); border:1px solid var(--border); background:var(--bg-hover);
  color:var(--text-main); padding:0 .95rem; border-radius:var(--ss-radius-sm);
  font:inherit; font-weight:600; font-size:.86rem; line-height:1; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, filter .15s ease; }
.ss-btn:hover:not(:disabled) { border-color:var(--primary); }
.ss-btn:disabled { opacity:.55; cursor:default; }
.ss-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.ss-btn i { font-size:.8em; }
.ss-btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.ss-btn-primary:hover:not(:disabled) { filter:brightness(1.08); border-color:var(--primary); }
.ss-btn-ghost { background:transparent; }
.ss-btn-sm { min-height:34px; padding:0 .8rem; font-size:.82rem; }
.ss-wide { width:100%; }

.ss-icon-btn { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:none; background:transparent; border:none;
  color:var(--text-muted); cursor:pointer; font-size:.85rem; border-radius:8px;
  transition:background .15s ease, color .15s ease; }
.ss-icon-btn:hover { background:var(--ss-inset); color:var(--text-main); }
.ss-icon-btn:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.ss-danger:hover { background:color-mix(in srgb, var(--ss-danger) 14%, transparent); color:var(--ss-danger); }

/* ---------- fields ---------- */

.ss-label { font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-muted); }
.ss-field { display:flex; flex-direction:column; gap:.35rem; min-width:0; }

.ss-input { width:100%; min-width:0; height:var(--ss-field-h); padding:0 .7rem;
  background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--ss-radius-sm);
  color:var(--text-main); font:inherit; font-size:.88rem;
  transition:border-color .15s ease, box-shadow .15s ease; }
.ss-input::placeholder { color:var(--text-muted); opacity:.75; }
.ss-input:focus { outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.ss-input-num { text-align:right; font-variant-numeric:tabular-nums; }

/* A currency (or %) affix sits inside the same bordered box as the number, so a
   row of money fields lines up on one edge instead of on ragged symbols. */
.ss-money { display:flex; align-items:stretch; min-width:0; position:relative; }
.ss-money-affix { display:flex; align-items:center; padding:0 .1rem 0 .7rem;
  height:var(--ss-field-h); background:var(--bg-hover);
  border:1px solid var(--border); border-right:none;
  border-radius:var(--ss-radius-sm) 0 0 var(--ss-radius-sm);
  color:var(--text-muted); font-size:.82rem; font-weight:700; }
.ss-money .ss-input { border-radius:0 var(--ss-radius-sm) var(--ss-radius-sm) 0; padding-left:.35rem; }
.ss-money:focus-within .ss-money-affix { border-color:var(--primary); }
.ss-money-sm { width:104px; flex:none; }

.ss-fields { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:520px) { .ss-fields { grid-template-columns:1fr; } }

.ss-row { display:flex; gap:.45rem; align-items:center; }
.ss-row .ss-input { flex:1 1 130px; width:auto; }
.ss-row-item { flex-wrap:wrap; }
@media (max-width:560px) {
  .ss-row-item > .ss-input { flex:1 1 100%; }
  .ss-row-item .ss-money-sm { flex:1 1 auto; width:auto; }
}

.ss-hint { color:var(--text-muted); font-size:.85rem; line-height:1.55; margin:0; max-width:60ch; }
.ss-hint-sm { color:var(--text-muted); font-size:.78rem; line-height:1.5; margin:0; }

/* ---------- loading ---------- */

.ss-loading { display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:4rem 0; color:var(--text-muted); }
.ss-spinner { width:38px; height:38px; border:3px solid var(--border);
  border-top-color:var(--primary); border-radius:50%; animation:ss-spin 1s linear infinite; }
.ss-spinner-sm { width:18px; height:18px; border-width:2px; }
@keyframes ss-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .ss-spinner { animation-duration:3s; } }

/* ---------- history ---------- */

.ss-list { display:flex; flex-direction:column; gap:.6rem; }
.ss-card { display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:1rem 1.1rem; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--ss-radius); cursor:pointer;
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.ss-card:hover { border-color:var(--primary); transform:translateY(-1px);
  box-shadow:0 6px 18px var(--shadow); }
.ss-card:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.ss-card-main { min-width:0; }
.ss-card-top { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.ss-card h3 { margin:0; font-size:1rem; font-weight:700; color:var(--text-main); }
.ss-card-meta { margin:.25rem 0 .55rem; font-size:.8rem; color:var(--text-muted); }
.ss-card-side { display:flex; align-items:center; gap:.65rem; flex:none; }
.ss-total { font-weight:800; font-size:1.05rem; color:var(--text-main); font-variant-numeric:tabular-nums; }

.ss-chip { display:inline-flex; align-items:center; font-size:.66rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:.22rem .55rem; border-radius:999px;
  border:1px solid transparent; white-space:nowrap; }
.ss-chip-ok { background:color-mix(in srgb, var(--ss-ok) 14%, transparent);
  border-color:color-mix(in srgb, var(--ss-ok) 34%, transparent); color:var(--ss-ok); }
.ss-chip-pend { background:color-mix(in srgb, var(--ss-warn) 14%, transparent);
  border-color:color-mix(in srgb, var(--ss-warn) 34%, transparent); color:var(--ss-warn); }

.ss-avatars { display:flex; gap:.25rem; flex-wrap:wrap; }
.ss-av { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-size:.82rem; color:#fff; flex:none; }
.ss-av-more { background:var(--ss-inset); color:var(--text-muted); font-size:.68rem; font-weight:800; }

.ss-empty { text-align:center; padding:4rem 1rem; color:var(--text-muted); }
.ss-empty-icon { font-size:2rem; color:var(--primary); opacity:.8; }
.ss-empty h3 { margin:.8rem 0 .3rem; color:var(--text-main); }
.ss-empty p { margin:0 auto 1.2rem; max-width:42ch; }

/* ---------- workspace hero ---------- */

.ss-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.25rem;
  align-items:end; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--ss-radius); padding:var(--ss-pad); margin-bottom:var(--ss-gap); }
.ss-hero-main { display:flex; flex-direction:column; gap:.8rem; min-width:0; }
.ss-title { height:44px; font-size:1.15rem; font-weight:700; }
.ss-hero-meta { display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; }
.ss-meta { display:inline-flex; align-items:center; gap:.4rem; font-size:.79rem;
  color:var(--text-muted); white-space:nowrap; }
.ss-meta i { color:var(--primary); opacity:.75; font-size:.78em; }
.ss-hero-total { display:flex; flex-direction:column; gap:.3rem; align-items:flex-end;
  padding-left:1.25rem; border-left:1px solid var(--ss-line); }
.ss-hero-total strong { font-size:1.7rem; font-weight:800; line-height:1;
  color:var(--text-main); font-variant-numeric:tabular-nums; }
@media (max-width:640px) {
  .ss-hero { grid-template-columns:1fr; align-items:stretch; }
  .ss-hero-total { align-items:flex-start; padding:.85rem 0 0; border-left:none;
    border-top:1px solid var(--ss-line); }
}

/* ---------- grid + panels ---------- */

.ss-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:var(--ss-gap); align-items:start; }
@media (max-width:980px) { .ss-grid { grid-template-columns:1fr; } }
.ss-col { display:flex; flex-direction:column; gap:var(--ss-gap); min-width:0; }

.ss-panel { background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--ss-radius); overflow:hidden; }
.ss-panel-head { display:flex; align-items:center; gap:.6rem; padding:.85rem var(--ss-pad);
  border-bottom:1px solid var(--ss-line); background:var(--ss-inset); }
.ss-panel-head h3 { margin:0; font-size:.95rem; font-weight:700; color:var(--text-main); }
.ss-panel-icon { display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none; border-radius:8px; font-size:.75rem; color:var(--primary);
  background:color-mix(in srgb, var(--primary) 14%, transparent); }
.ss-count { display:inline-flex; align-items:center; justify-content:center; min-width:21px;
  height:21px; padding:0 .35rem; border-radius:999px; background:var(--bg-hover);
  border:1px solid var(--border); font-size:.7rem; font-weight:800; color:var(--text-muted);
  font-variant-numeric:tabular-nums; }
.ss-panel-aside { margin-left:auto; font-size:.78rem; font-weight:600; color:var(--text-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ss-panel-body { display:flex; flex-direction:column; gap:.85rem; padding:var(--ss-pad); }

/* ---------- participants ---------- */

.ss-people { display:flex; flex-direction:column; gap:.4rem; }
.ss-person { display:flex; align-items:center; gap:.55rem; padding:.35rem .45rem .35rem .5rem;
  border:1px solid var(--border); border-left:3px solid var(--pc);
  border-radius:var(--ss-radius-sm); background:var(--ss-inset);
  transition:border-color .15s ease; }
.ss-person:focus-within { border-color:var(--primary); border-left-color:var(--pc); }
.ss-person-name { flex:1; min-width:0; background:transparent; border:none; padding:.25rem 0;
  color:var(--text-main); font:inherit; font-size:.88rem; font-weight:600; }
.ss-person-name:focus { outline:none; }
.ss-person-name[readonly] { cursor:default; }
.ss-tag { flex:none; padding:.12rem .4rem; border-radius:5px; background:var(--bg-hover);
  border:1px solid var(--border); font-size:.62rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); }

.ss-contacts { display:flex; flex-direction:column; gap:.45rem; }
.ss-contact-list { display:flex; flex-wrap:wrap; gap:.35rem; }
.ss-contact { display:inline-flex; align-items:center; gap:.35rem; background:var(--bg-hover);
  border:1px solid var(--border); border-radius:999px; padding:.3rem .7rem; font:inherit;
  font-size:.78rem; color:var(--text-main); cursor:pointer; transition:border-color .15s ease; }
.ss-contact:hover { border-color:var(--primary); }
.ss-contact:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* ---------- items ---------- */

.ss-items { display:flex; flex-direction:column; gap:.5rem; }
.ss-item { border:1px solid var(--border); border-radius:var(--ss-radius-md);
  padding:.55rem .6rem; background:var(--ss-inset); transition:border-color .15s ease; }
.ss-item:focus-within { border-color:var(--primary); }
.ss-item-un { border-left:3px solid var(--ss-warn); }
.ss-item-row { display:flex; gap:.4rem; align-items:center; }
.ss-item-name { flex:1; min-width:0; background:transparent; border:none; padding:.3rem 0;
  color:var(--text-main); font:inherit; font-size:.88rem; font-weight:600; }
.ss-item-name:focus { outline:none; }

.ss-assign-row { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; align-items:center; }
.ss-assign-label { font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); margin-right:.15rem; }
.ss-assign { position:relative; width:32px; height:32px; flex:none; border-radius:50%;
  border:2px solid var(--border); background:var(--bg-hover); color:var(--text-main); cursor:pointer;
  font-size:.88rem; line-height:1; padding:0; opacity:.5; filter:grayscale(.55);
  transition:opacity .15s ease, border-color .15s ease, filter .15s ease, background .15s ease; }
.ss-assign:hover { opacity:.85; filter:none; }
.ss-assign.on { opacity:1; filter:none; border-color:var(--pc);
  background:color-mix(in srgb, var(--pc) 22%, transparent); }
.ss-assign:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.ss-assign sup { position:absolute; top:-3px; right:-3px; min-width:15px; height:15px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--pc); color:#fff; font-size:.58rem; font-weight:800; }
.ss-unassigned { font-size:.73rem; color:var(--text-muted); }

/* ---------- receipt drop zone ---------- */

.ss-scan { border:1.5px dashed var(--border); border-radius:var(--ss-radius-md);
  background:var(--ss-inset); transition:border-color .15s ease, background .15s ease; }
.ss-scan:hover, .ss-scan-over { border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 8%, transparent); }
.ss-scan-over { border-style:solid; }
.ss-scan-busy { opacity:.85; }
.ss-scan-btn { display:flex; align-items:center; gap:.85rem; width:100%; padding:.85rem .95rem;
  background:transparent; border:none; border-radius:inherit; font:inherit; text-align:left;
  color:var(--text-main); cursor:pointer; }
.ss-scan-btn:disabled { cursor:default; }
.ss-scan-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.ss-scan-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  flex:none; border-radius:11px; background:color-mix(in srgb, var(--primary) 15%, transparent);
  color:var(--primary); font-size:.95rem; }
.ss-scan-text { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.ss-scan-text strong { font-size:.88rem; font-weight:700; }
.ss-scan-text small { font-size:.76rem; line-height:1.45; color:var(--text-muted); }
.ss-scan-cta { display:inline-flex; align-items:center; gap:.4rem; margin-left:auto; flex:none;
  padding:.4rem .7rem; border-radius:var(--ss-radius-sm); border:1px solid var(--border);
  background:var(--bg-card); font-size:.78rem; font-weight:700; color:var(--text-main);
  white-space:nowrap; }
.ss-scan:hover .ss-scan-cta, .ss-scan-over .ss-scan-cta { border-color:var(--primary); color:var(--primary); }
@media (max-width:560px) {
  .ss-scan-btn { flex-wrap:wrap; }
  .ss-scan-cta { margin-left:0; width:100%; justify-content:center; }
}

/* ---------- segmented control + choice cards ---------- */

.ss-seg-row { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.ss-seg { display:inline-flex; padding:3px; gap:3px; background:var(--bg-hover);
  border:1px solid var(--border); border-radius:var(--ss-radius-sm); margin-left:auto; }
.ss-seg-btn { padding:.35rem .8rem; border:none; border-radius:6px; background:transparent;
  font:inherit; font-size:.79rem; font-weight:700; color:var(--text-muted); cursor:pointer;
  transition:background .15s ease, color .15s ease; }
.ss-seg-btn:hover { color:var(--text-main); }
.ss-seg-btn.on { background:var(--primary); color:#fff; }
.ss-seg-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

.ss-choices { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
@media (max-width:560px) { .ss-choices { grid-template-columns:1fr; } }
.ss-choice { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem;
  padding:.7rem .8rem; background:var(--bg-hover); border:1px solid var(--border);
  border-radius:var(--ss-radius-md); font:inherit; color:var(--text-main);
  text-align:left; cursor:pointer;
  transition:border-color .15s ease, background .15s ease; }
.ss-choice:hover { border-color:var(--primary); }
.ss-choice:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.ss-choice.on { background:color-mix(in srgb, var(--primary) 12%, transparent);
  border-color:var(--primary); }
.ss-choice-main { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem;
  font-weight:700; color:var(--text-main); }
.ss-choice-main i { font-size:.78em; color:var(--text-muted); }
.ss-choice.on .ss-choice-main i { color:var(--primary); }
.ss-choice-note { font-size:.74rem; line-height:1.45; color:var(--text-muted); }

/* ---------- checkbox ---------- */

.ss-check { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  align-self:flex-start; margin-top:.15rem; }
.ss-check input { position:absolute; opacity:0; width:0; height:0; }
.ss-check-box { display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex:none; border-radius:6px; border:1.5px solid var(--border);
  background:var(--bg-hover); color:#fff; font-size:.6rem;
  transition:background .15s ease, border-color .15s ease; }
.ss-check-box i { opacity:0; transform:scale(.5); transition:opacity .12s ease, transform .12s ease; }
.ss-check input:checked + .ss-check-box { background:var(--ss-ok); border-color:var(--ss-ok); }
.ss-check input:checked + .ss-check-box i { opacity:1; transform:scale(1); }
.ss-check input:focus-visible + .ss-check-box { outline:2px solid var(--primary); outline-offset:2px; }
.ss-check-text { font-size:.78rem; font-weight:600; color:var(--text-muted); }
.ss-check input:checked ~ .ss-check-text { color:var(--ss-ok); }
.ss-check:hover .ss-check-text { color:var(--text-main); }

/* ---------- breakdown ---------- */

.ss-alloc { display:flex; flex-direction:column; gap:.4rem; }
.ss-alloc-bar { height:7px; border-radius:999px; background:var(--bg-hover);
  border:1px solid var(--border); overflow:hidden; }
.ss-alloc-bar span { display:block; height:100%;
  background:linear-gradient(90deg, var(--primary), var(--accent, var(--primary)));
  transition:width .25s ease; }
.ss-alloc-legend { display:flex; justify-content:space-between; font-size:.75rem;
  color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ss-alloc-legend strong { color:var(--text-main); font-weight:700; }

.ss-bds { display:flex; flex-direction:column; gap:.5rem; }
.ss-bd { display:flex; flex-direction:column; border:1px solid var(--border);
  border-left:3px solid var(--pc); border-radius:var(--ss-radius-md);
  padding:.7rem .8rem; background:var(--ss-inset); }
.ss-bd-paid { border-left-color:var(--ss-ok);
  background:color-mix(in srgb, var(--ss-ok) 7%, transparent); }
.ss-bd-head { display:flex; align-items:center; gap:.55rem; }
.ss-bd-name { flex:1; min-width:0; display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.9rem; color:var(--text-main); }
.ss-bd-total { font-weight:800; font-size:1rem; color:var(--text-main);
  font-variant-numeric:tabular-nums; }
.ss-bd-lines { margin-top:.45rem; padding-top:.4rem; border-top:1px dashed var(--ss-line);
  display:flex; flex-direction:column; gap:.18rem; }
.ss-bd-line { display:flex; justify-content:space-between; gap:1rem; font-size:.76rem;
  color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ss-bd-neg span:last-child { color:var(--ss-ok); }

.ss-summary { display:flex; flex-direction:column; gap:.28rem; padding-top:.8rem;
  border-top:1px solid var(--ss-line); }
.ss-sum-line { display:flex; justify-content:space-between; gap:1rem; font-size:.82rem;
  color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ss-sum-total { margin-top:.3rem; padding-top:.5rem; border-top:1px solid var(--ss-line);
  font-size:1rem; font-weight:800; color:var(--text-main); }

.ss-warn { display:flex; gap:.6rem; align-items:flex-start; padding:.7rem .8rem;
  border-radius:var(--ss-radius-sm); font-size:.78rem; line-height:1.5;
  background:color-mix(in srgb, var(--ss-warn) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ss-warn) 32%, transparent);
  color:var(--ss-warn); }
.ss-warn-icon { flex:none; margin-top:.1rem; }

/* ---------- modal ---------- */

.ss-modal-wrap { position:fixed; inset:0; background:rgba(2,6,23,.62); display:flex;
  align-items:center; justify-content:center; padding:1rem; z-index:9999; }
.ss-modal { background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--ss-radius); max-width:560px; width:100%; max-height:86vh; overflow-y:auto; }
.ss-modal-head { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.15rem; border-bottom:1px solid var(--ss-line); position:sticky; top:0;
  background:var(--bg-card); z-index:1; }
.ss-modal-head h3 { margin:0; font-size:1rem; font-weight:700; color:var(--text-main); }
.ss-modal-body { display:flex; flex-direction:column; gap:1rem; padding:1.15rem; }
.ss-share { width:100%; background:var(--bg-hover); border:1px solid var(--border);
  border-radius:var(--ss-radius-sm); padding:.7rem; color:var(--text-main);
  font-family:ui-monospace,Menlo,monospace; font-size:.8rem; resize:vertical; }

/* The modal owns the ss- field tokens too, since it renders outside #slipsplit-root. */
.ss-modal-wrap {
  --ss-radius: 16px; --ss-radius-md: 12px; --ss-radius-sm: 9px; --ss-field-h: 38px;
  --ss-ok: #10b981; --ss-warn: #f59e0b; --ss-danger: #ef4444;
  --ss-inset: color-mix(in srgb, var(--text-main) 5%, transparent);
  --ss-line: color-mix(in srgb, var(--border) 70%, transparent);
}