/* Sunset UI kit v2026.10.25 */
/* Sunset UI — components (su-*). Colors, shadows and motion come only from role tokens (--color-app-*, --shadow-*,
   --ease-app, --dur-*), defined by the page's theme (see :root in index.html). Behavior: sunset-ui.js (data-su="…").
   One section per component — React ports take one section each into its own file (C1).
   Theming: override the role tokens (--color-app-*, --shadow-*) on any ancestor. --color-app-on-accent = text/icons drawn
   on an accent or ink fill (defaults to white). */

/* ============ Button ============ */
.su-btn {
  --h: 40px; --px: 16px; --fs: 13.5px;
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 var(--px); border: 0; border-radius: var(--radius-pill);
  font: 600 var(--fs)/1 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app),
              box-shadow var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app);
}
.su-btn:active { transform: scale(.97); }
.su-btn:disabled { opacity: .45; pointer-events: none; }
.su-btn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-btn svg { width: 16px; height: 16px; flex: none; }
.su-btn[data-variant="primary"] { background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); box-shadow: var(--shadow-btn); }
.su-btn[data-variant="primary"]:hover { background: var(--color-app-accent-hover); }
.su-btn[data-variant="secondary"] { background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring); }
.su-btn[data-variant="secondary"]:hover { background: var(--color-app-hover); }
.su-btn[data-variant="ghost"] { background: transparent; color: var(--color-app-ink-2); }
.su-btn[data-variant="ghost"]:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-btn[data-variant="destructive"] { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-btn[data-variant="destructive"]:hover { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
.su-btn[data-size="sm"] { --h: 32px; --px: 12px; --fs: 12.5px; }
.su-btn[data-size="lg"] { --h: 48px; --px: 20px; --fs: 15px; }
.su-btn[data-loading] { cursor: progress; }
.su-btn[data-loading]::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%);
  animation: su-sweep var(--dur-loop) var(--ease-app) infinite;
}
.su-spin { width: 16px; height: 16px; animation: su-rot .8s linear infinite; }
@keyframes su-sweep { to { transform: translateX(100%); } }
@keyframes su-rot { to { transform: rotate(360deg); } }

/* ============ Chip ============ */
.su-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-sans); white-space: nowrap; background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-chip[data-tone="ok"] { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); }
.su-chip[data-tone="warn"] { background: var(--color-app-warn-soft); color: var(--color-app-ink); }
.su-chip[data-tone="crit"] { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-chip[data-tone="accent"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-chip__x { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-chip__x:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.su-chip__x:focus-visible { outline: 2px solid var(--color-app-focus); }
.su-chip__x svg { width: 10px; height: 10px; }

/* ============ Panel ============ */
.su-panel { background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); }
.su-panel__head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; box-shadow: inset 0 -1px 0 var(--color-app-line); }
.su-panel__title { margin: 0 auto 0 0; font: 700 15px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-count { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--radius-pill);
  font: 600 11.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; background: var(--color-app-accent-soft); color: var(--color-app-accent); }

/* ============ Segmented control ============ */
.su-seg { --pad: 3px; position: relative; display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: var(--pad);
  border-radius: var(--radius-pill); background: var(--color-app-tray); box-shadow: var(--shadow-ring-card); }
.su-seg__pill { position: absolute; top: var(--pad); bottom: var(--pad); left: 0; width: 0; border-radius: var(--radius-pill);
  background: var(--color-app-surface); box-shadow: var(--shadow-nav); }
.su-seg[data-ready] .su-seg__pill { transition: transform var(--dur-layout) var(--ease-app), width var(--dur-layout) var(--ease-app); }
.su-seg__opt { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  padding: 8px 14px; border-radius: var(--radius-pill); font: 600 13px/1 var(--font-sans); color: var(--color-app-muted); cursor: pointer;
  transition: color var(--dur-hover) var(--ease-app); }
.su-seg__opt:hover, .su-seg__opt[aria-checked="true"] { color: var(--color-app-ink); }
.su-seg__opt:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-seg__n { font-size: 11px; padding: 3px 6px; border-radius: var(--radius-pill); background: var(--color-app-accent-soft);
  color: var(--color-app-accent); font-variant-numeric: tabular-nums; }

/* ============ Filter menu ============ */
.su-fm { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.su-fm__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(280px, calc(100vw - 32px)); padding: 6px;
  background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  transform-origin: top left; animation: su-pop var(--dur-state) var(--ease-app); }
.su-fm__group { border-radius: var(--radius-ctrl); }
.su-fm__group + .su-fm__group { margin-top: 2px; }
.su-fm__group > summary { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-ctrl);
  list-style: none; cursor: pointer; font: 600 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-fm__group > summary::-webkit-details-marker { display: none; }
.su-fm__group > summary::after { content: ""; width: 7px; height: 7px; border: solid var(--color-app-muted); border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg); transition: transform var(--dur-state) var(--ease-app); }
.su-fm__group:not([open]) > summary::after { transform: rotate(-45deg); }
.su-fm__group > summary:hover { background: var(--color-app-hover); }
.su-fm__group > summary:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-fm__opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-ctrl);
  font: 400 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); cursor: pointer; }
.su-fm__opt:hover { background: var(--color-app-hover); }
.su-fm__opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-app-accent); }
.su-fm__opt input:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-fm__foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 2px; margin-top: 4px;
  box-shadow: inset 0 1px 0 var(--color-app-line); font: 400 12.5px/1 var(--font-sans); color: var(--color-app-muted); }
@keyframes su-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ============ Decision inbox ============ */
.su-di__list { list-style: none; margin: 0; padding: 0; }
.su-di__item { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-layout) var(--ease-app-morph), opacity var(--dur-state) var(--ease-app); }
.su-di__item[data-state="folded"] { grid-template-rows: 0fr; opacity: 0; }
.su-di__fold { overflow: hidden; min-height: 0; }
.su-di__inner { display: grid; gap: 8px; padding: 14px 16px; box-shadow: inset 0 -1px 0 var(--color-app-line); }
.su-di__q { margin: 0; font: 600 14px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-di__meta { margin: 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--color-app-muted); }
.su-di__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.su-di__done { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 13px/1 var(--font-sans); color: var(--color-app-ok-deep); }
.su-di__done[data-tone="crit"] { color: var(--color-app-crit-deep); }
.su-di__done svg { width: 18px; height: 18px; }
.su-di__done path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: su-draw var(--dur-layout) var(--ease-app) forwards; }
.su-di__item:not([data-state]) .su-di__done, .su-di__item[data-state] .su-di__actions { display: none; }
.su-di__empty { margin: 0; padding: 22px 16px; text-align: center; font: 400 13px/1.5 var(--font-sans); color: var(--color-app-muted); }
@keyframes su-draw { to { stroke-dashoffset: 0; } }

/* ============ Progress tracker ============ */
.su-pt { display: grid; gap: 12px; padding: 14px 16px 10px; }
.su-pt__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 400 12.5px/1 var(--font-sans); color: var(--color-app-muted); }
.su-pt__top b { font: 700 20px/1 var(--font-sans); color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-pt__bar { height: 6px; border-radius: var(--radius-pill); background: var(--color-app-tray); overflow: hidden; }
.su-pt__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--color-app-accent);
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--dur-layout) var(--ease-app); }
.su-pt__list { list-style: none; margin: 0; padding: 0; display: grid; }
.su-pt__item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; border-radius: var(--radius-ctrl); background: none;
  text-align: left; font: 400 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-pt__item:hover { background: var(--color-app-hover); }
.su-pt__item:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-pt__box { flex: none; color: var(--color-app-on-accent, var(--color-white)); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: var(--shadow-ring);
  transition: background-color var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-pt__box svg { width: 12px; height: 12px; }
.su-pt__box path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--dur-state) var(--ease-app) 60ms; }
.su-pt__item[aria-pressed="true"] .su-pt__box { background: var(--color-app-accent); box-shadow: none; }
.su-pt__item[aria-pressed="true"] .su-pt__box path { stroke-dashoffset: 0; }
.su-pt__item[aria-pressed="true"] .su-pt__label { color: var(--color-app-muted); text-decoration: line-through; text-decoration-color: var(--color-app-line-strong); }
.su-pt__due { margin-left: auto; font-size: 12px; color: var(--color-app-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.su-pt__due[data-tone="crit"] { color: var(--color-app-crit-deep); font-weight: 600; }

/* ============ AI summary (thinking loader + reveal) ============ */
.su-ai { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-app-tray); box-shadow: var(--shadow-ring-card); }
.su-ai__head { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-ai__head svg { width: 16px; height: 16px; color: var(--color-app-accent); }
.su-shimmer { font: 500 13px/1 var(--font-sans); background: linear-gradient(90deg, var(--color-app-muted) 40%, var(--color-app-ink) 50%, var(--color-app-muted) 60%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: su-shine 1.6s linear infinite; }
@keyframes su-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.su-ai__body { margin: 0; font: 400 13.5px/1.6 var(--font-sans); color: var(--color-app-ink); }
.su-ai__body[data-reveal] { animation: su-rise var(--dur-layout) var(--ease-app); }
.su-ai__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes su-rise { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }

/* ============ Toast ============ */
.su-toaster { position: fixed; z-index: 50; right: 0; bottom: 0; display: grid; gap: 8px; justify-items: end; pointer-events: none;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) 16px; }
.su-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(380px, calc(100vw - 32px)); padding: 10px 10px 10px 14px;
  border-radius: 12px; background: var(--color-app-ink); color: var(--color-app-on-accent, var(--color-white)); box-shadow: var(--shadow-lg);
  font: 500 13.5px/1.4 var(--font-sans); animation: su-rise var(--dur-layout) var(--ease-app);
  transition: opacity var(--dur-state) var(--ease-app), transform var(--dur-state) var(--ease-app); }
.su-toast[data-leaving] { opacity: 0; transform: translateY(6px); }
.su-toast svg { width: 18px; height: 18px; flex: none; color: var(--color-app-ok); }
.su-toast__action { margin-left: auto; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit; font: 600 12.5px/1 var(--font-sans); cursor: pointer; }
.su-toast__action:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.su-toast__action:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }

/* ============ Kbd + shared form field ============ */
.su-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  font: 600 11px/1 var(--font-sans); color: var(--color-app-muted); box-shadow: var(--shadow-ring); }
.su-field { display: grid; gap: 6px; font: 600 12.5px/1.2 var(--font-sans); color: var(--color-app-ink-2); }
.su-input { height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--color-app-surface); box-shadow: var(--shadow-ring);
  font: 400 14px/1 var(--font-sans); color: var(--color-app-ink); outline: none; transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-input::placeholder { color: var(--color-app-muted); }
.su-input:focus { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); animation: su-shake 320ms var(--ease-app); }
.su-field__err { font-weight: 400; color: var(--color-app-crit-deep); }
@keyframes su-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
[class^="su-"][hidden], [class*=" su-"][hidden] { display: none !important; }

/* ============ Command menu ============ */
.su-cmd__dialog { width: min(560px, calc(100vw - 32px)); max-height: min(460px, 80vh); padding: 0; border: 0; border-radius: 16px;
  background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring-card), var(--shadow-lg); overflow: hidden; }
.su-cmd__dialog[open] { display: flex; flex-direction: column; animation: su-pop var(--dur-state) var(--ease-app); }
.su-cmd__dialog::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: blur(2px); }
.su-cmd__search { display: flex; align-items: center; gap: 10px; padding: 0 16px; box-shadow: inset 0 -1px 0 var(--color-app-line); }
.su-cmd__search svg { width: 18px; height: 18px; flex: none; color: var(--color-app-muted); }
.su-cmd__input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; outline: none; font: 400 15px/1 var(--font-sans); color: var(--color-app-ink); }
.su-cmd__input::placeholder { color: var(--color-app-muted); }
.su-cmd__list { overflow-y: auto; padding: 6px; }
.su-cmd__group { margin: 0; padding: 10px 10px 6px; font: 600 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-cmd__item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-ctrl); font: 400 14px/1.3 var(--font-sans); color: var(--color-app-ink); cursor: pointer; }
.su-cmd__item svg { width: 16px; height: 16px; flex: none; color: var(--color-app-muted); }
.su-cmd__item .su-kbd { margin-left: auto; }
.su-cmd__item[aria-selected="true"] { background: var(--color-app-hover); box-shadow: inset 2px 0 0 var(--color-app-accent); }
.su-cmd__item mark, .su-combo__opt mark { background: none; color: var(--color-app-accent); font-weight: 600; }
.su-cmd__empty { margin: 0; padding: 28px; text-align: center; font: 400 13.5px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-cmd__foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 14px; box-shadow: inset 0 1px 0 var(--color-app-line); font: 400 12px/1 var(--font-sans); color: var(--color-app-muted); }
.su-cmd__foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ============ Data table ============ */
.su-table-wrap { overflow-x: auto; }
.su-table { width: 100%; border-collapse: collapse; font: 400 13.5px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-table th { height: 40px; padding: 0 12px; text-align: left; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--color-app-line);
  font: 600 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-table td { padding: 11px 12px; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--color-app-line); }
.su-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.su-table .chk { width: 40px; padding-right: 0; }
.su-table tbody tr { transition: background-color var(--dur-hover) var(--ease-app); }
.su-table tbody tr:hover { background: var(--color-app-hover); }
.su-table tbody tr[aria-selected="true"] { background: var(--color-app-accent-soft); }
.su-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--color-app-accent); }
.su-table__sort { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.su-table__sort::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; opacity: .35; transform: translateY(2px);
  transition: transform var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app); }
[aria-sort="descending"] > .su-table__sort::after { opacity: 1; }
[aria-sort="ascending"] > .su-table__sort::after { opacity: 1; transform: translateY(-2px) rotate(180deg); }
.su-table__sort:focus-visible, .su-table input:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; border-radius: 4px; }
.su-table th.num .su-table__sort { flex-direction: row-reverse; }
.su-table__bar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 8px 8px 14px; border-radius: 10px;
  background: var(--color-app-accent-soft); font: 600 13px/1 var(--font-sans); color: var(--color-app-ink); animation: su-rise var(--dur-state) var(--ease-app); }
.su-table__bar > :first-child { margin-right: auto; }

/* ============ Date range picker ============ */
.su-dr { position: relative; display: inline-block; }
.su-dr__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: flex; gap: 4px; padding: 8px; border-radius: 14px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); transform-origin: top left; animation: su-pop var(--dur-state) var(--ease-app); }
.su-dr__presets { display: grid; align-content: start; gap: 2px; padding-right: 8px; box-shadow: inset -1px 0 0 var(--color-app-line); }
.su-dr__presets button { padding: 8px 10px; border: 0; border-radius: var(--radius-ctrl); background: none; text-align: left; white-space: nowrap; cursor: pointer;
  font: 400 13px/1 var(--font-sans); color: var(--color-app-ink-2); }
.su-dr__presets button:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-dr__presets button[aria-pressed="true"] { color: var(--color-app-accent); font-weight: 600; }
.su-dr__cal { padding: 2px 2px 0 8px; }
.su-dr__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; font: 600 13.5px/1 var(--font-sans); color: var(--color-app-ink); }
.su-dr__nav { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--color-app-ink-2); cursor: pointer; }
.su-dr__nav:hover { background: var(--color-app-hover); }
.su-dr__nav svg { width: 14px; height: 14px; }
.su-dr__grid { display: grid; grid-template-columns: repeat(7, 34px); row-gap: 2px; }
.su-dr__dow { display: grid; place-items: center; height: 24px; font: 600 10.5px/1 var(--font-sans); color: var(--color-app-muted); }
.su-dr__day { position: relative; height: 34px; border: 0; background: none; cursor: pointer; font: 400 13px/1 var(--font-sans); color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-dr__day:hover { background: var(--color-app-hover); border-radius: 8px; }
.su-dr__day[data-in] { background: var(--color-app-accent-soft); border-radius: 0; }
.su-dr__day[data-edge] { background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); font-weight: 600; border-radius: 8px; }
.su-dr__day[data-today]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.su-dr__day:focus-visible, .su-dr__presets button:focus-visible, .su-dr__nav:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; border-radius: 8px; }
@media (max-width: 560px) {
  .su-dr__panel { flex-direction: column; }
  .su-dr__presets { grid-auto-flow: column; overflow-x: auto; padding: 0 0 6px; box-shadow: inset 0 -1px 0 var(--color-app-line); }
  .su-dr__cal { padding: 4px 0 0; }
}

/* ============ Combobox (multi) ============ */
.su-combo { position: relative; width: min(380px, 100%); }
.su-combo__box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 6px 10px; border-radius: 12px; cursor: text;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring); transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-combo__box:focus-within { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-combo__input { flex: 1; min-width: 90px; padding: 4px 0; border: 0; background: none; outline: none; font: 400 14px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-combo__input::placeholder { color: var(--color-app-muted); }
.su-combo .su-chip { animation: su-pop var(--dur-state) var(--ease-app); }
.su-combo__list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 248px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); animation: su-pop var(--dur-state) var(--ease-app); }
.su-combo__group { padding: 8px 10px 4px; font: 600 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-combo__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-ctrl); cursor: pointer; font: 400 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-combo__opt[data-active] { background: var(--color-app-hover); }
.su-combo__opt[aria-selected="true"]::after { content: ""; width: 10px; height: 5px; margin-left: auto; border: solid var(--color-app-accent); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.su-combo__av { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font: 600 10.5px/1 var(--font-sans); background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-combo__meta { margin-left: 4px; font-size: 12px; color: var(--color-app-muted); }
.su-combo__create { color: var(--color-app-accent); font-weight: 600; }

/* ============ Stepper form ============ */
.su-step { width: min(460px, 100%); display: grid; gap: 18px; padding: 20px; border-radius: 16px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-step__nav { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.su-step__nav li { flex: 1; display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--font-sans); color: var(--color-app-muted); }
.su-step__nav li:last-child { flex: none; }
.su-step__nav li::after { content: ""; flex: 1; min-width: 12px; height: 2px; border-radius: 2px;
  background: linear-gradient(var(--color-app-accent), var(--color-app-accent)) 0 0 / 0% 100% no-repeat, var(--color-app-line-strong);
  transition: background-size var(--dur-layout) var(--ease-app); }
.su-step__nav li:last-child::after { display: none; }
.su-step__nav li[data-state="done"]::after { background-size: 100% 100%, auto; }
.su-step__dot { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: var(--shadow-ring); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-state) var(--ease-app), color var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-step__nav li[data-state="current"] { color: var(--color-app-ink); }
.su-step__nav li[data-state="current"] .su-step__dot { box-shadow: inset 0 0 0 2px var(--color-app-accent); color: var(--color-app-accent); }
.su-step__nav li[data-state="done"] .su-step__dot { background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); box-shadow: none; }
.su-step__label { white-space: nowrap; }
.su-step__panel { display: grid; gap: 14px; animation: su-rise var(--dur-layout) var(--ease-app); }
.su-step__title { margin: 0; font: 700 16px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-step__hint { margin: -8px 0 0; font: 400 13px/1.5 var(--font-sans); color: var(--color-app-muted); }
.su-step__actions { display: flex; justify-content: space-between; gap: 8px; }
.su-step__done { display: grid; justify-items: center; gap: 8px; padding: 10px 0; text-align: center; }
.su-step__done svg { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); }
.su-step__done path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: su-draw var(--dur-layout) var(--ease-app) 120ms forwards; }
@media (max-width: 480px) { .su-step__nav li:not([data-state="current"]) .su-step__label { display: none; } }

/* ============ Screen-reader only ============ */
.su-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ============ Kanban board ============ */
.su-kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; width: 100%; overflow-x: auto; padding-bottom: 4px; }
.su-kb__col { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-height: 230px; padding: 10px; border-radius: 14px; background: var(--color-app-tray); box-shadow: var(--shadow-ring-card); }
.su-kb__head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font: 600 13px/1 var(--font-sans); color: var(--color-app-ink); }
.su-kb__head .su-count { margin-left: auto; }
.su-kb__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-app-muted); }
.su-kb__list { display: grid; align-content: start; gap: 8px; min-height: 64px; margin: 0; padding: 2px; list-style: none; border-radius: 10px; transition: background-color var(--dur-hover) var(--ease-app); }
.su-kb__list[data-over] { background: var(--color-app-accent-soft); }
.su-kb__card { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card);
  font: 500 13.5px/1.4 var(--font-sans); color: var(--color-app-ink); cursor: grab; touch-action: none; user-select: none;
  transition: box-shadow var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app), opacity var(--dur-hover) var(--ease-app); }
.su-kb__card:hover { box-shadow: var(--shadow-ring-card), var(--shadow-nav); }
.su-kb__card:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-kb__card[data-placeholder] { opacity: .3; }
.su-kb__card[data-grabbed] { box-shadow: 0 0 0 2px var(--color-app-accent), var(--shadow-md); transform: rotate(-1.5deg); }
.su-kb__ghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; cursor: grabbing; transform: rotate(-2deg) scale(1.03); box-shadow: var(--shadow-ring-card), var(--shadow-lg); }
.su-kb__meta { display: flex; align-items: center; gap: 6px; font: 400 12px/1 var(--font-sans); color: var(--color-app-muted); }
.su-kb__meta .su-combo__av { width: 22px; height: 22px; margin-left: auto; }

/* ============ Chart card ============ */
.su-chart { width: min(560px, 100%); display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-chart__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.su-chart__head .su-seg { margin-left: auto; }
.su-chart__label { margin: 0 0 6px; font: 600 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-chart__value { margin: 0; font: 700 26px/1 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-chart__plot { position: relative; height: 180px; touch-action: pan-y; }
.su-chart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.su-chart__grid { stroke: var(--color-app-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.su-chart__line { fill: none; stroke: var(--color-app-accent); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  animation: su-line var(--dur-layout) var(--ease-app); } /* dash only while drawing: with non-scaling-stroke a wide plot mis-measures pathLength and cuts the line short */
@keyframes su-line { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.su-chart__cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-app-line-strong); pointer-events: none; }
.su-chart__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--color-app-accent);
  box-shadow: 0 0 0 3px var(--color-app-surface), 0 0 0 5px var(--color-app-accent-soft); pointer-events: none; transition: left 80ms linear, top 80ms linear; }
.su-chart__tip { position: absolute; top: -6px; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  background: var(--color-app-ink); color: var(--color-app-on-accent, var(--color-white)); font: 600 12px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; box-shadow: var(--shadow-md); }
.su-chart__tip small { display: block; font-weight: 400; opacity: .75; }

/* ============ File dropzone ============ */
.su-dz { width: min(460px, 100%); display: grid; gap: 10px; }
/* ponytail: the one place a real border is used (C5) — box-shadow cannot draw a dashed line */
.su-dz__zone { display: grid; justify-items: center; gap: 6px; padding: 26px 18px; border: 1.5px dashed var(--color-app-line-strong); border-radius: 14px; text-align: center; cursor: pointer;
  background: var(--color-app-tray); font: 400 13px/1.4 var(--font-sans); color: var(--color-app-muted);
  transition: background-color var(--dur-hover) var(--ease-app), border-color var(--dur-hover) var(--ease-app), transform var(--dur-state) var(--ease-app); }
.su-dz__zone b { font-size: 14px; font-weight: 600; color: var(--color-app-ink); }
.su-dz__zone u { color: var(--color-app-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.su-dz__zone svg { width: 28px; height: 28px; color: var(--color-app-accent); transition: transform var(--dur-state) var(--ease-app); }
.su-dz__zone:hover { border-color: var(--color-app-accent); }
.su-dz__zone:focus-within { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-dz[data-over] .su-dz__zone { border-color: var(--color-app-accent); background: var(--color-app-accent-soft); transform: scale(1.01); }
.su-dz[data-over] .su-dz__zone svg { transform: translateY(-4px); }
.su-dz__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.su-dz__file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px 10px 10px; border-radius: 12px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); animation: su-rise var(--dur-layout) var(--ease-app); }
.su-dz__type { display: grid; place-items: center; width: 36px; height: 40px; border-radius: 8px; font: 700 10px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-dz__type[data-kind="img"] { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); }
.su-dz__type[data-kind="pdf"] { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-dz__type[data-kind="sheet"] { background: var(--color-app-warn-soft); color: var(--color-app-ink); }
.su-dz__name { display: grid; gap: 5px; min-width: 0; font: 500 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-dz__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-dz__bar { height: 4px; border-radius: 999px; background: var(--color-app-tray); overflow: hidden; }
.su-dz__bar span { display: block; height: 100%; background: var(--color-app-accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 160ms linear; }
.su-dz__meta { font: 400 12px/1 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-dz__meta[data-tone="ok"] { color: var(--color-app-ok-deep); }
.su-dz__meta[data-tone="crit"] { color: var(--color-app-crit-deep); }
.su-dz__x { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--color-app-muted); cursor: pointer; }
.su-dz__x:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-dz__x:focus-visible { outline: 2px solid var(--color-app-focus); }
.su-dz__x svg { width: 14px; height: 14px; }

/* ============ Rich text editor ============ */
.su-rte { position: relative; width: min(500px, 100%); border-radius: 14px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card);
  transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-rte:focus-within { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-rte__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; box-shadow: inset 0 -1px 0 var(--color-app-line); }
.su-rte__bar button { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: 600 13.5px/1 var(--font-sans); color: var(--color-app-ink-2); }
.su-rte__bar button:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-rte__bar button[aria-pressed="true"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-rte__bar button:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-rte__bar svg { width: 16px; height: 16px; }
.su-rte__sep { width: 1px; margin: 6px 4px; background: var(--color-app-line); }
.su-rte__area { position: relative; min-height: 120px; max-height: 260px; overflow-y: auto; padding: 12px 14px; outline: none; font: 400 14.5px/1.6 var(--font-sans); color: var(--color-app-ink); }
.su-rte__area[data-empty]::before { content: attr(data-placeholder); position: absolute; color: var(--color-app-muted); pointer-events: none; }
.su-rte__area > * { margin: 0 0 6px; }
.su-rte__area h3 { font: 700 16px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-rte__area blockquote { padding-left: 12px; box-shadow: inset 3px 0 0 var(--color-app-accent); color: var(--color-app-ink-2); }
.su-rte__area ul { padding-left: 20px; }
.su-rte__mention { padding: 1px 6px; border-radius: 6px; background: var(--color-app-accent-soft); color: var(--color-app-accent); font-weight: 600; }
.su-rte__menu { position: absolute; z-index: 20; min-width: 200px; margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); animation: su-pop var(--dur-state) var(--ease-app); }
.su-rte__menu li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: 400 13.5px/1.2 var(--font-sans); color: var(--color-app-ink); }
.su-rte__menu li[data-active] { background: var(--color-app-hover); }
.su-rte__menu small { margin-left: auto; font-size: 12px; color: var(--color-app-muted); }
.su-rte__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px; box-shadow: inset 0 1px 0 var(--color-app-line);
  font: 400 12px/1 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }

/* ============ Tabs ============ */
.su-tabs { min-width: 0; font-family: var(--font-sans); }
.su-tabs__list { position: relative; display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--color-app-line); }
.su-tabs__list::-webkit-scrollbar { display: none; }
.su-tabs__tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 2px; border: 0; background: none; white-space: nowrap;
  font: 500 13px/1.2 var(--font-sans); color: var(--color-app-muted); cursor: pointer; transition: color var(--dur-hover) var(--ease-app); }
.su-tabs__tab:hover, .su-tabs__tab[aria-selected="true"] { color: var(--color-app-ink); }
.su-tabs__tab[aria-selected="true"] { font-weight: 600; }
.su-tabs__tab[aria-disabled="true"] { opacity: .45; cursor: not-allowed; color: var(--color-app-muted); }
.su-tabs__tab:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; border-radius: 6px; }
.su-tabs__n { padding: 1px 6px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
  background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-tabs__tab[aria-selected="true"] .su-tabs__n { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-tabs__ind { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: var(--color-app-accent); pointer-events: none; }
.su-tabs[data-ready] .su-tabs__ind { transition: transform var(--dur-layout) var(--ease-app), width var(--dur-layout) var(--ease-app), height var(--dur-layout) var(--ease-app); }
.su-tabs__panel { padding-top: 4px; }
.su-tabs__panel:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; border-radius: 6px; }
.su-tabs[data-orientation="vertical"] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
.su-tabs[data-orientation="vertical"] .su-tabs__list { flex-direction: column; gap: 0; overflow: visible; box-shadow: inset -1px 0 0 var(--color-app-line); }
.su-tabs[data-orientation="vertical"] .su-tabs__tab { padding: 9px 14px 9px 2px; }
.su-tabs[data-orientation="vertical"] .su-tabs__ind { left: auto; right: 0; top: 0; bottom: auto; width: 2px; height: 0; }
.su-tabs[data-orientation="vertical"] .su-tabs__panel { padding-top: 0; }

/* ============ Tooltip ============ */
[data-su="tooltip"] { -webkit-touch-callout: none; }
.su-tip { position: fixed; z-index: 1000; inset: auto; left: 0; top: 0; margin: 0; border: 0; overflow: visible;
  display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 16px); padding: 6px 8px; border-radius: 6px;
  background: var(--color-app-ink); color: var(--color-app-ground); box-shadow: var(--shadow-md); font: 500 12px/1.3 var(--font-sans); white-space: nowrap;
  opacity: 0; transform: var(--su-tip-from, translateY(4px));
  transition: opacity var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app); }
.su-tip[popover]:not(:popover-open) { display: none; }
.su-tip[data-placement="bottom"] { --su-tip-from: translateY(-4px); }
.su-tip[data-placement="left"] { --su-tip-from: translateX(4px); }
.su-tip[data-placement="right"] { --su-tip-from: translateX(-4px); }
.su-tip[data-show] { opacity: 1; transform: none; }
.su-tip[data-rich] { white-space: normal; max-width: min(190px, calc(100vw - 16px)); line-height: 1.4; }
.su-tip__kbd { opacity: .6; font-variant-numeric: tabular-nums; }
.su-tip__arrow { position: absolute; width: 8px; height: 8px; border-radius: 1px; background: inherit; transform: rotate(45deg); }
.su-tip[data-placement="top"] .su-tip__arrow { bottom: -4px; left: calc(var(--su-tip-arrow, 50%) - 4px); }
.su-tip[data-placement="bottom"] .su-tip__arrow { top: -4px; left: calc(var(--su-tip-arrow, 50%) - 4px); }
.su-tip[data-placement="left"] .su-tip__arrow { right: -4px; top: calc(var(--su-tip-arrow, 50%) - 4px); }
.su-tip[data-placement="right"] .su-tip__arrow { left: -4px; top: calc(var(--su-tip-arrow, 50%) - 4px); }

/* ============ Dialog ============ */
.su-dialog { --w: 520px; width: min(var(--w), calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0;
  border-radius: var(--radius-card); background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-lg);
  overflow: auto; overscroll-behavior: contain; font-family: var(--font-sans); }
.su-dialog[data-size="sm"] { --w: 400px; }
.su-dialog[data-size="lg"] { --w: 720px; }
.su-dialog[open] { animation: su-dlg-in var(--dur-state) var(--ease-app); }
.su-dialog[data-closing] { animation: su-dlg-out var(--dur-state) var(--ease-app) forwards; }
.su-dialog::backdrop { background: rgb(0 0 0 / .45); animation: su-dlg-fade var(--dur-state) var(--ease-app); }
.su-dialog[data-closing]::backdrop { animation: su-dlg-fade-out var(--dur-state) var(--ease-app) forwards; }
@keyframes su-dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes su-dlg-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes su-dlg-fade { from { opacity: 0; } }
@keyframes su-dlg-fade-out { to { opacity: 0; } }
.su-dialog__panel { display: grid; gap: 14px; margin: 0; padding: 16px; }
.su-dialog__head { display: flex; align-items: flex-start; gap: 8px; }
.su-dialog__title { margin: 0; font: 600 15px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-dialog__desc { margin: 4px 0 0; font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink-2); }
.su-dialog__x { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px 0 auto; padding: 0; border: 0;
  border-radius: var(--radius-ctrl); background: none; color: var(--color-app-muted); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-dialog__x:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-dialog__x:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-dialog__x svg { width: 16px; height: 16px; }
.su-dialog__body { display: grid; gap: 10px; min-width: 0; }
.su-dialog__body .su-input { width: 100%; box-sizing: border-box; }
.su-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
@media (max-width: 479px) {
  .su-dialog__foot { flex-direction: column-reverse; }
  .su-dialog__foot > .su-btn { width: 100%; }
}

/* ============ Header ============ */
.su-header { container: su-header / inline-size; position: sticky; top: 0; z-index: 30; background: var(--color-app-surface); color: var(--color-app-ink);
  font-family: var(--font-sans); box-shadow: inset 0 -1px 0 var(--color-app-line); transition: box-shadow var(--dur-state) var(--ease-app); }
.su-header[data-sticky="false"] { position: relative; }
.su-header[data-scrolled] { box-shadow: inset 0 -1px 0 var(--color-app-line), var(--shadow-md); }
.su-header__bar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; }
.su-header__brand { flex: none; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; font: 700 15px/1 var(--font-sans); letter-spacing: -.01em;
  color: var(--color-app-ink); text-decoration: none; }
.su-header__logo { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); }
.su-header__logo svg { width: 14px; height: 14px; }
.su-header__ws { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 9px; border: 0; border-radius: 8px;
  background: var(--color-app-tray); font: 500 12.5px/1 var(--font-sans); color: var(--color-app-ink-2); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-header__ws:hover { background: var(--color-app-hover); }
.su-header__ws svg { width: 14px; height: 14px; color: var(--color-app-muted); }
.su-header__nav { flex: 1; min-width: 0; align-self: stretch; display: flex; gap: 20px; margin-left: 8px; }
.su-header__nav a { position: relative; display: flex; align-items: center; font: 500 13.5px/1 var(--font-sans); color: var(--color-app-ink-2); text-decoration: none;
  transition: color var(--dur-hover) var(--ease-app); }
.su-header__nav a:hover, .su-header__nav a[aria-current="page"] { color: var(--color-app-ink); }
.su-header__nav a[aria-current="page"] { font-weight: 600; }
.su-header__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--color-app-accent); }
.su-header__search { flex: none; display: inline-flex; align-items: center; gap: 8px; width: 220px; height: 34px; margin-left: auto; padding: 0 6px 0 10px; border: 0;
  border-radius: 10px; background: var(--color-app-tray); box-shadow: var(--shadow-ring); color: var(--color-app-muted); font: 400 13px/1 var(--font-sans); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-header__search:hover { background: var(--color-app-hover); }
.su-header__search svg { width: 16px; height: 16px; flex: none; }
.su-header__search-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; }
.su-header__icon, .su-header__menu { position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0;
  border-radius: var(--radius-ctrl); background: none; color: var(--color-app-ink-2); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-header__icon:hover, .su-header__menu:hover, .su-header__menu[aria-expanded="true"] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-header__icon svg, .su-header__menu svg { width: 18px; height: 18px; }
.su-header__dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-app-crit); box-shadow: 0 0 0 2px var(--color-app-surface); }
.su-header__avatar { flex: none; display: inline-grid; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.su-header__avatar .su-combo__av { width: 30px; height: 30px; font-size: 11px; }
.su-header__menu { display: none; }
.su-header :is(a, button):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-header__sheet { display: grid; gap: 2px; padding: 6px 10px 10px; box-shadow: inset 0 -1px 0 var(--color-app-line); animation: su-hd-drop var(--dur-state) var(--ease-app); }
.su-header__sheet a { padding: 11px 10px; border-radius: var(--radius-ctrl); font: 500 14px/1 var(--font-sans); color: var(--color-app-ink-2); text-decoration: none; }
.su-header__sheet a:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-header__sheet a[aria-current="page"] { background: var(--color-app-hover); color: var(--color-app-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--color-app-accent); }
@keyframes su-hd-drop { from { opacity: 0; transform: translateY(-4px); } }
.su-header__sub { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; background: var(--color-app-ground);
  box-shadow: inset 0 -1px 0 var(--color-app-line); font: 400 12.5px/1.3 var(--font-sans); color: var(--color-app-muted); }
.su-header__crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.su-header__crumbs li { white-space: nowrap; }
.su-header__crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.su-header__crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--color-app-line-strong); }
.su-header__crumbs a { color: inherit; text-decoration: none; }
.su-header__crumbs a:hover { color: var(--color-app-ink); }
.su-header__crumbs [aria-current] { color: var(--color-app-ink); font-weight: 600; }
.su-header__sub > .su-chip { margin-left: auto; flex: none; }
@container su-header (max-width: 899px) {
  .su-header__nav { display: none; }
  .su-header__menu { display: inline-grid; }
  .su-header__search { width: 180px; }
}
@container su-header (min-width: 900px) { .su-header__sheet { display: none !important; } }
@container su-header (max-width: 479px) {
  .su-header__bar { gap: 4px; padding: 0 10px 0 14px; }
  .su-header__ws { display: none; }
  .su-header__search { width: 34px; padding: 0; justify-content: center; background: none; box-shadow: none; color: var(--color-app-ink-2); }
  .su-header__search-label, .su-header__search .su-kbd { display: none; }
  .su-header__sub { padding: 6px 14px; }
}

/* ============ Number ticker ============ */
.su-ticker { width: min(400px, 100%); box-sizing: border-box; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-ticker__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.su-ticker__label { font: 600 11px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-ticker__value { display: block; margin: 8px 0 2px; font: 700 34px/1.1 var(--font-sans); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.su-ticker__cmp { margin: 0; font-size: 12px; color: var(--color-app-muted); }
.su-ticker__tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.su-ticker__tile { flex: 1; min-width: 120px; padding: 10px 12px; border-radius: 10px; background: var(--color-app-tray); font-size: 12px; color: var(--color-app-muted); }
.su-ticker__tile .su-ticker__value { margin: 2px 0 0; font-size: 17px; font-weight: 650; letter-spacing: 0; color: var(--color-app-ink); }
.su-ticker__digits { display: inline-flex; vertical-align: top; font-variant-numeric: tabular-nums; }
.su-ticker__col, .su-ticker__sym { display: inline-block; height: 1.1em; line-height: 1.1; overflow: hidden; }
.su-ticker__strip { display: block; transition: transform calc(var(--dur-layout) * 2) var(--ease-app); }
.su-ticker__strip > span { display: block; height: 1.1em; text-align: center; }

/* ============ Streaming text ============ */
.su-streamtext { width: min(440px, 100%); box-sizing: border-box; padding: 14px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-streamtext__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-width: 0; }
.su-streamtext__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-app-accent); box-shadow: 0 0 0 3px var(--color-app-accent-soft); }
.su-streamtext[data-state="done"] .su-streamtext__dot { background: var(--color-app-ok); box-shadow: 0 0 0 3px var(--color-app-ok-soft); }
.su-streamtext[data-state="stopped"] .su-streamtext__dot { background: var(--color-app-muted); box-shadow: 0 0 0 3px var(--color-app-tray); }
.su-streamtext[data-state="error"] .su-streamtext__dot { background: var(--color-app-crit); box-shadow: 0 0 0 3px var(--color-app-crit-soft); }
.su-streamtext__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1.3 var(--font-sans); }
.su-streamtext__rate { margin-left: auto; flex: none; font: 500 11.5px/1 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-streamtext__body { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; font: 400 13.5px/1.65 var(--font-sans); color: var(--color-app-ink-2); overflow-wrap: anywhere; }
.su-streamtext__body:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; border-radius: 6px; }
.su-streamtext__line { margin: 0; }
.su-streamtext__line[data-kind="h"] { margin-bottom: 4px; font-weight: 600; color: var(--color-app-ink); }
.su-streamtext__line[data-kind="li"]::before { content: "• "; }
.su-streamtext__new { animation: su-streamtext-in var(--dur-state) var(--ease-app) both; }
@keyframes su-streamtext-in { from { opacity: 0; filter: blur(2px); } }
.su-streamtext__caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--color-app-accent);
  animation: su-streamtext-blink calc(var(--dur-loop) * 1.6) steps(1) infinite; }
@keyframes su-streamtext-blink { 50% { opacity: 0; } }
.su-streamtext__err { margin: 6px 0 0; font-size: 12.5px; color: var(--color-app-crit-deep); }
.su-streamtext__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-app-line);
  font: 400 11.5px/1.2 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-streamtext__foot > :first-child { margin-right: auto; }
.su-streamtext__foot .su-btn svg { width: 12px; height: 12px; }
.su-streamtext__foot .su-kbd { height: 18px; min-width: 18px; font-size: 10.5px; }
.su-streamtext [data-stop][aria-disabled="true"] { opacity: .45; cursor: default; }

/* ============ KPI card ============ */
.su-kpi { container-type: inline-size; width: 100%; box-sizing: border-box; padding: 12px; border-radius: var(--radius-card); background: var(--color-app-tray);
  box-shadow: var(--shadow-ring-card); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 10px; }
.su-kpi__period { font: 600 11px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-kpi__updated { font-size: 11.5px; color: var(--color-app-muted); }
.su-kpi__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@container (max-width: 1023px) { .su-kpi__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 599px) { .su-kpi__grid { grid-template-columns: minmax(0, 1fr); } }
.su-kpi__card { display: grid; align-content: start; min-width: 0; padding: 12px; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-kpi__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--color-app-ink-2); }
.su-kpi__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; }
.su-kpi__value { font: 600 20px/1.1 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.su-kpi__row .su-chip { font-variant-numeric: tabular-nums; }
.su-kpi__ctx { margin-top: 2px; font-size: 11px; color: var(--color-app-muted); }
.su-kpi__bar { display: block; height: 4px; margin-top: 10px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-app-tray); }
.su-kpi__bar::before { content: ""; display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: inherit; background: var(--color-app-accent);
  transition: width var(--dur-layout) var(--ease-app); }
.su-kpi__spark { display: block; width: 84px; height: 28px; margin-top: 8px; overflow: visible; color: var(--color-app-accent); }
.su-kpi__card[aria-busy="true"] :is(.su-kpi__label, .su-kpi__value, .su-kpi__ctx) { width: fit-content; border-radius: 6px; color: transparent;
  background: linear-gradient(90deg, var(--color-app-tray) 40%, var(--color-app-hover) 50%, var(--color-app-tray) 60%) 0 0 / 300% 100%; animation: su-shine 1.6s linear infinite; }
.su-kpi__card[aria-busy="true"] :is(.su-chip, .su-kpi__spark) { visibility: hidden; }
.su-kpi__card[aria-busy="true"] .su-kpi__bar::before { width: 0; }

/* ============ Bar chart ============ */
.su-barchart { width: min(400px, 100%); box-sizing: border-box; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-barchart__head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.su-barchart__head > div { flex: 1; min-width: 0; }
.su-barchart__label { margin: 0; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-barchart__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 2px 0 0; }
.su-barchart__total { font: 600 22px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.su-barchart__sub { font-size: 12px; color: var(--color-app-muted); }
.su-barchart__plot { --lab: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; height: 150px; }
.su-barchart__axis { position: relative; min-width: 18px; font: 400 10px/1 var(--font-sans); color: var(--color-app-muted); text-align: right; font-variant-numeric: tabular-nums; }
.su-barchart__axis span { position: absolute; right: 0; bottom: calc(var(--lab) + var(--t) * (100% - var(--lab))); transform: translateY(50%); white-space: nowrap; }
.su-barchart__area { position: relative; display: flex; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 4px; }
.su-barchart__grid { position: absolute; left: 0; right: 0; height: 1px; bottom: calc(var(--lab) + var(--t) * (100% - var(--lab))); background: var(--color-app-line); }
.su-barchart__grid[style="--t:0"] { background: var(--color-app-line-strong); }
.su-barchart__col { display: grid; grid-template-rows: minmax(0, 1fr) var(--lab); flex: 1; min-width: 0; max-width: 34px; }
.su-barchart__track { position: relative; display: flex; align-items: flex-end; }
.su-barchart__bar { position: relative; width: 100%; height: calc(var(--v) * 100%); min-height: 2px; padding: 0; border: 0; border-radius: 6px 6px 2px 2px; cursor: pointer;
  background: color-mix(in srgb, var(--color-app-accent) 30%, transparent); transform-origin: bottom;
  transition: background-color var(--dur-hover) var(--ease-app); animation: su-barchart-grow var(--dur-layout) var(--ease-app) backwards; animation-delay: calc(var(--i) * 45ms); }
.su-barchart__bar:hover, .su-barchart__bar:focus-visible { background: color-mix(in srgb, var(--color-app-accent) 55%, transparent); }
.su-barchart__bar[data-hl] { background: var(--color-app-accent); }
.su-barchart__bar:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-barchart__val { position: absolute; left: 50%; bottom: 100%; z-index: 1; transform: translate(-50%, -6px); padding: 2px 6px; border-radius: 6px; pointer-events: none;
  background: var(--color-app-ink); color: var(--color-app-surface); font: 600 10.5px/1.3 var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity var(--dur-hover) var(--ease-app); }
.su-barchart__bar:is(:hover, :focus-visible, [data-hl]) .su-barchart__val { opacity: 1; }
.su-barchart__x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 11px; line-height: var(--lab); color: var(--color-app-muted); }
.su-barchart__x[data-hl] { font-weight: 600; color: var(--color-app-ink); }
.su-barchart__empty { margin: auto; grid-column: 1 / -1; font-size: 12.5px; color: var(--color-app-muted); }
@keyframes su-barchart-grow { from { transform: scaleY(0); } }
@keyframes su-barchart-grow-x { from { transform: scaleX(0); } }
.su-barchart[data-orientation="horizontal"] .su-barchart__plot { display: block; height: auto; }
.su-barchart[data-orientation="horizontal"] :is(.su-barchart__axis, .su-barchart__grid) { display: none; }
.su-barchart[data-orientation="horizontal"] .su-barchart__area { flex-direction: column; padding: 0; }
.su-barchart[data-orientation="horizontal"] .su-barchart__col { grid-template-rows: none; grid-template-columns: minmax(0, 72px) minmax(0, 1fr); align-items: center; gap: 8px; max-width: none; }
.su-barchart[data-orientation="horizontal"] .su-barchart__x { order: -1; text-align: left; line-height: 1.3; }
.su-barchart[data-orientation="horizontal"] .su-barchart__track { height: 18px; align-items: stretch; padding-right: 64px; }
.su-barchart[data-orientation="horizontal"] .su-barchart__bar { width: calc(var(--v) * 100%); height: auto; min-width: 2px; border-radius: 2px 6px 6px 2px; transform-origin: left; animation-name: su-barchart-grow-x; }
.su-barchart[data-orientation="horizontal"] .su-barchart__val { left: 100%; bottom: auto; top: 50%; transform: translate(6px, -50%); padding: 0; opacity: 1; background: none; color: var(--color-app-ink-2); }
.su-barchart[data-orientation="horizontal"] .su-barchart__bar:is(:hover, :focus-visible, [data-hl]) .su-barchart__val { color: var(--color-app-ink); }

/* ============ AI chat ============ */
.su-aichat { display: flex; flex-direction: column; width: min(420px, 100%); box-sizing: border-box; overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-aichat__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--color-app-line); }
.su-aichat__head > div { min-width: 0; }
.su-aichat__logo { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-aichat__logo svg { width: 14px; height: 14px; }
.su-aichat__title, .su-aichat__ws { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-aichat__title { font: 600 13px/1.25 var(--font-sans); }
.su-aichat__ws { font: 400 11.5px/1.25 var(--font-sans); color: var(--color-app-muted); }
.su-aichat__status { flex: none; margin-left: auto; }
.su-aichat__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.su-aichat__log { display: flex; flex-direction: column; gap: 10px; height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; font: 400 13px/1.5 var(--font-sans); }
.su-aichat__log:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-aichat__msg { display: flex; align-items: flex-start; gap: 8px; max-width: 85%; }
.su-aichat__msg[data-role="user"] { align-self: flex-end; }
.su-aichat__msg[data-new] { animation: su-rise var(--dur-layout) var(--ease-app); }
.su-aichat__av { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--color-app-tray); color: var(--color-app-accent); }
.su-aichat__av svg { width: 12px; height: 12px; }
.su-aichat__bubble { min-width: 0; overflow-wrap: anywhere; }
.su-aichat__msg[data-role="user"] .su-aichat__bubble { padding: 7px 12px; border-radius: 14px 14px 4px 14px; background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); }
.su-aichat__text .su-streamtext__line { margin: 0; }
.su-aichat__refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.su-aichat__ref { border: 0; cursor: pointer; font-variant-numeric: tabular-nums; transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-aichat__ref:hover { box-shadow: inset 0 0 0 1px currentColor; }
.su-aichat__ref:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-aichat__note { margin: 4px 0 0; font-size: 11.5px; color: var(--color-app-muted); }
.su-aichat__err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 12.5px; color: var(--color-app-crit-deep); }
.su-aichat__typing { display: inline-flex; gap: 4px; padding: 8px 0; }
.su-aichat__typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-app-muted); animation: su-aichat-dot calc(var(--dur-loop) * 2) var(--ease-app) infinite; }
.su-aichat__typing i:nth-child(2) { animation-delay: .15s; }
.su-aichat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes su-aichat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.su-aichat__empty { display: grid; justify-items: center; gap: 10px; margin: auto 0; text-align: center; font-size: 12.5px; color: var(--color-app-muted); }
.su-aichat__suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.su-aichat__suggest .su-chip { border: 0; cursor: pointer; }
.su-aichat__suggest .su-chip:hover { background: var(--color-app-hover); }
.su-aichat__suggest .su-chip:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-aichat__composer { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--color-app-line); }
.su-aichat__input { flex: 1; min-width: 0; box-sizing: border-box; height: 38px; padding: 9px 12px; resize: none; overflow-y: hidden; border: 0; border-radius: 10px; outline: none;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring); font: 400 14px/20px var(--font-sans); color: var(--color-app-ink); transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-aichat__input::placeholder { color: var(--color-app-muted); }
.su-aichat__input:focus { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-aichat__input:disabled { opacity: .55; }
.su-aichat__send { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 0; border-radius: var(--radius-ctrl); cursor: pointer;
  background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); transition: background-color var(--dur-hover) var(--ease-app), opacity var(--dur-hover) var(--ease-app); }
.su-aichat__send:hover { background: var(--color-app-accent-hover); }
.su-aichat__send:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-aichat__send[aria-disabled="true"] { opacity: .45; cursor: default; }
.su-aichat__send svg { width: 16px; height: 16px; }

/* ============ Tool call card ============ */
.su-toolcall { width: min(440px, 100%); min-width: 0; display: grid; gap: 8px; font-family: var(--font-sans); color: var(--color-app-ink); interpolate-size: allow-keywords; }
.su-toolcall__item { min-width: 0; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); overflow: hidden; }
.su-toolcall__item[open] { box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-toolcall__item::details-content { block-size: 0; overflow: hidden;
  transition: block-size var(--dur-state) var(--ease-app), content-visibility var(--dur-state) allow-discrete; }
.su-toolcall__item[open]::details-content { block-size: auto; }
.su-toolcall__sum { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 12px; list-style: none; cursor: pointer; border-radius: 12px; }
.su-toolcall__sum::-webkit-details-marker { display: none; }
.su-toolcall__sum:hover { background: var(--color-app-hover); }
.su-toolcall__sum:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-toolcall__cv { display: inline-flex; flex: none; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-toolcall__cv svg { width: 14px; height: 14px; }
.su-toolcall__item[open] .su-toolcall__cv { transform: rotate(90deg); }
.su-toolcall__icon { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-toolcall__icon svg { width: 13px; height: 13px; }
.su-toolcall__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.su-toolcall__hint { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-app-muted); }
.su-toolcall__state { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.su-toolcall__spin { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--color-app-accent); }
.su-toolcall__spin .su-spin { width: 14px; height: 14px; }
.su-toolcall__ms { flex: none; min-width: 3.2em; text-align: right; font: 400 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-toolcall__ms:empty { display: none; }
.su-toolcall__body { display: grid; gap: 8px; min-width: 0; padding: 0 12px 12px; }
.su-toolcall__item[open] .su-toolcall__body { animation: su-rise var(--dur-state) var(--ease-app); }
.su-toolcall__label { margin: 0; font: 600 11px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-toolcall__pre { margin: 0; max-height: 400px; overflow: auto; padding: 8px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-tray);
  font: 400 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.su-toolcall__scroll { max-height: 400px; overflow: auto; border-radius: var(--radius-ctrl); box-shadow: var(--shadow-ring-card); }
.su-toolcall__pre:focus-visible, .su-toolcall__scroll:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-toolcall__rows { width: 100%; border-collapse: collapse; font: 400 12px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
.su-toolcall__rows td { padding: 6px 10px; text-align: right; overflow-wrap: anywhere; box-shadow: inset 0 -1px 0 var(--color-app-line); color: var(--color-app-ink-2); }
.su-toolcall__rows tr:last-child td { box-shadow: none; }
.su-toolcall__rows td:first-child { text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); }
.su-toolcall__rows td[data-tone="crit"] { color: var(--color-app-crit-deep); }
.su-toolcall__rows td[data-tone="ok"] { color: var(--color-app-ok-deep); }
.su-toolcall__item[data-status="error"] .su-toolcall__out { color: var(--color-app-crit-deep); background: var(--color-app-crit-soft); }
.su-toolcall__item[data-status="queued"] .su-toolcall__name { color: var(--color-app-ink-2); }

/* ============ Prompt composer ============ */
.su-prompt { width: min(460px, 100%); min-width: 0; display: grid; gap: 10px; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-prompt__box { position: relative; min-width: 0; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring), var(--shadow-md);
  transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-prompt__box:focus-within { box-shadow: 0 0 0 3px var(--color-app-accent-soft), inset 0 0 0 1px var(--color-app-accent), var(--shadow-md); }
.su-prompt[data-over] .su-prompt__box { box-shadow: 0 0 0 3px var(--color-app-accent-soft), inset 0 0 0 1.5px var(--color-app-accent), var(--shadow-md); background: var(--color-app-tray); }
.su-prompt__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 12px 0; list-style: none; }
.su-prompt__chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 6px 4px 8px; border-radius: var(--radius-ctrl);
  background: var(--color-app-tray); color: var(--color-app-ink-2); font: 500 12px/1.2 var(--font-sans); animation: su-pop var(--dur-state) var(--ease-app); }
.su-prompt__chip[data-ref] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-prompt__chip > svg { width: 13px; height: 13px; flex: none; }
.su-prompt__cname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-prompt__csize { flex: none; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-prompt__input { display: block; width: 100%; min-height: 0; margin: 0; padding: 10px 14px; border: 0; outline: 0; resize: none; overflow-y: hidden; background: transparent;
  font: 400 13.5px/1.5 var(--font-sans); color: var(--color-app-ink); transition: height var(--dur-state) var(--ease-app); }
.su-prompt__input::placeholder { color: var(--color-app-muted); }
.su-prompt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px 8px; }
.su-prompt__ib { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: var(--radius-ctrl);
  background: transparent; color: var(--color-app-ink-2); font: 500 12px/1 var(--font-sans); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-prompt__ib:hover, .su-prompt__ib[aria-expanded="true"] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-prompt__ib:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-prompt__ib svg { width: 16px; height: 16px; flex: none; }
.su-prompt__mbtn svg { width: 13px; height: 13px; }
.su-prompt__mbtn svg:last-child { width: 12px; height: 12px; transition: transform var(--dur-state) var(--ease-app); }
.su-prompt__mbtn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.su-prompt__model { position: relative; }
.su-prompt__list, .su-prompt__menu { position: absolute; z-index: 20; min-width: 180px; max-height: 240px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 12px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); animation: su-pop var(--dur-state) var(--ease-app); outline: none; }
.su-prompt__list { left: 0; bottom: calc(100% + 6px); transform-origin: bottom left; }
.su-prompt__list:focus-visible { box-shadow: 0 0 0 2px var(--color-app-focus), var(--shadow-md); }
.su-prompt__menu { left: 12px; max-width: calc(100% - 24px); }
.su-prompt__list li, .su-prompt__menu li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font: 400 13px/1.25 var(--font-sans); color: var(--color-app-ink); }
.su-prompt__menu li svg { width: 14px; height: 14px; flex: none; color: var(--color-app-accent); }
.su-prompt__list li[data-active], .su-prompt__menu li[aria-selected="true"] { background: var(--color-app-hover); }
.su-prompt__list li[aria-selected="true"] { font-weight: 600; }
.su-prompt__list li[aria-selected="true"]::after { content: ""; width: 10px; height: 5px; margin-left: auto; border: solid var(--color-app-accent); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.su-prompt__count { margin-left: auto; padding: 0 6px; font: 400 11.5px/1 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-prompt__count[data-tone="warn"] { color: var(--color-app-ink); font-weight: 600; }
.su-prompt__count[data-tone="crit"] { color: var(--color-app-crit-deep); font-weight: 600; }
.su-prompt__send { flex: none; }
.su-prompt__kbd { font: 500 11px/1 var(--font-sans); opacity: .7; }
.su-prompt__send .su-spin { width: 14px; height: 14px; }
.su-prompt[data-busy] .su-prompt__input { color: var(--color-app-ink-2); }
.su-prompt__suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.su-prompt__suggest button { padding: 5px 10px; border: 0; border-radius: var(--radius-pill); background: transparent; box-shadow: var(--shadow-ring); cursor: pointer;
  font: 400 12px/1.3 var(--font-sans); color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-prompt__suggest button:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-prompt__suggest button:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }

/* ============ Agent run ============ */
.su-agentrun { width: min(440px, 100%); min-width: 0; padding: 12px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-agentrun__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.su-agentrun__info { flex: 1 1 160px; min-width: 0; }
.su-agentrun__title { margin: 0; font: 600 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-agentrun__meta { margin: 2px 0 0; font: 400 11.5px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-agentrun__timer { margin-left: auto; font: 400 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-agentrun__stop svg { width: 12px; height: 12px; }
.su-agentrun__bar { height: 4px; margin: 0 4px 8px; border-radius: var(--radius-pill); background: var(--color-app-tray); overflow: hidden; }
.su-agentrun__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--color-app-accent); transform-origin: left; transform: scaleX(0);
  transition: transform var(--dur-layout) var(--ease-app); }
.su-agentrun[data-run="done"] .su-agentrun__bar > span { background: var(--color-app-ok); }
.su-agentrun[data-run="failed"] .su-agentrun__bar > span { background: var(--color-app-crit); }
.su-agentrun__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.su-agentrun__step { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 7px 8px; border-radius: var(--radius-ctrl);
  transition: background-color var(--dur-state) var(--ease-app); }
.su-agentrun__step + .su-agentrun__step::before { content: ""; position: absolute; left: 17px; top: -6px; height: 10px; width: 2px; border-radius: 2px; background: var(--color-app-line-strong); }
.su-agentrun__step[data-fresh] { animation: su-rise var(--dur-layout) var(--ease-app); }
.su-agentrun__step[data-status="running"] { background: var(--color-app-accent-soft); }
.su-agentrun__step[data-status="failed"] { background: var(--color-app-crit-soft); }
.su-agentrun__icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; box-shadow: inset 0 0 0 1.5px var(--color-app-line-strong); }
.su-agentrun__icon > svg { width: 12px; height: 12px; }
.su-agentrun__step[data-status="done"] .su-agentrun__icon { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); box-shadow: none; }
.su-agentrun__step[data-status="failed"] .su-agentrun__icon { background: var(--color-app-crit); color: var(--color-app-on-accent, var(--color-white)); box-shadow: none; }
.su-agentrun__step[data-status="skipped"] .su-agentrun__icon { color: var(--color-app-muted); }
.su-agentrun__step[data-status="running"] .su-agentrun__icon { box-shadow: none; color: var(--color-app-accent); }
.su-agentrun__spin, .su-agentrun__spin .su-spin { display: grid; width: 20px; height: 20px; }
.su-agentrun[data-run="stopped"] .su-agentrun__spin .su-spin { animation: none; }
.su-agentrun__main { display: grid; gap: 1px; min-width: 0; }
.su-agentrun__name { font: 500 13px/1.4 var(--font-sans); color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-agentrun__step[data-status="waiting"] .su-agentrun__name, .su-agentrun__step[data-status="skipped"] .su-agentrun__name { color: var(--color-app-muted); }
.su-agentrun__step[data-status="skipped"] .su-agentrun__name { text-decoration: line-through; }
.su-agentrun__toggle { display: flex; align-items: center; gap: 4px; min-width: 0; margin: -2px -4px; padding: 2px 4px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; color: inherit; }
.su-agentrun__toggle:hover { background: var(--color-app-hover); }
.su-agentrun__toggle:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 0; }
.su-agentrun__toggle svg { flex: none; width: 13px; height: 13px; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-agentrun__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.su-agentrun__detail { font: 400 11.5px/1.45 var(--font-sans); color: var(--color-app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-agentrun__detail[data-open] { max-height: 240px; overflow-y: auto; margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: var(--color-app-tray);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip; }
.su-agentrun__step[data-status="failed"] .su-agentrun__detail { color: var(--color-app-crit-deep); }
.su-agentrun__ms { padding-top: 2px; font: 400 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-agentrun__step[data-status="running"] .su-agentrun__ms { color: var(--color-app-accent); }
.su-agentrun__step[data-status="failed"] .su-agentrun__ms { color: var(--color-app-crit-deep); }

/* ============ Agent Monitor ============ */
/* org chart: lead centered, its sub-agents side by side with an elbow bus; deeper helpers stack under their parent on a rail.
   Below 760px of its own width every level stacks on the rail (container query), so 320px never scrolls the page. */
.su-agentmonitor { --am-card: 196px; --am-line: var(--color-app-accent); container: su-agentmonitor / inline-size; width: 100%; min-width: 0; padding: 12px 14px 18px;
  border-radius: var(--radius-card); background: var(--color-app-sunk); font-family: var(--font-sans); color: var(--color-app-ink); box-sizing: border-box; }
.su-agentmonitor__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-bottom: 14px; }
.su-agentmonitor__title { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 13px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-agentmonitor__title svg { width: 13px; height: 13px; color: var(--color-app-accent); fill: currentColor; stroke-width: 1.5; }
.su-agentmonitor__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 0 auto; font: 400 12px/1.3 var(--font-sans); color: var(--color-app-muted); }
.su-agentmonitor__total { font-weight: 600; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-agentmonitor__fail { position: relative; }
.su-agentmonitor__failbtn { display: inline-flex; align-items: center; gap: 2px; padding: 3px 6px 3px 8px; border: 0; border-radius: 6px; background: var(--color-app-crit-soft);
  font: 500 12px/1.2 var(--font-sans); color: var(--color-app-crit-deep); cursor: pointer; }
.su-agentmonitor__failbtn svg { width: 12px; height: 12px; transition: transform var(--dur-state) var(--ease-app); }
.su-agentmonitor__failbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.su-agentmonitor__failbtn:focus-visible, .su-agentmonitor__item:focus-visible, .su-agentmonitor__toggle:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-agentmonitor__menu { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; display: grid; min-width: 200px; padding: 4px; border-radius: var(--radius-ctrl);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-agentmonitor__item { display: grid; gap: 1px; padding: 7px 9px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer;
  font: 500 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-agentmonitor__item span { font-weight: 400; font-size: 11.5px; color: var(--color-app-muted); }
.su-agentmonitor__item:hover { background: var(--color-app-hover); }
.su-agentmonitor__canvas { overflow-x: auto; padding: 2px 2px 6px; }
.su-agentmonitor__tree, .su-agentmonitor__kids { margin: 0; padding: 0; list-style: none; }
.su-agentmonitor__node { position: relative; min-width: 0; }
.su-agentmonitor__node[data-fresh] > .su-agentmonitor__card { animation: su-rise var(--dur-layout) var(--ease-app); }
/* card */
.su-agentmonitor__card { position: relative; width: min(var(--am-card), 100%); box-sizing: border-box; padding: 10px 10px 9px; border-radius: var(--radius-ctrl); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .06)); cursor: default; transition: box-shadow var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app); }
.su-agentmonitor__card:hover { box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-agentmonitor__card:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-agentmonitor__card[data-flash] { box-shadow: 0 0 0 2px var(--color-app-crit), var(--shadow-md); }
.su-agentmonitor__card[data-status="stopped"] { opacity: .55; }
.su-agentmonitor__top { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.su-agentmonitor__mark { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; font: 700 10px/1 var(--font-sans);
  background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-agentmonitor__mark[data-tone="warn"] { background: var(--color-app-warn-soft); color: var(--color-app-warn-deep); }
.su-agentmonitor__mark[data-tone="accent"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-agentmonitor__who { min-width: 0; }
.su-agentmonitor__name { margin: 0; font: 600 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-agentmonitor__model { margin: 1px 0 0; font: 400 11px/1.3 var(--font-sans); color: var(--color-app-muted); }
.su-agentmonitor__chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 5px; white-space: nowrap; font: 500 10.5px/1.3 var(--font-sans);
  background: var(--color-app-tray); color: var(--color-app-muted); }
.su-agentmonitor__chip svg { width: 11px; height: 11px; }
.su-agentmonitor__chip[data-status="running"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-agentmonitor__chip[data-status="done"] { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); }
.su-agentmonitor__chip[data-status="failed"] { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-agentmonitor__spin, .su-agentmonitor__spin .su-spin { display: grid; width: 11px; height: 11px; }
.su-agentmonitor__task { margin: 8px 0 0; font: 400 11.5px/1.4 var(--font-sans); color: var(--color-app-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.su-agentmonitor__tools { display: inline-flex; gap: 2px; margin-right: 5px; vertical-align: 1px; }
.su-agentmonitor__tool { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; font: 700 8.5px/1 var(--font-sans);
  background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-agentmonitor__foot { display: flex; align-items: center; gap: 5px; margin-top: 8px; font: 400 11px/1.3 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-agentmonitor__cost { font-weight: 600; color: var(--color-app-ink); }
.su-agentmonitor__toggle { display: inline-flex; align-items: center; gap: 1px; margin: -3px -4px -3px auto; padding: 2px 5px; border: 0; border-radius: 5px; background: none;
  font: 500 11px/1.2 var(--font-sans); color: var(--color-app-muted); cursor: pointer; }
.su-agentmonitor__toggle:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-agentmonitor__toggle[aria-expanded="false"] { background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-agentmonitor__toggle svg { width: 12px; height: 12px; }
/* connectors — narrow (default): every level on a rail with elbows */
.su-agentmonitor__kids { display: grid; gap: 10px; padding: 10px 0 0 28px; }
.su-agentmonitor__kids > .su-agentmonitor__node::before { content: ""; position: absolute; left: -16px; top: -10px; width: 14px; height: 34px; box-sizing: border-box;
  border-left: 1.5px solid var(--am-line); border-bottom: 1.5px solid var(--am-line); border-bottom-left-radius: 8px; }
.su-agentmonitor__kids > .su-agentmonitor__node:not(:last-child)::after { content: ""; position: absolute; left: -16px; top: 18px; bottom: -10px; border-left: 1.5px solid var(--am-line); }
/* wide: lead centered, first level side by side under a bus line (data-layout="rail" keeps the rail at any width — for a lead with many sub-agents) */
@container su-agentmonitor (min-width: 760px) {
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__tree { display: flex; justify-content: safe center; min-width: max-content; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__tree > .su-agentmonitor__node { display: grid; justify-items: center; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__tree > .su-agentmonitor__node > .su-agentmonitor__card { width: var(--am-card); }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] { position: relative; display: flex; justify-content: safe center; gap: 0; padding: 36px 0 0; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"]::before { content: ""; position: absolute; left: 50%; top: 0; height: 18px; border-left: 1.5px solid var(--am-line); }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node { flex: 0 0 auto; padding: 0 14px; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="2"] { padding-left: 20px; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="2"] > .su-agentmonitor__node::before, .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="2"] > .su-agentmonitor__node:not(:last-child)::after { left: -12px; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="2"] > .su-agentmonitor__node::before { width: 10px; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="2"] .su-agentmonitor__card { width: calc(var(--am-card) - 14px); }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node > .su-agentmonitor__card { width: var(--am-card); }
  /* bus: ::before = left half to the card centre, ::after = right half + the stub down to the card */
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node::before,
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node::after { content: ""; position: absolute; top: -18px; bottom: auto; height: 18px; width: auto; box-sizing: border-box;
    border: 0; border-radius: 0; border-top: 1.5px solid var(--am-line); }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node::before { left: 0; right: 50%; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node::after { left: 50%; right: 0; border-left: 1.5px solid var(--am-line); }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node:first-child::before { content: none; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node:first-child::after { border-top-left-radius: 8px; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node:last-child::before { right: calc(50% - 1.5px); border-right: 1.5px solid var(--am-line); border-top-right-radius: 8px; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node:last-child::after { content: none; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node:only-child::before { content: none; }
  .su-agentmonitor:not([data-layout="rail"]) .su-agentmonitor__kids[data-depth="1"] > .su-agentmonitor__node:only-child::after { content: ""; border-top: 0; right: auto; }
}
}

/* ============ Pricing section ============ */
/* breakpoints follow the section's own width (container query), so the block behaves the same full-page or inside a column */
.su-pricing { container-type: inline-size; width: min(1040px, 100%); min-width: 0; display: grid; justify-items: center; gap: 12px; padding: 20px 16px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); text-align: center; }
.su-pricing__eyebrow { margin: 0; font: 600 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-pricing__title { margin: 0; font: 700 clamp(19px, 3.2cqi, 26px)/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); text-wrap: balance; }
.su-pricing__lede { margin: 0; max-width: 52ch; font: 400 13.5px/1.55 var(--font-sans); color: var(--color-app-muted); }
.su-pricing .su-seg { margin: 4px 0 8px; }
.su-pricing .su-seg__n { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); }
.su-pricing__plans { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 8px 0 0; list-style: none; text-align: left; }
@container (min-width: 720px) {
  .su-pricing__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-pricing__plan:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}
@container (min-width: 960px) {
  .su-pricing__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-pricing__plan:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}
.su-pricing__plan { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 16px 16px; border-radius: 12px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-pricing__plan[data-featured] { box-shadow: 0 0 0 1.5px var(--color-app-accent), var(--shadow-md); }
.su-pricing__ribbon { position: absolute; top: -10px; right: 12px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--color-app-accent);
  color: var(--color-app-on-accent, var(--color-white)); font: 600 11px/1.2 var(--font-sans); white-space: nowrap; }
.su-pricing__name { margin: 0; font: 600 14.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-pricing__tag { margin: 2px 0 0; font: 400 12.5px/1.45 var(--font-sans); color: var(--color-app-muted); }
.su-pricing__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0; }
.su-pricing__amount { display: inline-block; font: 700 28px/1.1 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-pricing__unit { font: 400 12px/1.3 var(--font-sans); color: var(--color-app-muted); }
.su-pricing__features { flex: 1; display: grid; align-content: start; gap: 7px; margin: 0; padding: 0; list-style: none; font: 400 13px/1.4 var(--font-sans); color: var(--color-app-ink-2); }
.su-pricing__features li { display: flex; gap: 8px; align-items: flex-start; }
.su-pricing__features svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--color-app-accent); }
.su-pricing__plan .su-btn { width: 100%; }


/* ============ Dashboard page ============ */
.su-dash { container: su-dash / inline-size; display: flex; width: 100%; min-height: 420px; box-sizing: border-box; border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-app-ground); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-dash:empty { background: linear-gradient(90deg, var(--color-app-tray) 40%, var(--color-app-hover) 50%, var(--color-app-tray) 60%) 0 0 / 300% 100%;
  animation: su-shine 1.4s linear infinite; } /* skeleton until data-config is parsed */
.su-dash__rail { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; background: var(--color-app-tray); box-shadow: inset -1px 0 0 var(--color-app-line); }
.su-dash__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-ctrl); color: var(--color-app-muted);
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-dash__ico svg { width: 17px; height: 17px; }
.su-dash__ico:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-dash__ico[aria-current="page"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-dash__ico:focus-visible, .su-dash__item:focus-visible, .su-dash__table tbody tr:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-dash__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.su-dash__main { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-width: 0; }
.su-dash__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.su-dash__title > div:first-child { flex: 1 1 160px; min-width: 0; }
.su-dash__title h2 { margin: 0; font: 700 18px/1.25 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); }
.su-dash__title p { margin: 2px 0 0; font-size: 12.5px; color: var(--color-app-muted); }
.su-dash__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.su-dash__actions .su-btn svg { width: 15px; height: 15px; }
.su-dash .su-kpi { padding: 0; background: none; box-shadow: none; }
.su-dash .su-kpi__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.su-dash__charts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.su-dash__charts > * { width: auto; min-width: 0; }
.su-dash__charts > :only-child { grid-column: 1 / -1; }
.su-dash__table tbody tr { cursor: pointer; }
.su-dash__list { display: none; margin: 0; padding: 0; list-style: none; }
.su-dash__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; border: 0;
  background: none; font: inherit; font-size: 13px; color: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 -1px 0 var(--color-app-line); }
.su-dash__item span:first-child { min-width: 0; }
.su-dash__item b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-dash__item small { color: var(--color-app-muted); font-size: 11.5px; }
.su-dash__amt { font-variant-numeric: tabular-nums; }
.su-dash__error { margin: auto; padding: 24px; color: var(--color-app-crit); }
/* breakpoints (container): ≥1024 rail + 3 KPI cols · 640–1023 2 cols · <640 rail hidden, 1 col, list replaces table */
@container su-dash (max-width: 1023px) { .su-dash .su-kpi__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .su-dash__charts { grid-template-columns: minmax(0, 1fr); } }
@container su-dash (max-width: 639px) {
  .su-dash__rail { display: none; }
  .su-dash .su-kpi__grid { grid-template-columns: minmax(0, 1fr); }
  .su-dash__main { padding: 12px; }
  .su-dash__table { display: none; }
  .su-dash__list { display: block; }
}

/* ============ Icon Button ============ */
.su-iconbtn { --s: 32px; --i: 16px;
  position: relative; display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: var(--s); height: var(--s);
  margin: 0; padding: 0; border: 0; border-radius: var(--radius-ctrl); background: transparent; color: var(--color-app-ink-2);
  font: 600 11px/1 var(--font-sans); cursor: pointer; text-decoration: none; vertical-align: middle; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app),
              box-shadow var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app); }
.su-iconbtn > svg { width: var(--i); height: var(--i); flex: none; }
.su-iconbtn:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-iconbtn:active { transform: scale(.96); }
.su-iconbtn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-iconbtn:disabled { opacity: .45; pointer-events: none; }
.su-iconbtn[data-size="sm"] { --s: 28px; --i: 14px; }
.su-iconbtn[data-size="sm"]::before { content: ""; position: absolute; inset: -2px; } /* invisible 32px hit area */
.su-iconbtn[data-size="lg"] { --s: 40px; --i: 18px; }
.su-iconbtn[data-variant="outline"] { background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring); }
.su-iconbtn[data-variant="outline"]:hover { background: var(--color-app-hover); }
.su-iconbtn[data-variant="filled"] { background: var(--color-app-accent); color: var(--color-app-on-accent); box-shadow: var(--shadow-btn); }
.su-iconbtn[data-variant="filled"]:hover { background: var(--color-app-accent-hover); }
/* pressed = filled + sunk, never color alone */
.su-iconbtn[aria-pressed="true"], .su-iconbtn[aria-pressed="true"]:hover { background: var(--color-app-accent-soft); color: var(--color-app-accent);
  box-shadow: inset 0 0 0 1px var(--color-app-accent), inset 0 1px 2px rgb(0 0 0 / .18); }
.su-iconbtn[data-variant="filled"][aria-pressed="true"], .su-iconbtn[data-variant="filled"][aria-pressed="true"]:hover { background: var(--color-app-accent); color: var(--color-app-on-accent);
  box-shadow: inset 0 0 0 2px var(--color-app-on-accent), inset 0 1px 3px rgb(0 0 0 / .3); }
.su-iconbtn__badge { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; box-sizing: border-box; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--radius-pill); background: var(--color-app-accent); color: var(--color-app-on-accent);
  box-shadow: 0 0 0 2px var(--color-app-surface); font: 700 10px/1 var(--font-sans); font-variant-numeric: tabular-nums; pointer-events: none; }
.su-iconbtn__badge:empty { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 3px; right: 3px; }

/* ============ Button Group ============ */
.su-btngroup { --h: 32px; --px: 12px; --fs: 12.5px;
  display: inline-flex; align-items: stretch; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; vertical-align: middle;
  border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring); font-family: var(--font-sans); }
.su-btngroup::-webkit-scrollbar { display: none; }
.su-btngroup[data-size="sm"] { --h: 28px; --px: 10px; --fs: 12px; }
.su-btngroup__btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  height: var(--h); min-width: var(--h); margin: 0; padding: 0 var(--px); border: 0; border-radius: 0; background: transparent; color: var(--color-app-ink);
  font: 500 var(--fs)/1 var(--font-sans); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app); }
.su-btngroup__btn > svg { width: 15px; height: 15px; flex: none; }
.su-btngroup__btn[data-icon] { padding: 0; width: var(--h); }
.su-btngroup__btn:hover { background: var(--color-app-hover); }
.su-btngroup__btn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; border-radius: var(--radius-ctrl); }
.su-btngroup__btn:disabled { opacity: .45; cursor: not-allowed; }
/* joined: one outer ring, hairline dividers, radius only on the outer corners (the group clips) */
.su-btngroup > :is(.su-btngroup__btn, .su-btngroup__count) + :is(.su-btngroup__btn, .su-btngroup__count)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--color-app-line-strong); }
.su-btngroup__btn[aria-pressed="true"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--color-app-accent); }
.su-btngroup__count { position: relative; flex: none; display: inline-flex; align-items: center; padding: 0 10px; height: var(--h);
  font: 500 var(--fs)/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-ink-2); white-space: nowrap; }
.su-btngroup__div { flex: none; width: 6px; background: var(--color-app-tray); box-shadow: inset 1px 0 0 var(--color-app-line-strong), inset -1px 0 0 var(--color-app-line-strong); }
/* tray: segmented look, pressed button rises */
.su-btngroup[data-variant="tray"] { gap: 2px; padding: 2px; background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-btngroup[data-variant="tray"] > * + *::before { content: none !important; }
.su-btngroup[data-variant="tray"] .su-btngroup__btn { height: calc(var(--h) - 4px); border-radius: 6px; color: var(--color-app-ink-2); }
.su-btngroup[data-variant="tray"] .su-btngroup__btn[data-icon] { width: calc(var(--h) - 4px); }
.su-btngroup[data-variant="tray"] .su-btngroup__btn:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-btngroup[data-variant="tray"] .su-btngroup__btn[aria-pressed="true"] { background: var(--color-app-surface); color: var(--color-app-ink); font-weight: 600;
  box-shadow: 0 1px 3px rgb(0 0 0 / .18), 0 0 0 1px var(--color-app-line); }
.su-btngroup[data-variant="tray"] .su-btngroup__div { width: 1px; margin: 5px 2px; background: var(--color-app-line-strong); box-shadow: none; }

/* ============ Avatar ============ */
.su-avatar { --s: 36px; --fs: 13px; --dot: 10px; --dot-ring: 2px;
  position: relative; display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--color-app-tray); color: var(--color-app-ink-2); font: 600 var(--fs)/1 var(--font-sans); letter-spacing: -.01em;
  text-transform: uppercase; white-space: nowrap; user-select: none; vertical-align: middle; }
.su-avatar[data-size="xs"] { --s: 20px; --fs: 8.5px; --dot: 6px; --dot-ring: 1.5px; }
.su-avatar[data-size="sm"] { --s: 28px; --fs: 11px; --dot: 8px; }
.su-avatar[data-size="lg"] { --s: 48px; --fs: 17px; --dot: 12px; }
.su-avatar[data-shape="square"] { border-radius: calc(var(--s) * .26); }
.su-avatar > svg { width: 62%; height: 62%; }
.su-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.su-avatar[data-tone="accent"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-avatar[data-tone="ok"] { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); }
.su-avatar[data-tone="warn"] { background: var(--color-app-warn-soft); color: var(--color-app-warn-deep, var(--color-app-ink)); }
.su-avatar[data-tone="crit"] { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-avatar[data-tone="neutral"] { background: var(--color-app-tray); color: var(--color-app-ink-2); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-avatar[data-tone="solid"] { background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-avatar[data-status]::after { content: ""; position: absolute; right: -1px; bottom: -1px; box-sizing: border-box; width: var(--dot); height: var(--dot);
  border-radius: 50%; background: var(--color-app-ok); box-shadow: 0 0 0 var(--dot-ring) var(--color-app-surface); }
.su-avatar[data-status="away"]::after { background: var(--color-app-warn); }
.su-avatar[data-status="offline"]::after { background: var(--color-app-surface); box-shadow: 0 0 0 var(--dot-ring) var(--color-app-surface), inset 0 0 0 2px var(--color-app-muted); }
.su-avatar[data-selected]:not([data-selected="false"]) { box-shadow: 0 0 0 2px var(--color-app-surface), 0 0 0 4px var(--color-app-accent); }
.su-avatar__stack { display: inline-flex; align-items: center; vertical-align: middle; }
.su-avatar__stack > .su-avatar { box-shadow: 0 0 0 2px var(--color-app-surface); }
.su-avatar__stack > .su-avatar + .su-avatar { margin-left: calc(var(--s) * -.28); }
.su-avatar__profile { display: flex; align-items: center; gap: 12px; min-width: 0; font-family: var(--font-sans); }
.su-avatar__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.su-avatar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-avatar__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.3 var(--font-sans); color: var(--color-app-ink-2); }

/* ============ Text Input ============ */
.su-field__label { font: 600 12.5px/1.2 var(--font-sans); color: var(--color-app-ink); }
.su-field__hint, .su-field__ok, .su-input__wrap ~ .su-field__err { margin: 0; font: 400 12px/1.4 var(--font-sans); }
.su-field__hint { color: var(--color-app-muted); }
.su-field__ok { color: var(--color-app-ok-deep); }
.su-field__ok[data-state="checking"] { color: var(--color-app-muted); }
.su-input:hover:not(:focus, :disabled, [aria-invalid="true"]) { box-shadow: inset 0 0 0 1px var(--color-app-muted); }
.su-input:disabled { opacity: .55; cursor: not-allowed; }
.su-input:read-only:not(:disabled) { background: var(--color-app-tray); }
.su-input__wrap { display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; min-width: 0; padding: 0 12px; overflow: hidden;
  border-radius: 10px; background: var(--color-app-surface); box-shadow: var(--shadow-ring); cursor: text;
  font: 400 14px/1 var(--font-sans); color: var(--color-app-ink); transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-input__wrap:hover { box-shadow: inset 0 0 0 1px var(--color-app-muted); }
.su-input__wrap:focus-within { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-input__wrap:has(> .su-input__el[aria-invalid="true"]) { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
.su-input__wrap:has(> .su-input__el[aria-invalid="true"]):focus-within { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep), 0 0 0 3px var(--color-app-crit-soft); }
.su-input__wrap:has(> .su-input__el:disabled) { opacity: .55; cursor: not-allowed; }
.su-input__wrap:has(> .su-input__el:read-only:not(:disabled)) { background: var(--color-app-tray); }
.su-input__el { flex: 1; min-width: 5ch; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--color-app-ink); text-overflow: ellipsis; }
.su-input__el::placeholder { color: var(--color-app-muted); }
.su-input__el:disabled { cursor: not-allowed; }
.su-input__prefix { flex: 0 1 auto; min-width: 0; max-width: 55%; align-self: stretch; margin-left: -12px; padding: 0 10px; overflow: hidden;
  background: var(--color-app-tray); box-shadow: inset -1px 0 0 var(--color-app-line); font-size: 13px; line-height: 40px; color: var(--color-app-muted);
  white-space: nowrap; text-overflow: ellipsis; user-select: none; -webkit-user-select: none; }
.su-input__icon, .su-input__status { display: flex; flex: none; color: var(--color-app-muted); }
.su-input__icon > svg, .su-input__status > svg { width: 16px; height: 16px; }
.su-input__status { animation: su-input-in var(--dur-state) var(--ease-app); }
.su-input__status[data-state="ok"] { color: var(--color-app-ok); }
.su-input__status[data-state="err"] { color: var(--color-app-crit-deep); }
.su-input__clear { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 0 -6px 0 0; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--color-app-muted); cursor: pointer; }
.su-input__clear:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-input__clear:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-input__clear > svg { width: 14px; height: 14px; }
@keyframes su-input-in { from { opacity: 0; } }

/* ============ Checkbox ============ */
.su-check { min-width: 0; margin: 0; padding: 0; border: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-check__legend { float: left; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%;
  padding: 12px 12px 8px; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-check__legend + * { clear: both; }
.su-check__count { font: 400 12px/1 var(--font-sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-check__item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--color-app-line);
  cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-check__item:hover { background: var(--color-app-hover); }
.su-check__item[data-role="parent"] { background: var(--color-app-tray); }
.su-check__item[data-role="parent"] ~ .su-check__item { padding-left: 38px; }
.su-check__item[data-role="parent"] ~ .su-check__item .su-check__input { left: 38px; }
/* the real input sits invisibly on top of the drawn box: forms, validation and clicks stay native */
.su-check__input { position: absolute; left: 12px; top: 11px; width: 16px; height: 16px; margin: 0; opacity: 0; cursor: inherit; }
.su-check__box { position: relative; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px;
  background: var(--color-app-surface); box-shadow: inset 0 0 0 1.5px var(--color-app-muted); color: var(--color-app-on-accent);
  transition: background-color var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); pointer-events: none; }
.su-check__box > svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.su-check__tick { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--dur-state) var(--ease-app); }
.su-check__dash { opacity: 0; }
.su-check__input:checked + .su-check__box, .su-check__input:indeterminate + .su-check__box { background: var(--color-app-accent); box-shadow: none; }
.su-check__input:checked:not(:indeterminate) + .su-check__box .su-check__tick { stroke-dashoffset: 0; }
.su-check__input:indeterminate + .su-check__box .su-check__dash { opacity: 1; }
.su-check__input:focus-visible + .su-check__box { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-check__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.su-check__label { font: 500 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-check__item[data-role="parent"] .su-check__label { font-weight: 600; }
.su-check__desc { font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-check__item:has(.su-check__input:disabled) { cursor: not-allowed; }
.su-check__item:has(.su-check__input:disabled):hover { background: none; }
.su-check__item:has(.su-check__input:disabled) :is(.su-check__box, .su-check__label) { opacity: .5; }
.su-check__lock { display: inline-flex; align-items: center; gap: 4px; flex: none; align-self: center; height: 20px; padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); font: 600 11px/1 var(--font-sans); color: var(--color-app-ink-2); }
.su-check__lock > svg { width: 11px; height: 11px; }

/* ============ Switch ============ */
.su-switch { container: su-switch / inline-size; overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-switch__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--color-app-line); }
.su-switch__title { margin: 0; font: 600 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-switch__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.su-switch__row + .su-switch__row { border-top: 1px solid var(--color-app-line); }
.su-switch__text { display: grid; gap: 2px; flex: 1; min-width: 0; cursor: pointer; }
.su-switch__label { font: 500 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-switch__desc { font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-switch__ctl { appearance: none; -webkit-appearance: none; position: relative; flex: none; box-sizing: border-box; width: 34px; height: 20px; margin: 0; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line-strong);
  cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-switch__ctl::before { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-app-muted); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform var(--dur-state) var(--ease-app), background-color var(--dur-state) var(--ease-app); }
.su-switch__ctl::after { content: ""; position: absolute; inset: -6px -4px; } /* 32px-tall hit area */
.su-switch__ctl:is([aria-checked="true"], :checked) { background: var(--color-app-accent); box-shadow: none; }
.su-switch__ctl:is([aria-checked="true"], :checked)::before { transform: translateX(14px); background: var(--color-app-on-accent); }
.su-switch__ctl:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-switch__ctl:disabled { opacity: .45; cursor: not-allowed; }
.su-switch__ctl[aria-busy="true"] { cursor: progress; opacity: .7; }
.su-switch__ctl[aria-busy="true"]::before { animation: su-switch-pulse var(--dur-loop) var(--ease-app) infinite alternate; }
.su-switch__row:has(.su-switch__ctl:disabled) .su-switch__text { cursor: not-allowed; }
.su-switch__row:has(.su-switch__ctl:disabled) .su-switch__label { opacity: .6; }
@keyframes su-switch-pulse { to { transform: var(--su-switch-x, none) scale(.7); } }
.su-switch__ctl:is([aria-checked="true"], :checked) { --su-switch-x: translateX(14px); }
@container su-switch (max-width: 300px) { .su-switch__row, .su-switch__head { padding-inline: 12px; } }

/* ============ Radio Group ============ */
.su-radio { container: su-radio / inline-size; min-width: 0; margin: 0; padding: 0; border: 0; font-family: var(--font-sans); }
.su-radio__legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font: 600 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-radio__list { clear: both; display: grid; gap: 8px; }
@container su-radio (min-width: 480px) {
  .su-radio:not([data-variant="plain"]) .su-radio__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.su-radio__opt { display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 12px; border-radius: var(--radius-ctrl); cursor: pointer;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring);
  transition: box-shadow var(--dur-state) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-radio__opt:hover { background: var(--color-app-hover); }
.su-radio__opt:has(.su-radio__input:checked) { background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-app-accent); }
.su-radio__opt:has(.su-radio__input:focus-visible) { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-radio__opt:has(.su-radio__input:disabled) { opacity: .55; cursor: not-allowed; background: var(--color-app-surface); }
.su-radio__input { appearance: none; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 50%;
  background: var(--color-app-surface); box-shadow: inset 0 0 0 1.5px var(--color-app-line-strong); cursor: inherit; outline: none;
  transition: background-color var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-radio__input::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-app-on-accent, var(--color-white));
  transform: scale(0); transition: transform var(--dur-state) var(--ease-app); }
.su-radio__input:checked { background: var(--color-app-accent); box-shadow: none; }
.su-radio__input:checked::before { transform: scale(1); }
.su-radio__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.su-radio__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.su-radio__title { font: 600 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-radio__price { font: 600 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-radio__price small { font-size: 12px; font-weight: 400; color: var(--color-app-muted); }
.su-radio__desc { font: 400 12px/1.45 var(--font-sans); color: var(--color-app-muted); }
.su-radio[data-variant="plain"] .su-radio__list { gap: 2px; }
.su-radio[data-variant="plain"] .su-radio__opt { padding: 8px; background: transparent; box-shadow: none; }
.su-radio[data-variant="plain"] .su-radio__opt:hover { background: var(--color-app-hover); }
.su-radio[data-variant="plain"] .su-radio__opt:has(:disabled) { background: transparent; }

/* ============ Progress Bar ============ */
.su-progress { --fill: var(--color-app-accent); display: grid; gap: 8px; min-width: 0; font-family: var(--font-sans); }
.su-progress[data-segments] { --fill: var(--color-app-ok); }
.su-progress[data-level="warn"] { --fill: var(--color-app-warn); }
.su-progress[data-level="crit"] { --fill: var(--color-app-crit); }
.su-progress[data-state="complete"] { --fill: var(--color-app-ok); }
.su-progress__head { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-progress__icon { display: inline-flex; flex: none; color: var(--color-app-muted); }
.su-progress__icon svg { width: 15px; height: 15px; }
.su-progress__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-app-ink); }
.su-progress__value { flex: none; font-weight: 400; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-progress__track { position: relative; display: block; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-app-tray);
  box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-progress__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--fill); transform-origin: left center; transform: scaleX(var(--p, 0));
  transition: transform var(--dur-layout) var(--ease-app), background-color var(--dur-state) var(--ease-app); }
.su-progress__fill:dir(rtl) { transform-origin: right center; }
.su-progress[data-indeterminate] .su-progress__fill { right: auto; width: 30%; transform: none; animation: su-progress-indet calc(var(--dur-loop) * 2) var(--ease-app) infinite; }
@keyframes su-progress-indet { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.su-progress[data-segments] .su-progress__track { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 4px; overflow: visible;
  border-radius: 0; background: none; box-shadow: none; }
.su-progress__seg { height: 6px; border-radius: var(--radius-pill); background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line);
  transition: background-color var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-progress__seg[data-on] { background: var(--fill); box-shadow: inset 0 0 0 1px transparent; }
.su-progress__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font: 400 11.5px/1.35 var(--font-sans);
  color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-progress__help { margin: 0; font: 400 11.5px/1.45 var(--font-sans); color: var(--color-app-muted); }
.su-progress [data-show] { display: none; }
.su-progress[data-level="normal"]:not([data-state]) [data-show~="normal"], .su-progress[data-level="warn"]:not([data-state]) [data-show~="warn"],
.su-progress[data-level="crit"]:not([data-state]) [data-show~="crit"], .su-progress[data-state="complete"] [data-show~="complete"] { display: block; }
.su-progress[data-level="warn"] .su-progress__help, .su-progress[data-level="crit"] .su-progress__help { color: var(--color-app-ink-2); }

/* ============ Spinner ============ */
.su-spinner { --size: 20px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; vertical-align: middle; color: var(--color-app-accent);
  font: 500 12.5px/1.35 var(--font-sans); }
.su-spinner[data-size="sm"] { --size: 16px; }
.su-spinner[data-size="lg"] { --size: 32px; gap: 12px; }
.su-spinner .su-spin { flex: none; width: var(--size); height: var(--size); animation-duration: calc(var(--dur-loop) * 1.25); }
.su-spinner[data-tone="ink"] { color: var(--color-app-ink-2); }
.su-spinner[data-tone="on-accent"] { color: var(--color-app-on-accent, var(--color-white)); }
.su-spinner__text { display: grid; gap: 2px; min-width: 0; }
.su-spinner__label { color: var(--color-app-ink-2); }
.su-spinner__sub { font-size: 11.5px; font-weight: 400; color: var(--color-app-muted); }
.su-spinner[data-tone="on-accent"] :is(.su-spinner__label, .su-spinner__sub) { color: inherit; }
.su-spinner[data-delay] { animation: su-spinner-in 1ms linear var(--su-spinner-delay, 300ms) both; }
.su-spinner[data-delay="150"] { --su-spinner-delay: 150ms; } .su-spinner[data-delay="500"] { --su-spinner-delay: 500ms; }
.su-spinner[data-delay="800"] { --su-spinner-delay: 800ms; } .su-spinner[data-delay="1000"] { --su-spinner-delay: 1000ms; }
@keyframes su-spinner-in { from { opacity: 0; } }
@keyframes su-spinner-pulse { 50% { opacity: .35; } }

/* ============ Skeleton ============ */
.su-skeleton { display: grid; gap: 14px; min-width: 0; }
.su-skeleton__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.su-skeleton__lines { flex: 1; min-width: 0; display: grid; gap: 8px; }
.su-skeleton__b { position: relative; display: block; flex: none; width: 100%; height: 12px; overflow: hidden; border-radius: var(--radius-ctrl);
  background: var(--color-app-tray); }
.su-skeleton__b[data-shape="line"] { height: 10px; }
.su-skeleton__lines > .su-skeleton__b[data-shape="line"]:last-child:not(:first-child) { width: 60%; }
.su-skeleton__b[data-shape="circle"] { width: 40px; height: auto; aspect-ratio: 1; border-radius: var(--radius-pill); }
.su-skeleton__b::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-app-ink) 7%, transparent), transparent);
  animation: su-sweep calc(var(--dur-loop) * 2.2) var(--ease-app) infinite; }

/* ============ Alert ============ */
.su-alert { --tone: var(--color-app-accent); --soft: var(--color-app-accent-soft);
  display: flex; gap: 10px; align-items: flex-start; min-width: 0; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  background: var(--soft); box-shadow: inset 0 0 0 1px var(--color-app-line); font: 400 12.5px/1.45 var(--font-sans); color: var(--color-app-ink-2);
  overflow-wrap: anywhere; }
.su-alert[data-tone="ok"] { --tone: var(--color-app-ok); --soft: var(--color-app-ok-soft); }
.su-alert[data-tone="warn"] { --tone: var(--color-app-warn); --soft: var(--color-app-warn-soft); }
.su-alert[data-tone="crit"] { --tone: var(--color-app-crit); --soft: var(--color-app-crit-soft); }
.su-alert__icon { display: inline-flex; flex: none; margin-top: 1px; color: var(--tone); }
.su-alert__icon svg { width: 16px; height: 16px; }
.su-alert__body { flex: 1; min-width: 0; }
.su-alert__title { margin: 0; font-weight: 600; color: var(--color-app-ink); }
.su-alert__desc { margin: 2px 0 0; color: var(--color-app-ink-2); }
.su-alert__actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.su-alert__actions a { color: var(--color-app-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.su-alert__actions a[data-variant="quiet"] { color: var(--color-app-ink-2); font-weight: 400; text-decoration: none; }
.su-alert__actions a:hover { text-decoration: underline; }
.su-alert__actions a:focus-visible, .su-alert__x:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; border-radius: 4px; }
.su-alert__x { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -5px -7px -5px 0; padding: 0; border: 0;
  border-radius: var(--radius-ctrl); background: transparent; color: var(--color-app-muted); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-alert__x:hover { background: color-mix(in srgb, var(--color-app-ink) 8%, transparent); color: var(--color-app-ink); }
.su-alert__x svg { width: 14px; height: 14px; }
.su-alert[data-leaving] { overflow: hidden; opacity: 0; padding-block: 0; margin-block: 0; pointer-events: none;
  transition: height var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app), padding var(--dur-state) var(--ease-app); }

/* ============ Slider ============ */
.su-slider { --p: 0; --thumb: 24px; display: grid; gap: 8px; min-width: 0; font-family: var(--font-sans); }
.su-slider__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.su-slider__title { font: 600 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-slider__value { font: 600 13px/1.3 var(--font-sans); color: var(--color-app-accent); font-variant-numeric: tabular-nums; }
.su-slider__input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--thumb); margin: 0; padding: 0;
  background: transparent; cursor: pointer; outline: none; }
.su-slider__input::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-app-line);
  background: linear-gradient(to right, var(--color-app-accent) 0 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)), var(--color-app-tray) 0); }
.su-slider__input::-moz-range-track { height: 6px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-app-line);
  background: linear-gradient(to right, var(--color-app-accent) 0 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)), var(--color-app-tray) 0); }
/* 24px hit box (transparent border) around an 18px ring — touch target holds at 320px */
.su-slider__input::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: var(--thumb); height: var(--thumb); margin-top: calc((6px - var(--thumb)) / 2);
  border: 3px solid transparent; border-radius: 50%; background: var(--color-app-surface) padding-box; box-shadow: inset 0 0 0 5px var(--color-app-accent);
  transition: transform var(--dur-hover) var(--ease-app); }
.su-slider__input::-moz-range-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb); border: 3px solid transparent; border-radius: 50%;
  background: var(--color-app-surface) padding-box; box-shadow: inset 0 0 0 5px var(--color-app-accent); transition: transform var(--dur-hover) var(--ease-app); }
.su-slider__input:hover::-webkit-slider-thumb, .su-slider[data-dragging] .su-slider__input::-webkit-slider-thumb { transform: scale(1.12); }
.su-slider__input:hover::-moz-range-thumb, .su-slider[data-dragging] .su-slider__input::-moz-range-thumb { transform: scale(1.12); }
.su-slider__input:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 5px var(--color-app-accent), 0 0 0 2px var(--color-app-focus); }
.su-slider__input:focus-visible::-moz-range-thumb { box-shadow: inset 0 0 0 5px var(--color-app-accent), 0 0 0 2px var(--color-app-focus); }
.su-slider:has(.su-slider__input:disabled) { opacity: .5; }
.su-slider__input:disabled { cursor: not-allowed; }
.su-slider__ticks { position: relative; display: block; height: 14px; font: 400 11px/14px var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-slider__tick { position: absolute; top: 0; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--at, 0)); transform: translateX(-50%); white-space: nowrap; }
.su-slider__help { font: 400 12px/1.45 var(--font-sans); color: var(--color-app-muted); }

/* ============ Code Block ============ */
.su-code { --su-code-lh: 1.75; width: min(560px, 100%); min-width: 0; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column;
  background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-code__head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 8px 8px 14px; box-shadow: inset 0 -1px 0 var(--color-app-line); }
.su-code__icon { width: 16px; height: 16px; flex: none; color: var(--color-app-muted); }
.su-code__file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 12.5px; color: var(--color-app-ink); }
.su-code__file:empty { display: none; }
.su-code__lang { flex: none; }
.su-code__copy.su-btn { flex: none; width: 28px; height: 28px; padding: 0; margin-left: auto; }
.su-code__copy svg { width: 14px; height: 14px; transition: opacity var(--dur-state) var(--ease-app), transform var(--dur-state) var(--ease-app); }
.su-code__copy .su-code__i-done { position: absolute; opacity: 0; transform: scale(.6); color: var(--color-app-ok-deep); }
.su-code__copy[data-copied] .su-code__i-copy { opacity: 0; transform: scale(.6); }
.su-code__copy[data-copied] .su-code__i-done { opacity: 1; transform: none; }
.su-code__pre { margin: 0; padding: 12px 0; overflow: auto; background: var(--color-app-tray); overscroll-behavior-x: contain;
  font: 400 12px/var(--su-code-lh) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--color-app-ink-2); tab-size: 2; }
.su-code__pre:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-code[data-collapsed] .su-code__pre { max-height: calc(var(--su-code-max) * var(--su-code-lh) * 12px + 12px); overflow-y: hidden;
  mask-image: linear-gradient(180deg, black calc(100% - 36px), transparent); }
.su-code__code { display: block; min-width: max-content; font: inherit; }
.su-code__line { display: flex; min-height: calc(var(--su-code-lh) * 1em); }
.su-code__line[data-hl] { background: var(--color-app-accent-soft); box-shadow: inset 2px 0 0 var(--color-app-accent); }
.su-code__ln { flex: none; width: 34px; padding-right: 12px; text-align: right; color: var(--color-app-muted); user-select: none; }
.su-code__ln::before { content: attr(data-n); }
.su-code[data-numbers="off"] .su-code__ln { width: 14px; padding: 0; }
.su-code[data-numbers="off"] .su-code__ln::before { content: none; }
.su-code__src { padding-right: 14px; white-space: pre; }
.su-code[data-wrap] .su-code__code { min-width: 0; }
.su-code[data-wrap] .su-code__src { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.su-code__kw, .su-code__tag { color: var(--color-app-accent); }
.su-code__str { color: var(--color-app-ok-deep); }
.su-code__com { color: var(--color-app-muted); font-style: italic; }
.su-code__num { color: color-mix(in srgb, var(--color-app-warn) 62%, var(--color-app-ink)); }
.su-code__fn { color: var(--color-app-ink); }
.su-code__prop, .su-code__attr { color: color-mix(in srgb, var(--color-app-accent) 55%, var(--color-app-ink)); }
.su-code__more.su-btn { width: 100%; border-radius: 0; box-shadow: inset 0 -1px 0 var(--color-app-line); }
.su-code__more[hidden] { display: none; }
.su-code__foot { display: flex; gap: 12px; padding: 8px 14px; font-size: 11px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-code__langname { margin-left: auto; }
.su-code__langname:empty { display: none; }

/* ============ Empty State ============ */
.su-empty { container: su-empty / inline-size; width: min(440px, 100%); box-sizing: border-box; padding: 28px 20px; display: grid; justify-items: center;
  text-align: center; background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-empty__art { --tone: var(--color-app-accent); --tone-soft: var(--color-app-accent-soft); position: relative; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); color: var(--color-app-ink-2); }
.su-empty__art > svg { width: 24px; height: 24px; }
/* badge: soft circle (::after) + the variant glyph (::before, an SVG mask filled with the tone) */
.su-empty__art::after { content: ""; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tone-soft); box-shadow: 0 0 0 3px var(--color-app-surface); }
.su-empty__art::before { content: ""; position: absolute; z-index: 1; right: -2px; top: -2px; width: 12px; height: 12px; background: var(--tone);
  -webkit-mask: var(--su-empty-icon) center / contain no-repeat; mask: var(--su-empty-icon) center / contain no-repeat; }
.su-empty, .su-empty[data-variant="first-use"] {
  --su-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.su-empty[data-variant="no-results"] {
  --su-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E"); }
.su-empty[data-variant="no-results"] .su-empty__art { --tone: var(--color-app-ink-2); --tone-soft: var(--color-app-sunk, var(--color-app-tray)); }
.su-empty[data-variant="error"] {
  --su-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 5v8M12 18.5v.5'/%3E%3C/svg%3E"); }
.su-empty[data-variant="error"] .su-empty__art { --tone: var(--color-app-crit-deep); --tone-soft: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-empty__title { margin: 14px 0 0; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); letter-spacing: -.005em; }
.su-empty__desc { margin: 6px 0 0; max-width: 44ch; font-size: 12.5px; line-height: 1.5; color: var(--color-app-ink-2); }
.su-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.su-empty__help { margin-top: 12px; font-size: 12px; color: var(--color-app-muted); text-decoration: none; border-radius: 4px; }
.su-empty__help:hover { color: var(--color-app-ink); text-decoration: underline; }
.su-empty__help:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-empty[data-size="sm"] { width: 100%; padding: 18px 12px; box-shadow: none; background: transparent; }
.su-empty[data-size="sm"] .su-empty__art { width: 40px; height: 40px; border-radius: 12px; }
.su-empty[data-size="sm"] .su-empty__art > svg { width: 18px; height: 18px; }
.su-empty[data-size="sm"] .su-empty__title { margin-top: 10px; font-size: 13px; }
.su-empty[data-size="sm"] .su-empty__desc { font-size: 12px; }
.su-empty[data-size="sm"] .su-empty__actions { margin-top: 12px; }
.su-table td:has(> .su-empty) { white-space: normal; padding: 0; }
@container su-empty (max-width: 399px) {
  .su-empty__actions { flex-direction: column; justify-self: stretch; }
  .su-empty__actions > * { width: 100%; }
}

/* ============ Gauge ============ */
.su-gauge { container: su-gauge / inline-size; width: min(320px, 100%); min-width: 160px; box-sizing: border-box; padding: 16px;
  background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-gauge__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.su-gauge__eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-gauge__title { margin: 0; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-gauge__dial { position: relative; width: min(220px, 100%); margin: 14px auto 0; }
.su-gauge__svg { display: block; width: 100%; height: auto; overflow: visible; }
.su-gauge__ticks line { stroke: var(--color-app-line-strong); stroke-width: 1.5; stroke-linecap: round; }
.su-gauge__track, .su-gauge__bar { fill: none; stroke-width: 14; stroke-linecap: round; }
.su-gauge__track { stroke: var(--color-app-tray); }
.su-gauge__bar { stroke: var(--color-app-accent); transition: stroke-dasharray var(--dur-layout) var(--ease-app), stroke var(--dur-state) var(--ease-app); }
.su-gauge__bar[data-zero] { opacity: 0; }
.su-gauge[data-tone="warn"] .su-gauge__bar { stroke: var(--color-app-warn); }
.su-gauge[data-tone="crit"] .su-gauge__bar { stroke: var(--color-app-crit); }
.su-gauge__center { position: absolute; left: 0; right: 0; top: 44%; display: grid; justify-items: center; text-align: center; }
.su-gauge__num { font-size: clamp(20px, 11cqi, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-gauge__num small { font-size: .5em; font-weight: 500; color: var(--color-app-muted); }
.su-gauge__cap { margin-top: 4px; font-size: 11.5px; color: var(--color-app-ink-2); }
.su-gauge__cap:empty { display: none; }
.su-gauge__scale { display: flex; justify-content: space-between; margin-top: 4px; padding: 0 6px; font-size: 10.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-gauge__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.su-gauge__stat { padding: 8px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-tray); }
.su-gauge__stat span { display: block; font-size: 11px; color: var(--color-app-muted); }
.su-gauge__stat b { font-weight: 600; color: var(--color-app-ink); }
@container su-gauge (max-width: 200px) { .su-gauge__foot { grid-template-columns: 1fr; } .su-gauge__head { flex-wrap: wrap; } }

/* ============ Hover Card ============ */
[data-su="hovercard"] { -webkit-touch-callout: none; }
.su-hovercard__trigger { padding: 1px 4px; border-radius: 4px; font-weight: 500; text-decoration: none; color: var(--color-app-accent); background: var(--color-app-accent-soft); }
.su-hovercard__trigger:hover, .su-hovercard__trigger[aria-expanded="true"] { text-decoration: underline; }
.su-hovercard__trigger:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-hovercard { position: fixed; z-index: 1000; inset: auto; left: 0; top: 0; margin: 0; border: 0; overflow: visible; box-sizing: border-box;
  width: min(256px, calc(100vw - 16px)); padding: 14px; border-radius: 12px; background: var(--color-app-surface); color: var(--color-app-ink);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-app-line); font: 400 13px/1.45 var(--font-sans); text-align: left;
  opacity: 0; transform: translateY(4px); transition: opacity var(--dur-state) var(--ease-app), transform var(--dur-state) var(--ease-app); }
.su-hovercard[data-placement="top"] { transform: translateY(-4px); }
.su-hovercard[popover]:not(:popover-open), .su-hovercard[hidden] { display: none; }
.su-hovercard[data-show] { opacity: 1; transform: none; }
.su-hovercard::before { content: ""; position: absolute; top: -5px; left: calc(var(--su-hc-arrow, 28px) - 5px); width: 10px; height: 10px;
  background: var(--color-app-surface); transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--color-app-line); }
.su-hovercard[data-placement="top"]::before { top: auto; bottom: -5px; box-shadow: 1px 1px 0 0 var(--color-app-line); }
.su-hovercard__top { display: flex; gap: 10px; align-items: center; min-width: 0; }
.su-hovercard__avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  font: 600 14px/1 var(--font-sans); background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-hovercard__avatar[data-presence]::after { content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-app-muted); box-shadow: 0 0 0 2px var(--color-app-surface); }
.su-hovercard__avatar[data-presence="online"]::after { background: var(--color-app-ok); }
.su-hovercard__avatar[data-presence="away"]::after { background: var(--color-app-warn); }
.su-hovercard__name { margin: 0; font: 600 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-hovercard__role { margin: 0; font-size: 12px; color: var(--color-app-muted); }
.su-hovercard__meta { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-hovercard__meta svg { width: 13px; height: 13px; flex: none; }
.su-hovercard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 10px 0 0; padding: 8px 0; text-align: center;
  box-shadow: inset 0 1px 0 var(--color-app-line), inset 0 -1px 0 var(--color-app-line); font-variant-numeric: tabular-nums; }
.su-hovercard__stats b { display: block; font-size: 14px; font-weight: 600; color: var(--color-app-ink); }
.su-hovercard__stats span { font-size: 11px; color: var(--color-app-muted); }
.su-hovercard__actions { display: flex; gap: 8px; margin-top: 10px; }
.su-hovercard__actions > * { flex: 1; }

/* ============ Marquee ============ */
.su-marquee { width: min(560px, 100%); min-width: 0; box-sizing: border-box; padding: 12px 0 16px; background: var(--color-app-surface);
  border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-marquee__head { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 12px; margin-bottom: 10px; }
.su-marquee__eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); text-align: center; }
.su-marquee__toggle.su-btn { --h: 26px; --px: 8px; --fs: 11.5px; gap: 4px; color: var(--color-app-muted); }
.su-marquee__toggle svg { width: 12px; height: 12px; }
.su-marquee__row { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent); }
.su-marquee__row + .su-marquee__row { margin-top: 12px; }
.su-marquee__row:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-marquee__track { display: flex; width: max-content; animation: su-mq var(--su-mq-dur, 30s) linear infinite; }
.su-marquee__row[data-dir="rev"] .su-marquee__track { animation-direction: reverse; }
.su-marquee:not([data-pause-on-hover="off"]):not([data-pause-on-hover="false"]) .su-marquee__row:is(:hover, :focus-within) .su-marquee__track,
.su-marquee:is([data-paused], [data-hidden]) .su-marquee__track { animation-play-state: paused; }
@keyframes su-mq { to { transform: translateX(var(--su-mq-shift, -50%)); } }
.su-marquee__group { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.su-marquee__group > li { display: flex; flex: none; }
.su-marquee__item { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; font-size: 14px; font-weight: 650; letter-spacing: -.01em;
  color: var(--color-app-ink-2); white-space: nowrap; text-decoration: none; border-radius: var(--radius-ctrl); }
a.su-marquee__item:hover { color: var(--color-app-ink); }
.su-marquee__item:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-marquee__item svg { width: 18px; height: 18px; flex: none; }
.su-marquee__quote { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; padding: 6px 12px 6px 6px; border-radius: var(--radius-pill);
  background: var(--color-app-tray); font-size: 12.5px; color: var(--color-app-ink-2); white-space: nowrap; }

/* ============ Testimonial ============ */
.su-testimonial { position: relative; overflow: hidden; margin: 0; width: min(400px, 100%); box-sizing: border-box; padding: 20px;
  background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-testimonial__mark { position: absolute; right: 16px; top: 14px; width: 44px; height: 44px; color: var(--color-app-accent-soft); }
.su-testimonial__stars { display: flex; gap: 2px; color: var(--color-app-accent); }
.su-testimonial__stars svg { width: 14px; height: 14px; flex: none; }
.su-testimonial[data-rating="0"] .su-testimonial__stars svg,
.su-testimonial[data-rating="1"] .su-testimonial__stars svg:nth-of-type(n+2),
.su-testimonial[data-rating="2"] .su-testimonial__stars svg:nth-of-type(n+3),
.su-testimonial[data-rating="3"] .su-testimonial__stars svg:nth-of-type(n+4),
.su-testimonial[data-rating="4"] .su-testimonial__stars svg:nth-of-type(n+5) { color: var(--color-app-line-strong); }
.su-testimonial__quote { position: relative; margin: 12px 0 0; font-size: 15px; line-height: 1.55; font-weight: 500; letter-spacing: -.005em; color: var(--color-app-ink); }
.su-testimonial__quote p { margin: 0; }
.su-testimonial__author { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--color-app-line); }
.su-testimonial__avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-weight: 600; font-size: 13px;
  background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-testimonial__who { flex: 1 1 120px; min-width: 0; }
.su-testimonial__name { display: block; font-weight: 600; color: var(--color-app-ink); }
.su-testimonial__role { display: block; font-size: 12px; color: var(--color-app-ink-2); }
.su-testimonial__metric { margin-left: auto; text-align: right; }
.su-testimonial__metric b { display: block; font-size: 16px; font-weight: 600; color: var(--color-app-accent); font-variant-numeric: tabular-nums; }
.su-testimonial__metric span { font-size: 11px; color: var(--color-app-muted); }
.su-testimonial__carousel { display: flex; flex-direction: column; gap: 8px; width: min(420px, 100%); min-width: 0; font-family: var(--font-sans); }
.su-testimonial__viewport { overflow: hidden; border-radius: var(--radius-card); }
.su-testimonial__track { display: flex; align-items: flex-start; transition: transform var(--dur-layout) var(--ease-app); }
.su-testimonial__slide { flex: 0 0 100%; min-width: 0; box-sizing: border-box; padding: 4px 6px 12px; }
.su-testimonial__slide > .su-testimonial { width: 100%; }
.su-testimonial__controls { order: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 6px; }
.su-testimonial__count { margin-right: auto; white-space: nowrap; font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-testimonial__prev.su-btn, .su-testimonial__next.su-btn { width: 32px; padding: 0; }
.su-testimonial__play.su-btn { gap: 4px; padding: 0 8px; color: var(--color-app-muted); }
.su-testimonial__play svg { width: 12px; height: 12px; }


/* ============ Dropdown Menu ============ */
/* .su-menu__list + __item are the shared menu surface (Dropdown Menu, Context Menu, Breadcrumb overflow, Toolbar, Sidebar …) */
.su-menu { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.su-menu__trigger { max-width: 100%; }
.su-menu__trigger .su-avatar { margin-left: -6px; }
.su-menu__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.su-menu__chev { display: inline-flex; flex: none; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-menu__chev > svg { width: 14px; height: 14px; }
[aria-expanded="true"] > .su-menu__chev { transform: rotate(180deg); }
.su-menu__list { position: fixed; z-index: 1000; inset: auto; left: 0; top: 0; box-sizing: border-box; margin: 0; border: 0;
  min-width: 220px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; border-radius: 12px; background: var(--color-app-surface); color: var(--color-app-ink); outline: none;
  box-shadow: var(--shadow-ring-card), var(--shadow-lg); font: 400 13px/1.3 var(--font-sans); text-align: left;
  transform-origin: var(--su-menu-origin, top left); }
.su-menu__list[popover]:not(:popover-open), .su-menu__list[hidden] { display: none; }
.su-menu__list[data-show] { animation: su-menu-in var(--dur-state) var(--ease-app); }
@keyframes su-menu-in { from { opacity: 0; transform: scale(.97); } }
.su-menu__head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 6px; }
.su-menu__head > .su-avatar, .su-menu__head > svg { flex: none; }
.su-menu__who { display: grid; gap: 1px; min-width: 0; }
.su-menu__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-menu__meta { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.3 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-menu__sep { height: 1px; margin: 4px -4px; border: 0; background: var(--color-app-line); }
.su-menu__label { padding: 8px 8px 4px; font: 600 11px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-menu__item { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 32px; margin: 0; padding: 7px 8px;
  border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; color: var(--color-app-ink); text-align: left; text-decoration: none;
  white-space: nowrap; cursor: pointer; outline: none; transition: background-color var(--dur-hover) var(--ease-app); }
.su-menu__item > svg, .su-menu__icon { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--color-app-ink-2); }
.su-menu__icon > svg { width: 16px; height: 16px; }
.su-menu__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.su-menu__item:hover, .su-menu__item:focus, .su-menu__item[aria-expanded="true"] { background: var(--color-app-hover); }
.su-menu__item:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-menu__item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.su-menu__item[aria-disabled="true"]:hover { background: none; }
.su-menu__item:is([data-tone="crit"], [data-danger]), .su-menu__item:is([data-tone="crit"], [data-danger]) > svg,
.su-menu__item:is([data-tone="crit"], [data-danger]) .su-menu__icon { color: var(--color-app-crit-deep); }
.su-menu__item[data-armed] { background: var(--color-app-crit-soft); }
.su-menu__kbd, .su-menu__item .su-kbd { margin-left: auto; min-width: 0; height: auto; padding: 0 0 0 12px; box-shadow: none;
  font: 500 11.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-menu__subic { display: inline-flex; margin-left: auto; color: var(--color-app-muted); }
.su-menu__subic > svg { width: 14px; height: 14px; }
.su-menu__check { position: relative; flex: none; width: 16px; height: 16px; }
[role="menuitemcheckbox"][aria-checked="true"] > .su-menu__check::after { content: ""; position: absolute; left: 3px; top: 3px; width: 9px; height: 5px;
  border: solid var(--color-app-accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
[role="menuitemradio"][aria-checked="true"] > .su-menu__check::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--color-app-accent); }

/* ============ Context Menu ============ */
.su-contextmenu__target { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.su-contextmenu__target:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-contextmenu__file { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-contextmenu__file > svg { width: 16px; height: 16px; }
.su-menu__list[data-su="contextmenu"] { min-width: 232px; }

/* ============ Breadcrumb ============ */
.su-breadcrumb { container: su-breadcrumb / inline-size; min-width: 0; font: 400 13px/1.3 var(--font-sans); color: var(--color-app-ink-2); }
.su-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.su-breadcrumb[data-su-ready] .su-breadcrumb__list { flex-wrap: nowrap; }
.su-breadcrumb__item { display: inline-flex; align-items: center; flex: none; min-width: 0; }
.su-breadcrumb__item + .su-breadcrumb__item::before { content: ""; flex: none; width: 5px; height: 5px; margin: 0 7px 0 5px; border: solid var(--color-app-muted);
  border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.su-breadcrumb__item:last-child { flex: 0 1 auto; }
.su-breadcrumb[data-measuring] .su-breadcrumb__item:last-child { flex: none; }
.su-breadcrumb__link { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; white-space: nowrap;
  color: var(--color-app-ink-2); text-decoration: none; transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-breadcrumb__link:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-breadcrumb__link:focus-visible, .su-breadcrumb__btn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-breadcrumb__link > svg { width: 14px; height: 14px; flex: none; }
.su-breadcrumb__btn { padding: 2px 7px; border: 0; border-radius: 6px; background: var(--color-app-tray); color: var(--color-app-ink-2);
  font: 600 13px/1.2 var(--font-sans); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-breadcrumb__btn:hover, .su-breadcrumb__btn[aria-expanded="true"] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-breadcrumb__current { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 6px; font-weight: 600; color: var(--color-app-ink); }
.su-breadcrumb__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-breadcrumb__current > .su-chip { flex: none; }
@container su-breadcrumb (max-width: 360px) { /* narrow: icon-only first crumb (text stays for screen readers), no status chip */
  .su-breadcrumb__link > svg + span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .su-breadcrumb__current > .su-chip { display: none; } }

/* ============ Select ============ */
.su-select { position: relative; min-width: 0; }
.su-select__trigger { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; height: 40px; min-width: 0; padding: 0 12px;
  border: 0; border-radius: 10px; background: var(--color-app-surface); box-shadow: var(--shadow-ring); cursor: pointer; outline: none;
  font: 400 14px/1 var(--font-sans); color: var(--color-app-ink); text-align: left; user-select: none; -webkit-user-select: none;
  transition: box-shadow var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-select__trigger:hover { box-shadow: inset 0 0 0 1px var(--color-app-muted); }
.su-select__trigger:focus-visible, .su-select__trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-select__trigger[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
.su-select__trigger[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep), 0 0 0 3px var(--color-app-crit-soft); }
.su-select__trigger[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.su-select__icon, .su-select__chev { display: flex; flex: none; color: var(--color-app-muted); }
.su-select__icon > svg, .su-select__chev > svg { width: 16px; height: 16px; }
.su-select__chev { margin-left: auto; transition: transform var(--dur-state) var(--ease-app); }
.su-select__trigger[aria-expanded="true"] .su-select__chev { transform: rotate(180deg); }
.su-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-select__value[data-placeholder] { color: var(--color-app-muted); }
.su-select__native { position: absolute; inset: 0; width: 100%; height: 40px; opacity: 0; display: none; }
.su-select[data-native="on"] .su-select__native { display: block; }
.su-select__list { position: fixed; z-index: 1000; inset: auto; left: 0; top: 0; box-sizing: border-box; margin: 0; border: 0;
  max-width: calc(100vw - 16px); max-height: min(296px, calc(100vh - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  border-radius: 12px; background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13.5px/1.3 var(--font-sans); transform-origin: var(--su-menu-origin, top left); }
.su-select__list[popover]:not(:popover-open), .su-select__list[hidden] { display: none; }
.su-select__list[data-show] { animation: su-select-in var(--dur-state) var(--ease-app); }
@keyframes su-select-in { from { opacity: 0; transform: scale(.98); } }
.su-select__group { padding: 8px 10px 4px; font: 600 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-select__opt { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; padding: 8px 32px 8px 10px; border-radius: 8px; cursor: pointer; color: var(--color-app-ink); }
.su-select__opt[data-active] { background: var(--color-app-hover); }
.su-select__opt[aria-selected="true"] { font-weight: 600; }
.su-select__opt[aria-selected="true"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 5px; margin-top: -4px;
  border: solid var(--color-app-accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.su-select__opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.su-select__sub { font-weight: 400; font-size: 12px; color: var(--color-app-muted); }

/* ============ Popover ============ */
.su-popover { position: relative; display: inline-block; vertical-align: top; }
.su-popover__panel { position: absolute; z-index: 50; left: 0; top: 0; box-sizing: border-box; width: var(--su-popover-w, max-content);
  min-width: 200px; max-width: min(340px, calc(100vw - 16px)); padding: 6px; border-radius: 12px; outline: none; text-align: left;
  background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-app-line);
  font: 400 13px/1.4 var(--font-sans); }
.su-popover__panel[data-show] { animation: su-popover-in var(--dur-state) var(--ease-app); }
.su-popover__panel[data-placement="top"] { --su-pop-dy: 4px; }
@keyframes su-popover-in { from { opacity: 0; transform: translateY(var(--su-pop-dy, -4px)); } }
@keyframes su-popover-fade { from { opacity: 0; } }
.su-popover__arrow { position: absolute; top: -5px; left: calc(var(--su-popover-arrow, 22px) - 5px); width: 10px; height: 10px;
  background: var(--color-app-surface); transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--color-app-line); }
.su-popover__panel[data-placement="top"] .su-popover__arrow { top: auto; bottom: -5px; box-shadow: 1px 1px 0 0 var(--color-app-line); }
.su-popover__title { margin: 0; padding: 6px 8px 4px; font: 600 11px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-popover__body { margin: 0; padding: 4px 8px 8px; color: var(--color-app-ink-2); }
.su-popover__opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: var(--color-app-ink); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-popover__opt:hover { background: var(--color-app-hover); }
.su-popover__opt > input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--color-app-accent); }
.su-popover__opt > input:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-popover__opt > span:first-of-type { flex: 1; }
.su-popover__n { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-popover__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 4px 2px; border-top: 1px solid var(--color-app-line); }
.su-popover__panel:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }

/* ============ Accordion ============ */
.su-accordion { width: min(380px, 100%); box-sizing: border-box; overflow: hidden; background: var(--color-app-surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-accordion__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; }
.su-accordion__eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-accordion__title { margin: 2px 0 0; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-accordion__item { border-top: 1px solid var(--color-app-line); }
.su-accordion__head + .su-accordion__item, .su-accordion > .su-accordion__item:first-child { border-top-color: var(--color-app-line); }
.su-accordion__summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; list-style: none; cursor: pointer; font-weight: 500; color: var(--color-app-ink);
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-accordion__summary::-webkit-details-marker { display: none; }
.su-accordion__summary:hover { background: var(--color-app-hover); }
.su-accordion__summary:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-accordion__q { flex: 1; min-width: 0; margin: 0; font: inherit; color: inherit; } /* may be an <h3> etc. — the heading level is the author's */
.su-accordion__chev { flex: none; width: 16px; height: 16px; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-accordion__item[open]:not([data-closing]) .su-accordion__chev { transform: rotate(180deg); }
.su-accordion__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-layout) var(--ease-app); }
.su-accordion__item:not([open]) > .su-accordion__panel, .su-accordion__item[data-closing] > .su-accordion__panel,
.su-accordion__item[data-entering] > .su-accordion__panel { grid-template-rows: 0fr; }
.su-accordion__body { min-height: 0; overflow: hidden; padding: 0 16px; font-size: 12.5px; color: var(--color-app-ink-2); }
.su-accordion__body::after { content: ""; display: block; height: 14px; } /* bottom space lives inside the clip, so 0fr collapses fully */
.su-accordion__body > :first-child { margin-top: 0; }
.su-accordion__body > :last-child { margin-bottom: 0; }
.su-accordion__meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-ctrl);
  background: var(--color-app-tray); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-accordion__meta span:first-child { color: var(--color-app-muted); }
.su-accordion__meta span:last-child { margin-left: auto; }

/* ============ Rating ============ */
.su-rating { width: min(340px, 100%); box-sizing: border-box; display: grid; gap: 14px; padding: 16px; background: var(--color-app-surface);
  border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-rating__overview { display: flex; align-items: center; gap: 16px; min-width: 0; }
.su-rating__summary { flex: none; display: grid; justify-items: center; gap: 4px; text-align: center; }
.su-rating__avg { margin: 0; font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-rating__count { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
/* star meter (CSS only): <span class="su-rating__stars" role="img" aria-label="4.5 จาก 5 ดาว" style="--v:4.5"></span> */
.su-rating__stars { --v: 0; --max: 5; --s: 14px; --g: 2px; display: inline-block; flex: none; vertical-align: middle;
  width: calc(var(--max) * (var(--s) + var(--g))); height: var(--s);
  background: linear-gradient(90deg, var(--color-app-accent) calc(var(--v) / var(--max) * 100%), var(--color-app-line-strong) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8l2.5 5.1 5.6.8-4 3.9 1 5.6L10 14.6l-5 2.6 1-5.6-4-3.9 5.6-.8z'/%3E%3C/svg%3E") 0 0 / calc(var(--s) + var(--g)) var(--s) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8l2.5 5.1 5.6.8-4 3.9 1 5.6L10 14.6l-5 2.6 1-5.6-4-3.9 5.6-.8z'/%3E%3C/svg%3E") 0 0 / calc(var(--s) + var(--g)) var(--s) repeat-x; }
.su-rating__stars[data-size="lg"] { --s: 22px; }
.su-rating__dist { flex: 1; min-width: 0; display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.su-rating__row { display: grid; grid-template-columns: 10px 1fr 34px; gap: 8px; align-items: center; font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-rating__bar { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-app-tray); }
.su-rating__fill { display: block; height: 100%; border-radius: inherit; background: var(--color-app-accent); transform-origin: left; transform: scaleX(0);
  transition: transform var(--dur-layout) var(--ease-app); }
.su-rating__dist[data-shown] .su-rating__fill { transform: scaleX(var(--p)); }
.su-rating__pct { text-align: right; }
.su-rating__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-app-line); }
.su-rating__prompt { font-size: 13px; color: var(--color-app-ink-2); }
.su-rating__input { display: inline-flex; gap: 2px; }
.su-rating__star { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; color: var(--color-app-line-strong);
  transition: color var(--dur-hover) var(--ease-app); }
.su-rating__star svg { width: 22px; height: 22px; }
.su-rating__star[data-on] { color: var(--color-app-accent); }
.su-rating__star[data-pop] svg { animation: su-rating-pop var(--dur-state) var(--ease-app); }
.su-rating__input[data-preview] .su-rating__star { color: var(--color-app-line-strong); }
.su-rating__input[data-preview] .su-rating__star[data-hover] { color: var(--color-app-accent-hover); }
.su-rating__star:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-rating__input[aria-disabled="true"] { opacity: .45; }
.su-rating__input[aria-disabled="true"] .su-rating__star { cursor: default; }
.su-rating__input > .su-rating__stars { --s: 22px; }
@keyframes su-rating-pop { 40% { transform: scale(1.25); } }

/* ============ Pagination ============ */
.su-pager { container: su-pager / inline-size; width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; font-family: var(--font-sans); }
.su-pager > * { margin: 0; }
.su-pager [hidden] { display: none; }
.su-pager__summary { font-size: 12.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-pager__summary b { font-weight: 600; color: var(--color-app-ink); }
.su-pager__nav { display: flex; align-items: center; gap: 2px; }
.su-pager__btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; box-sizing: border-box; border: 0; border-radius: var(--radius-ctrl);
  background: none; color: var(--color-app-ink-2); font: 400 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-pager__btn svg { width: 16px; height: 16px; }
.su-pager__btn:not([aria-current]):not([aria-disabled="true"]):hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-pager__btn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-pager__btn[aria-current="page"] { background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); font-weight: 600; cursor: default; }
.su-pager__btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.su-pager__gap { width: 28px; text-align: center; color: var(--color-app-muted); }
.su-pager__compact { display: none; padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--color-app-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-pager__size { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-app-muted); }
.su-pager__select { height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-surface); color: var(--color-app-ink);
  box-shadow: var(--shadow-ring); font: 500 13px/1 var(--font-sans); cursor: pointer; }
.su-pager__select:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
@container su-pager (max-width: 479px) {
  .su-pager__page, .su-pager__gap { display: none; }
  .su-pager__compact { display: inline-block; }
}

/* ============ Stepper (progress indicator) ============ */
.su-steps { container: su-steps / inline-size; width: min(520px, 100%); box-sizing: border-box; padding: 18px 16px 16px; background: var(--color-app-surface);
  border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-steps__header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.su-steps__title { margin: 0; font: 600 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-steps__count { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-steps__list { --m: 28px; display: grid; margin: 0; padding: 0; list-style: none; }
.su-steps__item { --line: var(--color-app-line); position: relative; display: grid; grid-template-columns: var(--m) 1fr; column-gap: 12px; align-items: start; min-width: 0; padding-bottom: 18px; }
.su-steps__item:last-child { padding-bottom: 0; }
.su-steps__marker { grid-row: span 2; position: relative; z-index: 1; display: grid; place-items: center; width: var(--m); height: var(--m); border-radius: 50%; box-sizing: border-box;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--color-app-tray); color: var(--color-app-muted);
  box-shadow: inset 0 0 0 1px var(--color-app-line-strong);
  transition: background-color var(--dur-state) var(--ease-app), color var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-steps__label { min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--color-app-muted); padding-top: 6px; }
.su-steps__status { min-width: 0; font-size: 11.5px; line-height: 1.35; color: var(--color-app-muted); }
/* connector: from this marker to the next one; fills (accent) once this step is done */
.su-steps__item:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--m) / 2 - 1px); top: calc(var(--m) + 4px); bottom: 4px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--color-app-accent), var(--color-app-accent)) 0 0 / 100% 0% no-repeat, var(--color-app-line);
  transition: background-size var(--dur-layout) var(--ease-app); }
.su-steps__item[data-state="done"]::after { background-size: 100% 100%, auto; }
.su-steps__item[data-state="done"] .su-steps__marker, .su-steps__item[data-state="error"] .su-steps__marker { font-size: 0; }
.su-steps__item[data-state="done"] .su-steps__marker { background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); box-shadow: none; }
.su-steps__item[data-state="done"] .su-steps__marker::before { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.su-steps__item[data-state="error"] .su-steps__marker { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); box-shadow: inset 0 0 0 2px var(--color-app-crit-deep); }
.su-steps__item[data-state="error"] .su-steps__marker::before { content: "!"; font-size: 14px; font-weight: 700; }
.su-steps__item[data-state="error"] .su-steps__status { color: var(--color-app-crit-deep); }
.su-steps__item[data-state="current"] .su-steps__marker { background: var(--color-app-surface); color: var(--color-app-accent);
  box-shadow: inset 0 0 0 2px var(--color-app-accent), 0 0 0 4px var(--color-app-accent-soft); }
.su-steps__item:is([data-state="done"], [data-state="current"], [data-state="error"]) .su-steps__label { font-weight: 600; color: var(--color-app-ink); }
.su-steps__footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-app-line); }
/* horizontal: markers on one row, connector between marker centres; ≥ 480px of component width only */
@container su-steps (min-width: 480px) {
  .su-steps[data-orientation="horizontal"] .su-steps__list { display: flex; }
  .su-steps[data-orientation="horizontal"] .su-steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; text-align: center; }
  .su-steps[data-orientation="horizontal"] .su-steps__label { padding-top: 0; }
  .su-steps[data-orientation="horizontal"] .su-steps__item:not(:last-child)::after { left: calc(50% + var(--m) / 2 + 4px); right: calc(-50% + var(--m) / 2 + 4px); top: calc(var(--m) / 2 - 1px);
    bottom: auto; width: auto; height: 2px; background-size: 0% 100%, auto; }
  .su-steps[data-orientation="horizontal"] .su-steps__item[data-state="done"]::after { background-size: 100% 100%, auto; }
}

/* ============ Confetti ============ */
.su-confetti__canvas { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; pointer-events: none; }
.su-confetti { position: relative; width: min(360px, 100%); box-sizing: border-box; margin: 0 auto; padding: 24px 16px 18px; text-align: center;
  background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-confetti__badge { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
  background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); box-shadow: 0 0 0 6px var(--color-app-surface); animation: su-confetti-pop .6s var(--ease-app) both; }
.su-confetti__badge svg { width: 24px; height: 24px; }
.su-confetti__title { margin: 12px 0 0; font-size: 16px; font-weight: 650; color: var(--color-app-ink); }
.su-confetti__sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--color-app-ink-2); }
.su-confetti__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
@keyframes su-confetti-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============ Tree View ============ */
.su-tree { --ind: 18px; container: su-tree / inline-size; box-sizing: border-box; width: min(300px, 100%); min-width: 0; padding: 8px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-tree__head { display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 2px 4px 8px; }
.su-tree__title { flex: 1; min-width: 0; margin: 0; font: 600 11px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-tree__list, .su-tree [role=group] { margin: 0; padding: 0; list-style: none; }
.su-tree [role=treeitem] { outline: none; }
.su-tree__row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px calc(8px + (var(--lvl, 1) - 1) * var(--ind)); border-radius: 6px;
  font: 400 13px/1.35 var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; user-select: none; transition: background-color var(--dur-hover) var(--ease-app); }
.su-tree [aria-expanded] > .su-tree__row { font-weight: 500; color: var(--color-app-ink); }
.su-tree__row:hover { background: var(--color-app-hover); }
.su-tree [aria-selected="true"] > .su-tree__row { background: var(--color-app-accent-soft); color: var(--color-app-accent); font-weight: 600; }
.su-tree [aria-disabled="true"] > .su-tree__row { opacity: .5; cursor: not-allowed; }
.su-tree [role=treeitem]:focus-visible > .su-tree__row { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-tree__twisty { flex: none; display: inline-grid; place-items: center; width: 12px; height: 12px; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-tree__twisty svg { width: 12px; height: 12px; }
.su-tree [aria-expanded="true"] > .su-tree__row .su-tree__twisty { transform: rotate(90deg); }
.su-tree__icon { flex: none; display: inline-flex; color: var(--color-app-ink-2); }
.su-tree [aria-selected="true"] > .su-tree__row .su-tree__icon { color: inherit; }
.su-tree__icon svg { width: 15px; height: 15px; }
.su-tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-tree__count { flex: none; margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
/* group height: grid rows 0fr ↔ 1fr; collapsed children leave tab/AT order via visibility once the fold ends */
.su-tree__wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-layout) var(--ease-app), visibility 0s; }
.su-tree__wrap > [role=group] { position: relative; min-height: 0; overflow: hidden; }
.su-tree [aria-expanded="false"] > .su-tree__wrap { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-layout) var(--ease-app), visibility 0s var(--dur-layout); }
.su-tree__wrap > [role=group]::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: calc(8px + (var(--lvl, 1) - 1) * var(--ind) + 5.5px); width: 1px;
  background: var(--color-app-line); pointer-events: none; }
.su-tree__loading { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px calc(8px + var(--lvl, 1) * var(--ind)); font: 400 12.5px/1.35 var(--font-sans); color: var(--color-app-muted); }
.su-tree__loading .su-spin { width: 14px; height: 14px; flex: none; }
.su-tree__loading[data-error] { color: var(--color-app-crit-deep); }
@container su-tree (max-width: 260px) { .su-tree__list { --ind: 12px; } .su-tree__row { gap: 6px; } }
/* ============ Drawer ============ */
/* behavior is the Dialog kind (native <dialog>); this only places it on an edge */
.su-drawer { --w: 400px; --su-dw-from: translateX(100%); position: fixed; inset: 0 0 0 auto; z-index: 40; box-sizing: border-box; width: min(var(--w), 100vw);
  max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
  background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-lg); font-family: var(--font-sans); }
.su-drawer[open] { display: flex; flex-direction: column; animation: su-dw-in var(--dur-layout) var(--ease-app); }
.su-drawer[data-closing] { animation: su-dw-out var(--dur-layout) var(--ease-app) forwards; }
.su-drawer[data-side="start"] { --su-dw-from: translateX(-100%); inset: 0 auto 0 0; }
.su-drawer[data-side="bottom"] { --su-dw-from: translateY(100%); inset: auto 0 0 0; width: 100%; height: auto; max-height: 85vh; max-height: 85dvh;
  border-radius: var(--radius-card) var(--radius-card) 0 0; }
.su-drawer::backdrop { background: rgb(0 0 0 / .32); animation: su-dlg-fade var(--dur-state) var(--ease-app); }
.su-drawer[data-closing]::backdrop { animation: su-dlg-fade-out var(--dur-state) var(--ease-app) forwards; }
@keyframes su-dw-in { from { transform: var(--su-dw-from); } }
@keyframes su-dw-out { to { transform: var(--su-dw-from); } }
.su-drawer__panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.su-drawer__head { position: relative; flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--color-app-line); }
.su-drawer[data-side="bottom"] .su-drawer__head { padding-top: 18px; touch-action: none; }
.su-drawer[data-side="bottom"] .su-drawer__head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
  border-radius: var(--radius-pill); background: var(--color-app-line-strong); }
.su-drawer__heading { flex: 1; min-width: 0; }
.su-drawer__sub { margin: 0; font: 400 11px/1.4 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-drawer__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-drawer__head > .su-chip { flex: none; }
.su-drawer__x { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-ctrl);
  background: none; color: var(--color-app-muted); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-drawer__x:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-drawer__x svg { width: 16px; height: 16px; }
.su-drawer :is(.su-drawer__x, .su-drawer__body):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-drawer__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 16px 12px; font-size: 12.5px; color: var(--color-app-ink-2); }
.su-drawer:not([data-side="bottom"]) .su-drawer__body { touch-action: pan-y pinch-zoom; } /* horizontal moves stay pointer events → swipe-to-close */
.su-drawer__amount { margin: 0; padding: 4px 0 6px; font: 600 22px/1.25 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-drawer__dl { margin: 0; }
.su-drawer__dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: 12.5px; }
.su-drawer__dl dt { color: var(--color-app-muted); }
.su-drawer__dl dd { margin: 0; text-align: right; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-drawer__section { margin: 12px 0 4px; font: 600 11px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-drawer__foot { flex: none; display: flex; gap: 8px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-app-line); background: var(--color-app-surface); }
.su-drawer__foot > .su-btn { flex: 1; }
@media (max-width: 639px) { .su-drawer:not([data-side="bottom"]) { width: 100vw; } }
/* ============ Carousel ============ */
.su-carousel { --gap: 10px; --edge: 14px; container: su-carousel / inline-size; box-sizing: border-box; width: min(400px, 100%); padding: 14px 0;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-carousel__head { display: flex; align-items: center; gap: 8px; padding: 0 var(--edge) 12px; }
.su-carousel__titles { flex: 1; min-width: 0; }
.su-carousel__eyebrow { margin: 0; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-carousel__title { margin: 0; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-carousel__controls { flex: none; display: flex; align-items: center; gap: 6px; }
.su-carousel__count { margin-right: 4px; font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-carousel__controls .su-btn { width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--radius-pill); }
.su-carousel__controls .su-btn svg { width: 16px; height: 16px; }
.su-carousel__controls .su-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.su-carousel__play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.su-carousel__viewport { position: relative; display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--edge); padding: 0 var(--edge); scroll-behavior: smooth; scrollbar-width: none; outline: none; }
.su-carousel__viewport::-webkit-scrollbar { display: none; }
.su-carousel__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); border-radius: 12px; }
.su-carousel__slide { flex: 0 0 84%; min-width: 0; box-sizing: border-box; scroll-snap-align: start; position: relative; overflow: hidden; display: flex; gap: 12px;
  min-height: 140px; padding: 14px; border-radius: 12px; background: var(--color-app-tray); }
.su-carousel[data-per-view]:not([data-per-view="auto"]) .su-carousel__slide { flex-basis: calc((100% - (var(--per, 1) - 1) * var(--gap)) / var(--per, 1)); }
.su-carousel__slide[data-tone="accent"] { background: var(--color-app-accent-soft); }
.su-carousel__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.su-carousel__name { margin: auto 0 0; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-carousel__name a { color: inherit; text-decoration: none; border-radius: 4px; }
.su-carousel__name a:hover { text-decoration: underline; }
.su-carousel__name a:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-carousel__text { margin: 2px 0 0; font-size: 12px; color: var(--color-app-ink-2); }
.su-carousel__art { flex: none; align-self: center; width: 64px; height: 64px; color: var(--color-app-accent); }
.su-carousel__art svg { width: 100%; height: 100%; }
.su-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.su-carousel__dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-app-line-strong); cursor: pointer;
  transition: width var(--dur-state) var(--ease-app), background-color var(--dur-state) var(--ease-app); }
.su-carousel__dots button[data-active] { width: 18px; background: var(--color-app-accent); }
.su-carousel[data-dragging] .su-carousel__viewport { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
@container su-carousel (max-width: 359px) {
  .su-carousel__slide, .su-carousel[data-per-view] .su-carousel__slide { flex-basis: 100%; }
  .su-carousel__head { flex-wrap: wrap; }
}
/* ============ Date Picker ============ */
.su-datepicker { position: relative; display: inline-block; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-datepicker[data-inline] { display: block; width: min(272px, 100%); }
.su-datepicker__field { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); font: 400 13.5px/1 var(--font-sans); color: var(--color-app-ink); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: box-shadow var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-datepicker__field:hover { background: var(--color-app-hover); }
.su-datepicker__field[aria-expanded="true"], .su-datepicker__field:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-datepicker__field svg { width: 16px; height: 16px; flex: none; color: var(--color-app-muted); }
.su-datepicker__value[data-empty] { color: var(--color-app-muted); }
.su-datepicker__panel { box-sizing: border-box; display: grid; gap: 8px; width: min(272px, calc(100vw - 32px)); padding: 12px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-datepicker:not([data-inline]) .su-datepicker__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; transform-origin: top left; animation: su-pop var(--dur-state) var(--ease-app); }
.su-datepicker[data-inline] .su-datepicker__panel { width: 100%; }
.su-datepicker__panel[hidden] { display: none; }
.su-datepicker__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.su-datepicker__month { font: 600 13.5px/1.2 var(--font-sans); color: var(--color-app-ink); }
.su-datepicker__nav { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-ctrl); background: none;
  color: var(--color-app-ink-2); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-datepicker__nav:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-datepicker__nav svg { width: 16px; height: 16px; }
.su-datepicker__grid { border-collapse: separate; border-spacing: 2px; margin: -2px; width: calc(100% + 4px); table-layout: fixed; }
.su-datepicker__grid[data-slide="next"] { animation: su-dp-next var(--dur-state) var(--ease-app); }
.su-datepicker__grid[data-slide="prev"] { animation: su-dp-prev var(--dur-state) var(--ease-app); }
@keyframes su-dp-next { from { transform: translateX(8px); opacity: .4; } }
@keyframes su-dp-prev { from { transform: translateX(-8px); opacity: .4; } }
.su-datepicker__grid th { padding: 0 0 2px; font: 600 11px/1.6 var(--font-sans); color: var(--color-app-muted); text-align: center; }
.su-datepicker__grid td { position: relative; height: 30px; padding: 0; border-radius: var(--radius-ctrl); text-align: center; font: 400 12.5px/30px var(--font-sans);
  font-variant-numeric: tabular-nums; color: var(--color-app-ink); cursor: pointer; outline: none; user-select: none; transition: background-color var(--dur-hover) var(--ease-app); }
.su-datepicker__grid td:hover { background: var(--color-app-hover); }
.su-datepicker__grid td[data-out] { color: var(--color-app-muted); opacity: .55; }
.su-datepicker__grid td[aria-current="date"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.su-datepicker__grid td[aria-selected="true"] { background: var(--color-app-accent); color: var(--color-app-on-accent); font-weight: 600; opacity: 1; }
.su-datepicker__grid td[aria-disabled="true"] { color: var(--color-app-muted); opacity: .45; text-decoration: line-through; cursor: not-allowed; background: none; }
.su-datepicker__grid td:focus-visible, .su-datepicker__nav:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-datepicker__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding-top: 10px; border-top: 1px solid var(--color-app-line); }
.su-datepicker__sel { min-width: 0; font-size: 12.5px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
/* ============ Navbar ============ */
.su-nav { container: su-nav / inline-size; box-sizing: border-box; width: 100%; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 8px 10px 8px 14px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font-family: var(--font-sans); color: var(--color-app-ink); transition: box-shadow var(--dur-state) var(--ease-app); }
.su-nav[data-sticky]:not([data-sticky="false"]) { position: sticky; top: var(--su-nav-top, 0px); z-index: 20; box-shadow: var(--shadow-ring-card); }
.su-nav[data-sticky]:not([data-sticky="false"])[data-scrolled] { box-shadow: var(--shadow-ring-card), var(--shadow-nav); }
.su-nav__brand { flex: none; display: flex; align-items: center; gap: 8px; border-radius: 8px; font: 650 14px/1 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); text-decoration: none; }
.su-nav__logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-nav__logo svg { width: 14px; height: 14px; }
.su-nav__links { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; }
.su-nav__links a, .su-nav__panel a { padding: 6px 10px; border-radius: var(--radius-ctrl); font: 500 13px/1.3 var(--font-sans); color: var(--color-app-ink-2); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-nav__links a:not([aria-current]):hover, .su-nav__panel a:not([aria-current]):hover { color: var(--color-app-ink); background: var(--color-app-hover); }
.su-nav__links a[aria-current="page"], .su-nav__panel a[aria-current="page"] { color: var(--color-app-ink); font-weight: 600; background: var(--color-app-tray); }
.su-nav__actions { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.su-nav__search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 8px; border: 0; border-radius: var(--radius-ctrl); background: none; box-shadow: var(--shadow-ring);
  font: 400 12.5px/1 var(--font-sans); color: var(--color-app-muted); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-nav__search:hover { background: var(--color-app-hover); }
.su-nav__search svg { width: 14px; height: 14px; flex: none; }
.su-nav__icon, .su-nav__toggle { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-ctrl);
  background: none; color: var(--color-app-ink-2); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-nav__icon:hover, .su-nav__toggle:hover, .su-nav__toggle[aria-expanded="true"] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-nav__icon svg, .su-nav__toggle svg { width: 16px; height: 16px; }
.su-nav__dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-app-accent); box-shadow: 0 0 0 2px var(--color-app-surface); }
.su-nav__dot[hidden] { display: none; }
.su-nav__avatar { display: inline-grid; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.su-nav :is(a, button):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-nav__toggle { display: none; }
.su-nav[data-collapsed] .su-nav__links { display: none; }
.su-nav[data-collapsed] .su-nav__toggle { display: inline-grid; }
.su-nav__panel { flex: 1 0 100%; display: grid; gap: 2px; padding: 8px 0 2px; border-top: 1px solid var(--color-app-line); animation: su-nav-drop var(--dur-state) var(--ease-app); }
.su-nav__panel[hidden], .su-nav:not([data-collapsed]) .su-nav__panel { display: none; }
.su-nav__panel a { padding: 10px; font-size: 14px; }
@keyframes su-nav-drop { from { opacity: 0; transform: translateY(-6px); } }
@container su-nav (max-width: 479px) {
  .su-nav__search { width: 30px; padding: 0; justify-content: center; box-shadow: none; color: var(--color-app-ink-2); }
  .su-nav__search-label, .su-nav__search .su-kbd { display: none; }
  .su-nav__actions { gap: 2px; }
}
@container su-nav (max-width: 299px) { .su-nav__actions { gap: 0; } }
@media (max-width: 359px) { .su-nav { gap: 8px 6px; padding: 8px 6px 8px 10px; } }


/* ============ Sidebar ============ */
/* the root is a one-column grid, so the rail width animates through grid-template-columns; the host layout owns the space next to it */
.su-sidebar { --su-sb-w: 240px; --su-sb-rail: 56px; box-sizing: border-box; flex: none; display: grid; grid-template-columns: minmax(0, calc(var(--su-sb-w) - 20px));
  grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; padding: 10px; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 13px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-sidebar[data-anim] { transition: grid-template-columns var(--dur-layout) var(--ease-app), padding var(--dur-layout) var(--ease-app); }
.su-sidebar[data-collapsed]:not([data-mobile]) { grid-template-columns: minmax(0, calc(var(--su-sb-rail) - 16px)); padding: 10px 8px; }
.su-sidebar :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.su-sidebar__top { display: flex; align-items: center; gap: 4px; min-width: 0; padding-bottom: 8px; }
.su-sidebar__top > .su-menu, .su-sidebar__top > :first-child:not(.su-sidebar__collapse) { flex: 1; min-width: 0; }
.su-sidebar__ws, .su-sidebar__user { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 4px 6px; border: 0;
  border-radius: var(--radius-ctrl); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-sidebar__ws:hover, .su-sidebar__user:hover, .su-sidebar__ws[aria-expanded="true"], .su-sidebar__user[aria-expanded="true"] { background: var(--color-app-hover); }
.su-sidebar__logo { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--color-app-accent); color: var(--color-app-on-accent); font: 700 12px/1 var(--font-sans); }
.su-sidebar__who { flex: 1; min-width: 0; display: grid; }
.su-sidebar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--color-app-ink); }
.su-sidebar__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--color-app-muted); }
.su-sidebar__ws > svg, .su-sidebar__user > svg { flex: none; width: 14px; height: 14px; color: var(--color-app-muted); }
.su-sidebar__collapse { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-ctrl);
  background: none; color: var(--color-app-muted); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-sidebar__collapse:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-sidebar__collapse svg { width: 16px; height: 16px; transition: transform var(--dur-layout) var(--ease-app); }
.su-sidebar[data-collapsed]:not([data-mobile]) .su-sidebar__collapse svg { transform: scaleX(-1); }
.su-sidebar__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px; }
.su-sidebar__search { box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 32px; margin-bottom: 6px; padding: 0 6px 0 8px; border: 0;
  border-radius: var(--radius-ctrl); background: none; box-shadow: var(--shadow-ring); font: 400 12.5px/1 var(--font-sans); color: var(--color-app-muted); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-sidebar__search:hover { background: var(--color-app-hover); }
.su-sidebar__search > svg { flex: none; width: 15px; height: 15px; }
.su-sidebar__search .su-sidebar__label { flex: 1; text-align: left; }
.su-sidebar__item { position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 32px; padding: 6px 8px; border: 0;
  border-radius: var(--radius-ctrl); background: none; font: 500 13px/1.3 var(--font-sans); color: var(--color-app-ink-2); text-decoration: none; text-align: left; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
button.su-sidebar__item { width: 100%; }
.su-sidebar__item:not([aria-current]):hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-sidebar__item[aria-current="page"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); font-weight: 600; }
.su-sidebar__item > svg { flex: none; width: 16px; height: 16px; }
.su-sidebar__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-sidebar__item .su-count { flex: none; margin-left: auto; background: none; color: var(--color-app-muted); }
.su-sidebar__item[aria-current="page"] .su-count { color: var(--color-app-accent); }
.su-sidebar__dot { flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 3px; background: var(--c, var(--color-app-accent)); }
.su-sidebar__sect { box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; margin-top: 10px; padding: 4px 8px; border: 0; border-radius: var(--radius-ctrl);
  background: none; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); text-align: left; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-sidebar__sect:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-sidebar__chev { display: inline-grid; margin-left: auto; transition: transform var(--dur-state) var(--ease-app); }
.su-sidebar__chev svg { width: 13px; height: 13px; }
.su-sidebar__sect[aria-expanded="false"] .su-sidebar__chev { transform: rotate(-90deg); }
.su-sidebar__foot { min-width: 0; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-app-line); }
.su-sidebar__foot .su-combo__av { width: 28px; height: 28px; }
.su-sidebar :is(a, button):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
/* icon rail (not in drawer mode): labels stay in the accessibility tree, visible text collapses */
.su-sidebar[data-collapsed]:not([data-mobile]) :is(.su-sidebar__label, .su-sidebar__who, .su-sidebar__search .su-kbd, .su-sidebar__ws > svg, .su-sidebar__user > svg) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.su-sidebar[data-collapsed]:not([data-mobile]) .su-sidebar__top { flex-direction: column; align-items: stretch; }
.su-sidebar[data-collapsed]:not([data-mobile]) :is(.su-sidebar__item, .su-sidebar__search, .su-sidebar__ws, .su-sidebar__user, .su-sidebar__collapse) { justify-content: center; width: 100%; padding-inline: 0; }
.su-sidebar[data-collapsed]:not([data-mobile]) .su-sidebar__search { box-shadow: none; color: var(--color-app-ink-2); }
.su-sidebar[data-collapsed]:not([data-mobile]) .su-sidebar__item .su-count { position: absolute; top: 1px; right: 2px; min-width: 16px; height: 15px; padding: 0 3px; font-size: 9.5px;
  background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-sidebar[data-collapsed]:not([data-mobile]) .su-sidebar__sect { justify-content: center; height: 20px; margin-top: 8px; padding: 0; }
.su-sidebar[data-collapsed]:not([data-mobile]) .su-sidebar__sect::before { content: ""; position: absolute; left: 25%; right: 25%; top: 0; height: 1px; background: var(--color-app-line); }
.su-sidebar[data-collapsed]:not([data-mobile]) .su-sidebar__sect { position: relative; }
.su-sidebar[data-collapsed]:not([data-mobile]) .su-sidebar__chev { margin: 0; }
/* off-canvas drawer below data-breakpoint: the host must be position: relative (or set --su-sb-pos: fixed) */
.su-sidebar[data-mobile] { position: var(--su-sb-pos, absolute); z-index: 30; inset: 0 auto 0 0; width: min(var(--su-sb-w), calc(100% - 48px)); max-width: calc(100% - 48px);
  grid-template-columns: minmax(0, 1fr); border-radius: 0 var(--radius-card) var(--radius-card) 0; box-shadow: var(--shadow-ring-card), var(--shadow-lg);
  transform: translateX(-105%); visibility: hidden; transition: transform var(--dur-layout) var(--ease-app), visibility 0s linear var(--dur-layout); }
.su-sidebar[data-mobile][data-open] { transform: none; visibility: visible; transition: transform var(--dur-layout) var(--ease-app); }
.su-sidebar__scrim { position: var(--su-sb-pos, absolute); z-index: 29; inset: 0; background: rgb(0 0 0 / .32); animation: su-sb-fade var(--dur-state) var(--ease-app); }
@keyframes su-sb-fade { from { opacity: 0; } }
.su-sidebar__menu { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-ctrl); background: none;
  color: var(--color-app-ink-2); cursor: pointer; }
.su-sidebar__menu:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-sidebar__menu:focus-visible { outline: 2px solid var(--color-app-focus); }
.su-sidebar__menu svg { width: 18px; height: 18px; }
/* ============ Chart tooltip (shared by Line, Sparkline, Pie, Funnel, Waterfall) ============ */
.su-ctip { position: absolute; z-index: 3; left: 0; top: 0; transform: translateY(-100%); box-sizing: border-box; display: grid; gap: 2px; padding: 6px 9px; border-radius: var(--radius-ctrl);
  pointer-events: none; white-space: nowrap; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 11px/1.35 var(--font-sans); color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-ctip__k { color: var(--color-app-muted); }
.su-ctip b { margin-left: 8px; font-weight: 600; color: var(--color-app-ink); }
.su-ctip__row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.su-ctip__row i { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--color-app-accent)); }
.su-ctip__row b { margin-left: auto; padding-left: 8px; }

/* ============ Line Chart ============ */
.su-linechart { container: su-linechart / inline-size; box-sizing: border-box; width: min(440px, 100%); padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-linechart__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.su-linechart__title { flex: 1; min-width: 150px; }
.su-linechart__label { margin: 0; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-linechart__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 4px 0 0; }
.su-linechart__value { font: 600 22px/1.2 var(--font-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-linechart__legend { display: flex; flex-wrap: wrap; gap: 2px; margin: -2px -6px 0 0; }
.su-linechart__key { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px; border: 0; border-radius: var(--radius-ctrl); background: none; cursor: pointer;
  font: 500 11.5px/1 var(--font-sans); color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-linechart__key:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-linechart__key:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-linechart__key[aria-pressed="false"] { color: var(--color-app-muted); text-decoration: line-through; }
.su-linechart__swatch { width: 12px; height: 0; border-top: 2px solid var(--color-app-accent); border-radius: 2px; }
.su-linechart__key[data-key="previous"] .su-linechart__swatch { border-top: 2px dashed var(--color-app-muted); }
.su-linechart__key[aria-pressed="false"] .su-linechart__swatch { opacity: .4; }
.su-linechart__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; margin-top: 14px; }
.su-linechart__y { position: relative; min-width: 22px; font: 400 10px/1 var(--font-sans); color: var(--color-app-muted); text-align: right; font-variant-numeric: tabular-nums; }
.su-linechart__y span { position: absolute; right: 0; bottom: calc(var(--t) * 100%); transform: translateY(50%); white-space: nowrap; }
.su-linechart__plot { position: relative; height: 140px; border-radius: 4px; touch-action: pan-y; cursor: crosshair; }
.su-linechart__plot:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 4px; }
.su-linechart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.su-linechart__grid line { stroke: var(--color-app-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.su-linechart__area { fill: var(--color-app-accent-soft); opacity: .7; }
.su-linechart__prev { fill: none; stroke: var(--color-app-muted); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* dash only inside the keyframes: with non-scaling-stroke a wide plot mis-measures pathLength and would cut the line short */
.su-linechart__line { fill: none; stroke: var(--color-app-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  animation: su-line var(--dur-layout) var(--ease-app); }
.su-linechart__cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--color-app-line-strong); pointer-events: none; }
.su-linechart__dot { position: absolute; z-index: 1; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: var(--color-app-surface); box-shadow: inset 0 0 0 2.5px var(--color-app-accent); }
.su-linechart__dot[data-key="previous"] { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: inset 0 0 0 2px var(--color-app-muted); }
.su-linechart .su-ctip__row[data-key="previous"] i { background: none; border-top: 2px dashed var(--color-app-muted); height: 0; border-radius: 0; }
.su-linechart__x { position: relative; height: 14px; font: 400 10.5px/14px var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-linechart__x span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(calc(var(--x) * -100%)); white-space: nowrap; }
.su-linechart__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 12.5px; color: var(--color-app-muted); }
@container su-linechart (max-width: 340px) {
  .su-linechart__legend { margin: 0; width: 100%; }
  .su-linechart__plot { height: 120px; }
}
/* ============ Sparkline ============ */
.su-spark__card { box-sizing: border-box; width: min(400px, 100%); padding: 14px 16px 6px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-spark__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.su-spark__heading { margin: 0; font: 600 14px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-spark__hint { font-size: 11.5px; color: var(--color-app-muted); }
.su-spark { container: su-spark / inline-size; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 0; font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-spark__card > .su-spark { border-top: 1px solid var(--color-app-line); }
.su-spark__text { flex: 1; min-width: 0; }
.su-spark__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--color-app-ink); }
.su-spark__sub { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--color-app-muted); }
.su-spark__plot { position: relative; flex: 0 1 84px; min-width: 48px; height: 28px; border-radius: 4px; }
.su-spark__plot[tabindex] { cursor: crosshair; }
.su-spark__plot:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }
.su-spark__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.su-spark__area { fill: var(--color-app-accent); opacity: .12; }
/* dash only inside the keyframes (non-scaling stroke mis-measures pathLength when the plot stretches) */
.su-spark__line { fill: none; stroke: var(--color-app-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  animation: su-line var(--dur-layout) var(--ease-app); }
circle.su-spark__end { fill: var(--color-app-accent); }
span.su-spark__end, .su-spark__hover { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--color-app-accent); pointer-events: none; }
.su-spark__hover { z-index: 1; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--color-app-surface); box-shadow: inset 0 0 0 2px var(--color-app-accent); }
.su-spark__nums { flex: none; width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.su-spark__value { display: block; font-weight: 600; color: var(--color-app-ink); }
.su-spark__delta { display: block; font-size: 11.5px; font-weight: 500; color: var(--color-app-muted); white-space: nowrap; }
.su-spark__delta[data-tone="ok"] { color: var(--color-app-ok-deep); }
.su-spark__delta[data-tone="crit"] { color: var(--color-app-crit-deep); }
.su-spark .su-ctip { padding: 4px 7px; }
@container su-spark (max-width: 250px) { .su-spark__plot { flex-basis: 56px; } .su-spark__nums { width: 64px; } }
/* ============ Pie Chart ============ */
.su-pie { --su-pie-1: var(--color-app-accent); --su-pie-2: color-mix(in srgb, var(--color-app-accent) 66%, var(--color-app-surface));
  --su-pie-3: color-mix(in srgb, var(--color-app-accent) 40%, var(--color-app-surface)); --su-pie-4: color-mix(in srgb, var(--color-app-ink-2) 70%, var(--color-app-surface));
  --su-pie-5: color-mix(in srgb, var(--color-app-ink-2) 45%, var(--color-app-surface)); --su-pie-6: color-mix(in srgb, var(--color-app-accent) 22%, var(--color-app-surface));
  --su-pie-other: var(--color-app-line-strong);
  container: su-pie / inline-size; box-sizing: border-box; width: min(400px, 100%); padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-pie__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.su-pie__kicker { margin: 0; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-pie__title { margin: 0; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-pie__body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.su-pie__chart { position: relative; flex: none; width: 132px; height: 132px; margin: 0 auto; border-radius: 50%; }
.su-pie__chart:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 4px; }
.su-pie__chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.su-pie__track { fill: none; stroke: var(--color-app-tray); }
.su-pie__seg { fill: none; cursor: pointer; transition: stroke-dasharray var(--dur-layout) var(--ease-app), stroke-dashoffset var(--dur-layout) var(--ease-app), transform var(--dur-hover) var(--ease-app), opacity var(--dur-hover) var(--ease-app);
  animation: su-pie-sweep var(--dur-layout) var(--ease-app) backwards; }
.su-pie__seg[data-off] { pointer-events: none; }
.su-pie__seg[data-active] { transform: translate(var(--dx), var(--dy)); }
.su-pie__chart:has(.su-pie__seg[data-active]) .su-pie__seg:not([data-active]) { opacity: .55; }
@keyframes su-pie-sweep { from { stroke-dasharray: 0 100; } }
.su-pie__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.su-pie__total { font: 600 17px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-pie__cap { font-size: 11px; color: var(--color-app-muted); }
.su-pie__legend { flex: 1; min-width: 170px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.su-pie__legend li { border-bottom: 1px solid var(--color-app-line); }
.su-pie__legend li:last-child { border-bottom: 0; }
.su-pie__row { box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 4px; border: 0; border-radius: 6px; background: none;
  font: inherit; color: var(--color-app-ink-2); text-align: left; transition: background-color var(--dur-hover) var(--ease-app); }
button.su-pie__row { cursor: pointer; }
.su-pie__row[data-active] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-pie__row:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-pie__row[aria-pressed="false"] :is(.su-pie__label, .su-pie__val) { color: var(--color-app-muted); text-decoration: line-through; }
.su-pie__row[aria-pressed="false"] .su-pie__swatch { background: none; box-shadow: inset 0 0 0 1.5px var(--c); }
.su-pie__swatch { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.su-pie__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-pie__val { font-size: 12px; color: var(--color-app-muted); }
.su-pie__pct { width: 34px; text-align: right; font-weight: 600; color: var(--color-app-ink); }
.su-pie__empty { margin: 0; padding: 32px 0; text-align: center; font-size: 12.5px; color: var(--color-app-muted); }
@container su-pie (max-width: 340px) { .su-pie__body { flex-direction: column; align-items: stretch; } .su-pie__legend { min-width: 0; } }
/* ============ Funnel Chart ============ */
.su-funnel { container: su-funnel / inline-size; position: relative; box-sizing: border-box; width: min(480px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-funnel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; }
.su-funnel__title { margin: 0; font: 600 13px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-funnel__overall { font-size: 12px; color: var(--color-app-ink-2); }
.su-funnel__overall [data-overall] { font-weight: 600; color: var(--color-app-accent); font-variant-numeric: tabular-nums; }
.su-funnel__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.su-funnel__stage { display: grid; grid-template-columns: minmax(84px, .9fr) minmax(0, 1.6fr) minmax(52px, auto); align-items: center; gap: 10px; padding: 2px 4px; margin: -2px -4px;
  border-radius: var(--radius-ctrl); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-funnel__stage[data-active] { background: var(--color-app-hover); }
.su-funnel__stage:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 0; }
.su-funnel__name { display: flex; flex-direction: column; min-width: 0; }
.su-funnel__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--color-app-ink); }
.su-funnel__rate { font-size: 11px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-funnel__rate[data-tone="crit"] { align-self: flex-start; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); font-weight: 600; }
.su-funnel__rate[data-tone="warn"] { align-self: flex-start; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-app-warn-soft); color: var(--color-app-ink); font-weight: 600; }
.su-funnel__track { display: flex; justify-content: center; height: 28px; border-radius: 7px; background: var(--color-app-tray); }
.su-funnel__bar { width: var(--w); min-width: 6px; height: 100%; border-radius: 7px; background: var(--color-app-accent); opacity: var(--o);
  transform-origin: center; animation: su-funnel-grow var(--dur-layout) var(--ease-app) both paused; animation-delay: calc(var(--i) * 70ms); }
.su-funnel[data-in] .su-funnel__bar { animation-play-state: running; }
.su-funnel__stage[data-worst] .su-funnel__bar { background: var(--color-app-crit); }
.su-funnel__stage[data-warn] .su-funnel__bar { background: var(--color-app-warn); }
@keyframes su-funnel-grow { from { transform: scaleX(0); } }
.su-funnel__count { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.su-funnel__count b { font-weight: 600; color: var(--color-app-ink); }
.su-funnel__count small { font-size: 11px; color: var(--color-app-muted); }
.su-funnel__empty { padding: 24px 0; text-align: center; font-size: 12.5px; color: var(--color-app-muted); }
/* vertical: columns, bars grow up from the floor */
.su-funnel[data-orientation="vertical"] .su-funnel__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; }
.su-funnel[data-orientation="vertical"] .su-funnel__stage { grid-template-columns: none; grid-template-rows: auto 120px auto; align-items: end; gap: 6px; text-align: center; }
.su-funnel[data-orientation="vertical"] .su-funnel__name { order: 3; align-items: center; }
.su-funnel[data-orientation="vertical"] .su-funnel__count { order: 1; text-align: center; }
.su-funnel[data-orientation="vertical"] .su-funnel__track { order: 2; height: 100%; flex-direction: column; justify-content: flex-end; }
.su-funnel[data-orientation="vertical"] .su-funnel__bar { width: 100%; height: var(--w); min-height: 4px; transform-origin: bottom; animation-name: su-funnel-grow-y; }
.su-funnel[data-orientation="vertical"] .su-funnel__rate[data-tone] { align-self: center; }
@keyframes su-funnel-grow-y { from { transform: scaleY(0); } }
/* narrow: label + count on one line above the bar */
@container su-funnel (max-width: 360px) {
  .su-funnel:not([data-orientation="vertical"]) .su-funnel__stage { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .su-funnel:not([data-orientation="vertical"]) .su-funnel__track { grid-column: 1 / -1; grid-row: 2; height: 20px; }
  .su-funnel:not([data-orientation="vertical"]) .su-funnel__count { grid-row: 1; grid-column: 2; }
  .su-funnel[data-orientation="vertical"] .su-funnel__stage { grid-template-rows: auto 96px auto; gap: 4px; }
  .su-funnel[data-orientation="vertical"] .su-funnel__list { gap: 6px; }
  .su-funnel[data-orientation="vertical"] .su-funnel__label { white-space: normal; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.3; }
  .su-funnel[data-orientation="vertical"] .su-funnel__count b { font-size: 12px; overflow-wrap: anywhere; }
}
/* ============ Waterfall Chart ============ */
.su-waterfall { box-sizing: border-box; width: min(520px, 100%); padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-waterfall__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.su-waterfall__title { margin: 0; font: 600 13px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-waterfall__plot { position: relative; min-width: 0; }
.su-waterfall__svg { display: block; width: 100%; height: 200px; overflow: visible; font-family: var(--font-sans); }
.su-waterfall__grid { stroke: var(--color-app-line); stroke-width: 1; }
.su-waterfall__zero { stroke: var(--color-app-line-strong); }
.su-waterfall__tick { fill: var(--color-app-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.su-waterfall__link { stroke: var(--color-app-line-strong); stroke-width: 1; stroke-dasharray: 2 2; }
.su-waterfall__bar { fill: var(--color-app-accent); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity var(--dur-hover) var(--ease-app); }
.su-waterfall__bar[data-kind="up"] { fill: var(--color-app-ok); }
.su-waterfall__bar[data-kind="down"] { fill: var(--color-app-crit); }
.su-waterfall__bar[data-below] { transform-origin: 50% 0; }
.su-waterfall__svg:has([data-active]) .su-waterfall__bar:not([data-active]) { opacity: .5; }
.su-waterfall__svg[data-anim] .su-waterfall__bar { animation: su-waterfall-grow var(--dur-layout) var(--ease-app) both paused; animation-delay: calc(var(--i) * 60ms); }
.su-waterfall[data-in] .su-waterfall__svg[data-anim] .su-waterfall__bar { animation-play-state: running; }
@keyframes su-waterfall-grow { from { transform: scaleY(0); } }
.su-waterfall__val { fill: var(--color-app-ink); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.su-waterfall__cat { fill: var(--color-app-ink-2); font-size: 10.5px; }
.su-waterfall__empty { fill: var(--color-app-muted); font-size: 12.5px; }
.su-waterfall__hits { position: absolute; inset: 0; pointer-events: none; }
.su-waterfall__hit { position: absolute; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; pointer-events: auto; }
.su-waterfall__hit:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }

/* ============ FAQ Section ============ */
/* composes .su-accordion__item (accordion kind); breakpoints follow the section's own width (padding 24 → 2 columns at section ≥ 840px) */
.su-faq { container: su-faq / inline-size; width: min(960px, 100%); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 48px;
  padding: 24px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card);
  font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-faq__intro { flex: 1 1 100%; min-width: 0; }
.su-faq__list { flex: 1 1 100%; min-width: 0; border-top: 1px solid var(--color-app-line); }
@container su-faq (min-width: 792px) { .su-faq__intro { flex: 0 0 240px; } .su-faq__list { flex: 1 1 0; } }
.su-faq__eyebrow { margin: 0; font: 600 11px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-faq__title { margin: 6px 0 8px; font: 700 clamp(20px, 3cqi, 26px)/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); text-wrap: balance; }
.su-faq__lede { margin: 0 0 14px; max-width: 42ch; font-size: 13.5px; color: var(--color-app-ink-2); }
.su-faq .su-accordion__item { border-top: 0; border-bottom: 1px solid var(--color-app-line); }
.su-faq .su-accordion__summary { gap: 16px; padding: 14px 0; font-weight: 600; transition: color var(--dur-hover) var(--ease-app); }
.su-faq .su-accordion__summary:hover { background: none; color: var(--color-app-accent); }
.su-faq .su-accordion__summary:focus-visible { outline-offset: 2px; border-radius: 4px; }
.su-faq .su-accordion__item[open]:not([data-closing]) .su-accordion__chev { transform: rotate(45deg); color: var(--color-app-accent); }
.su-faq .su-accordion__body { padding: 0 32px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--color-app-ink-2); }
.su-faq .su-accordion__body > p { max-width: 62ch; }
.su-faq .su-accordion__body::after { height: 16px; }

/* ============ CTA Section ============ */
/* actions stack full width when the section is < 480px wide (padding 20) */
.su-cta { container: su-cta / inline-size; position: relative; isolation: isolate; overflow: hidden; width: min(960px, 100%); box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 28px 20px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-cta[data-tone="accent"] { background: var(--color-app-accent-soft); }
.su-cta__glow { position: absolute; z-index: -1; right: -40px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%;
  background: var(--color-app-accent); opacity: .08; filter: blur(40px); pointer-events: none; }
.su-cta[data-tone="accent"] .su-cta__glow { opacity: .16; }
.su-cta__copy { flex: 1 1 280px; min-width: 0; }
.su-cta__title { margin: 0 0 6px; font: 700 clamp(20px, 3.4cqi, 28px)/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); text-wrap: balance; }
.su-cta__lede { margin: 0; max-width: 52ch; font-size: 14px; color: var(--color-app-ink-2); }
.su-cta__side { flex: 0 1 auto; min-width: 0; display: grid; justify-items: start; gap: 10px; }
.su-cta__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.su-cta__note { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-app-ink-2); }
.su-cta__note svg { flex: none; width: 14px; height: 14px; color: var(--color-app-accent); }
@container su-cta (max-width: 439.98px) {
  .su-cta__side { flex-basis: 100%; justify-items: stretch; }
  .su-cta__actions { flex-direction: column; }
  .su-cta__actions > .su-btn { width: 100%; }
}

/* ============ Stats Section ============ */
/* columns follow the section width (padding 20): ≥960 → 4 (data-columns caps it), ≥480 → 2, below → 1 */
.su-stats { container: su-stats / inline-size; width: min(960px, 100%); box-sizing: border-box; display: grid; gap: 14px; padding: 20px;
  border-radius: var(--radius-card); background: var(--color-app-ground); box-shadow: var(--shadow-ring-card); font: 400 14px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-stats__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.su-stats__intro { flex: 1 1 220px; min-width: 0; }
.su-stats__deco { flex: none; width: 110px; height: 40px; color: var(--color-app-accent); }
.su-stats__eyebrow { margin: 0; font: 600 11px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-stats__title { margin: 4px 0 0; font: 700 clamp(19px, 2.8cqi, 24px)/1.25 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); text-wrap: balance; }
.su-stats__lede { margin: 4px 0 0; font-size: 13.5px; color: var(--color-app-ink-2); }
.su-stats__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; overflow: hidden; border-radius: 12px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
@container su-stats (min-width: 440px) { .su-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container su-stats (min-width: 920px) {
  .su-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .su-stats[data-columns="3"] .su-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-stats[data-columns="2"] .su-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* dividers: every stat draws its left + top line; the grid's overflow clips the ones on the outer edge, so any column count works */
.su-stats__item { display: flex; flex-direction: column; min-width: 0; padding: 16px; box-shadow: -1px 0 0 var(--color-app-line), 0 -1px 0 var(--color-app-line); }
.su-stats__value { order: -1; margin: 0 0 2px; font: 700 clamp(24px, 3.6cqi, 30px)/1.1 var(--font-sans); letter-spacing: -.03em; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-stats__value .su-ticker__sym { white-space: pre; }
.su-stats__label { margin: 0; font-size: 13px; color: var(--color-app-ink-2); overflow-wrap: anywhere; }
.su-stats__sub { margin: 6px 0 0; font: 600 12px/1.3 var(--font-sans); color: var(--color-app-muted); }
.su-stats__sub[data-tone="ok"] { color: var(--color-app-ok-deep); }
.su-stats__sub[data-tone="crit"] { color: var(--color-app-crit-deep); }
.su-stats__sub[data-tone="warn"] { color: var(--color-app-warn-deep, var(--color-app-ink)); }
.su-stats__sub[data-tone="accent"] { color: var(--color-app-accent); }

/* ============ Team Section ============ */
/* columns follow the section width (padding 20): ≥1024 → 5 (data-cols 3|4|5), ≥640 → 3, below → 2; rows share one height */
.su-team { container: su-team / inline-size; width: min(1040px, 100%); box-sizing: border-box; display: grid; gap: 16px; padding: 20px;
  border-radius: var(--radius-card); background: var(--color-app-ground); box-shadow: var(--shadow-ring-card); font: 400 14px/1.45 var(--font-sans);
  color: var(--color-app-ink); text-align: center; }
.su-team__head { display: grid; justify-items: center; gap: 4px; }
.su-team__eyebrow { margin: 0; font: 600 11px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-team__title { margin: 0; font: 700 clamp(19px, 2.8cqi, 24px)/1.25 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); text-wrap: balance; }
.su-team__lede { margin: 0; max-width: 52ch; font-size: 13.5px; color: var(--color-app-ink-2); }
.su-team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
@container su-team (min-width: 600px) { .su-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container su-team (min-width: 984px) {
  .su-team__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .su-team[data-cols="4"] .su-team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .su-team[data-cols="3"] .su-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.su-team__grid > li { display: flex; min-width: 0; }
.su-team__card { flex: 1; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px;
  border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); color: var(--color-app-ink);
  transition: transform var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app); }
.su-team__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-team__card .su-avatar { --s: 48px; --fs: 16px; }
.su-team__name { margin: 0; font: 600 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-team__role { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: var(--color-app-muted); overflow-wrap: anywhere; }
.su-team__hire { justify-content: center; background: transparent; box-shadow: inset 0 0 0 1px var(--color-app-line-strong); text-decoration: none; color: var(--color-app-ink-2); }
.su-team__hire:hover { background: var(--color-app-surface); }
.su-team__hire:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-team__hire .su-team__name, .su-team__hire .su-team__role { display: block; }
.su-team__hire .su-team__role { font-weight: 600; color: var(--color-app-accent); }
.su-team__plus { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-app-tray); color: var(--color-app-accent); }
.su-team__plus svg { width: 18px; height: 18px; }

/* ============ Feature Section ============ */
/* columns follow the section width (padding 20): ≥960 → 3 (data-cols 2|3), ≥600 → 2, below → 1 */
.su-features { container: su-features / inline-size; width: min(1040px, 100%); box-sizing: border-box; display: grid; gap: 18px; padding: 20px;
  border-radius: var(--radius-card); background: var(--color-app-ground); box-shadow: var(--shadow-ring-card); font: 400 14px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-features__head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.su-features[data-align="start"] .su-features__head { justify-items: start; text-align: start; }
.su-features__eyebrow { margin: 0; font: 600 11px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-features__title { margin: 0; max-width: 28ch; font: 700 clamp(19px, 2.8cqi, 26px)/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); text-wrap: balance; }
.su-features__lede { margin: 0; max-width: 56ch; font-size: 13.5px; color: var(--color-app-ink-2); }
.su-features__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
@container su-features (min-width: 560px) { .su-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container su-features (min-width: 920px) {
  .su-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-features[data-cols="2"] .su-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.su-features__item { display: flex; gap: 12px; min-width: 0; padding: 14px; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card);
  transition: opacity var(--dur-layout) var(--ease-app), transform var(--dur-layout) var(--ease-app); }
.su-features[data-reveal="ready"] .su-features__item:not([data-in]) { opacity: 0; transform: translateY(12px); }
.su-features__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-features__icon svg { width: 16px; height: 16px; }
.su-features__body { min-width: 0; }
.su-features__name { margin: 0 0 2px; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-features__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-app-ink-2); }
.su-features__link { display: inline-flex; margin-top: 6px; border-radius: 4px; font: 600 12.5px/1.4 var(--font-sans); color: var(--color-app-accent); text-decoration: none; }
.su-features__link:hover { text-decoration: underline; }
.su-features__link:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }

/* ============ Context Window Meter ============ */
.su-ctxmeter { width: min(380px, 100%); min-width: 0; box-sizing: border-box; display: grid; gap: 12px; padding: 14px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-ctxmeter__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.su-ctxmeter__ring { flex: none; width: 44px; height: 44px; transform: rotate(-90deg); }
.su-ctxmeter__ring circle { fill: none; stroke-width: 4; }
.su-ctxmeter__track { stroke: var(--color-app-tray); }
.su-ctxmeter__arc { stroke: var(--color-app-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-layout) var(--ease-app), stroke var(--dur-state) var(--ease-app); }
.su-ctxmeter__arc[data-empty] { opacity: 0; }
.su-ctxmeter[data-state="warn"] .su-ctxmeter__arc { stroke: var(--color-app-warn); }
.su-ctxmeter[data-state="crit"] .su-ctxmeter__arc { stroke: var(--color-app-crit); }
.su-ctxmeter__text { flex: 1; min-width: 0; }
.su-ctxmeter__title { margin: 0; font: 600 11.5px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-ctxmeter__used { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-ctxmeter__used b { font: 600 18px/1.25 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); }
.su-ctxmeter__pct { flex: none; font-variant-numeric: tabular-nums; }
.su-ctxmeter__meter { display: grid; gap: 4px; min-width: 0; }
.su-ctxmeter__bar { display: flex; height: 8px; border-radius: 4px; background: var(--color-app-tray); }
.su-ctxmeter__seg { position: relative; flex: 0 0 0%; min-width: 0; transition: flex-basis var(--dur-layout) var(--ease-app); }
.su-ctxmeter__seg::before { content: ""; position: absolute; inset: -6px 0; } /* taller hover target for the tooltip */
.su-ctxmeter__seg:first-child { border-radius: 4px 0 0 4px; }
.su-ctxmeter__seg + .su-ctxmeter__seg { box-shadow: inset 2px 0 0 var(--color-app-surface); }
.su-ctxmeter__seg[data-tone="free"] { flex: 1 1 0%; border-radius: 0 4px 4px 0; }
:is(.su-ctxmeter__seg, .su-ctxmeter__dot)[data-tone="neutral"] { background-color: var(--color-app-ink-2); }
:is(.su-ctxmeter__seg, .su-ctxmeter__dot)[data-tone="accent"] { background-color: var(--color-app-accent); }
:is(.su-ctxmeter__seg, .su-ctxmeter__dot)[data-tone="ok"] { background-color: var(--color-app-ok); }
:is(.su-ctxmeter__seg, .su-ctxmeter__dot)[data-tone="warn"] { background-color: var(--color-app-warn); }
:is(.su-ctxmeter__seg, .su-ctxmeter__dot)[data-tone="crit"] { background-color: var(--color-app-crit); }
.su-ctxmeter__dot[data-tone="free"] { background-color: var(--color-app-tray); box-shadow: var(--shadow-ring); }
.su-ctxmeter[data-state="compacting"] .su-ctxmeter__bar { animation: su-ctx-pulse 1.2s var(--ease-app) infinite; }
@keyframes su-ctx-pulse { 50% { opacity: .5; } }
.su-ctxmeter__marker { position: relative; height: 16px; font-size: 10.5px; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-ctxmeter__marker > i { position: absolute; left: var(--at); top: -14px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--color-app-warn); }
.su-ctxmeter__marker > span { position: absolute; left: var(--at); top: 1px; white-space: nowrap; transform: translateX(-50%); }
.su-ctxmeter__marker[data-anchor="end"] > span { transform: translateX(calc(-100% + 6px)); }
.su-ctxmeter__marker[data-anchor="start"] > span { transform: translateX(-6px); }
.su-ctxmeter__legend { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.su-ctxmeter__row { display: flex; align-items: center; gap: 8px; width: calc(100% + 12px); box-sizing: border-box; margin: 0 -6px; padding: 4px 6px; border: 0;
  border-radius: var(--radius-ctrl); background: transparent; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-ink); text-align: left; }
button.su-ctxmeter__row { cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
button.su-ctxmeter__row:hover { background: var(--color-app-hover); }
button.su-ctxmeter__row:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-ctxmeter__dot { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.su-ctxmeter__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-app-ink-2); }
.su-ctxmeter__tok { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-ctxmeter__row[data-free] .su-ctxmeter__tok { color: var(--color-app-muted); }

/* ============ Citations ============ */
.su-cite { container: su-cite / inline-size; box-sizing: border-box; width: min(440px, 100%); padding: 14px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-cite__text { margin: 0; font-size: 13px; line-height: 1.65; color: var(--color-app-ink); overflow-wrap: break-word; }
.su-cite__sup, .su-cite__miss { font-size: 10.5px; line-height: 1; vertical-align: 2px; }
.su-cite__miss { margin: 0 1px; font-weight: 600; color: var(--color-app-muted); }
.su-cite__ref { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin: 0 1px; box-sizing: border-box; border-radius: 5px;
  background: var(--color-app-accent-soft); color: var(--color-app-accent); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-cite__ref:hover, .su-cite__ref[data-linked] { background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-cite__ref:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-cite__head { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-app-ink-label); }
.su-cite__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.su-cite__item { border-radius: 10px; box-shadow: var(--shadow-ring-card); scroll-margin: 8px;
  transition: background var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-cite__item:hover { background: var(--color-app-hover); }
.su-cite__item[data-linked] { background: var(--color-app-accent-soft); box-shadow: 0 0 0 1px var(--color-app-accent); }
.su-cite__item[data-flash] { background: var(--color-app-accent-soft); box-shadow: 0 0 0 1.5px var(--color-app-accent); transition: none; }
.su-cite__src { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.su-cite__src:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-cite__src:focus:not(:focus-visible) { outline: none; }
.su-cite__n { flex: none; width: 18px; font-size: 11.5px; font-weight: 600; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-cite__badge { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--color-app-tray);
  color: var(--color-app-ink-2); font-size: 11px; font-weight: 700; }
.su-cite__body { display: grid; flex: 1; min-width: 0; }
.su-cite__title { overflow: hidden; font-size: 12.5px; font-weight: 500; color: var(--color-app-ink); white-space: nowrap; text-overflow: ellipsis; }
.su-cite__meta { overflow: hidden; font-size: 11.5px; color: var(--color-app-muted); white-space: nowrap; text-overflow: ellipsis; }

/* ============ Inline Diff ============ */
.su-inlinediff { container: su-inlinediff / inline-size; box-sizing: border-box; width: min(460px, 100%); overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-inlinediff__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--color-app-line); }
.su-inlinediff__icon { display: inline-flex; color: var(--color-app-accent); }
.su-inlinediff__icon svg { width: 14px; height: 14px; }
.su-inlinediff__title { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; color: var(--color-app-ink); white-space: nowrap; text-overflow: ellipsis; }
.su-inlinediff__stat { flex: none; font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-inlinediff__plus { color: var(--color-app-ok-deep); }
.su-inlinediff__minus { color: var(--color-app-crit-deep); }
.su-inlinediff__pos { flex: none; margin-left: auto; font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-inlinediff__nav { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-ctrl);
  background: transparent; color: var(--color-app-ink-2); cursor: pointer; transition: background var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-inlinediff__nav svg { width: 14px; height: 14px; }
.su-inlinediff__nav:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-inlinediff__nav:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-inlinediff__nav:disabled { opacity: .4; cursor: default; background: transparent; }
.su-inlinediff__body { padding: 12px 14px; font-size: 13px; line-height: 1.75; color: var(--color-app-ink); overflow-wrap: break-word; word-break: normal; outline: none; }
.su-inlinediff__change { border-radius: 4px; cursor: pointer; scroll-margin: 12px; transition: background var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-inlinediff__change[data-active] { background: var(--color-app-accent-soft); box-shadow: 0 0 0 3px var(--color-app-accent-soft), inset 0 -2px 0 var(--color-app-accent); }
.su-inlinediff__change:focus { outline: none; }
.su-inlinediff__change:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }
.su-inlinediff__body del, .su-inlinediff__body ins { padding: 0 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: opacity var(--dur-state) var(--ease-app), background var(--dur-state) var(--ease-app), color var(--dur-state) var(--ease-app); }
.su-inlinediff__body del { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); text-decoration: line-through; text-decoration-color: var(--color-app-crit); }
.su-inlinediff__body ins { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); text-decoration: none; }
/* resolved: the dropped side fades, then leaves the flow; the kept side becomes plain text */
.su-inlinediff__change[data-state] { cursor: auto; background: none; box-shadow: none; }
.su-inlinediff__change[data-state="accepted"] del, .su-inlinediff__change[data-state="rejected"] ins { opacity: 0; }
.su-inlinediff__change[data-state][data-settled] :is(del, ins) { transition: none; }
.su-inlinediff__change[data-state="accepted"][data-settled] del, .su-inlinediff__change[data-state="rejected"][data-settled] ins { display: none; }
.su-inlinediff__change[data-state="accepted"] ins, .su-inlinediff__change[data-state="rejected"] del { padding: 0; background: none; color: inherit; text-decoration: none; }
.su-inlinediff__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 12px;
  border-top: 1px solid var(--color-app-line); background: var(--color-app-tray); }
.su-inlinediff__note { margin-right: auto; font-size: 11.5px; color: var(--color-app-muted); }
.su-inlinediff__foot .su-btn svg { width: 13px; height: 13px; }
@container su-inlinediff (max-width: 340px) {
  .su-inlinediff__plus, .su-inlinediff__minus { display: none; }
  .su-inlinediff__note { flex-basis: 100%; }
}

/* ============ Model Picker ============ */
.su-modelpick { position: relative; box-sizing: border-box; max-width: 100%; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-modelpick[data-inline] { container: su-modelpick / inline-size; width: min(420px, 100%); padding: 12px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-modelpick__trigger { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 6px 10px 6px 14px; box-sizing: border-box;
  border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring); font: inherit;
  text-align: left; cursor: pointer; transition: background var(--dur-hover) var(--ease-app); }
.su-modelpick__trigger:hover { background: var(--color-app-hover); }
.su-modelpick__trigger:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-modelpick__cur { display: grid; min-width: 0; }
.su-modelpick__curname { overflow: hidden; font-size: 13.5px; font-weight: 600; color: var(--color-app-ink); white-space: nowrap; text-overflow: ellipsis; }
.su-modelpick__curnote { overflow: hidden; font-size: 11.5px; color: var(--color-app-muted); white-space: nowrap; text-overflow: ellipsis; }
.su-modelpick__chev { display: inline-flex; flex: none; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-modelpick__chev svg { width: 16px; height: 16px; }
.su-modelpick__trigger[aria-expanded="true"] .su-modelpick__chev { transform: rotate(180deg); }
.su-modelpick__panel { position: fixed; z-index: 1000; inset: auto; left: 0; top: 0; box-sizing: border-box; width: min(400px, calc(100vw - 16px)); margin: 0; border: 0;
  padding: 12px; overflow: auto; overscroll-behavior: contain; border-radius: 14px; background: var(--color-app-surface); color: var(--color-app-ink);
  box-shadow: var(--shadow-ring-card), var(--shadow-lg); font-family: var(--font-sans); transform-origin: var(--su-menu-origin, top left); }
.su-modelpick__panel[popover]:not(:popover-open), .su-modelpick__panel[hidden] { display: none; }
.su-modelpick__panel[data-show] { animation: su-modelpick-in var(--dur-state) var(--ease-app); }
@keyframes su-modelpick-in { from { opacity: 0; transform: scale(.97); } }
.su-modelpick__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 10px; }
.su-modelpick__label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-modelpick__note { min-width: 0; overflow: hidden; font-size: 11.5px; color: var(--color-app-muted); white-space: nowrap; text-overflow: ellipsis; }
.su-modelpick__list { display: flex; flex-direction: column; gap: 6px; outline: none; }
.su-modelpick__opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow-ring-card); cursor: pointer;
  transition: background var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app); }
.su-modelpick__opt:hover, .su-modelpick__opt[data-active] { background: var(--color-app-hover); }
.su-modelpick__opt:is([aria-selected="true"], [aria-checked="true"]) { background: var(--color-app-accent-soft); box-shadow: 0 0 0 1.5px var(--color-app-accent); }
.su-modelpick__list:focus-visible .su-modelpick__opt[data-active] { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-modelpick__opt:focus { outline: none; }
.su-modelpick__opt:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-modelpick__opt[aria-disabled="true"] { cursor: not-allowed; }
.su-modelpick__opt[aria-disabled="true"]:not([data-active]) { background: transparent; }
.su-modelpick__opt[aria-disabled="true"] :is(.su-modelpick__name, .su-modelpick__desc, .su-modelpick__meters) { opacity: .55; }
.su-modelpick__mark { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; color: var(--color-app-accent); }
.su-modelpick__mark svg { width: 14px; height: 14px; opacity: 0; }
.su-modelpick__opt[aria-selected="true"] .su-modelpick__mark svg { opacity: 1; }
[role="radio"] > .su-modelpick__mark { background: var(--color-app-surface); box-shadow: inset 0 0 0 1.5px var(--color-app-line-strong); transition: box-shadow var(--dur-hover) var(--ease-app); }
[role="radio"][aria-checked="true"] > .su-modelpick__mark { box-shadow: inset 0 0 0 5px var(--color-app-accent); }
.su-modelpick__main { display: grid; flex: 1; min-width: 0; }
.su-modelpick__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--color-app-ink); white-space: nowrap; }
.su-modelpick__name .su-chip { height: 20px; padding: 0 8px; font-size: 11px; }
.su-modelpick__desc { overflow: hidden; font-size: 11.5px; color: var(--color-app-muted); white-space: nowrap; text-overflow: ellipsis; }
.su-modelpick__lock { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11.5px; color: var(--color-app-ink-2); }
.su-modelpick__lock svg { width: 12px; height: 12px; flex: none; color: var(--color-app-warn); }
.su-modelpick__meters { display: flex; flex: none; flex-direction: column; gap: 4px; }
.su-modelpick__meter { display: flex; align-items: center; gap: 6px; }
.su-modelpick__mlabel { width: 34px; font-size: 11px; color: var(--color-app-muted); }
.su-modelpick__bars { display: flex; gap: 2px; width: 60px; }
.su-modelpick__bars i { flex: 1; height: 4px; border-radius: 2px; background: var(--color-app-line); }
.su-modelpick__bars i[data-on] { background: var(--color-app-accent); transform-origin: left; }
[data-k="cost"] .su-modelpick__bars i[data-on] { background: var(--color-app-ink-2); }
.su-modelpick__panel[data-show] .su-modelpick__bars i[data-on] { animation: su-modelpick-fill var(--dur-state) var(--ease-app) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes su-modelpick-fill { from { transform: scaleX(0); } }
.su-modelpick__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-tray);
  font-size: 12px; color: var(--color-app-ink-2); }
.su-modelpick__fico { display: inline-flex; color: var(--color-app-muted); }
.su-modelpick__fico svg { width: 14px; height: 14px; }
.su-modelpick__price { margin-left: auto; font-variant-numeric: tabular-nums; }
@container su-modelpick (max-width: 340px) {
  .su-modelpick__opt { flex-wrap: wrap; }
  .su-modelpick__meters { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; width: 100%; padding-left: 26px; box-sizing: border-box; }
  .su-modelpick__bars { width: 44px; }
  .su-modelpick__head { flex-wrap: wrap; }
}
@media (max-width: 400px) { /* the floating panel is not inside the container */
  .su-modelpick__panel .su-modelpick__opt { flex-wrap: wrap; }
  .su-modelpick__panel .su-modelpick__meters { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; width: 100%; padding-left: 26px; box-sizing: border-box; }
  .su-modelpick__panel .su-modelpick__bars { width: 44px; }
}

/* ============ Web Preview ============ */
.su-webpreview { container: su-webpreview / inline-size; box-sizing: border-box; width: min(500px, 100%); overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-webpreview__bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--color-app-line); background: var(--color-app-tray); }
.su-webpreview__ib, .su-webpreview__dev button { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: var(--radius-ctrl); background: transparent; color: var(--color-app-ink-2); cursor: pointer;
  transition: background var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-webpreview__ib svg, .su-webpreview__dev svg { width: 15px; height: 15px; }
.su-webpreview__ib:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-webpreview__ib:disabled { opacity: .45; cursor: default; background: transparent; color: var(--color-app-ink-2); }
:is(.su-webpreview__ib, .su-webpreview__dev button):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-webpreview__addr { position: relative; display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 10px; box-sizing: border-box;
  border-radius: var(--radius-pill); background: var(--color-app-surface); box-shadow: var(--shadow-ring); font-size: 12px; cursor: text; }
.su-webpreview__addr:focus-within { box-shadow: 0 0 0 2px var(--color-app-focus); }
.su-webpreview__lock { display: inline-flex; flex: none; color: var(--color-app-muted); }
.su-webpreview__lock svg { width: 12px; height: 12px; }
.su-webpreview__url { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: transparent; font: inherit; caret-color: var(--color-app-ink); }
.su-webpreview__url:focus { color: var(--color-app-ink); }
.su-webpreview__shown { position: absolute; left: 28px; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; pointer-events: none; }
.su-webpreview__url:focus + .su-webpreview__shown { visibility: hidden; }
.su-webpreview__host { flex: none; max-width: 100%; overflow: hidden; color: var(--color-app-muted); text-overflow: ellipsis; }
.su-webpreview__path { min-width: 0; overflow: hidden; color: var(--color-app-ink); text-overflow: ellipsis; }
.su-webpreview__dev { display: inline-flex; flex: none; padding: 2px; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); }
.su-webpreview__dev button { width: 24px; height: 24px; }
.su-webpreview__dev button[aria-pressed="true"] { background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring-card); }
.su-webpreview__view { display: grid; justify-items: center; overflow: hidden; background: var(--color-app-ground); }
.su-webpreview__screen { position: relative; overflow: hidden; background: var(--color-app-surface);
  transition: width var(--dur-layout) var(--ease-app), height var(--dur-layout) var(--ease-app); }
.su-webpreview[data-device="mobile"] .su-webpreview__screen { margin: 10px 0; border-radius: 14px; box-shadow: var(--shadow-ring-card); }
.su-webpreview__frame { position: absolute; left: 0; top: 0; display: block; border: 0; background: var(--color-app-surface); transform-origin: 0 0; }
.su-webpreview__status { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--color-app-line); font-size: 11px;
  color: var(--color-app-muted); white-space: nowrap; }
.su-webpreview__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-app-muted); }
.su-webpreview[data-state="live"] .su-webpreview__dot { background: var(--color-app-ok); animation: su-webpreview-pulse var(--dur-loop, 2s) var(--ease-app) infinite; }
.su-webpreview[data-state="error"] .su-webpreview__dot { background: var(--color-app-crit); }
.su-webpreview[data-state="stale"] .su-webpreview__dot { background: var(--color-app-warn); }
@keyframes su-webpreview-pulse { 50% { box-shadow: 0 0 0 4px var(--color-app-ok-soft); } }
.su-webpreview__state { color: var(--color-app-ink-2); }
.su-webpreview[data-state="error"] .su-webpreview__state { color: var(--color-app-crit-deep); }
.su-webpreview__built { overflow: hidden; text-overflow: ellipsis; }
.su-webpreview__size { margin-left: auto; font-variant-numeric: tabular-nums; }
.su-webpreview__console { font-variant-numeric: tabular-nums; }
.su-webpreview[data-logs] .su-webpreview__console { color: var(--color-app-ink-2); }
@container su-webpreview (max-width: 360px) {
  .su-webpreview__path { display: none; } /* address collapses to host only */
  .su-webpreview__size { display: none; }
  .su-webpreview__console { margin-left: auto; }
  .su-webpreview__bar { flex-wrap: wrap; gap: 4px 2px; padding: 6px; }
  .su-webpreview__addr { order: 1; flex-basis: 100%; }
  .su-webpreview__dev { margin-left: auto; }
}

/* ============ Voice Input ============ */
.su-voice { container: su-voice / inline-size; box-sizing: border-box; width: min(420px, 100%); padding: 14px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-voice__row { display: flex; align-items: center; gap: 12px; }
.su-voice__mic { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.su-voice__core { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--color-app-accent); color: var(--color-app-on-accent);
  transition: background var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app); }
.su-voice__core svg { width: 18px; height: 18px; }
.su-voice__mic:hover .su-voice__core { background: var(--color-app-accent-hover); }
.su-voice__mic:active .su-voice__core { transform: scale(.94); }
.su-voice__mic[aria-pressed="true"] .su-voice__core { background: var(--color-app-crit); }
.su-voice__mic:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }
.su-voice__mic:disabled { cursor: not-allowed; opacity: .45; }
.su-voice__ring { position: absolute; inset: 0; border-radius: 50%; background: var(--color-app-crit-soft); opacity: 0; }
.su-voice[data-state="listening"] .su-voice__ring { animation: su-voice-pulse var(--dur-loop, 1.6s) var(--ease-app) infinite; }
@keyframes su-voice-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.su-voice__wave { display: flex; flex: 1; align-items: center; gap: 2px; min-width: 0; height: 32px; overflow: hidden; }
.su-voice__wave i { flex: none; width: 3px; height: 30px; border-radius: 2px; background: var(--color-app-line-strong); transform: scaleY(.12); transition: transform 90ms linear; }
.su-voice__wave i[data-on] { background: var(--color-app-accent); }
.su-voice[data-state="paused"] .su-voice__wave i[data-on] { background: var(--color-app-muted); }
.su-voice__timer { flex: none; font: 500 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-voice__text { min-height: 40px; margin-top: 12px; padding: 10px 12px; box-sizing: border-box; border-radius: 10px; background: var(--color-app-tray);
  font-size: 13px; line-height: 1.55; color: var(--color-app-ink); overflow-wrap: break-word; }
.su-voice__final { color: var(--color-app-ink); }
.su-voice__interim { color: var(--color-app-muted); }
.su-voice__caret { display: none; width: 2px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--color-app-accent); animation: su-voice-caret 1s steps(1) infinite; }
.su-voice[data-state="listening"] .su-voice__caret { display: inline-block; }
@keyframes su-voice-caret { 50% { opacity: 0; } }
.su-voice__ph { display: none; color: var(--color-app-muted); }
.su-voice[data-empty]:not([data-state="listening"]) .su-voice__ph { display: inline; }
.su-voice__msg { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-warn-soft); font-size: 12px; line-height: 1.5; color: var(--color-app-ink); }
.su-voice[data-state="listening"] .su-voice__msg { background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-voice__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; min-height: 32px; }
.su-voice__status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-right: auto; font-size: 11.5px; color: var(--color-app-muted); }
.su-voice__status i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-app-muted); }
.su-voice[data-state="listening"] .su-voice__status i { background: var(--color-app-crit); }
.su-voice[data-state="requesting"] .su-voice__status i, .su-voice[data-state="processing"] .su-voice__status i { background: var(--color-app-warn); }
.su-voice[data-state="done"] .su-voice__status i { background: var(--color-app-ok); }
.su-voice:is([data-state="denied"], [data-state="error"], [data-state="unsupported"]) .su-voice__status i { background: var(--color-app-crit); }
.su-voice__foot .su-btn svg { width: 14px; height: 14px; }

/* ============ Comparison Table ============ */
.su-compare { container: su-compare / inline-size; box-sizing: border-box; width: min(680px, 100%); overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-compare__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 4px; }
.su-compare__title { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-app-ink); }
.su-compare__plans { display: none; margin: 8px 12px 4px; }
.su-compare__scroll { max-height: var(--su-compare-h, min(70vh, 560px)); overflow: auto; overscroll-behavior: contain; }
.su-compare__table.su-table, .su-compare__table { min-width: 460px; border-collapse: separate; border-spacing: 0; font-size: 12.5px; line-height: 1.45; }
.su-compare__table th, .su-compare__table td { height: auto; padding: 8px 10px; background: var(--color-app-surface); box-shadow: inset 0 -1px 0 var(--color-app-line);
  text-align: center; font-size: 12.5px; letter-spacing: normal; text-transform: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-compare__table thead th { position: sticky; top: 0; z-index: 2; padding: 12px 10px 10px; vertical-align: bottom; font-size: 12.5px; font-weight: 600;
  color: var(--color-app-ink); box-shadow: inset 0 -1px 0 var(--color-app-line-strong); }
.su-compare__table thead th:first-child { z-index: 3; text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-compare__table tbody th { position: sticky; left: 0; z-index: 1; min-width: 110px; text-align: left; font-weight: 400; color: var(--color-app-ink-2); white-space: normal; }
.su-compare__table thead th:first-child, .su-compare__table tbody th { box-shadow: inset 0 -1px 0 var(--color-app-line), inset -1px 0 0 var(--color-app-line); }
.su-compare__table tbody tr:hover :is(th, td) { background: var(--color-app-hover); }
.su-compare__table [data-hl] { background: linear-gradient(var(--color-app-accent-soft), var(--color-app-accent-soft)), var(--color-app-surface); font-weight: 500; }
.su-compare__table thead th[data-hl] { box-shadow: inset 0 2px 0 var(--color-app-accent), inset 0 -1px 0 var(--color-app-line-strong); }
.su-compare__table tbody tr:hover [data-hl] { background: linear-gradient(var(--color-app-accent-soft), var(--color-app-accent-soft)), var(--color-app-hover); }
.su-compare__group th { position: static; padding-top: 14px; background: var(--color-app-tray); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-app-ink-label); text-align: left; }
.su-compare__badge { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-accent); }
.su-compare__price { display: block; font-size: 11.5px; font-weight: 400; color: var(--color-app-muted); }
[data-hl] > .su-compare__price { color: var(--color-app-ink-2); }
.su-compare__yes, .su-compare__no { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.su-compare__yes { color: var(--color-app-ok-deep); }
.su-compare__yes svg { width: 16px; height: 16px; }
.su-compare__no { color: var(--color-app-muted); }
/* small container: one plan + the feature column, switched by the su-seg */
@container su-compare (max-width: 639px) {
  .su-compare[data-plan] .su-compare__plans { display: inline-flex; }
  .su-compare[data-plan] .su-compare__table { min-width: 0; width: 100%; }
  .su-compare[data-plan] .su-compare__table :is(th, td)[data-col]:not([data-on]) { display: none; }
  .su-compare[data-plan] .su-compare__table :is(thead th:first-child, tbody th[scope="row"]) { width: 55%; min-width: 0; }
  .su-compare[data-plan] .su-compare__table :is(th, td) { white-space: normal; }
}



/* ============ Hero Section ============ */
/* split (copy | visual) at viewport ≥ 960px while the block itself is ≥ 640px wide; stacked (copy, then visual) otherwise.
   The top bar is su-nav with data-collapse="768" (its own ResizeObserver collapses the links into the menu button). */
.su-hero { container: su-hero / inline-size; position: relative; box-sizing: border-box; width: 100%; display: grid; gap: 24px; padding: 12px 12px 0; overflow: hidden;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-hero > .su-nav { background: transparent; box-shadow: none; padding-inline: 4px; }
.su-hero__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; padding: 8px clamp(4px, 3cqi, 28px) 0; }
.su-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: center; gap: 14px; min-width: 0; padding-bottom: 8px; }
.su-hero[data-layout="center"] .su-hero__copy { justify-items: center; max-width: 640px; margin-inline: auto; text-align: center; }
.su-hero__announce { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 3px 10px 3px 3px; border-radius: var(--radius-pill);
  background: var(--color-app-tray); box-shadow: var(--shadow-ring); font: 500 12.5px/1.3 var(--font-sans); color: var(--color-app-ink-2); text-decoration: none;
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-hero__announce:hover { background: var(--color-app-hover); }
.su-hero__announce:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-hero__badge { flex: none; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--color-app-accent); color: var(--color-app-on-accent); font-weight: 600; }
.su-hero__announce-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-hero__announce > svg { flex: none; width: 12px; height: 12px; color: var(--color-app-muted); transition: transform var(--dur-hover) var(--ease-app); }
.su-hero__announce:hover > svg { transform: translateX(3px); }
.su-hero__title { margin: 0; font: 700 clamp(30px, 6.4cqi, 52px)/1.06 var(--font-sans); letter-spacing: -.03em; color: var(--color-app-ink); text-wrap: balance; }
.su-hero__sub { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--color-app-ink-2); }
.su-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.su-hero[data-layout="center"] .su-hero__ctas { justify-content: center; }
.su-hero__trust { margin: 0; font-size: 12.5px; color: var(--color-app-muted); }
/* product visual: a small app frame — sidebar mock + KPI (su-ticker) + su-linechart; inert, its meaning is in .su-hero__summary */
.su-hero__visual { min-width: 0; align-self: end; }
.su-hero__app { display: grid; grid-template-columns: 116px minmax(0, 1fr); min-width: 0; overflow: hidden; border-radius: 14px 14px 0 0; background: var(--color-app-tray);
  box-shadow: var(--shadow-ring-card); }
.su-hero__side { display: grid; align-content: start; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--color-app-line); font-size: 11.5px; }
.su-hero__side-ws { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 0 4px; font-weight: 650; color: var(--color-app-ink); }
.su-hero__side-ws i { width: 16px; height: 16px; border-radius: 5px; background: var(--color-app-accent); }
.su-hero__side-i { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 6px; color: var(--color-app-ink-2); white-space: nowrap; overflow: hidden; }
.su-hero__side-i::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--color-app-line-strong); }
.su-hero__side-i[data-on] { background: var(--color-app-surface); box-shadow: var(--shadow-ring); color: var(--color-app-ink); font-weight: 600; }
.su-hero__side-i[data-on]::before { background: var(--color-app-accent); }
.su-hero__main { min-width: 0; display: grid; gap: 10px; padding: 12px 12px 0; }
.su-hero__kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.su-hero__kpi-label { flex-basis: 100%; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-hero__kpi .su-ticker__value { display: inline-block; margin: 0; font: 650 24px/1.15 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); }
.su-hero__main .su-linechart { width: 100%; padding: 12px 12px 10px; border-radius: 12px 12px 0 0; box-shadow: var(--shadow-ring); }
.su-hero__main .su-linechart__plot { height: 110px; }
.su-hero__main .su-linechart__head { display: none; }
.su-hero__main .su-linechart__body { margin-top: 0; }
@container su-hero (max-width: 419.98px) {
  .su-hero__app { grid-template-columns: minmax(0, 1fr); }
  .su-hero__side { display: none; }
  .su-hero__ctas { flex-direction: column; justify-self: stretch; }
  .su-hero__ctas > .su-btn { width: 100%; }
}
@media (min-width: 960px) {
  @container su-hero (min-width: 640px) {
    .su-hero:not([data-layout="center"]) .su-hero__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; }
    .su-hero:not([data-layout="center"]) .su-hero__visual { align-self: stretch; display: grid; align-items: end; }
  }
}
/* load: headline then visual rise in once, 60ms apart */
.su-hero__copy > *, .su-hero__visual { animation: su-hero-rise var(--dur-layout) var(--ease-app) both; }
.su-hero__copy > :nth-child(2) { animation-delay: 60ms; }
.su-hero__copy > :nth-child(3) { animation-delay: 120ms; }
.su-hero__copy > :nth-child(4) { animation-delay: 180ms; }
.su-hero__copy > :nth-child(5) { animation-delay: 240ms; }
.su-hero__visual { animation-delay: 300ms; }
@keyframes su-hero-rise { from { opacity: 0; transform: translateY(10px); } }
/* Watch demo modal: poster frame (su-video is not built yet — Play only toasts) */
.su-hero__poster { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow-ring);
  background: radial-gradient(circle at 70% 30%, var(--color-app-accent-soft), transparent 60%), linear-gradient(135deg, var(--color-app-accent-soft), var(--color-app-tray) 70%); }
.su-hero__play { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--color-app-accent); color: var(--color-app-on-accent); box-shadow: var(--shadow-lg); transition: transform var(--dur-hover) var(--ease-app); }
.su-hero__play:hover { transform: scale(1.06); }
.su-hero__play:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }
.su-hero__play svg { width: 24px; height: 24px; margin-left: 3px; }
.su-hero__dur { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-app-ink); color: var(--color-app-surface);
  font: 600 12px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }

/* ============ Auth Page ============ */
/* brand panel (built su-testimonial card) beside the form at viewport ≥ 900px; hidden below 900px or when the page itself is < 600px wide */
.su-auth { container: su-auth / inline-size; box-sizing: border-box; width: 100%; min-height: 460px; display: flex; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-auth__brand { flex: 0 0 42%; box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px;
  background: var(--color-app-accent-soft); }
.su-auth[data-brand="none"] .su-auth__brand { display: none; }
.su-auth__logo { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); }
.su-auth__logo i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-auth__logo svg { width: 14px; height: 14px; }
.su-auth__brand .su-testimonial { width: 100%; }
.su-auth__main { flex: 1; min-width: 0; display: grid; place-items: center; box-sizing: border-box; padding: 32px clamp(16px, 5cqi, 40px); }
.su-auth__form { box-sizing: border-box; width: min(360px, 100%); display: grid; gap: 14px; margin: 0; }
.su-auth__form[data-swap] { animation: su-auth-swap var(--dur-state) var(--ease-app); }
@keyframes su-auth-swap { from { opacity: 0; } }
.su-auth__title { margin: 0; font: 700 22px/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); }
.su-auth__title:focus { outline: none; }
.su-auth__sub { margin: 4px 0 0; font-size: 13.5px; color: var(--color-app-muted); }
.su-auth__sso, .su-auth__submit { width: 100%; }
.su-auth__or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-app-muted); }
.su-auth__or::before, .su-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--color-app-line); }
.su-auth__link { border-radius: 4px; font-weight: 600; color: var(--color-app-accent); text-decoration: none; }
.su-auth__link:hover { text-decoration: underline; }
.su-auth__link:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-auth__forgot { justify-self: end; margin: -2px 0 0; font-size: 12.5px; }
.su-auth .su-field { min-width: 0; }
.su-auth__eye { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: -6px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--color-app-muted); cursor: pointer; }
.su-auth__eye:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-auth__eye:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-auth__eye svg { width: 16px; height: 16px; }
.su-auth__eye .su-auth__eye-off, .su-auth__eye[aria-pressed="true"] .su-auth__eye-on { display: none; }
.su-auth__eye[aria-pressed="true"] .su-auth__eye-off { display: block; }
.su-auth__input[aria-invalid="true"] { color: var(--color-app-ink); }
.su-auth__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-app-ink-2); cursor: pointer; }
.su-auth__remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-app-accent); }
.su-auth__remember input:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-auth__summary, .su-auth__note { margin: 0; padding: 10px 12px; border-radius: var(--radius-ctrl); font: 500 13px/1.45 var(--font-sans); }
.su-auth__summary { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-auth__summary:focus { outline: none; }
.su-auth__note { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); }
.su-auth__switch { margin: 0; text-align: center; font-size: 13px; color: var(--color-app-muted); }
@media (max-width: 899.98px) { .su-auth__brand { display: none; } }
@container su-auth (max-width: 599.98px) { .su-auth__brand { display: none; } }

/* ============ Blog Template ============ */
/* latest grid: 3 / 2 / 1 columns at block width ≥ 960 / ≥ 600 / below; featured post spans the full width (cover beside text from 600px) */
.su-blog { container: su-blog / inline-size; box-sizing: border-box; width: 100%; display: grid; gap: 18px; padding: 20px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-blog__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.su-blog__brand { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font-sans); color: var(--color-app-ink); }
.su-blog__brand i { width: 20px; height: 20px; border-radius: 6px; background: var(--color-app-accent); }
.su-blog__title { margin: 0; font: 700 clamp(22px, 4cqi, 30px)/1.15 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); }
.su-blog__lede { flex-basis: 100%; margin: 0; max-width: 60ch; color: var(--color-app-ink-2); }
.su-blog__count { margin: -6px 0 0; font-size: 12.5px; color: var(--color-app-muted); }
.su-blog__card { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; margin: -8px; padding: 8px; border-radius: 14px;
  transition: box-shadow var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-blog__card:hover { background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-blog__card:has(.su-blog__link:focus-visible) { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-blog__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, var(--color-app-accent-soft), var(--color-app-tray) 75%); }
.su-blog__cover::after { content: ""; position: absolute; right: -12%; bottom: -30%; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 10px solid var(--color-app-accent); opacity: .22; }
.su-blog__grid .su-blog__cover { aspect-ratio: 2 / 1; }
.su-blog__cover img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.su-blog__flag { position: absolute; z-index: 2; left: 10px; top: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); font: 600 11px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-blog__text { display: grid; gap: 4px; min-width: 0; }
.su-blog__tag { font: 600 12px/1.3 var(--font-sans); color: var(--color-app-accent); }
.su-blog__h { margin: 0; font: 650 16px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); text-wrap: pretty; }
.su-blog__featured .su-blog__h { font-size: clamp(19px, 3.2cqi, 26px); line-height: 1.2; }
.su-blog__link { color: inherit; text-decoration: none; outline: none; }
.su-blog__link::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; } /* stretched link: the whole card is one target */
.su-blog__dek { margin: 0; font-size: 13.5px; color: var(--color-app-ink-2); }
.su-blog__by { margin: 2px 0 0; font-size: 12.5px; color: var(--color-app-muted); }
.su-blog__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 24px; }
.su-blog__grid[data-swap], .su-blog__featured[data-swap] { animation: su-blog-fade var(--dur-state) var(--ease-app); }
@keyframes su-blog-fade { from { opacity: 0; } }
.su-blog__empty { margin: 0; padding: 28px 16px; border-radius: 12px; background: var(--color-app-tray); text-align: center; color: var(--color-app-ink-2); }
.su-blog__more { display: flex; justify-content: center; min-width: 0; }
.su-blog__more .su-pager { width: 100%; }
.su-blog__news { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px; border-radius: 14px; background: var(--color-app-tray); }
.su-blog__news-copy { flex: 1 1 220px; min-width: 0; }
.su-blog__news-title { margin: 0; font: 650 15px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-blog__news-text { margin: 2px 0 0; font-size: 13px; color: var(--color-app-ink-2); }
.su-blog__news-form { flex: 1 1 260px; display: flex; gap: 8px; min-width: 0; }
.su-blog__news-form .su-input { flex: 1; min-width: 0; }
@container su-blog (min-width: 600px) {
  .su-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-blog__featured { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 20px; }
}
@container su-blog (min-width: 960px) { .su-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container su-blog (max-width: 379.98px) { .su-blog__news-form { flex-direction: column; } }

/* ============ Settings Page ============ */
/* ≥ 720px: 200px side nav + content; below: the nav becomes a horizontal scroll strip above the content */
.su-settings { container: su-settings / inline-size; position: relative; box-sizing: border-box; width: 100%; min-height: 440px; display: flex; flex-wrap: wrap; overflow: hidden;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-settings__nav { flex: 0 0 200px; box-sizing: border-box; min-width: 0; padding: 16px 10px; background: var(--color-app-tray); border-right: 1px solid var(--color-app-line); }
.su-settings__navtitle { margin: 0 0 6px; padding: 0 10px; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-settings__links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.su-settings__link { display: block; padding: 7px 10px; border-radius: var(--radius-ctrl); font: 500 13px/1.3 var(--font-sans); color: var(--color-app-ink-2); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-settings__link:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-settings__link[aria-current="page"] { background: var(--color-app-surface); box-shadow: var(--shadow-ring); color: var(--color-app-ink); font-weight: 600; }
.su-settings__link:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-settings__form { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; margin: 0; }
.su-settings__section { padding: 20px 22px 12px; }
.su-settings__title { margin: 0; font: 700 18px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); }
.su-settings__desc { margin: 4px 0 12px; font-size: 13px; color: var(--color-app-muted); }
.su-settings__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); align-items: center; gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--color-app-line); }
.su-settings__row > .su-field { display: contents; }
.su-settings__row .su-field__hint { grid-column: 1; margin-top: -6px; }
.su-settings__row .su-field__err, .su-settings__row .su-field__ok { grid-column: 2; }
.su-settings__row > .su-radio, .su-settings__row > .su-check { grid-column: 1 / -1; }
.su-settings .su-switch { overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.su-settings .su-switch__row { padding: 14px 0; border-top: 1px solid var(--color-app-line); }
.su-settings .su-switch__row + .su-switch__row { border-top: 1px solid var(--color-app-line); }
.su-settings__bar { position: sticky; bottom: 0; z-index: 2; margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; box-sizing: border-box; padding: 10px 22px;
  background: var(--color-app-surface); box-shadow: 0 -1px 0 var(--color-app-line), 0 -10px 24px rgba(0, 0, 0, .08);
  visibility: hidden; opacity: 0; transform: translateY(100%);
  transition: transform var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app), visibility 0s linear var(--dur-state); }
.su-settings__bar[data-show] { visibility: visible; opacity: 1; transform: none; transition: transform var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app), visibility 0s; }
.su-settings__msg { flex: 1 1 140px; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.35 var(--font-sans); color: var(--color-app-ink-2); }
.su-settings__msg::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-app-warn); }
.su-settings__bar[data-state="saving"] .su-settings__msg::before { background: var(--color-app-accent); }
.su-settings__bar[data-state="error"] .su-settings__msg { color: var(--color-app-crit-deep); }
.su-settings__bar[data-state="error"] .su-settings__msg::before { background: var(--color-app-crit); }
@container su-settings (max-width: 719.98px) {
  .su-settings__nav { flex-basis: 100%; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--color-app-line); overflow-x: auto; scrollbar-width: none; }
  .su-settings__navtitle { display: none; }
  .su-settings__links { display: flex; gap: 4px; }
  .su-settings__form { flex-basis: 100%; }
  .su-settings__section { padding: 16px 16px 8px; }
  .su-settings__bar { padding: 10px 16px; }
}
@container su-settings (max-width: 539.98px) {
  .su-settings__row { grid-template-columns: minmax(0, 1fr); }
  .su-settings__row .su-field__hint, .su-settings__row .su-field__err, .su-settings__row .su-field__ok { grid-column: 1; margin-top: 0; }
  .su-settings__msg { flex-basis: 100%; }
  .su-settings__bar .su-btn { flex: 1; }
}

/* ============ Onboarding Flow ============ */
/* choice grid 2 columns when the flow is ≥ 560px wide, 1 below; the su-steps labels show only when there is room (≥ 560px) */
.su-onboard { container: su-onboard / inline-size; box-sizing: border-box; width: 100%; padding: 16px 18px 20px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-onboard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.su-onboard__brand { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font-sans); color: var(--color-app-ink); }
.su-onboard__brand::before { content: ""; width: 20px; height: 20px; border-radius: 6px; background: var(--color-app-accent); }
.su-onboard__brand:empty::before { display: none; }
.su-onboard__body { display: grid; gap: 14px; max-width: 580px; margin: 0 auto; }
.su-onboard .su-steps { width: 100%; padding: 0; background: none; box-shadow: none; }
.su-onboard .su-progress { --fill: var(--color-app-accent); }
.su-onboard .su-progress[data-state="complete"] { --fill: var(--color-app-ok); }
.su-onboard__stage { display: grid; min-width: 0; }
.su-onboard__stage[data-swap], .su-onboard__done[data-swap] { animation: su-onboard-in var(--dur-layout) var(--ease-app); }
@keyframes su-onboard-in { from { opacity: 0; transform: translateX(8px); } }
.su-onboard__title { margin: 0; font: 700 20px/1.25 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); }
.su-onboard__title:focus { outline: none; }
.su-onboard__help { margin: 4px 0 14px; font-size: 13.5px; color: var(--color-app-ink-2); }
.su-onboard__choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.su-onboard__choice { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border-radius: 12px; cursor: pointer;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring); transition: box-shadow var(--dur-state) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-onboard__choice:hover { background: var(--color-app-hover); }
.su-onboard__choice:has(.su-onboard__input:checked) { background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-app-accent); }
.su-onboard__choice:has(.su-onboard__input:focus-visible) { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-onboard__choice .su-check__input { left: auto; right: 12px; top: 12px; }
.su-onboard__choice .su-check__input:focus-visible + .su-check__box { outline: none; }
.su-onboard__icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--color-app-tray); color: var(--color-app-ink-2);
  font: 700 13px/1 var(--font-sans); }
.su-onboard__icon svg { width: 16px; height: 16px; }
.su-onboard__choice:has(.su-onboard__input:checked) .su-onboard__icon { background: var(--color-app-surface); color: var(--color-app-accent); }
.su-onboard__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.su-onboard__name { font: 600 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-onboard__desc { font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-onboard__foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-app-line); }
.su-onboard__count { flex: 1; text-align: right; font-size: 12.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-onboard__done { padding: 20px 0 8px; text-align: center; }
@container su-onboard (min-width: 560px) { .su-onboard__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container su-onboard (max-width: 559.98px) { .su-onboard__steps { display: none; } }

/* ============ Invoice ============ */
/* items table stacks into label / value rows when the invoice is < 440px wide; print: A4 page, no actions, no card chrome */
.su-invoice { container: su-invoice / inline-size; page: su-invoice; box-sizing: border-box; width: min(560px, 100%); display: grid; gap: 16px; padding: 20px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13.5px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-invoice__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.su-invoice__issuer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.su-invoice__logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--color-app-accent); color: var(--color-app-on-accent);
  font: 700 14px/1 var(--font-sans); }
.su-invoice__org { display: block; font-weight: 600; color: var(--color-app-ink); }
.su-invoice__addr { display: block; font-size: 12px; color: var(--color-app-muted); }
.su-invoice__title { display: grid; margin: 0; text-align: right; font: 600 11px/1.4 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-invoice__no { font: 650 16px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-invoice__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--color-app-tray); font-size: 12.5px; }
.su-invoice__meta dt { color: var(--color-app-muted); }
.su-invoice__meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 0; }
.su-invoice__strong { font-weight: 600; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-invoice__meta .su-invoice__addr { flex-basis: 100%; }
.su-invoice__items-wrap { min-width: 0; }
.su-invoice__items th { font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-invoice__items td:first-child { white-space: normal; }
.su-invoice__items td.num:not(:last-child) { color: var(--color-app-ink-2); }
.su-invoice__totals { width: min(260px, 100%); margin-left: auto; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.su-invoice__totals th { padding: 3px 0; text-align: left; font-weight: 400; color: var(--color-app-ink-2); }
.su-invoice__totals td { padding: 3px 0; text-align: right; color: var(--color-app-ink-2); }
.su-invoice__grand :is(th, td) { padding-top: 10px; border-top: 1px solid var(--color-app-line); font: 650 16px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-invoice__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@container su-invoice (max-width: 439.98px) {
  .su-invoice__meta { grid-template-columns: minmax(0, 1fr); }
  .su-invoice__items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .su-invoice__items tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 0; box-shadow: inset 0 -1px 0 var(--color-app-line); }
  .su-invoice__items td { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; box-shadow: none; white-space: normal; }
  .su-invoice__items td:first-child { font-weight: 600; }
  .su-invoice__items td:not(:first-child)::before { content: attr(data-label); color: var(--color-app-muted); font-weight: 400; }
  .su-invoice__totals { width: 100%; }
  .su-invoice__actions > .su-btn { flex: 1; }
}
@media print {
  .su-invoice { width: 100%; max-width: 100%; padding: 0; border-radius: 0; box-shadow: none; break-inside: avoid; }
  .su-invoice__meta { background: none; box-shadow: inset 0 0 0 1px var(--color-app-line-strong); }
  .su-invoice__actions { display: none !important; }
  .su-invoice__items tbody tr:hover { background: none; }
}
@page su-invoice { size: A4; margin: 16mm; }
/* ============ Landing Template ============ */
/* a page assembled from built blocks: su-nav, su-hero, su-marquee, su-features, su-stats, su-testimonial, su-pricing, su-faq, su-cta.
   Breakpoints are container queries on the page itself (≥ 960 desktop, 640–959 tablet, < 640 mobile) so it also works inside a narrow frame. */
.su-landing { container: su-landing / inline-size; position: relative; box-sizing: border-box; width: 100%; min-width: 0; overflow: clip;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-landing__skip { position: absolute; top: 10px; left: 10px; z-index: 30; padding: 8px 14px; border-radius: var(--radius-ctrl); background: var(--color-app-ink); color: var(--color-app-surface);
  font: 600 13px/1.3 var(--font-sans); text-decoration: none; transform: translateY(-200%); }
.su-landing__skip:focus { transform: none; outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-landing__header { position: sticky; top: 0; z-index: 20; padding: 8px clamp(8px, 2.4cqi, 20px); background: var(--color-app-surface); transition: box-shadow var(--dur-state) var(--ease-app); }
.su-landing__header[data-scrolled] { box-shadow: 0 1px 0 var(--color-app-line), var(--shadow-nav); }
.su-landing__header > .su-nav { background: transparent; box-shadow: none; padding-inline: 4px; }
.su-landing__main { display: grid; justify-items: center; gap: clamp(28px, 6cqi, 64px); min-width: 0; padding: 0 clamp(12px, 4cqi, 40px) clamp(28px, 6cqi, 56px); outline: none; }
.su-landing__main > * { box-sizing: border-box; width: min(1040px, 100%); min-width: 0; }
.su-landing__hero { padding: clamp(20px, 7cqi, 72px) 0 0; overflow: visible; background: transparent; box-shadow: none; }
.su-landing__hero .su-hero__body { padding-inline: 0; }
.su-landing__hero .su-hero__copy { max-width: 720px; }
.su-landing__hero .su-hero__title { font-size: clamp(28px, 6.6cqi, 56px); overflow-wrap: anywhere; hyphens: auto; }
.su-landing__eyebrow { margin: 0; font: 600 11.5px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-accent); }
.su-landing__logos { display: grid; justify-items: center; gap: 10px; padding-block: 14px; border-block: 1px solid var(--color-app-line); }
.su-landing__logos-label { margin: 0; font: 500 12px/1.3 var(--font-sans); color: var(--color-app-muted); text-align: center; }
.su-landing__logo-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px clamp(16px, 4cqi, 40px); margin: 0; padding: 0; list-style: none; }
.su-landing__logo { display: block; font: 700 15px/1.2 var(--font-sans); letter-spacing: .04em; color: var(--color-app-muted); white-space: nowrap; }
img.su-landing__logo, .su-landing__logos img { height: 26px; width: auto; }
.su-landing__logos .su-marquee { width: 100%; padding: 0; background: transparent; box-shadow: none; }
.su-landing__main > :is(.su-features, .su-stats) { box-shadow: none; padding: clamp(16px, 4cqi, 32px); }
.su-landing__main > :is(.su-pricing, .su-faq) { background: transparent; box-shadow: none; padding-inline: 0; }
.su-landing .su-features__grid { grid-template-columns: minmax(0, 1fr); }
@container su-landing (min-width: 640px) { .su-landing .su-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container su-landing (min-width: 960px) { .su-landing .su-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.su-landing__quote { display: grid; justify-items: center; }
.su-landing__quote .su-testimonial { width: min(680px, 100%); box-shadow: var(--shadow-ring-card); }
.su-landing__quote .su-testimonial__quote p { font-size: clamp(15px, 2.4cqi, 19px); line-height: 1.5; color: var(--color-app-ink); }
.su-landing__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 18px clamp(12px, 4cqi, 40px); border-top: 1px solid var(--color-app-line);
  background: var(--color-app-tray); font-size: 13px; color: var(--color-app-ink-2); }
.su-landing__foot-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--color-app-ink); }
.su-landing__foot-brand .su-nav__logo { width: 20px; height: 20px; border-radius: 6px; }
.su-landing__foot-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.su-landing__foot-links a { color: var(--color-app-ink-2); text-decoration: none; border-radius: 4px; }
.su-landing__foot-links a:hover { color: var(--color-app-ink); text-decoration: underline; }
.su-landing__foot-links a:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-landing__foot-note { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--color-app-muted); }
@container su-landing (min-width: 640px) { .su-landing__foot-note { flex-basis: auto; margin-left: auto; } }
/* reveal: hidden state only exists once JS set data-reveal-ready (never with reduced motion) */
.su-landing[data-reveal-ready] .su-landing__main > section:not(.su-landing__hero) { transition: opacity var(--dur-layout) var(--ease-app), transform var(--dur-layout) var(--ease-app); }
.su-landing[data-reveal-ready] .su-landing__main > section:not(.su-landing__hero):not([data-in]) { opacity: 0; transform: translateY(12px); }

/* ============ Product Page ============ */
/* 2 columns (media | info) when the block is ≥ 860px wide, stacked below with the media first */
.su-product { container: su-product / inline-size; box-sizing: border-box; width: 100%; min-width: 0; display: grid; gap: 14px; padding: clamp(12px, 3cqi, 24px);
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-product__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
@container su-product (min-width: 860px) { .su-product__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 32px; } }
.su-product__media { display: grid; gap: 8px; min-width: 0; }
.su-product__stage { position: relative; display: grid; aspect-ratio: 4 / 3; max-height: 440px; overflow: hidden; border-radius: 14px; outline: none;
  background: radial-gradient(circle at 50% 60%, var(--color-app-accent-soft), var(--color-app-tray) 70%); }
.su-product__stage:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-product__stage > * { grid-area: 1 / 1; }
.su-product__pic { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; object-fit: cover; color: var(--color-app-accent); }
.su-product__pic svg { width: 42%; height: auto; }
.su-product__pic[data-tone="ok"] { color: var(--color-app-ok-deep); }
.su-product__pic[data-tone="warn"] { color: var(--color-app-warn-deep); }
.su-product__pic[data-tone="neutral"] { color: var(--color-app-ink-2); }
.su-product__badge { z-index: 1; align-self: start; justify-self: start; margin: 10px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); font: 600 12px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-product__thumbs { display: flex; gap: 6px; min-width: 0; }
.su-product__thumb { flex: 1 1 0; min-width: 0; max-width: 92px; height: 58px; padding: 0; border: 0; border-radius: 9px; overflow: hidden; cursor: pointer;
  background: var(--color-app-tray); box-shadow: var(--shadow-ring); transition: box-shadow var(--dur-state) var(--ease-app); }
.su-product__thumb[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--color-app-accent); }
.su-product__thumb:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-product__thumb .su-product__pic svg { width: 50%; }
.su-product__info { display: grid; align-content: start; gap: 14px; min-width: 0; }
.su-product__title { margin: 0; font: 700 clamp(20px, 3.4cqi, 28px)/1.2 var(--font-sans); letter-spacing: -.015em; color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-product__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; color: var(--color-app-ink-2); }
.su-product__stars { position: relative; display: inline-flex; color: var(--color-app-line-strong); }
.su-product__stars > span { display: inline-flex; }
.su-product__stars svg { width: 14px; height: 14px; flex: none; }
.su-product__stars-on { position: absolute; inset: 0 auto 0 0; width: var(--su-rating, 0%); overflow: hidden; color: var(--color-app-warn); }
.su-product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-variant-numeric: tabular-nums; }
.su-product__now { font: 700 24px/1.2 var(--font-sans); color: var(--color-app-ink); }
.su-product__was { font-size: 14px; color: var(--color-app-muted); }
.su-product__was[hidden], .su-product__off[hidden], .su-product [hidden] { display: none; }
.su-product__opt .su-product__legend { color: var(--color-app-ink-2); }
.su-product__picked { font-weight: 500; color: var(--color-app-ink); }
.su-product__vals { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.su-product__val { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.su-product__radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.su-product__val:has(.su-product__radio:focus-visible) { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-product__opt[data-type="pill"] .su-product__val { min-height: 36px; box-sizing: border-box; padding: 6px 14px; border-radius: var(--radius-ctrl); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); font: 500 13px/1.3 var(--font-sans); color: var(--color-app-ink); transition: box-shadow var(--dur-state) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-product__opt[data-type="pill"] .su-product__val:hover { background: var(--color-app-hover); }
.su-product__opt[data-type="pill"] .su-product__val:has(:checked) { background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-app-accent); font-weight: 600; }
.su-product__opt[data-type="pill"] .su-product__val[data-soldout] { color: var(--color-app-muted); background: var(--color-app-surface); }
.su-product__opt[data-type="pill"] .su-product__val[data-soldout] .su-product__lab { text-decoration: line-through; }
.su-product__opt[data-type="swatch"] .su-product__val { padding: 4px; border-radius: 50%; }
.su-product__swatch { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--su-swatch, var(--color-app-tray)); box-shadow: var(--shadow-ring);
  transition: box-shadow var(--dur-state) var(--ease-app); }
.su-product__val:has(:checked) .su-product__swatch { box-shadow: 0 0 0 2px var(--color-app-surface), 0 0 0 4px var(--color-app-accent); }
.su-product__opt[data-type="swatch"] .su-product__val[data-soldout]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 2px; border-radius: 1px;
  background: var(--color-app-ink-2); transform: translate(-50%, -50%) rotate(-45deg); }
.su-product__val:has(:disabled) { cursor: not-allowed; }
.su-product__buy { display: flex; flex-wrap: wrap; gap: 8px; }
.su-product__qty { display: inline-flex; align-items: center; height: 42px; border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring); }
.su-product__step { display: grid; place-items: center; width: 38px; height: 42px; padding: 0; border: 0; border-radius: var(--radius-ctrl); background: none; color: var(--color-app-ink-2); cursor: pointer; }
.su-product__step:hover:not(:disabled) { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-product__step:disabled { color: var(--color-app-line-strong); cursor: not-allowed; }
.su-product__step svg { width: 14px; height: 14px; }
.su-product__qtyin { width: 40px; height: 40px; padding: 0; border: 0; background: none; text-align: center; font: 600 14px/1 var(--font-sans); color: var(--color-app-ink);
  font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.su-product__qtyin::-webkit-inner-spin-button, .su-product__qtyin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.su-product :is(.su-product__step, .su-product__qtyin):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-product__add { flex: 1 1 180px; height: 42px; }
.su-product__add[data-soldout] { opacity: .6; cursor: not-allowed; }
.su-product__stock { margin: 0; font-size: 13px; font-weight: 500; color: var(--color-app-ink-2); }
.su-product__stock:empty { display: none; }
.su-product__stock[data-tone="ok"] { color: var(--color-app-ok-deep); }
.su-product__stock[data-tone="warn"] { color: var(--color-app-warn-deep); }
.su-product__stock[data-tone="crit"] { color: var(--color-app-crit-deep); }
.su-product__ship { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--color-app-tray); font-size: 13px; color: var(--color-app-ink-2); }
.su-product__ship svg { width: 16px; height: 16px; flex: none; }
.su-product__crumbs .su-breadcrumb__list { flex-wrap: wrap; }

/* ============ Checkout ============ */
/* su-steps on top; summary sits right ≥ 960px, below that it collapses to a toggle above the Pay bar. Fields: 2 columns ≥ 600px */
.su-checkout { container: su-checkout / inline-size; box-sizing: border-box; width: 100%; min-width: 0; display: grid; gap: 16px; padding: clamp(12px, 3cqi, 24px);
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-checkout [hidden] { display: none !important; }
.su-checkout__steps { width: 100%; padding: 0; background: transparent; box-shadow: none; }
.su-checkout__body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "sum" "foot"; gap: 14px; min-width: 0; }
@container su-checkout (min-width: 960px) {
  .su-checkout__body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "main sum" "foot sum"; align-items: start; column-gap: 24px; }
  .su-checkout__sumbtn { display: none !important; }
}
@container su-checkout (max-width: 959.98px) {
  .su-checkout__sum:not([data-open]) .su-checkout__sumbody { display: none; }
  .su-checkout__sumh { display: none; }
}
.su-checkout__main { grid-area: main; display: grid; gap: 14px; min-width: 0; }
.su-checkout__panel { display: grid; gap: 14px; min-width: 0; }
.su-checkout__panel[data-swap], .su-checkout__done[data-swap] { animation: su-checkout-in var(--dur-state) var(--ease-app); }
@keyframes su-checkout-in { from { opacity: 0; transform: translateY(6px); } }
.su-checkout__h { margin: 0; font: 700 17px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); outline: none; }
.su-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; }
@container su-checkout (min-width: 600px) { .su-checkout__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .su-checkout__wide { grid-column: 1 / -1; } }
.su-checkout__f { min-width: 0; }
.su-checkout__f .su-input { width: 100%; box-sizing: border-box; }
.su-checkout__card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.su-checkout__card > :first-child { grid-column: 1 / -1; }
.su-checkout__card .su-input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.su-checkout__method { display: grid; gap: 10px; }
.su-checkout__qr { width: 112px; height: 112px; border-radius: 10px; box-shadow: var(--shadow-ring); border: 8px solid var(--color-app-surface);
  background: repeating-conic-gradient(var(--color-app-ink) 0 25%, var(--color-app-surface) 0 50%) 0 0 / 14px 14px; }
.su-checkout__note { margin: 0; font-size: 13px; color: var(--color-app-ink-2); }
.su-checkout__lines, .su-checkout__items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.su-checkout__lines li, .su-checkout__items li { display: flex; align-items: center; gap: 10px; min-width: 0; font-variant-numeric: tabular-nums; }
.su-checkout__lines b { font-weight: 600; color: var(--color-app-ink); }
.su-checkout__thumb { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--color-app-accent-soft); box-shadow: var(--shadow-ring); }
.su-checkout__name { flex: 1; min-width: 0; display: grid; font-weight: 600; color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-checkout__name small { font-size: 12px; font-weight: 400; color: var(--color-app-muted); }
.su-checkout__review { display: grid; gap: 10px; margin: 0; }
.su-checkout__review div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--color-app-tray); }
.su-checkout__review dt { font: 600 11.5px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-checkout__review dd { margin: 0; color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-checkout__errs:empty { display: none; }
.su-checkout__errs, .su-checkout__fail { padding: 10px 12px; border-radius: 10px; background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); font-size: 13px; }
.su-checkout__errs-t { margin: 0 0 4px; font-weight: 600; }
.su-checkout__errs ul { margin: 0; padding-left: 18px; }
.su-checkout__errs button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; text-decoration: underline; cursor: pointer; border-radius: 3px; }
.su-checkout__errs button:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-checkout__sum { grid-area: sum; min-width: 0; padding: 14px; border-radius: 12px; background: var(--color-app-tray); }
.su-checkout__sumbtn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 2px 0; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: 600 14px/1.4 var(--font-sans); color: var(--color-app-ink); text-align: left; }
.su-checkout__sumbtn > span { flex: 1; }
.su-checkout__sumbtn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-state) var(--ease-app); }
.su-checkout__sum[data-open] .su-checkout__sumbtn svg { transform: rotate(180deg); }
.su-checkout__sum[data-open] .su-checkout__sumbody { margin-top: 12px; }
.su-checkout__sumbtn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-checkout__sumtotal { font-variant-numeric: tabular-nums; }
.su-checkout__sumbody { display: grid; gap: 12px; }
.su-checkout__sumh { margin: 0; font: 650 14px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-checkout__sumh span { font-weight: 400; color: var(--color-app-muted); }
.su-checkout__items li { font-size: 13px; }
.su-checkout__totals { display: grid; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid var(--color-app-line); font-size: 13px; }
.su-checkout__totals div { display: flex; justify-content: space-between; gap: 8px; }
.su-checkout__totals dt { color: var(--color-app-ink-2); }
.su-checkout__totals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-checkout__total { padding-top: 6px; border-top: 1px solid var(--color-app-line); }
.su-checkout__total :is(dt, dd) { font-weight: 700; font-size: 15px; color: var(--color-app-ink); }
.su-checkout__foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.su-checkout__go { flex: 0 1 auto; min-width: 180px; }
@container su-checkout (max-width: 599.98px) { .su-checkout__go { flex: 1 1 100%; order: -1; } .su-checkout__foot [data-back] { order: 0; } }
.su-checkout__trust { display: flex; align-items: center; gap: 6px; flex-basis: 100%; margin: 0; font-size: 12px; color: var(--color-app-muted); }
.su-checkout__trust svg { width: 14px; height: 14px; flex: none; }
.su-checkout__done { display: grid; justify-items: center; gap: 8px; padding: 28px 12px; text-align: center; }
.su-checkout__tick { width: 64px; height: 64px; fill: none; stroke: var(--color-app-ok-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.su-checkout__tick :is(circle, path) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: su-checkout-draw .5s var(--ease-app) forwards; }
.su-checkout__tick path { animation-delay: .3s; }
@keyframes su-checkout-draw { to { stroke-dashoffset: 0; } }

/* ============ Gantt Chart ============ */
/* task column sticky; the timeline gets a minimum width per column and scrolls inside the card (never the page) */
.su-gantt { container: su-gantt / inline-size; --tc: 148px; box-sizing: border-box; width: min(560px, 100%); padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
@container su-gantt (max-width: 420px) { .su-gantt__grid { --tc: 112px; } }
.su-gantt__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.su-gantt__heading { flex: 1; min-width: 0; }
.su-gantt__title { margin: 0; font: 600 14px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-gantt__sub { margin: 0; font-size: 12px; color: var(--color-app-muted); }
.su-gantt__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.su-gantt__grid { --u: 64px; min-width: calc(var(--tc) + var(--cols, 4) * var(--u)); }
.su-gantt__grid[data-scale="day"] { --u: 28px; }
.su-gantt__row { display: flex; border-top: 1px solid var(--color-app-line); }
.su-gantt__row--head { border-top: 0; }
.su-gantt__task { position: sticky; left: 0; z-index: 2; flex: 0 0 var(--tc); box-sizing: border-box; display: flex; align-items: center; gap: 6px; min-width: 0; height: 34px; padding-right: 8px;
  background: var(--color-app-surface); }
.su-gantt__row--head .su-gantt__task { height: auto; padding-bottom: 6px; font-size: 10.5px; color: var(--color-app-muted); }
.su-gantt__task .su-avatar { flex: none; }
.su-gantt__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 500; color: var(--color-app-ink); }
.su-gantt__name[data-ms] { color: var(--color-app-muted); font-weight: 400; }
.su-gantt__lane { position: relative; flex: 1 1 auto; min-width: 0; height: 34px; background-image: linear-gradient(to right, var(--color-app-line) 1px, transparent 1px); background-size: calc(100% / var(--cols, 4)) 100%; }
.su-gantt__lane[data-ms]:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; border-radius: 4px; }
.su-gantt__scale { height: auto; padding-bottom: 6px; background: none; }
.su-gantt__cols { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); font-size: 10.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-gantt__col { padding-left: 4px; overflow: hidden; white-space: nowrap; }
.su-gantt__today { position: absolute; bottom: 4px; transform: translateX(-50%); padding: 1px 5px; border-radius: 5px; background: var(--color-app-crit); color: var(--color-white); font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.su-gantt__now { position: absolute; top: 0; bottom: 0; z-index: 1; width: 2px; margin-left: -1px; background: var(--color-app-crit); opacity: .85; pointer-events: none; }
.su-gantt__bar { position: absolute; top: 8px; bottom: 8px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-width: 4px; border-radius: 6px; overflow: hidden;
  background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 1px var(--color-app-accent); cursor: default; outline: 0; transform-origin: 0 50%;
  transition: box-shadow var(--dur-hover) var(--ease-app), filter var(--dur-hover) var(--ease-app); }
.su-gantt__bar:hover { filter: brightness(1.06); }
.su-gantt__bar:focus-visible { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 2px var(--color-app-surface), 0 0 0 4px var(--color-app-focus); overflow: visible; }
.su-gantt__bar[data-status="done"] { background: var(--color-app-sunk); box-shadow: inset 0 0 0 1px var(--color-app-line-strong); color: var(--color-app-ok-deep); }
.su-gantt__bar[data-status="done"]:focus-visible { box-shadow: inset 0 0 0 1px var(--color-app-line-strong), 0 0 0 2px var(--color-app-surface), 0 0 0 4px var(--color-app-focus); }
.su-gantt__bar[data-status="planned"] { background: none; box-shadow: none; border: 1px dashed var(--color-app-line-strong); }
.su-gantt__bar[data-status="planned"]:focus-visible { box-shadow: 0 0 0 2px var(--color-app-surface), 0 0 0 4px var(--color-app-focus); }
.su-gantt__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-app-accent); opacity: .9; border-radius: 5px 0 0 5px; }
.su-gantt__pct { position: absolute; right: 6px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 10px; font-weight: 600; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-gantt__bar[data-status="planned"] .su-gantt__pct { color: var(--color-app-muted); font-weight: 500; }
.su-gantt__bar[data-out] { overflow: visible; }
.su-gantt__bar[data-out] .su-gantt__pct { right: auto; left: calc(100% + 4px); }
.su-gantt__bar[data-out][data-left] .su-gantt__pct { left: auto; right: calc(100% + 4px); }
.su-gantt__ok { display: flex; color: var(--color-app-ok-deep); }
.su-gantt__ok svg { width: 12px; height: 12px; }
.su-gantt__grip { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.su-gantt__grip::after { content: ''; position: absolute; right: 3px; top: 30%; bottom: 30%; width: 2px; border-radius: 1px; background: var(--color-app-ink-2); opacity: 0; transition: opacity var(--dur-hover) var(--ease-app); }
.su-gantt__bar:hover .su-gantt__grip::after, .su-gantt__bar:focus-visible .su-gantt__grip::after { opacity: .6; }
.su-gantt__grid:has(.su-gantt__grip) .su-gantt__bar { cursor: grab; touch-action: none; }
.su-gantt__bar[data-dragging] { cursor: grabbing; z-index: 2; box-shadow: inset 0 0 0 1px var(--color-app-accent), var(--shadow-md); }
.su-gantt__ms { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 4px; margin-left: -5px; pointer-events: none; }
.su-gantt__ms[data-end] { flex-direction: row-reverse; transform: translateX(calc(-100% + 9px)); }
.su-gantt__ms i { flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--color-app-accent); transform: rotate(45deg); }
.su-gantt__ms span { font-size: 10.5px; color: var(--color-app-ink-2); white-space: nowrap; background: var(--color-app-surface); padding: 0 2px; border-radius: 3px; }
.su-gantt__grid[data-anim] .su-gantt__bar { animation: su-gantt-grow var(--dur-layout) var(--ease-app) both paused; animation-delay: calc(var(--i) * 50ms); }
.su-gantt[data-in] .su-gantt__grid[data-anim] .su-gantt__bar { animation-play-state: running; }
@keyframes su-gantt-grow { from { transform: scaleX(0); } }
.su-gantt__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--color-app-line); list-style: none; font-size: 11px; color: var(--color-app-muted); }
.su-gantt__legend li { display: flex; align-items: center; gap: 5px; }
.su-gantt__legend li[hidden] { display: none; }
.su-gantt__key { width: 10px; height: 6px; border-radius: 2px; background: var(--color-app-accent); }
.su-gantt__key[data-status="done"] { background: var(--color-app-sunk); box-shadow: inset 0 0 0 1px var(--color-app-line-strong); }
.su-gantt__key[data-status="planned"] { box-sizing: border-box; background: none; border: 1px dashed var(--color-app-line-strong); }
.su-gantt__key[data-ms] { width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); }
.su-gantt__key[data-today] { width: 2px; height: 10px; background: var(--color-app-crit); }
.su-gantt[data-empty] .su-gantt__scroll::after { content: 'ยังไม่มีงาน'; display: block; padding: 16px 0; text-align: center; font-size: 12.5px; color: var(--color-app-muted); }
/* ============ Candlestick Chart ============ */
/* up = hollow body (stroke ok), down = filled (crit): the shape carries the direction, not only the colour */
.su-candle { box-sizing: border-box; width: min(560px, 100%); padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-candle__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.su-candle__id { min-width: 0; }
.su-candle__sym { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--color-app-ink); }
.su-candle__sym b { font-weight: 600; }
.su-candle__name { font-size: 12px; color: var(--color-app-muted); }
.su-candle__px { margin: 0; display: flex; align-items: center; gap: 8px; }
.su-candle__last { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-candle__seg { font-size: 12px; }
.su-candle__plot { position: relative; min-width: 0; border-radius: 4px; cursor: crosshair; touch-action: pan-y; }
.su-candle__plot:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 4px; }
.su-candle__svg { display: block; width: 100%; overflow: visible; font-family: var(--font-sans); }
.su-candle__svg [hidden] { display: none; }
.su-candle__svg[data-swap] { animation: su-candle-swap var(--dur-state) var(--ease-app); }
@keyframes su-candle-swap { from { opacity: 0; } }
.su-candle__grid { stroke: var(--color-app-line); stroke-width: 1; }
.su-candle__tick { fill: var(--color-app-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.su-candle__time { fill: var(--color-app-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.su-candle__wick { stroke-width: 1.25; }
.su-candle__c[data-dir="up"] .su-candle__wick { stroke: var(--color-app-ok); }
.su-candle__c[data-dir="up"] .su-candle__body { fill: var(--color-app-surface); stroke: var(--color-app-ok); stroke-width: 1.25; }
.su-candle__c[data-dir="down"] .su-candle__wick { stroke: var(--color-app-crit); }
.su-candle__c[data-dir="down"] .su-candle__body { fill: var(--color-app-crit); }
.su-candle__c { transition: opacity var(--dur-hover) var(--ease-app); }
.su-candle__svg:has(.su-candle__c[data-active]) .su-candle__c:not([data-active]) { opacity: .55; }
.su-candle__vol { opacity: .3; }
.su-candle__vol[data-dir="up"] { fill: var(--color-app-ok); }
.su-candle__vol[data-dir="down"] { fill: var(--color-app-crit); }
.su-candle__last line { stroke: var(--color-app-accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.su-candle__last rect { fill: var(--color-app-accent); }
.su-candle__last text { fill: var(--color-app-on-accent); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.su-candle__vx, .su-candle__hx { stroke: var(--color-app-ink-2); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.su-candle__tag rect { fill: var(--color-app-ink); }
.su-candle__tag text { fill: var(--color-app-surface); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.su-candle__empty { fill: var(--color-app-muted); font-size: 12.5px; }
.su-candle .su-ctip__row { min-width: 76px; }
/* ============ Sankey Chart ============ */
.su-sankey { box-sizing: border-box; width: min(560px, 100%); padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-sankey__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; margin-bottom: 6px; }
.su-sankey__title { margin: 0; font: 600 13px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-sankey__sub { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-sankey__plot { position: relative; min-width: 0; }
.su-sankey__svg { display: block; width: 100%; overflow: visible; font-family: var(--font-sans); }
.su-sankey__link { fill: none; stroke: var(--color-app-accent); stroke-opacity: .22; transition: stroke-opacity var(--dur-hover) var(--ease-app); }
.su-sankey__link[data-tone="ok"] { stroke: var(--color-app-ok); stroke-opacity: .25; }
.su-sankey__link[data-tone="crit"] { stroke: var(--color-app-crit); stroke-opacity: .2; }
.su-sankey__link[data-tone="warn"] { stroke: var(--color-app-warn); stroke-opacity: .25; }
.su-sankey__svg[data-focus] .su-sankey__link { stroke-opacity: .07; }
.su-sankey__svg[data-focus] .su-sankey__link[data-on] { stroke-opacity: .45; }
.su-sankey__node { fill: var(--color-app-accent); transition: opacity var(--dur-hover) var(--ease-app); }
.su-sankey__node[data-tone="ok"] { fill: var(--color-app-ok); }
.su-sankey__node[data-tone="crit"] { fill: var(--color-app-crit); }
.su-sankey__node[data-tone="warn"] { fill: var(--color-app-warn); }
.su-sankey__node[data-tone="ink"] { fill: var(--color-app-ink); }
.su-sankey__svg[data-focus] .su-sankey__node:not([data-on]), .su-sankey__svg[data-focus] .su-sankey__lab:not([data-on]) { opacity: .45; }
.su-sankey__lab { transition: opacity var(--dur-hover) var(--ease-app); }
.su-sankey__name { fill: var(--color-app-ink-2); font-size: 11px; font-weight: 500; }
.su-sankey__val { fill: var(--color-app-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.su-sankey__lab--mid text { paint-order: stroke; stroke: var(--color-app-surface); stroke-width: 3px; stroke-linejoin: round; }
.su-sankey__empty { fill: var(--color-app-muted); font-size: 12.5px; }
.su-sankey__svg[data-anim] .su-sankey__link { animation: su-sankey-in var(--dur-layout) var(--ease-app) both paused; animation-delay: calc(var(--d) * 140ms); }
.su-sankey[data-in] .su-sankey__svg[data-anim] .su-sankey__link { animation-play-state: running; }
@keyframes su-sankey-in { from { opacity: 0; } }
.su-sankey__hits { position: absolute; inset: 0; pointer-events: none; }
.su-sankey__hit { position: absolute; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; pointer-events: auto; }
.su-sankey__hit:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 0; }
.su-sankey__hit[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-app-ink); }
/* ============ Treemap ============ */
/* tile rects are exact (area ∝ value); the 1.5px surface border is the visual gap. Accent ramp by rank via --mix */
.su-treemap { container: su-treemap / inline-size; box-sizing: border-box; width: min(560px, 100%); padding: 14px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-treemap__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; margin-bottom: 10px; }
.su-treemap__title { margin: 0; font: 600 13px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-treemap__sub { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-treemap__crumbs { margin: -4px 0 8px; }
.su-treemap__crumbs[hidden] { display: none; }
.su-treemap__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.su-treemap__crumbs li { display: flex; align-items: center; gap: 2px; color: var(--color-app-ink); }
.su-treemap__crumbs li + li::before { content: '›'; padding: 0 4px; color: var(--color-app-muted); }
.su-treemap__crumbs [aria-current] { font-weight: 600; color: var(--color-app-ink); }
.su-treemap__crumb { padding: 2px 6px; margin: 0 -2px; border: 0; border-radius: var(--radius-ctrl); background: none; cursor: pointer; font: inherit; color: var(--color-app-accent);
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-treemap__crumb:hover { background: var(--color-app-hover); }
.su-treemap__crumb:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-treemap__plot { position: relative; }
.su-treemap__map { position: relative; height: 230px; overflow: hidden; border-radius: 6px; }
@container su-treemap (max-width: 380px) { .su-treemap__map { height: 210px; } }
.su-treemap__tile { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 2px; min-width: 0;
  margin: 0; padding: 7px 8px; overflow: hidden; border: 1.5px solid var(--color-app-surface); border-radius: 7px; text-align: left; cursor: pointer; font: inherit;
  /* paints color-mix(accent var(--mix), surface) as a veil over the colour the text sits on: surface for ink text, accent for on-accent text (strong tiles),
     so the base background stays the plain token the label is designed against */
  background-color: var(--color-app-surface); background-image: linear-gradient(color-mix(in srgb, var(--color-app-accent) var(--mix, 50%), transparent) 0 0);
  color: var(--color-app-ink); transform-origin: 0 0;
  transition: transform var(--dur-layout) var(--ease-app), filter var(--dur-hover) var(--ease-app); }
.su-treemap__tile[data-strong] { color: var(--color-app-on-accent); background-color: var(--color-app-accent);
  background-image: linear-gradient(color-mix(in srgb, var(--color-app-surface) calc(100% - var(--mix, 50%)), transparent) 0 0); }
.su-treemap__tile:hover { filter: brightness(1.08); }
.su-treemap__tile:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -3.5px; z-index: 1; }
.su-treemap__label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 12px; }
.su-treemap__val { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .92; }
.su-treemap__tile[data-big] .su-treemap__label { font-size: 13px; }
.su-treemap__tile[data-big] .su-treemap__val { font-size: 18px; font-weight: 650; }
.su-treemap__tile[data-small] .su-treemap__label, .su-treemap__tile[data-small] .su-treemap__val { display: none; }
.su-treemap__more { position: absolute; right: 7px; top: 8px; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.su-treemap__tile[data-small] .su-treemap__more { display: none; }
.su-treemap[data-empty] .su-treemap__map::after { content: 'ยังไม่มีข้อมูล'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; color: var(--color-app-muted); }
/* ============ Spreadsheet Grid ============ */
/* rows are 30px (virtualised by JS, keep in sync); header row + row-number column are sticky inside .su-sheet__scroll */
.su-sheet { box-sizing: border-box; width: min(560px, 100%); overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-sheet__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--color-app-line); }
.su-sheet__ref { flex: none; min-width: 28px; padding: 3px 8px; border-radius: 6px; background: var(--color-app-tray); text-align: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-app-ink); white-space: nowrap; }
.su-sheet__fxl { font-style: italic; font-size: 12px; color: var(--color-app-muted); }
.su-sheet__fx { flex: 1; min-width: 0; box-sizing: border-box; height: 28px; padding: 4px 8px; border: 0; border-radius: 6px; outline: 0; background: var(--color-app-surface); box-shadow: var(--shadow-ring);
  font: 400 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); }
.su-sheet__fx:focus-visible { box-shadow: 0 0 0 2px var(--color-app-focus); }
.su-sheet__fx[readonly] { color: var(--color-app-ink-2); }
.su-sheet__scroll { position: relative; max-height: 300px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.su-sheet__grid { position: relative; min-width: 100%; outline: 0; font-size: 12.5px; user-select: none; -webkit-user-select: none; }
.su-sheet__grid:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-sheet__row { display: grid; grid-template-columns: var(--tpl); height: 30px; }
.su-sheet__hrow { position: sticky; top: 0; z-index: 3; height: 28px; }
.su-sheet__cell, .su-sheet__ch, .su-sheet__rh, .su-sheet__corner { box-sizing: border-box; min-width: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-right: 1px solid var(--color-app-line); border-bottom: 1px solid var(--color-app-line); display: flex; align-items: center; }
.su-sheet__ch, .su-sheet__rh, .su-sheet__corner { justify-content: center; padding: 0 4px; background: var(--color-app-tray); color: var(--color-app-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.su-sheet__rh, .su-sheet__corner { position: sticky; left: 0; z-index: 2; }
.su-sheet__corner { z-index: 4; }
.su-sheet__ch[data-on], .su-sheet__rh[data-on] { background: var(--color-app-accent-soft); color: var(--color-app-accent); font-weight: 600; }
.su-sheet__cell { position: relative; background: var(--color-app-surface); color: var(--color-app-ink); cursor: cell; }
.su-sheet__cell[data-num] { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.su-sheet__cell[data-err] { color: var(--color-app-crit-deep); font-weight: 600; }
.su-sheet__cell[data-sel] { background: var(--color-app-accent-soft); }
.su-sheet__cell[data-active] { box-shadow: inset 0 0 0 2px var(--color-app-accent); background: var(--color-app-surface); }
.su-sheet__grid:not(:focus):not(:focus-within) .su-sheet__cell[data-active] { box-shadow: inset 0 0 0 2px var(--color-app-line-strong); }
.su-sheet__cell[data-fillto] { box-shadow: inset 0 0 0 1px var(--color-app-accent); background: var(--color-app-accent-soft); }
.su-sheet__fill { position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; box-sizing: border-box; background: var(--color-app-accent); border: 1px solid var(--color-app-surface); border-radius: 1px; cursor: crosshair; }
.su-sheet__edit { position: absolute; z-index: 5; box-sizing: border-box; margin: 0; padding: 0 7px; border: 0; border-radius: 0; outline: 0; background: var(--color-app-surface);
  box-shadow: inset 0 0 0 2px var(--color-app-accent), var(--shadow-md); font: 400 12.5px/1 var(--font-sans); color: var(--color-app-ink); }
.su-sheet__edit[data-num] { text-align: right; }
.su-sheet__edit[hidden] { display: none; }
.su-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 36px; padding: 4px 8px; background: var(--color-app-tray); border-top: 1px solid var(--color-app-line); font-size: 12px; }
.su-sheet__tabs { flex: 0 1 auto; min-width: 0; font-size: 12px; }
.su-sheet__status { margin: 0 0 0 auto; padding-right: 4px; white-space: nowrap; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
/* ============ Design System Kit ============ */
/* the root is the size container (no padding, so ≥960 / ≥600 measure the whole kit); the host theme class (data-theme-light / -dark) goes on the root */
.su-dskit { container: su-dskit / inline-size; position: relative; box-sizing: border-box; width: min(960px, 100%); min-width: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-ground); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-dskit[data-switching], .su-dskit[data-switching] *:not(.su-dskit__probe) { transition: background-color var(--dur-state) var(--ease-app), color var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-dskit__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 4px; }
.su-dskit__brand { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); }
.su-dskit__mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-dskit__mark svg { width: 13px; height: 13px; }
.su-dskit__spacer { flex: 1; }
.su-dskit__probe { position: absolute; width: 0; height: 0; overflow: hidden; transition: none; }
.su-dskit__theme { flex: none; }
.su-dskit__tabs { padding: 0 16px 16px; }
.su-dskit__panel:not([hidden]) { display: grid; gap: 18px; padding-top: 14px; }
.su-dskit__sec { min-width: 0; }
.su-dskit__h { margin: 0 0 8px; font: 600 11px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-dskit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container su-dskit (min-width: 600px) { .su-dskit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container su-dskit (min-width: 960px) { .su-dskit__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.su-dskit__sw, .su-dskit__shape { display: grid; align-content: start; gap: 4px; min-width: 0; margin: 0; padding: 6px 6px 8px; border: 0; border-radius: var(--radius-ctrl); text-align: left;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); color: var(--color-app-ink); font: inherit; cursor: pointer; }
.su-dskit__sw:hover, .su-dskit__shape:hover { background: var(--color-app-hover); }
.su-dskit__sw:focus-visible, .su-dskit__shape:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-dskit__sw[data-copied], .su-dskit__shape[data-copied] { box-shadow: inset 0 0 0 1.5px var(--color-app-accent); }
.su-dskit__chip { height: 36px; border-radius: 6px; box-shadow: var(--shadow-ring); }
.su-dskit__nm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 12px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-dskit__meta { display: grid; gap: 1px; min-width: 0; font-size: 11px; line-height: 1.35; color: var(--color-app-muted); }
.su-dskit__val { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-muted); }
.su-dskit__ratio { font-variant-numeric: tabular-nums; color: var(--color-app-ink-2); }
.su-dskit__ratio[data-low] { color: var(--color-app-crit-deep); font-weight: 600; }
.su-dskit__type { display: grid; gap: 6px; }
.su-dskit__trow { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.su-dskit__tmeta { flex: none; width: 64px; font-size: 10.5px; line-height: 1.3; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-dskit__tsample { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; color: var(--color-app-ink); font-family: var(--font-sans); }
.su-dskit__shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); gap: 10px; }
.su-dskit__box { height: 40px; margin: 4px 4px 6px; border-radius: 8px; background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-app-accent); }
.su-dskit__shape[data-token^="--shadow"] .su-dskit__box { background: var(--color-app-surface); }
.su-dskit__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.su-dskit__pattern { display: grid; gap: 12px; max-width: 420px; padding: 14px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-dskit .su-field { max-width: 360px; }
.su-dskit__code.su-code { width: 100%; box-shadow: var(--shadow-ring-card); }

/* ============ Agent Inspector ============ */
.su-agent { container: su-agent / inline-size; box-sizing: border-box; width: min(640px, 100%); min-width: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-agent__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; }
.su-agent__who { flex: 1; min-width: 0; }
.su-agent__name { margin: 0; font: 600 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-agent__run { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-muted); }
.su-agent__status { flex: none; }
.su-agent__metrics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 14px; }
.su-agent__m { flex: 1; min-width: 64px; padding: 8px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-tray); }
.su-agent__m dt { font-size: 10.5px; color: var(--color-app-muted); }
.su-agent__m dd { margin: 0; font: 600 13.5px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-agent__tabs .su-tabs__list { padding: 0 14px; }
.su-agent__panel { padding: 6px 6px 10px; }
.su-agent__trace.su-tree { --ind: 12px; width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.su-agent .su-tree__row { flex-wrap: wrap; gap: 4px 8px; padding: 5px 8px; font-weight: 400; }
.su-agent__nm { flex: 0 0 40%; box-sizing: border-box; display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: calc((var(--lvl, 1) - 1) * var(--ind));
  font: 400 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); }
.su-agent .su-tree [aria-selected="true"] > .su-tree__row .su-agent__nm { color: var(--color-app-ink); font-weight: 600; }
.su-agent .su-tree__icon svg { width: 13px; height: 13px; }
.su-agent__bar { position: relative; flex: 1 1 0; min-width: 40px; height: 8px; border-radius: 4px; background: var(--color-app-tray); }
.su-agent .su-tree [aria-selected="true"] > .su-tree__row .su-agent__bar { background: var(--color-app-surface); }
.su-agent__bar i { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 4px; background: var(--color-app-accent); transform-origin: 0 50%; }
.su-agent [data-kind="agent"] > .su-tree__row .su-agent__bar i { background: var(--color-app-ink-2); }
.su-agent [data-kind="tool"] > .su-tree__row .su-agent__bar i { background: var(--color-app-ok); }
.su-agent [data-error] > .su-tree__row .su-agent__bar i { background: var(--color-app-crit); }
.su-agent [data-error] > .su-tree__row .su-tree__label { color: var(--color-app-crit-deep); }
.su-agent [data-live] > .su-tree__row .su-agent__bar i { animation: su-agent-live 1.2s ease-in-out infinite; }
.su-agent__dur { flex: none; width: 48px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-agent__emsg { flex: 0 0 100%; box-sizing: border-box; min-width: 0; padding-left: calc((var(--lvl, 1) - 1) * var(--ind) + 38px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; color: var(--color-app-crit-deep); }
.su-agent__trace[data-intro] .su-agent__bar i { animation: su-agent-grow var(--dur-layout) var(--ease-app) both; }
.su-agent [data-fresh] > .su-tree__row { animation: su-rise var(--dur-layout) var(--ease-app); }
@keyframes su-agent-grow { from { transform: scaleX(0); } }
@keyframes su-agent-live { 50% { opacity: .45; } }
@container su-agent (max-width: 599px) {
  .su-agent__nm { flex: 1 1 0; }
  .su-agent__bar { order: 3; flex: 0 0 100%; box-sizing: border-box; margin-left: calc((var(--lvl, 1) - 1) * var(--ind) + 38px); max-width: calc(100% - (var(--lvl, 1) - 1) * var(--ind) - 38px); }
  .su-agent__emsg { order: 4; }
}
.su-agent__drawer:not([hidden]) { display: grid; gap: 8px; margin: 8px 2px 0; padding: 10px 12px 12px; border-radius: var(--radius-ctrl); background: var(--color-app-tray); box-shadow: var(--shadow-ring); }
.su-agent__drawer[data-error] { box-shadow: inset 0 0 0 1px var(--color-app-crit); }
.su-agent__dhead { display: flex; align-items: center; gap: 8px; }
.su-agent__dtitle { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; font: 600 13px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); }
.su-agent__close.su-btn { flex: none; width: 28px; height: 28px; padding: 0; }
.su-agent__dmeta { margin: 0; font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-agent__derr { margin: 0; padding: 6px 8px; border-radius: 6px; background: var(--color-app-crit-soft); font-size: 12px; color: var(--color-app-crit-deep); overflow-wrap: anywhere; }
.su-agent__io { display: grid; gap: 8px; min-width: 0; }
.su-agent__code.su-code { width: 100%; box-shadow: var(--shadow-ring-card); }
.su-agent__twrap { padding: 0 6px; }
.su-agent__table td { padding: 8px 10px; font-size: 12.5px; }
.su-agent__table th { height: 32px; padding: 0 10px; }
.su-agent__mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.su-agent__logs { display: grid; gap: 2px; margin: 0; padding: 4px 8px; list-style: none; }
.su-agent__logs li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; font-size: 12px; }
.su-agent__logs .su-chip { height: 20px; padding: 0 7px; font-size: 10.5px; }
.su-agent__lt { flex: none; width: 52px; font: 400 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-agent__lm { min-width: 0; overflow-wrap: anywhere; color: var(--color-app-ink-2); }
.su-agent__empty { margin: 0; padding: 14px 10px; font-size: 12.5px; color: var(--color-app-muted); }

/* ============ Pivot Table ============ */
.su-pivot { container: su-pivot / inline-size; box-sizing: border-box; width: min(560px, 100%); min-width: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-pivot__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; box-shadow: inset 0 -1px 0 var(--color-app-line); font-size: 12px; }
.su-pivot__lab { margin-left: 6px; color: var(--color-app-muted); }
.su-pivot__lab:first-child { margin-left: 0; }
.su-pivot__pick { position: relative; display: inline-flex; align-items: center; height: 26px; border-radius: var(--radius-pill); background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-pivot__pick[data-tone="accent"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-pivot__pick::after { content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); pointer-events: none; }
.su-pivot__pick select { appearance: none; height: 100%; max-width: 140px; margin: 0; padding: 0 24px 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent;
  color: inherit; font: 600 12px/1 var(--font-sans); cursor: pointer; }
.su-pivot__pick select:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-pivot__pick select:disabled { opacity: .5; cursor: not-allowed; }
.su-pivot__pick option { background: var(--color-app-surface); color: var(--color-app-ink); }
.su-pivot__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.su-pivot__table.su-table { font-size: 12.5px; }
.su-pivot__table th { height: 34px; padding: 0 10px; letter-spacing: .04em; }
.su-pivot__table td { padding: 6px 10px; }
.su-pivot__table tbody th { height: auto; padding: 6px 10px; font: 400 12.5px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--color-app-ink); }
.su-pivot__table th.num { text-align: right; }
.su-pivot__first { position: sticky; left: 0; z-index: 1; background: var(--color-app-surface); text-align: left; }
.su-pivot__table tbody tr:hover > .su-pivot__first { background: var(--color-app-hover); }
.su-pivot__table tr[aria-expanded] > * { font-weight: 600; }
.su-pivot__table tr[aria-level="2"] > *, .su-pivot__table tr[aria-level="3"] > * { color: var(--color-app-ink-2); }
.su-pivot__table tr[data-total] > * { font-weight: 700; color: var(--color-app-ink); background: var(--color-app-tray); box-shadow: inset 0 1px 0 var(--color-app-line-strong); }
.su-pivot__table td.su-pivot__tot { font-weight: 600; }
.su-pivot__cell { display: inline-flex; align-items: center; gap: 4px; padding-left: calc((var(--lvl, 1) - 1) * 16px); }
.su-pivot__tw { flex: none; display: inline-grid; place-items: center; width: 12px; height: 12px; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-pivot__tw svg { width: 12px; height: 12px; }
.su-pivot__table tr[aria-expanded] .su-pivot__cell { cursor: pointer; }
.su-pivot__table tr[aria-expanded="true"] .su-pivot__tw { transform: rotate(90deg); }
.su-pivot__table [data-c] { outline: none; }
.su-pivot__table [data-c]:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-pivot__table tr[data-fresh] > * { animation: su-pivot-in var(--dur-state) var(--ease-app) both; }
@keyframes su-pivot-in { from { opacity: 0; } }
.su-pivot__sort { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.su-pivot__sort svg { width: 12px; height: 12px; opacity: .45; }
.su-pivot__table th[aria-sort] .su-pivot__sort svg { opacity: 1; }
.su-pivot__table th.num .su-pivot__sort { flex-direction: row-reverse; }
.su-pivot__sort:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; border-radius: 4px; }

/* ============ Org Chart ============ */
.su-org { --gap: 16px; --ln: var(--color-app-line-strong); container: su-org / inline-size; box-sizing: border-box; width: min(640px, 100%); min-width: 0;
  padding: 14px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-org__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.su-org__title { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-org__zoom { display: inline-flex; align-items: center; gap: 2px; }
.su-org__pct { min-width: 44px; height: 28px; padding: 0 4px; border: 0; border-radius: var(--radius-ctrl); background: none; cursor: pointer;
  font: 500 11.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-ink-2); }
.su-org__pct:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-org__pct:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-org__viewport { overflow: auto; overscroll-behavior: contain; max-height: 420px; margin: 0 -4px; padding: 4px; cursor: grab; scrollbar-width: thin; }
.su-org[data-panning] .su-org__viewport { cursor: grabbing; user-select: none; }
.su-org__tree, .su-org__kids { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.su-org__tree { width: max-content; min-width: 100%; }
.su-org__node { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--gap) 4px 0; outline: none; }
.su-org__tree > .su-org__node { padding-top: 0; }
/* connectors (pseudo-elements: never in the accessibility tree) — each child draws its half of the sibling bar + its stem */
.su-org__kids > .su-org__node::before, .su-org__kids > .su-org__node::after { content: ""; position: absolute; top: 0; width: 50%; height: var(--gap); border-top: 1px solid var(--ln); }
.su-org__kids > .su-org__node::before { right: 50%; }
.su-org__kids > .su-org__node::after { left: 50%; border-left: 1px solid var(--ln); }
.su-org__kids > .su-org__node:first-child::before, .su-org__kids > .su-org__node:last-child::after { border: 0; }
.su-org__kids > .su-org__node:last-child::before { border-right: 1px solid var(--ln); border-top-right-radius: 6px; }
.su-org__kids > .su-org__node:first-child::after { border-top-left-radius: 6px; }
.su-org__kids > .su-org__node:only-child::before { border: 0; }
.su-org__kids > .su-org__node:only-child::after { border-top: 0; border-left: 1px solid var(--ln); border-radius: 0; }
.su-org__kids { position: relative; padding-top: var(--gap); }
.su-org__kids::before { content: ""; position: absolute; top: 0; left: 50%; height: var(--gap); border-left: 1px solid var(--ln); }
.su-org__node[aria-expanded="false"] > .su-org__kids { display: none; }
.su-org__node[aria-expanded="true"] > .su-org__kids { animation: su-org-in var(--dur-layout) var(--ease-app); }
@keyframes su-org-in { from { opacity: 0; transform: translateY(-6px); } }
.su-org[data-intro] .su-org__kids::before, .su-org[data-intro] .su-org__node::before, .su-org[data-intro] .su-org__node::after { animation: su-org-draw var(--dur-layout) var(--ease-app) both; }
@keyframes su-org-draw { from { opacity: 0; clip-path: inset(0 0 100% 0); } }
.su-org__card { position: relative; z-index: 1; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 168px; min-width: 0; padding: 8px 10px;
  border-radius: 10px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); cursor: pointer; text-align: left;
  transition: box-shadow var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-org__card:hover { background: var(--color-app-hover); }
.su-org__tree > .su-org__node > .su-org__card { box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-org__tree > .su-org__node > .su-org__card .su-org__av { box-shadow: 0 0 0 2px var(--color-app-accent-soft); }
.su-org__who { min-width: 0; display: flex; flex-direction: column; }
.su-org__name, .su-org__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-org__name { font-weight: 600; font-size: 12.5px; color: var(--color-app-ink); }
.su-org__role { font-size: 11px; color: var(--color-app-muted); }
.su-org__node:focus-visible > .su-org__card { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-org__node[data-path] > .su-org__card { box-shadow: inset 0 0 0 1px var(--color-app-accent), var(--shadow-ring-card); }
.su-org__node[aria-selected="true"] > .su-org__card, .su-org__node[data-hl] > .su-org__card { background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 2px var(--color-app-accent); }
.su-org__node[data-hl] > .su-org__card .su-org__name, .su-org__node[aria-selected="true"] > .su-org__card .su-org__name { color: var(--color-app-accent); }
.su-org__node[data-match] > .su-org__card .su-org__name { text-decoration: underline 2px var(--color-app-accent); text-underline-offset: 3px; }
.su-org__toggle { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; min-width: 18px; height: 18px; padding: 0 8px;
  border-radius: var(--radius-pill); background: var(--color-app-tray); box-shadow: var(--shadow-ring); font-size: 11px; line-height: 1; color: var(--color-app-ink-2);
  cursor: pointer; white-space: nowrap; transition: background-color var(--dur-hover) var(--ease-app); }
.su-org__toggle::before { content: ""; position: absolute; bottom: 100%; left: 50%; height: 10px; border-left: 1px solid var(--ln); }
.su-org__toggle:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-org__node[aria-expanded="true"] > .su-org__toggle { padding: 0; width: 18px; margin-bottom: -6px; opacity: 0; }
.su-org__node[aria-expanded="true"] > .su-org__toggle [data-more], .su-org__node[aria-expanded="false"] > .su-org__toggle [data-less] { display: none; }
.su-org__node[aria-expanded="true"]:is(:hover, :focus-visible) > .su-org__toggle { opacity: 1; }
.su-org__node[aria-expanded="true"] > .su-org__toggle { transition: opacity var(--dur-hover) var(--ease-app); }
/* left-to-right: the same rules on the other axis */
.su-org[data-orientation="horizontal"] :is(.su-org__tree, .su-org__kids) { flex-direction: column; align-items: flex-start; justify-content: center; }
.su-org[data-orientation="horizontal"] .su-org__tree { width: max-content; }
.su-org[data-orientation="horizontal"] .su-org__node { flex-direction: row; padding: 4px 0 4px var(--gap); }
.su-org[data-orientation="horizontal"] .su-org__tree > .su-org__node { padding-left: 0; }
.su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node::before, .su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node::after {
  left: 0; right: auto; width: var(--gap); height: 50%; border: 0; border-left: 1px solid var(--ln); border-radius: 0; }
.su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node::before { top: 0; }
.su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node::after { top: 50%; border-top: 1px solid var(--ln); }
.su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node:first-child::before, .su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node:last-child::after { border-left: 0; }
.su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node:last-child::before { border-bottom: 1px solid var(--ln); border-bottom-left-radius: 6px; }
.su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node:first-child::after { border-top-left-radius: 6px; }
.su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node:only-child::before { border: 0; }
.su-org[data-orientation="horizontal"] .su-org__kids > .su-org__node:only-child::after { top: 0; height: 50%; border-left: 0; border-top: 0; border-bottom: 1px solid var(--ln); border-radius: 0; }
.su-org[data-orientation="horizontal"] .su-org__kids { padding: 0 0 0 var(--gap); }
.su-org[data-orientation="horizontal"] .su-org__kids::before { top: 50%; left: 0; width: var(--gap); height: 0; border-left: 0; border-top: 1px solid var(--ln); }
.su-org[data-orientation="horizontal"] .su-org__toggle { margin: 0 0 0 10px; }
.su-org[data-orientation="horizontal"] .su-org__toggle::before { bottom: auto; top: 50%; left: auto; right: 100%; width: 10px; height: 0; border-left: 0; border-top: 1px solid var(--ln); }
.su-org[data-orientation="horizontal"] .su-org__node[aria-expanded="true"] > .su-org__toggle { margin: 0 -6px 0 10px; }
.su-org[data-orientation="horizontal"] .su-org__node { align-items: center; }
/* narrow: the indented list (su-tree) replaces the chart */
.su-org__list { display: none; width: 100%; padding: 0; background: none; box-shadow: none; }
@container su-org (max-width: 599px) {
  .su-org__viewport, .su-org__zoom { display: none; }
  .su-org__list { display: block; }
}
/* ============ Toolbar ============ */
.su-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; min-width: 0; box-sizing: border-box; padding: 6px; overflow: hidden;
  contain: inline-size; /* its buttons never widen the card: what does not fit moves into More */
  font-family: var(--font-sans); color: var(--color-app-ink); }
.su-toolbar > [hidden] { display: none !important; }
.su-toolbar[aria-orientation="vertical"] { flex-direction: column; align-items: stretch; width: max-content; overflow: visible; contain: none; }
.su-toolbar .su-btngroup { gap: 2px; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.su-toolbar .su-iconbtn { flex: none; }
.su-toolbar[aria-orientation="vertical"] .su-btngroup { flex-direction: column; }
.su-toolbar__sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--color-app-line); }
.su-toolbar[aria-orientation="vertical"] .su-toolbar__sep { width: auto; height: 1px; margin: 4px 2px; }
.su-toolbar__block { flex: none; }
.su-toolbar__select { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border: 0; border-radius: var(--radius-ctrl);
  background: transparent; box-shadow: var(--shadow-ring); font: 400 12.5px/1 var(--font-sans); color: var(--color-app-ink); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-toolbar__select:hover { background: var(--color-app-hover); }
.su-toolbar__select:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-toolbar__select svg { width: 13px; height: 13px; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-toolbar__select[aria-expanded="true"] svg { transform: rotate(180deg); }
.su-toolbar__more { flex: none; margin-left: auto; }
.su-toolbar__value { min-width: 7ch; text-align: left; }
/* ============ Memory Panel ============ */
.su-memory { container: su-memory / inline-size; box-sizing: border-box; width: min(400px, 100%); min-width: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-memory__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--color-app-line); }
.su-memory__icon { display: inline-flex; color: var(--color-app-accent); }
.su-memory__icon svg { width: 16px; height: 16px; }
.su-memory__title { margin: 0; font: 600 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-memory__master { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-app-ink-2); cursor: pointer; white-space: nowrap; }
.su-memory__search { padding: 8px 10px 4px; }
.su-memory__search .su-input__wrap { height: 32px; padding: 0 10px; background: var(--color-app-tray); box-shadow: none; border-radius: var(--radius-ctrl); }
.su-memory__search .su-input__wrap:focus-within { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-memory__search .su-input__el { font-size: 12.5px; }
.su-memory__search .su-input__el::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.su-memory__search .su-input__icon svg { width: 14px; height: 14px; }
.su-memory__off { display: flex; align-items: center; gap: 6px; margin: 6px 12px 0; padding: 6px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-tray);
  font-size: 12px; color: var(--color-app-ink-2); }
.su-memory__off[hidden] { display: none; }
.su-memory__off svg { width: 14px; height: 14px; flex: none; }
.su-memory__body { padding: 4px 2px 8px; transition: opacity var(--dur-state) var(--ease-app); }
.su-memory__body[data-off] { opacity: .5; }
.su-memory__body[data-off] .su-memory__text { text-decoration: line-through; text-decoration-color: var(--color-app-line-strong); }
.su-memory__group { margin: 0; padding: 8px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-memory__grp:first-child .su-memory__group { padding-top: 6px; }
.su-memory__list { margin: 0; padding: 0; list-style: none; }
.su-memory__item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius-ctrl); outline: none;
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-memory__item:hover { background: var(--color-app-hover); }
.su-memory__item:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-memory__main { flex: 1; min-width: 0; }
.su-memory__text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-memory__text mark { background: var(--color-app-accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.su-memory__meta { margin: 2px 0 0; font-size: 11px; color: var(--color-app-muted); }
.su-memory__new { flex: none; height: 20px; padding: 0 8px; font-size: 11px; }
.su-memory__more { opacity: 0; transition: opacity var(--dur-hover) var(--ease-app); }
.su-memory__item:is(:hover, :focus-within) .su-memory__more, .su-memory__more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .su-memory__more { opacity: 1; } }
.su-memory__edit { display: block; box-sizing: border-box; width: 100%; height: auto; min-height: 52px; padding: 6px 8px; resize: vertical; font: 400 12.5px/1.45 var(--font-sans); }
.su-memory__li[data-leaving] { pointer-events: none; }
.su-memory .su-empty { padding: 20px 12px; }
@container su-memory (max-width: 320px) {
  .su-memory__head { flex-wrap: wrap; }
  .su-memory__master { margin-left: 0; flex-basis: 100%; justify-content: space-between; }
}
/* ============ Cart ============ */
.su-cart { container: su-cart / inline-size; box-sizing: border-box; width: min(860px, 100%); min-width: 0; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-cart [hidden] { display: none !important; }
.su-cart__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
.su-cart__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.su-cart__title { margin: 0; font: 700 16px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); }
.su-cart__count { width: auto; padding: 0 8px; }
.su-cart__ship { display: grid; gap: 6px; margin-bottom: 6px; }
.su-cart__note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px; border-radius: 8px; background: var(--color-app-tray); color: var(--color-app-ink-2); font-size: 12.5px; }
.su-cart__note b { color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-cart__note[data-tone="ok"] { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); }
.su-cart__note svg { width: 14px; height: 14px; flex: none; }
.su-cart__bar .su-progress__track { height: 4px; }
.su-cart__items { margin: 0; padding: 0; list-style: none; }
.su-cart__line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-app-line); }
.su-cart__thumb { width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: var(--color-app-tray); box-shadow: var(--shadow-ring); }
.su-cart__thumb[data-tone="accent"] { background: var(--color-app-accent-soft); }
.su-cart__thumb[data-tone="ok"] { background: var(--color-app-ok-soft); }
.su-cart__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.su-cart__name { margin: 0; font-weight: 600; font-size: 13px; color: var(--color-app-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-cart__variant { margin: 1px 0 0; font-size: 12px; color: var(--color-app-muted); }
.su-cart__qty { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 0; height: 30px; border-radius: 8px; box-shadow: var(--shadow-ring); background: var(--color-app-surface); }
.su-cart__step { display: grid; place-items: center; width: 28px; height: 30px; padding: 0; border: 0; background: none; color: var(--color-app-ink-2); cursor: pointer; border-radius: 8px; }
.su-cart__step:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-cart__step:focus-visible, .su-cart__num:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-cart__step svg { width: 13px; height: 13px; }
.su-cart__num { width: 3ch; height: 30px; padding: 0; border: 0; background: none; text-align: center; font: 600 13px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  color: var(--color-app-ink); -moz-appearance: textfield; appearance: textfield; }
.su-cart__num::-webkit-inner-spin-button, .su-cart__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.su-cart__price { min-width: 64px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-cart__line[data-leaving] { pointer-events: none; }
.su-cart__side { display: grid; gap: 10px; align-self: start; padding: 12px; border-radius: 12px; background: var(--color-app-tray); }
.su-cart__promorow { display: flex; gap: 6px; }
.su-cart__code { flex: 1; min-width: 0; height: 34px; letter-spacing: .04em; text-transform: uppercase; }
.su-cart__code::placeholder { text-transform: none; letter-spacing: 0; }
.su-cart__code[aria-invalid="true"] { animation: none; }
.su-cart__promorow .su-btn { height: 34px; }
.su-cart__pmsg { margin: 4px 0 0; font-size: 12px; color: var(--color-app-muted); }
.su-cart__pmsg:empty { display: none; }
.su-cart__pmsg[data-tone="ok"] { color: var(--color-app-ok-deep); }
.su-cart__pmsg[data-tone="crit"] { color: var(--color-app-crit-deep); }
.su-cart__sum { display: grid; gap: 6px; margin: 0; }
.su-cart__row { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; color: var(--color-app-ink-2); }
.su-cart__row dt, .su-cart__row dd { margin: 0; }
.su-cart__row[data-row="disc"] dd { color: var(--color-app-ok-deep); }
.su-cart__row[data-row="total"] { padding-top: 8px; border-top: 1px solid var(--color-app-line); font-weight: 700; font-size: 15px; color: var(--color-app-ink); }
.su-cart__bar2 { display: grid; gap: 6px; align-self: start; }
.su-cart__checkout { width: 100%; }
.su-cart__mini { display: none; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-cart__tax { margin: 0; text-align: center; font-size: 11.5px; color: var(--color-app-muted); }
.su-cart__empty .su-empty { padding: 28px 12px; }
@container su-cart (min-width: 900px) {
  .su-cart__in { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; }
  .su-cart__main { grid-row: 1 / span 2; }
}
@container su-cart (min-width: 640px) and (max-width: 899px) {
  .su-cart__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .su-cart__main { grid-column: 1 / -1; }
}
@container su-cart (max-width: 639px) {
  .su-cart__in { padding: 12px; }
  .su-cart__line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t i x" "t q p"; row-gap: 6px; }
  .su-cart__thumb { grid-area: t; align-self: start; }
  .su-cart__info { grid-area: i; } .su-cart__qty { grid-area: q; justify-self: start; } .su-cart__price { grid-area: p; } .su-cart__rm { grid-area: x; justify-self: end; }
  .su-cart__bar2 { position: sticky; bottom: 0; z-index: 2; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; margin: 0 -12px -12px; padding: 10px 12px;
    background: var(--color-app-surface); box-shadow: 0 -1px 0 var(--color-app-line), 0 -6px 16px rgba(0, 0, 0, .12); border-radius: 0 0 var(--radius-card) var(--radius-card); }
  .su-cart__mini { display: block; }
  .su-cart__tax { grid-column: 1 / -1; }
}
/* ============ File Manager ============ */
.su-files { container: su-files / inline-size; box-sizing: border-box; width: min(680px, 100%); min-width: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-files [hidden] { display: none !important; }
.su-files__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--color-app-line); }
.su-files__path { flex: 1; min-width: 0; }
.su-files__crumbs { font-size: 12.5px; }
.su-files__dz { width: 100%; gap: 0; }
.su-files__dz[data-over] .su-files__grid { box-shadow: inset 0 0 0 2px var(--color-app-accent); background: var(--color-app-accent-soft); }
.su-files__grid { transition: background-color var(--dur-hover) var(--ease-app); }
.su-files__grid .su-table-wrap { max-height: 360px; overflow: auto; overscroll-behavior: contain; }
.su-files__table { font-size: 13px; table-layout: fixed; }
.su-files__table th { height: 30px; padding: 0 12px; background: var(--color-app-tray); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-ink-label);
  position: sticky; top: 0; z-index: 1; }
.su-files__table th .su-table__sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.su-files__table .chk { width: 36px; padding: 0 0 0 12px; }
.su-files__table td { padding: 7px 12px; }
.su-files__table .su-files__size { width: 80px; }
.su-files__table .su-files__mod { width: 132px; }
.su-files__table td.num { font-size: 12px; color: var(--color-app-muted); }
.su-files__table tbody tr[data-id] { cursor: default; outline: none; }
.su-files__table tbody tr[data-id]:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-files__table tbody tr[aria-selected="true"] { background: var(--color-app-accent-soft); box-shadow: inset 2px 0 0 var(--color-app-accent); }
.su-files__table tbody tr[aria-selected="true"] .su-files__label { font-weight: 600; }
.su-files__table tbody tr[data-over] { background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 2px var(--color-app-accent); }
.su-files__name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.su-files__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-files__ic { display: flex; flex: none; color: var(--color-app-ink-2); }
.su-files__ic svg { width: 16px; height: 16px; }
.su-files__ic[data-type="folder"] { color: var(--color-app-accent); }
.su-files__ic[data-type="pdf"] { color: var(--color-app-crit-deep); }
.su-files__ic[data-type="img"] { color: var(--color-app-ok-deep); }
.su-files__rename { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 13px; }
.su-files__mod [data-short] { display: none; }
.su-files__emptyrow td { padding: 0; white-space: normal; }
.su-files__uploads:not(:empty) { padding: 8px 10px; border-top: 1px solid var(--color-app-line); }
.su-files__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--color-app-line);
  font-size: 12px; color: var(--color-app-muted); }
.su-files__count { font-variant-numeric: tabular-nums; }
/* compact storage meter: the built gauge's arc only, text beside it */
.su-files__quota.su-gauge { container-type: normal; display: flex; align-items: center; gap: 8px; width: auto; min-width: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.su-files__quota .su-gauge__dial { width: 44px; margin: 0; }
.su-files__quota :is(.su-gauge__center, .su-gauge__scale, .su-gauge__ticks) { display: none; }
.su-files__quota .su-gauge__svg { overflow: hidden; }
.su-files__quota :is(.su-gauge__track, .su-gauge__bar) { stroke-width: 22; }
.su-files__qtext { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-app-ink-2); }
/* grid (icon) view: the same rows laid out as tiles */
.su-files[data-view="grid"] .su-files__table thead { display: none; }
.su-files[data-view="grid"] .su-files__table, .su-files[data-view="grid"] .su-files__table tbody { display: block; }
.su-files[data-view="grid"] .su-files__table tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; padding: 10px; }
.su-files[data-view="grid"] .su-files__table tbody tr[data-id] { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: 10px;
  box-shadow: var(--shadow-ring); text-align: center; }
.su-files[data-view="grid"] .su-files__table tbody tr[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--color-app-accent); }
.su-files[data-view="grid"] .su-files__table tbody tr[data-id]:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus), var(--shadow-ring); }
.su-files[data-view="grid"] .su-files__table td { display: block; padding: 0; box-shadow: none; width: auto; max-width: 100%; }
.su-files[data-view="grid"] .su-files__table td.chk { position: absolute; top: 6px; left: 6px; opacity: 0; }
.su-files[data-view="grid"] .su-files__table tr:is(:hover, :focus-visible, [aria-selected="true"]) td.chk, .su-files[data-view="grid"][data-selecting] td.chk { opacity: 1; }
.su-files[data-view="grid"] .su-files__name { flex-direction: column; gap: 6px; max-width: 100%; }
.su-files[data-view="grid"] .su-files__ic svg { width: 32px; height: 32px; }
.su-files[data-view="grid"] .su-files__label { max-width: 100%; font-size: 12.5px; }
.su-files[data-view="grid"] .su-files__mod { display: none !important; }
.su-files[data-view="grid"] .su-files__emptyrow { display: block; grid-column: 1 / -1; }
.su-files[data-view="grid"] .su-files__emptyrow td { display: block; }
@container su-files (max-width: 639px) {
  .su-files__table .su-files__size { display: none; }
  .su-files[data-view="grid"] .su-files__table td.su-files__size { display: block; }
  .su-files__table .su-files__mod { width: 96px; padding-left: 4px; }
  .su-files__mod [data-long] { display: none; }
  .su-files__mod [data-short] { display: inline; }
  .su-files__bar { flex-wrap: wrap; }
  .su-files__path { flex-basis: 100%; order: -1; }
}
/* ============ Document Editor ============ */
.su-doc { container: su-doc / inline-size; position: relative; box-sizing: border-box; width: 100%; min-width: 0; border-radius: var(--radius-card);
  background: var(--color-app-sunk); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-doc__bar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px 0 4px; border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-app-surface); border-bottom: 1px solid var(--color-app-line); }
.su-doc[data-ro] .su-doc__bar { padding-left: 14px; min-height: 40px; }
.su-doc__tools { flex: 1 1 auto; overflow-x: auto; scrollbar-width: thin; contain: none; }
.su-doc__tools[hidden] { display: none; }
.su-doc__block { flex: none; }
.su-doc__block .su-select__trigger { width: auto; height: 28px; gap: 4px; padding: 0 6px 0 10px; border-radius: var(--radius-ctrl); box-shadow: inset 0 0 0 1px var(--color-app-line);
  font-size: 12.5px; white-space: nowrap; }
.su-doc__block .su-select__value { flex: none; min-width: 84px; }
.su-doc__block .su-select__chev > svg { width: 14px; height: 14px; }
.su-doc__status { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; white-space: nowrap; color: var(--color-app-muted); }
.su-doc__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-app-ok); transition: background-color var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app); }
.su-doc__status[data-state="editing"] .su-doc__dot { background: var(--color-app-muted); }
.su-doc__status[data-state="saving"] .su-doc__dot { background: var(--color-app-accent); animation: su-doc-pulse var(--dur-loop, 1.4s) var(--ease-app) infinite alternate; }
.su-doc__status[data-state="offline"] .su-doc__dot { background: var(--color-app-warn); }
.su-doc__status[data-state="error"] .su-doc__dot { background: var(--color-app-crit); }
.su-doc__status[data-state="error"] { color: var(--color-app-crit-deep); }
.su-doc__status[data-state="readonly"] .su-doc__dot { background: var(--color-app-line-strong); }
@keyframes su-doc-pulse { to { opacity: .35; } }
.su-doc__link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: var(--color-app-surface); border-bottom: 1px solid var(--color-app-line); }
.su-doc__link[hidden] { display: none; }
.su-doc__url { flex: 1 1 180px; min-width: 0; height: 32px; font-size: 13px; }
.su-doc__canvas { padding: 16px 16px 0; overflow: hidden; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.su-doc__page { box-sizing: border-box; max-width: 720px; min-height: 220px; margin: 0 auto; padding: 22px 26px 20px; border-radius: 6px 6px 0 0;
  background: var(--color-app-surface); box-shadow: var(--shadow-md); }
.su-doc__meta { margin: 0 0 4px; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-doc__area { position: relative; min-height: 160px; outline: none; font: 400 14px/1.65 var(--font-sans); color: var(--color-app-ink-2); overflow-wrap: anywhere; }
.su-doc__area:focus-visible { outline: none; }
.su-doc__page:has(.su-doc__area:focus-visible) { box-shadow: var(--shadow-md), 0 0 0 2px var(--color-app-accent-soft); }
.su-doc__area[data-empty]::before { content: attr(data-placeholder); position: absolute; color: var(--color-app-muted); pointer-events: none; }
.su-doc__area > * { margin: 0 0 10px; }
.su-doc__area h1 { font: 700 21px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); }
.su-doc__area h2 { font: 700 17px/1.35 var(--font-sans); color: var(--color-app-ink); margin-top: 16px; }
.su-doc__area h3 { font: 600 15px/1.4 var(--font-sans); color: var(--color-app-ink); margin-top: 12px; }
.su-doc__area :is(ul, ol) { padding-left: 22px; }
.su-doc__area blockquote { margin-left: 0; padding-left: 14px; box-shadow: inset 3px 0 0 var(--color-app-accent); color: var(--color-app-ink-2); }
.su-doc__area :is(b, strong) { color: var(--color-app-ink); }
.su-doc__area a { color: var(--color-app-accent); text-decoration: underline; text-underline-offset: 2px; }
.su-doc[data-ro] .su-doc__area { cursor: default; }
.su-doc__menu { min-width: 210px; }
.su-doc__menu li[data-active] { background: var(--color-app-hover); }
@container su-doc (max-width: 599px) {
  .su-doc__canvas { padding: 0; }
  .su-doc__page { max-width: none; padding: 18px 16px; border-radius: 0 0 var(--radius-card) var(--radius-card); box-shadow: none; }
  .su-doc__status .su-doc__state { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
}

/* ============ Generative UI Renderer ============ */
.su-genui { container: su-genui / inline-size; display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; width: 100%; min-width: 0;
  font-family: var(--font-sans); color: var(--color-app-ink); }
.su-genui__av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-genui__av > svg { width: 14px; height: 14px; }
.su-genui__list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.su-genui__text { margin: 0; padding-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--color-app-ink); }
.su-genui__frame { margin: 0; min-width: 0; overflow: hidden; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-genui__frame[data-enter] { animation: su-genui-in var(--dur-state) var(--ease-app) both; }
@keyframes su-genui-in { from { opacity: 0; transform: translateY(6px); } }
.su-genui__tag { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; background: var(--color-app-tray); border-bottom: 1px solid var(--color-app-line);
  font-size: 11.5px; color: var(--color-app-muted); }
.su-genui__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink-2); }
.su-genui__meta { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-left: auto; white-space: nowrap; color: var(--color-app-muted); }
.su-genui__meta > svg { width: 12px; height: 12px; }
.su-genui__frame[data-state="rendered"] .su-genui__meta { color: var(--color-app-ok-deep); }
.su-genui__frame[data-state="error"] .su-genui__meta { color: var(--color-app-crit-deep); }
.su-genui__frame[data-state="streaming"] { box-shadow: inset 0 0 0 1px var(--color-app-line); background: transparent; }
.su-genui__skel { gap: 8px; padding: 12px; }
.su-genui__body { display: grid; gap: 10px; min-width: 0; padding: 12px; }
.su-genui__body > * { min-width: 0; }
.su-genui__err { margin: 0; padding: 12px; font-size: 13px; line-height: 1.5; color: var(--color-app-crit-deep); background: var(--color-app-crit-soft); }
.su-genui__err strong { font-weight: 600; color: var(--color-app-crit-deep); }
.su-genui__p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-app-ink-2); }
.su-genui__p[data-muted] { color: var(--color-app-muted); }
.su-genui__title { margin: 0; font: 600 13px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-genui__card { display: grid; gap: 8px; min-width: 0; padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-genui__row { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.su-genui__row > * { flex: 1 1 160px; min-width: 0; }
.su-genui__stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.su-genui__value { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--color-app-ink); }
.su-genui__delta { font-size: 12px; color: var(--color-app-ok-deep); }
.su-genui__delta[data-tone="crit"] { color: var(--color-app-crit-deep); }
.su-genui__delta[data-tone="warn"] { color: var(--color-app-ink-2); }
.su-genui__delta[data-tone="accent"] { color: var(--color-app-accent); }
.su-genui__caption { margin-left: auto; font-size: 11.5px; color: var(--color-app-muted); }
.su-genui__chart { width: 100%; padding: 0; background: none; box-shadow: none; }
.su-genui__chart.su-barchart { padding-inline: 8px; } /* room for the edge bars' value labels */
.su-genui__kpi { padding: 0; background: none; }
.su-genui__table { max-width: 100%; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-genui__table:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-genui__table .su-table { font-size: 12.5px; }
.su-genui__list { counter-reset: none; }
.su-genui__body > .su-genui__list, ol.su-genui__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: su-genui; }
ol.su-genui__list > li { counter-increment: su-genui; display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 7px 0; border-top: 1px solid var(--color-app-line); font-size: 13px; color: var(--color-app-ink); }
ol.su-genui__list > li:first-child { border-top: 0; }
ol.su-genui__list > li::before { content: counter(su-genui); flex: none; width: 16px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-genui__li-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.su-genui__li-meta { font-size: 11.5px; color: var(--color-app-muted); }
.su-genui__li-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-app-ink); }
.su-genui__chips, .su-genui__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.su-genui__unknown { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; color: var(--color-app-ink-2); background: var(--color-app-tray); }
@container su-genui (max-width: 360px) {
  .su-genui { gap: 8px; }
  .su-genui__av { display: none; }
  .su-genui__body { padding: 10px; }
}

/* ============ Report Generator ============ */
.su-reportgen { container: su-reportgen / inline-size; box-sizing: border-box; width: 100%; min-width: 0; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-reportgen__shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.su-reportgen__form { display: grid; align-content: start; gap: 14px; min-width: 0; margin: 0; padding: 16px; }
.su-reportgen__h { margin: 0; font: 700 15px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-reportgen__form .su-dr, .su-reportgen__form .su-dr > .su-btn { width: 100%; justify-content: flex-start; }
.su-reportgen__form .su-combo { width: 100%; }
.su-reportgen__dr .su-dr__panel { box-sizing: border-box; max-width: calc(100vw - 24px); } /* narrow screens: presets scroll inside instead of widening the panel */
.su-reportgen__dr .su-dr__presets { min-width: 0; }
.su-reportgen__br > .su-field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.su-reportgen__hint { font-weight: 400; color: var(--color-app-muted); }
.su-reportgen__form .su-seg { justify-self: start; }
.su-reportgen__metrics .su-check__item { padding-block: 8px; }
.su-reportgen__count { font: 400 12px/1 var(--font-sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-reportgen__preview { display: grid; align-content: start; gap: 12px; min-width: 0; margin: 0 8px 8px; padding: 14px; border-radius: calc(var(--radius-card) - 4px); background: var(--color-app-ground); }
.su-reportgen__phead { display: flex; align-items: center; gap: 8px; }
.su-reportgen__eyebrow { flex: 1; font: 600 11px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-reportgen__paper { display: grid; gap: 10px; min-width: 0; padding: 14px; border-radius: 10px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-reportgen__title { margin: 0; font: 700 14px/1.35 var(--font-sans); color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-reportgen__summary { margin: -4px 0 0; font-size: 12px; color: var(--color-app-muted); overflow-wrap: anywhere; }
.su-reportgen__kpi { padding: 0; background: none; }
.su-reportgen__kpi .su-kpi__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.su-reportgen__kpi .su-kpi__card { padding: 10px; animation: su-reportgen-tile var(--dur-state) var(--ease-app) both; }
.su-reportgen__kpi .su-kpi__value { font-size: 17px; }
@keyframes su-reportgen-tile { from { opacity: 0; } }
.su-reportgen__chart { width: 100%; padding: 0; background: none; box-shadow: none; }
.su-reportgen__progress[hidden], .su-reportgen__err[hidden] { display: none; }
.su-reportgen__progress .su-progress__fill { transition: transform var(--dur-state) var(--ease-app), width var(--dur-state) var(--ease-app); }
.su-reportgen__err { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-reportgen__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.su-reportgen__sched { flex: 1 1 auto; justify-content: flex-start; gap: 10px; padding: 0; }
.su-reportgen__sched .su-switch__text { flex: 0 1 auto; }
.su-reportgen__sched .su-switch__label { font-size: 13px; }
.su-reportgen__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
@container su-reportgen (min-width: 900px) {
  .su-reportgen__shell { grid-template-columns: minmax(280px, 5fr) minmax(0, 6fr); }
  .su-reportgen__form { border-right: 1px solid var(--color-app-line); }
  .su-reportgen__preview { margin: 8px; }
}
@container su-reportgen (max-width: 599px) {
  .su-reportgen__chart, .su-reportgen__kpi { display: none; }
  .su-reportgen__form, .su-reportgen__preview { padding: 12px; }
  .su-reportgen__btns { width: 100%; }
  .su-reportgen__btns .su-btn { flex: 1; }
}


/* ============ Copy Button ============ */
.su-copy { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-width: 0; padding: 4px 4px 4px 10px; border-radius: var(--radius-ctrl);
  background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); font: 400 12px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-copy[data-variant="inline"] { display: inline-flex; max-width: 100%; padding: 0; gap: 6px; background: none; box-shadow: none; font-size: 12.5px; }
.su-copy__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); }
.su-copy[data-variant="inline"] .su-copy__value { flex: 0 1 auto; font-family: var(--font-sans); font-weight: 500; font-variant-numeric: tabular-nums; }
.su-copy__prompt { color: var(--color-app-muted); user-select: none; -webkit-user-select: none; }
.su-copy__btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none; }
.su-copy__btn.su-iconbtn { width: auto; min-width: var(--s); }
.su-copy__icons { display: inline-grid; flex: none; }
.su-copy__icons > svg { grid-area: 1 / 1; width: var(--i, 16px); height: var(--i, 16px);
  transition: opacity var(--dur-state) var(--ease-app), transform var(--dur-state) var(--ease-app); }
.su-copy__icons > .su-copy__i-done { opacity: 0; transform: scale(.6); }
.su-copy__btn[data-state="copied"] .su-copy__i-copy { opacity: 0; transform: scale(.6); }
.su-copy__btn[data-state="copied"] .su-copy__i-done { opacity: 1; transform: none; }
.su-copy__done { display: none; font: 500 12px/1 var(--font-sans); white-space: nowrap; }
.su-copy__btn:is([data-state="copied"], [data-state="error"]) { padding: 0 8px; }
.su-copy__btn:is([data-state="copied"], [data-state="error"]) .su-copy__done { display: inline; }
.su-copy__btn:is([data-state="copied"], [data-state="error"]) .su-copy__label { display: none; }
.su-copy__btn[data-state="copied"], .su-copy__btn[data-state="copied"]:hover { background: var(--color-app-ok-soft); color: var(--color-app-ok-deep); }
.su-copy__btn[data-state="error"], .su-copy__btn[data-state="error"]:hover { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-copy__btn[data-state="error"] .su-copy__icons { display: none; }

/* ============ Scroll Area ============ */
@property --su-fade-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --su-fade-bot { syntax: "<length>"; inherits: false; initial-value: 0px; }
.su-scrollarea { display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-scrollarea__head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-bottom: 1px solid var(--color-app-line); }
.su-scrollarea__title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-scrollarea__meta { flex: none; margin-left: auto; font: 400 11.5px/1.3 var(--font-sans); color: var(--color-app-muted); }
.su-scroll { --su-fade: 18px; box-sizing: border-box; min-height: 0; max-height: var(--su-scroll-max, 320px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--color-app-line-strong) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-app-ink) var(--su-fade-top), var(--color-app-ink) calc(100% - var(--su-fade-bot)), transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--color-app-ink) var(--su-fade-top), var(--color-app-ink) calc(100% - var(--su-fade-bot)), transparent); }
.su-scroll:hover { scrollbar-color: var(--color-app-muted) transparent; }
/* a mask would fade the focus ring too: standalone viewports drop it while focused; inside a card the card carries the ring */
.su-scroll:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; -webkit-mask-image: none; mask-image: none; }
.su-scrollarea > .su-scroll:focus-visible { outline: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-app-ink) var(--su-fade-top), var(--color-app-ink) calc(100% - var(--su-fade-bot)), transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--color-app-ink) var(--su-fade-top), var(--color-app-ink) calc(100% - var(--su-fade-bot)), transparent); }
.su-scrollarea:has(> .su-scroll:focus-visible) { box-shadow: 0 0 0 2px var(--color-app-focus), var(--shadow-md); }
@supports (animation-timeline: scroll()) {
  .su-scroll { animation: su-scroll-top linear both, su-scroll-bot linear both; animation-timeline: scroll(self), scroll(self);
    animation-range: 0 var(--su-fade), calc(100% - var(--su-fade)) 100%; }
}
@supports not (animation-timeline: scroll()) { /* data-su="scroll" sets the edge attributes */
  .su-scroll[data-su-edges]:not([data-at-top]) { --su-fade-top: var(--su-fade); }
  .su-scroll[data-su-edges]:not([data-at-bottom]) { --su-fade-bot: var(--su-fade); }
}
@keyframes su-scroll-top { from { --su-fade-top: 0px; } to { --su-fade-top: 18px; } }
@keyframes su-scroll-bot { from { --su-fade-bot: 18px; } to { --su-fade-bot: 0px; } }

/* ============ Thinking Indicator ============ */
.su-thinking { display: grid; gap: 8px; min-width: 0; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-thinking__live { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-thinking__orb { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-app-accent-soft); color: var(--color-app-accent); animation: su-thinking-orb 1.6s var(--ease-app) infinite; }
.su-thinking__orb svg { width: 13px; height: 13px; }
.su-thinking__dots { display: inline-flex; flex: none; gap: 4px; padding: 0 2px; }
.su-thinking__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-app-ink-2); opacity: .3; animation: su-thinking-dot 1.2s var(--ease-app) infinite; }
.su-thinking__dots i:nth-child(2) { animation-delay: .15s; }
.su-thinking__dots i:nth-child(3) { animation-delay: .3s; }
.su-thinking__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.45; }
.su-thinking__time { flex: none; margin-left: auto; font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-thinking__details { min-width: 0; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-thinking__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px; border-radius: 12px; list-style: none; cursor: pointer;
  font: 500 13px/1.35 var(--font-sans); color: var(--color-app-ink-2); transition: color var(--dur-hover) var(--ease-app); }
.su-thinking__sum::-webkit-details-marker { display: none; }
.su-thinking__sum:hover { color: var(--color-app-ink); }
.su-thinking__sum:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-thinking__chev { display: inline-flex; flex: none; transition: transform var(--dur-state) var(--ease-app); }
.su-thinking__chev svg { width: 14px; height: 14px; }
.su-thinking__details[open] .su-thinking__chev { transform: rotate(90deg); }
.su-thinking__title { min-width: 0; color: inherit; }
.su-thinking__tokens { flex: none; margin-left: auto; font: 400 11.5px/1.35 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-thinking__tokens:empty { display: none; }
.su-thinking__body { margin: 0 12px 12px 19px; padding-left: 12px; border-left: 2px solid var(--color-app-line); overflow-wrap: anywhere;
  font: 400 12.5px/1.6 var(--font-sans); color: var(--color-app-muted); }
.su-thinking__body[data-plain] { white-space: pre-line; }
.su-thinking__body > :first-child { margin-top: 0; } .su-thinking__body > :last-child { margin-bottom: 0; }
@keyframes su-thinking-orb { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: none; opacity: 1; } }
@keyframes su-thinking-dot { 30% { opacity: 1; } }

/* ============ Shimmer ============ */
/* Two parts: .su-shimmer = text sweep (defined with AI summary, unchanged) · .su-skel = skeleton block. Every .su-skel paints one
   viewport-fixed gradient, so all rows sweep in sync. Host: role="status" + aria-busy on the region, blocks under aria-hidden. */
.su-shimmer__panel { box-sizing: border-box; min-width: 0; padding: 14px 16px 6px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-shimmer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.su-shimmer__title { margin: 0; font: 600 13px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-shimmer__label { font: 400 11.5px/1.3 var(--font-sans); color: var(--color-app-muted); }
.su-shimmer__row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--color-app-line); }
.su-shimmer__lines { flex: 1; display: grid; gap: 6px; min-width: 0; }
.su-skel { display: block; flex: none; box-sizing: border-box; width: 100%; max-width: 100%; height: 10px; border-radius: 4px;
  background-color: var(--color-app-tray);
  background-image: linear-gradient(90deg, transparent 44%, var(--color-app-line-strong) 50%, transparent 56%);
  background-size: 300vw 100%; background-repeat: no-repeat; background-attachment: fixed; background-position: -200vw 0;
  animation: su-skel-sweep calc(var(--dur-loop) * 2.5) linear infinite; }
.su-skel[data-w] { width: attr(data-w type(<length-percentage>), 100%); } /* where typed attr() exists; else set style="width:…" */
.su-shimmer__lines > .su-skel + .su-skel { height: 8px; }
.su-skel[data-shape="circle"] { width: 32px; height: auto; aspect-ratio: 1; border-radius: 50%; }
.su-skel[data-shape="rect"] { height: 18px; border-radius: var(--radius-ctrl); }
.su-skel[data-shape="pill"] { width: 48px; height: 18px; border-radius: var(--radius-pill); }
@keyframes su-skel-sweep { from { background-position: -200vw 0; } to { background-position: 0 0; } }

/* ============ Number Input ============ */
.su-num { min-width: 0; }
.su-num[data-layout="row"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.su-num__text { display: grid; gap: 2px; flex: 1 1 140px; min-width: 0; }
.su-num__ctl { display: inline-flex; align-items: stretch; flex: none; justify-self: start; box-sizing: border-box; max-width: 100%; height: 34px;
  border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring); overflow: hidden;
  transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-num__ctl:hover { box-shadow: inset 0 0 0 1px var(--color-app-muted); }
.su-num__ctl:focus-within { box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-num__ctl:has(> .su-num__input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep), 0 0 0 3px var(--color-app-crit-soft); }
.su-num__ctl:has(> .su-num__input:disabled) { opacity: .55; }
.su-num__btn { display: grid; place-items: center; flex: none; width: 32px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-app-ink-2);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-num__btn:first-child { box-shadow: inset -1px 0 0 var(--color-app-line); }
.su-num__btn:last-child { box-shadow: inset 1px 0 0 var(--color-app-line); }
.su-num__btn svg { width: 14px; height: 14px; }
.su-num__btn:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-num__btn:active { background: var(--color-app-sunk); }
.su-num__btn:disabled { color: var(--color-app-muted); opacity: .45; cursor: not-allowed; background: transparent; }
.su-num__input { box-sizing: border-box; width: var(--su-num-w, 7ch); min-width: 0; margin: 0; padding: 0 6px; border: 0; outline: 0; background: transparent;
  font: 600 13.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; text-align: center; color: var(--color-app-ink); -moz-appearance: textfield; }
.su-num__input::-webkit-inner-spin-button, .su-num__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.su-num__input:disabled { cursor: not-allowed; }
.su-num__input[data-nudge="up"] { animation: su-num-up var(--dur-state) var(--ease-app); }
.su-num__input[data-nudge="down"] { animation: su-num-down var(--dur-state) var(--ease-app); }
.su-num__unit { display: flex; align-items: center; margin-left: -4px; padding-right: 8px; font: 400 12.5px/1 var(--font-sans); color: var(--color-app-muted); white-space: nowrap; }
.su-num__calc { margin: 0; font: 400 12px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
@keyframes su-num-up { from { transform: translateY(2px); } }
@keyframes su-num-down { from { transform: translateY(-2px); } }

/* ============ Textarea ============ */
.su-textarea { min-width: 0; }
.su-textarea__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.su-textarea__tag { font: 400 12px/1.2 var(--font-sans); color: var(--color-app-muted); }
.su-textarea__box { display: grid; min-width: 0; border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring);
  transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-textarea__box:hover { box-shadow: inset 0 0 0 1px var(--color-app-muted); }
.su-textarea__box:focus-within { box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-textarea__box:has(> .su-textarea__el[aria-invalid="true"]) { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
.su-textarea__box:has(> .su-textarea__el[aria-invalid="true"]):focus-within { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep), 0 0 0 3px var(--color-app-crit-soft); }
.su-textarea__box:has(> .su-textarea__el:disabled) { opacity: .55; }
.su-textarea__el { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 10px 12px; border: 0; outline: 0; background: transparent;
  resize: vertical; font: 400 13.5px/1.55 var(--font-sans); color: var(--color-app-ink); }
.su-textarea__el::placeholder { color: var(--color-app-muted); }
.su-textarea__el:disabled { cursor: not-allowed; resize: none; }
.su-textarea__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 6px 12px;
  border-top: 1px solid var(--color-app-line); font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-textarea__foot > .su-field__hint { margin: 0; min-width: 0; }
.su-textarea__count { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-textarea__count[data-level="warn"] { font-weight: 600; color: var(--color-app-warn-deep); }
.su-textarea__count[data-level="crit"] { font-weight: 600; color: var(--color-app-crit-deep); }
.su-textarea__count[data-level]::before { content: "● "; font-size: 9px; vertical-align: 1px; }

/* ============ Avatar Group ============ */
.su-avatars { --su-avs: 32px; --su-avfs: 12px; --ov: -8px; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; font-family: var(--font-sans); }
.su-avatars[data-size="sm"] { --su-avs: 24px; --su-avfs: 9px; --ov: -5px; }
.su-avatars[data-size="lg"] { --su-avs: 40px; --su-avfs: 14px; --ov: -10px; }
.su-avatars__stack { display: inline-flex; align-items: center; flex: none; }
.su-avatars__stack > .su-avatar, .su-avatars__over { --s: var(--su-avs); --fs: var(--su-avfs); --dot: calc(var(--s) * .28); width: var(--s); height: var(--s); font-size: var(--fs);
  box-shadow: 0 0 0 2px var(--color-app-surface); transition: margin var(--dur-state) var(--ease-app), transform var(--dur-state) var(--ease-app); }
.su-avatars__stack > * + * { margin-left: var(--ov); }
.su-avatars__stack > .su-avatar:hover { transform: translateY(-2px); }
.su-avatars__stack:is(:hover, :focus-within, :has([aria-expanded="true"])) > * + * { margin-left: 2px; } /* expanded on hover / keyboard focus / open list */
.su-avatars__more { display: inline-flex; }
.su-avatars__over { display: inline-grid; place-items: center; box-sizing: border-box; min-width: var(--s); width: auto; padding: 0 6px; border: 0; border-radius: var(--radius-pill);
  background: var(--color-app-tray); color: var(--color-app-ink-2); font: 600 var(--fs)/1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.su-avatars__over:hover, .su-avatars__over[aria-expanded="true"] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-avatars__over:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-avatars__panel { --su-popover-w: 220px; }
.su-avatars__list { margin: 0; padding: 0 0 2px; list-style: none; max-height: 240px; overflow-y: auto; }
.su-avatars__item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font: 400 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-avatars__item > .su-avatar { --s: 24px; --fs: 9px; --dot: 7px; }
.su-avatars__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-avatars__on { font-size: 11px; color: var(--color-app-ok-deep); }
.su-avatars__caption { min-width: 0; margin: 0; font: 400 12.5px/1.4 var(--font-sans); color: var(--color-app-ink-2); }
.su-avatars__caption b { font-weight: 600; color: var(--color-app-ink); }
.su-avatars__invite { display: grid; place-items: center; flex: none; box-sizing: border-box; width: var(--su-avs); height: var(--su-avs); padding: 0; border: 1px dashed var(--color-app-line-strong);
  border-radius: 50%; background: transparent; color: var(--color-app-ink-2); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-avatars__invite:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-avatars__invite:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-avatars__invite > svg { width: 45%; height: 45%; }

/* ============ Newsletter Signup ============ */
.su-newsletter { container: su-newsletter / inline-size; box-sizing: border-box; width: 100%; padding: 18px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-newsletter__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.su-newsletter__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-newsletter__icon > svg { width: 18px; height: 18px; }
.su-newsletter__title { margin: 0 0 2px; font: 700 15px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); }
.su-newsletter__lede { margin: 0; font: 400 12.5px/1.45 var(--font-sans); color: var(--color-app-ink-2); }
.su-newsletter__cadence { display: block; margin-top: 2px; font-size: 12px; color: var(--color-app-muted); }
.su-newsletter__form { display: grid; gap: 8px; }
.su-newsletter__row { display: flex; gap: 8px; }
.su-newsletter__row > .su-input { flex: 1; min-width: 0; }
.su-newsletter__row > .su-btn { flex: none; }
.su-newsletter__err { margin: 0; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-crit-deep); }
.su-newsletter__err:empty { display: none; }
.su-newsletter__freq { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; padding: 0; border: 0; font: 400 12.5px/1.3 var(--font-sans); color: var(--color-app-ink-2); }
.su-newsletter__freq label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.su-newsletter__freq input[type=radio] { margin: 0; accent-color: var(--color-app-accent); }
.su-newsletter__seg .su-seg__opt { padding: 6px 12px; font-size: 12.5px; }
.su-newsletter__done { display: flex; align-items: center; gap: 12px; outline: none; border-radius: var(--radius-ctrl); }
.su-newsletter__done:empty { display: none; }
.su-newsletter__done:not(:empty) { padding: 12px; background: var(--color-app-ok-soft); animation: su-newsletter-in var(--dur-state) var(--ease-app); }
.su-newsletter__done:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-newsletter__tick { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--color-app-ok); color: var(--color-app-on-accent); }
.su-newsletter__tick > svg { width: 16px; height: 16px; }
.su-newsletter__msg { display: grid; gap: 2px; min-width: 0; font: 400 12.5px/1.4 var(--font-sans); color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-newsletter__msg b { font-weight: 600; color: var(--color-app-ok-deep); }
.su-newsletter__proof { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-app-line);
  font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-newsletter__proof .su-avatar__stack { flex: none; }
@keyframes su-newsletter-in { from { opacity: 0; } }
@container su-newsletter (max-width: 340px) {
  .su-newsletter__row { flex-direction: column; }
  .su-newsletter__row > .su-btn { width: 100%; }
}

/* ============ Password Input ============ */
.su-password { display: grid; gap: 8px; min-width: 0; font-family: var(--font-sans); }
.su-password__wrap { padding-right: 4px; }
.su-password__wrap > .su-input__el { letter-spacing: .02em; }
.su-password__eye { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--color-app-muted); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-password__eye:hover, .su-password__eye[aria-pressed="true"] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-password__eye:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-password__eye > svg { width: 16px; height: 16px; }
.su-password__meter { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.su-password__bars { display: flex; gap: 4px; flex: 1; }
.su-password__bars > i { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line);
  transition: background-color var(--dur-state) var(--ease-app), box-shadow var(--dur-state) var(--ease-app); }
.su-password__bars > i[data-on] { box-shadow: none; background: var(--su-pw-tone, var(--color-app-muted)); }
.su-password__label { min-width: 48px; text-align: right; font: 600 12px/1 var(--font-sans); color: var(--su-pw-ink, var(--color-app-muted)); }
.su-password__meter[data-tone="crit"] { --su-pw-tone: var(--color-app-crit); --su-pw-ink: var(--color-app-crit-deep); }
.su-password__meter[data-tone="warn"] { --su-pw-tone: var(--color-app-warn); --su-pw-ink: var(--color-app-warn-deep, var(--color-app-ink)); }
.su-password__meter[data-tone="accent"] { --su-pw-tone: var(--color-app-accent); --su-pw-ink: var(--color-app-accent); }
.su-password__meter[data-tone="ok"] { --su-pw-tone: var(--color-app-ok); --su-pw-ink: var(--color-app-ok-deep); }
.su-password__rules { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.su-password__rule { display: flex; align-items: center; gap: 6px; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-password__rule[data-met="true"] { color: var(--color-app-ink-2); }
.su-password__ic { display: grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-app-line-strong); color: transparent; }
.su-password__ic > svg { width: 10px; height: 10px; }
.su-password__rule[data-met="true"] .su-password__ic { box-shadow: none; background: var(--color-app-ok); color: var(--color-app-on-accent); animation: su-password-pop var(--dur-state) var(--ease-app); }
.su-password__rule[data-met="pending"] .su-password__ic { box-shadow: inset 0 0 0 1.5px var(--color-app-muted); border: 0; background: radial-gradient(circle, var(--color-app-muted) 2px, transparent 2.5px); }
.su-password__caps { display: flex; align-items: center; gap: 6px; margin: 0; font: 500 12px/1.4 var(--font-sans); color: var(--color-app-warn-deep, var(--color-app-ink)); }
.su-password__caps:not(:empty)::before { content: "⇪"; font-weight: 700; }
.su-password__caps:empty, .su-password__err:empty { display: none; }
.su-password__err { margin: 0; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-crit-deep); }
.su-password:has(.su-input__el[aria-invalid="true"]) .su-input__wrap { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
@keyframes su-password-pop { 50% { transform: scale(1.25); } }

/* ============ OTP Input ============ */
.su-otp { container: su-otp / inline-size; box-sizing: border-box; display: grid; gap: 14px; width: 100%; padding: 18px min(18px, 3.5%); border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); text-align: center; }
.su-otp__head { display: grid; gap: 4px; }
.su-otp__title { margin: 0; font: 600 15px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-otp__to { margin: 0; font: 400 12.5px/1.45 var(--font-sans); color: var(--color-app-ink-2); }
.su-otp__to b { font-weight: 500; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-otp__boxes { display: flex; justify-content: center; align-items: center; gap: 6px; min-width: 0; }
.su-otp__box { box-sizing: border-box; flex: 1 1 0; width: 0; min-width: 40px; max-width: 52px; height: 48px; margin: 0; padding: 0; border: 0; outline: 0; border-radius: var(--radius-ctrl);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring); text-align: center; caret-color: var(--color-app-accent);
  font: 600 20px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-ink);
  transition: box-shadow var(--dur-hover) var(--ease-app), background-color var(--dur-state) var(--ease-app); }
.su-otp__box:focus { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-otp__box[aria-invalid="true"] { background: var(--color-app-crit-soft); box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); color: var(--color-app-crit-deep); }
.su-otp__box[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep), 0 0 0 3px var(--color-app-crit-soft); }
.su-otp[data-state="verifying"] .su-otp__box { background: var(--color-app-tray); }
.su-otp[data-state="success"] .su-otp__box { background: var(--color-app-ok-soft); box-shadow: inset 0 0 0 1px var(--color-app-ok); color: var(--color-app-ok-deep); }
.su-otp__sep { flex: none; width: 8px; height: 2px; border-radius: 2px; background: var(--color-app-line-strong); }
.su-otp__err { margin: -6px 0 0; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-crit-deep); }
.su-otp__err:empty { display: none; }
.su-otp__verify { width: 100%; }
.su-otp__resend { margin: 0; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-otp__again { padding: 2px 4px; margin: -2px -4px; border: 0; border-radius: 6px; background: none; font: 600 12px/1.4 var(--font-sans); color: var(--color-app-accent); cursor: pointer; }
.su-otp__again:hover:not(:disabled) { text-decoration: underline; }
.su-otp__again:disabled { cursor: default; font-weight: 400; color: var(--color-app-muted); }
.su-otp__again:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-otp__time { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--color-app-ink-2); }
@container su-otp (max-width: 300px) {
  .su-otp__boxes { gap: 3px; }
  .su-otp__sep { width: 6px; }
}
@container su-otp (max-width: 262px) { .su-otp__box { min-width: 0; } } /* narrower than six 40px boxes can be: shrink instead of overflowing */

/* ============ Tag Input ============ */
.su-tags { display: grid; gap: 8px; min-width: 0; font-family: var(--font-sans); }
.su-tags__box { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; box-sizing: border-box; min-height: 40px; padding: 6px; border-radius: 10px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring); cursor: text; transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-tags__box:hover { box-shadow: inset 0 0 0 1px var(--color-app-muted); }
.su-tags__box:focus-within { box-shadow: inset 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-tags__list { display: contents; margin: 0; padding: 0; list-style: none; }
.su-tags__tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; box-sizing: border-box; height: 26px; padding: 0 4px 0 9px; border-radius: 7px;
  background: var(--color-app-accent-soft); color: var(--color-app-ink); font: 500 12.5px/1 var(--font-sans); }
.su-tags__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.su-tags__tag[data-enter] { animation: su-tags-in var(--dur-state) var(--ease-app); }
.su-tags__tag[data-leaving] { animation: su-tags-in var(--dur-state) var(--ease-app) reverse forwards; pointer-events: none; }
.su-tags__tag[data-flash] { animation: su-tags-flash 900ms var(--ease-app); }
.su-tags__tag:has(.su-tags__x:focus-visible) { box-shadow: 0 0 0 2px var(--color-app-focus); }
.su-tags__x { display: grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent;
  color: var(--color-app-ink-2); cursor: pointer; }
.su-tags__x:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-tags__x:focus-visible { outline: none; background: var(--color-app-hover); color: var(--color-app-ink); }
.su-tags__x > svg { width: 11px; height: 11px; }
.su-tags__input { flex: 1; min-width: 120px; height: 26px; margin: 0; padding: 0 4px; border: 0; outline: 0; background: transparent;
  font: 400 13.5px/1 var(--font-sans); color: var(--color-app-ink); }
.su-tags__input::placeholder { color: var(--color-app-muted); }
.su-tags__input[aria-disabled="true"] { cursor: not-allowed; }
.su-tags[data-state="max"] .su-tags__box { background: var(--color-app-tray); }
.su-tags__hint { margin: 0; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-tags__hint[data-tone="dup"], .su-tags__hint[data-tone="max"] { color: var(--color-app-warn-deep, var(--color-app-ink)); }
.su-tags__menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 200px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  border-radius: 10px; background: var(--color-app-surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-app-line); }
.su-tags__opt { padding: 7px 10px; border-radius: 6px; font: 400 13px/1.3 var(--font-sans); color: var(--color-app-ink); cursor: pointer; }
.su-tags__opt:hover, .su-tags__opt[aria-selected="true"] { background: var(--color-app-hover); }
.su-tags__opt mark { background: none; color: var(--color-app-accent); font-weight: 600; }
.su-tags__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.su-tags__sglabel { font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-tags__sg { height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent; box-shadow: inset 0 0 0 1px var(--color-app-line);
  font: 400 12px/1 var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-tags__sg:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-tags__sg:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-tags__sg:disabled { opacity: .5; cursor: not-allowed; }
.su-tags[data-state="disabled"] { opacity: .55; }
@keyframes su-tags-in { from { opacity: 0; transform: scale(.9); } }
@keyframes su-tags-flash { 30% { background: var(--color-app-warn-soft); box-shadow: 0 0 0 2px var(--color-app-warn); } }

/* ============ Toggle ============ */
/* the Switch section styles the control; Toggle adds sizes, the locked state (reason + plan badge + upsell) */
.su-switch__ctl[data-size="sm"], [data-size="sm"] > .su-switch__row .su-switch__ctl { width: 28px; height: 16px; --su-switch-x: none; }
:is(.su-switch__ctl[data-size="sm"], [data-size="sm"] > .su-switch__row .su-switch__ctl)::before { top: 3px; left: 3px; width: 10px; height: 10px; }
:is(.su-switch__ctl[data-size="sm"], [data-size="sm"] > .su-switch__row .su-switch__ctl):is([aria-checked="true"], :checked) { --su-switch-x: translateX(12px); }
:is(.su-switch__ctl[data-size="sm"], [data-size="sm"] > .su-switch__row .su-switch__ctl):is([aria-checked="true"], :checked)::before { transform: translateX(12px); }
[data-size="sm"] > .su-switch__row { padding-block: 9px; }
[data-size="sm"] > .su-switch__row .su-switch__label { font-size: 12.5px; }
.su-switch__ctl[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.su-switch__row[data-locked] .su-switch__text { cursor: not-allowed; }
.su-switch__row[data-locked] .su-switch__label { opacity: .6; }
.su-switch__reason { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-ink-2); }
.su-switch__reason > svg { width: 12px; height: 12px; flex: none; }
.su-switch__upsell { font-weight: 600; color: var(--color-app-accent); text-decoration: none; cursor: pointer; }
.su-switch__upsell:hover { text-decoration: underline; }
.su-switch__upsell:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; border-radius: 3px; }
.su-switch__plan { flex: none; height: 20px; padding: 0 8px; font-size: 11px; }

/* ============ Floating Action Button ============ */
/* root = a click-through layer over the page (fixed) or its container (data-scope="container"); main button sits in a bottom corner */
.su-fab { position: fixed; inset: 0; z-index: 50; pointer-events: none; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-fab[data-scope="container"] { position: absolute; z-index: 5; }
.su-fab__scrim { position: absolute; inset: 0; background: var(--color-app-ground); opacity: 0; pointer-events: none; transition: opacity var(--dur-state) var(--ease-app); }
.su-fab[data-open] .su-fab__scrim { opacity: .6; pointer-events: auto; }
.su-fab__main { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); pointer-events: auto; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 52px; height: 52px; margin: 0; padding: 0 15px; border: 0;
  border-radius: 16px; background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); box-shadow: var(--shadow-lg);
  font: 600 13.5px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: translate var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-fab__main:hover { background: var(--color-app-accent-hover); }
.su-fab__main:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }
.su-fab__main > svg, .su-fab__icon { display: inline-flex; flex: none; width: 22px; height: 22px; }
.su-fab__icon > svg { width: 22px; height: 22px; }
.su-fab__icon { transition: rotate var(--dur-state) var(--ease-app); }
.su-fab__main[aria-expanded="true"] .su-fab__icon { rotate: 45deg; }
.su-fab:not([data-extended]) .su-fab__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.su-fab:not([data-extended]) .su-fab__main { width: 52px; padding: 0; }
.su-fab[data-extended] .su-fab__main { height: 44px; padding: 0 18px 0 14px; border-radius: var(--radius-pill); }
.su-fab[data-extended] .su-fab__main > svg, .su-fab[data-extended] .su-fab__icon, .su-fab[data-extended] .su-fab__icon > svg { width: 18px; height: 18px; }
.su-fab[data-position="start"] .su-fab__main { right: auto; left: 16px; }
.su-fab[data-position="center"] .su-fab__main { right: 0; left: 0; width: max-content; margin-inline: auto; }
.su-fab[data-hidden] .su-fab__main { translate: 0 calc(100% + 24px + env(safe-area-inset-bottom, 0px)); opacity: 0; pointer-events: none; }
/* the action stack: a top-layer popover (ra2Menu) placed above the main button by JS */
.su-fab__list { position: fixed; z-index: 1000; inset: auto; left: 0; top: 0; box-sizing: border-box; margin: 0; padding: 4px; border: 0; background: none;
  color: var(--color-app-ink); overflow: visible; outline: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  font: 500 12.5px/1.2 var(--font-sans); --su-fab-main: 52px; }
.su-fab__list[popover]:not(:popover-open), .su-fab__list[hidden] { display: none; }
.su-fab__list[style*="max-height"] { overflow-y: auto; overscroll-behavior: contain; }
.su-fab[data-position="start"] .su-fab__list { align-items: flex-start; }
.su-fab[data-position="center"] .su-fab__list { align-items: center; }
.su-fab__action { display: flex; align-items: center; justify-content: flex-end; gap: 10px; max-width: 100%; margin: 0; padding: 0;
  padding-inline-end: calc((var(--su-fab-main) - 38px) / 2 - 4px); border: 0; background: none; color: var(--color-app-ink); font: inherit; text-align: left; cursor: pointer; outline: none; }
.su-fab[data-position="start"] .su-fab__action { flex-direction: row-reverse; padding-inline: calc((var(--su-fab-main) - 38px) / 2 - 4px) 0; }
.su-fab__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 9px; border-radius: 6px;
  background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  transition: opacity var(--dur-hover) var(--ease-app); }
.su-fab__btn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-app-surface); color: var(--color-app-ink);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); transition: background-color var(--dur-hover) var(--ease-app); }
.su-fab__btn > svg { width: 17px; height: 17px; }
.su-fab__action:hover .su-fab__btn, .su-fab__action:focus .su-fab__btn { background: var(--color-app-hover); }
.su-fab__action:focus-visible .su-fab__btn { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-fab__action[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.su-fab__list[data-show] .su-fab__action { animation: su-fab-in var(--dur-state) var(--ease-app) both; animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 35ms); }
@keyframes su-fab-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes su-fab-fade { from { opacity: 0; } }
/* ============ Speed Dial ============ */
/* same engine as .su-fab (data-layout="dial"): round main button, pill labels, stack up or to the left */
.su-fab[data-layout="dial"] .su-fab__main { width: 48px; min-width: 0; height: 48px; padding: 0; border-radius: 50%; }
.su-fab[data-layout="dial"] .su-fab__label { padding: 4px 10px; border-radius: var(--radius-pill); }
.su-fab[data-layout="dial"][data-direction="left"] .su-fab__list { flex-direction: row; align-items: center; }
.su-fab__list[style*="max-width"] { overflow-x: auto; overscroll-behavior: contain; }
.su-fab[data-direction="left"] .su-fab__action { flex-direction: column-reverse; gap: 6px; padding: 0; }
.su-fab[data-direction="left"] .su-fab__label { font-size: 11.5px; }
.su-fab[data-direction="left"] .su-fab__list[data-show] .su-fab__action { animation-name: su-fab-in-x; }
@keyframes su-fab-in-x { from { opacity: 0; transform: translateX(8px) scale(.96); } }
.su-fab[data-labels="hover"] .su-fab__label { opacity: 0; }
.su-fab[data-labels="hover"] .su-fab__action:is(:hover, :focus) .su-fab__label { opacity: 1; }
@media (hover: none) { .su-fab[data-labels="hover"] .su-fab__label { opacity: 1; } } /* touch: labels always visible, never tooltip-only */
/* ============ Drag Handle ============ */
/* data-su="sortable" list; rows [data-id]; [data-handle] grip button. Shared by Form Builder (su.sortable / rc6Sortable) */
.su-sortable__wrap { container: su-draghandle / inline-size; box-sizing: border-box; width: min(380px, 100%); padding: 10px; border-radius: var(--radius-card);
  background: var(--color-app-tray); color: var(--color-app-ink); font-family: var(--font-sans); display: grid; gap: 6px; }
.su-sortable__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; padding: 0 4px; }
.su-sortable__title { margin: 0; font: 600 11.5px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-sortable { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.su-sortable[data-axis="x"] { flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.su-sortable__row { position: relative; display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 52px; min-width: 0; padding: 6px 10px 6px 4px;
  border-radius: 10px; background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring-card); }
.su-sortable[data-axis="x"] > .su-sortable__row { flex: none; }
.su-sortable__handle { flex: none; display: grid; place-items: center; width: 24px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none;
  color: var(--color-app-muted); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-sortable__handle > svg { width: 16px; height: 16px; }
.su-sortable__row:hover .su-sortable__handle, .su-sortable__handle:focus-visible, .su-sortable__handle[aria-pressed="true"] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-sortable__handle:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-sortable__body { flex: 1; min-width: 0; }
.su-sortable__name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-sortable__meta { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11.5px/1.35 var(--font-sans); color: var(--color-app-muted); }
.su-sortable__row > .su-combo__av { flex: none; }
.su-sortable[data-dragging] { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.su-sortable[data-dragging] .su-sortable__handle { cursor: grabbing; }
.su-sortable[data-dragging] > .su-sortable__row:not([data-lifted]) { transition: transform var(--dur-state) var(--ease-app); }
.su-sortable__row[data-lifted] { z-index: 2; box-shadow: 0 0 0 1px var(--color-app-line-strong), var(--shadow-lg); }
.su-sortable__row[data-grabbed] { z-index: 1; box-shadow: 0 0 0 2px var(--color-app-accent), var(--shadow-lg); }
.su-sortable__drop { position: absolute; z-index: 0; box-sizing: border-box; margin: 0; padding: 0; border: 1.5px dashed var(--color-app-accent); border-radius: 10px;
  background: var(--color-app-accent-soft); pointer-events: none; list-style: none; }
.su-sortable__drop[data-line] { z-index: 3; border: 0; border-radius: 2px; background: var(--color-app-accent); }
@media (prefers-reduced-motion: no-preference) { .su-sortable__row[data-lifted] { rotate: -1deg; } }
@container su-draghandle (max-width: 300px) { .su-sortable__row > .su-combo__av { display: none; } }
/* ============ Banner ============ */
/* app-wide strip (full-bleed, before <nav>); su-alert is the in-content version */
.su-banner { container: su-banner / inline-size; position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 40px;
  margin: 0; padding: 8px 10px 8px 14px; overflow: hidden; background: var(--color-app-accent-soft); color: var(--color-app-ink);
  border-bottom: 1px solid var(--color-app-line); font: 400 12.5px/1.45 var(--font-sans);
  transition: height var(--dur-state) var(--ease-app), padding var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app); }
.su-banner[hidden] { display: none; }
.su-banner[data-tone="warn"] { background: var(--color-app-warn-soft); }
.su-banner[data-tone="crit"] { background: var(--color-app-crit-soft); }
.su-banner[data-sticky] { position: sticky; top: 0; z-index: 40; }
.su-banner[data-leaving] { opacity: 0; padding-block: 0; border-bottom-width: 0; }
.su-banner__icon { display: inline-flex; flex: none; color: var(--color-app-accent); }
.su-banner__icon > svg { width: 16px; height: 16px; }
.su-banner[data-tone="warn"] .su-banner__icon { color: var(--color-app-warn-deep); }
.su-banner[data-tone="crit"] .su-banner__icon { color: var(--color-app-crit-deep); }
.su-banner__msg { flex: 1; min-width: 0; margin: 0; color: var(--color-app-ink); }
.su-banner__lead { font-weight: 600; color: var(--color-app-ink); }
.su-banner__link { flex: none; border-radius: 4px; font-weight: 600; color: var(--color-app-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.su-banner__link:hover { text-decoration-thickness: 2px; }
.su-banner__link:focus-visible, .su-banner__close:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-banner > .su-btn { flex: none; }
.su-banner__close { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -2px -4px 0; padding: 0; border: 0; border-radius: var(--radius-ctrl);
  background: none; color: var(--color-app-ink-2); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-banner__close:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-banner__close > svg { width: 14px; height: 14px; }
.su-banner__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--v, 0) * 1%); background: var(--color-app-accent); transition: width var(--dur-state) var(--ease-app); }
.su-banner[data-tone="warn"] .su-banner__progress { background: var(--color-app-warn); }
.su-banner[data-tone="crit"] .su-banner__progress { background: var(--color-app-crit); }
@container su-banner (max-width: 480px) {
  .su-banner__msg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}
/* ============ Timeline ============ */
/* CSS only: <ol class="su-timeline"> of li[data-state] (done | current | upcoming | blocked); marker + connector are drawn here */
.su-timeline__card { container: su-timeline / inline-size; box-sizing: border-box; width: min(380px, 100%); min-width: 0; padding: 16px; border-radius: var(--radius-card);
  background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); }
.su-timeline__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.su-timeline__eyebrow { margin: 0; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-timeline__heading { margin: 0; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-timeline { --m: 20px; display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--color-app-ink); font: 400 13px/1.45 var(--font-sans); }
.su-timeline > li { position: relative; display: grid; grid-template-columns: var(--m) minmax(0, 1fr); column-gap: 12px; min-width: 0; padding-bottom: 14px; }
.su-timeline > li:last-child { padding-bottom: 0; }
.su-timeline > li::before { content: ""; position: absolute; left: calc(var(--m) / 2 - 1px); top: calc(var(--m) + 4px); bottom: 4px; width: 2px; border-radius: 2px; background: var(--color-app-line); }
.su-timeline > li:last-child::before { display: none; }
.su-timeline > li[data-state="done"]::before { background: var(--color-app-ok); } /* filled up to the current item */
.su-timeline__marker { position: relative; display: grid; place-items: center; width: var(--m); height: var(--m); border-radius: 50%; }
.su-timeline__marker::after { content: ""; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-app-line-strong); }
[data-state="done"] > .su-timeline__marker { background: var(--color-app-ok-soft); }
[data-state="done"] > .su-timeline__marker::after { width: 9px; height: 5px; border-radius: 0; box-shadow: none; border: solid var(--color-app-ok-deep); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
[data-state="current"] > .su-timeline__marker { background: var(--color-app-accent-soft); }
[data-state="current"] > .su-timeline__marker::after { width: 8px; height: 8px; box-shadow: none; background: var(--color-app-accent); }
[data-state="current"] > .su-timeline__marker::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 0 var(--color-app-accent);
  animation: su-timeline-pulse var(--dur-loop) var(--ease-app) infinite; }
@keyframes su-timeline-pulse { 0% { opacity: .5; box-shadow: 0 0 0 0 var(--color-app-accent); } 100% { opacity: 0; box-shadow: 0 0 0 7px var(--color-app-accent); } }
[data-state="blocked"] > .su-timeline__marker { background: var(--color-app-crit-soft); }
[data-state="blocked"] > .su-timeline__marker::after { content: "!"; width: auto; height: auto; box-shadow: none; border-radius: 0; font: 700 12px/1 var(--font-sans); color: var(--color-app-crit-deep); }
.su-timeline__body { min-width: 0; }
.su-timeline__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.su-timeline__title { margin: 0; font-weight: 600; color: var(--color-app-ink); }
[data-state="upcoming"] .su-timeline__title, li:not([data-state]) .su-timeline__title { color: var(--color-app-muted); }
[data-state="blocked"] .su-timeline__title { color: var(--color-app-crit-deep); }
.su-timeline__time { margin-left: auto; font-size: 11.5px; color: var(--color-app-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.su-timeline__meta { margin: 0; font-size: 12px; color: var(--color-app-ink-2); }
.su-timeline__meta a { color: inherit; }
.su-timeline__extra { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-tray); }
.su-timeline__extra .su-progress { gap: 6px; }
.su-timeline__extra .su-progress__head { font-size: 11.5px; }
.su-timeline__extra .su-progress__track { height: 4px; background: var(--color-app-line); }
/* horizontal: a scroll row (the list is its own keyboard-scrollable region) */
.su-timeline[data-orientation="horizontal"] { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 6px; }
.su-timeline[data-orientation="horizontal"]:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; border-radius: 4px; }
.su-timeline[data-orientation="horizontal"] > li { flex: 1 0 132px; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 0 12px 0 0; }
.su-timeline[data-orientation="horizontal"] > li:last-child { padding-right: 0; }
.su-timeline[data-orientation="horizontal"] > li::before { left: calc(var(--m) + 4px); right: 4px; top: calc(var(--m) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
.su-timeline[data-orientation="horizontal"] .su-timeline__time { margin-left: 0; flex-basis: 100%; }
/* ============ Confirm Dialog ============ */
/* <dialog data-su="confirm"> on top of .su-dialog (same enter/exit, backdrop, busy) */
.su-confirm__head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.su-confirm__copy { min-width: 0; }
.su-confirm__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); }
.su-confirm[data-tone="warn"] .su-confirm__icon { background: var(--color-app-warn-soft); color: var(--color-app-warn-deep); }
.su-confirm__icon > svg { width: 16px; height: 16px; }
.su-confirm__field { font-weight: 400; font-size: 12px; color: var(--color-app-ink-2); }
.su-confirm__field b { font-weight: 600; color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-confirm__field .su-input { width: 100%; box-sizing: border-box; }
.su-confirm .su-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.su-confirm .su-btn[aria-disabled="true"]:hover { box-shadow: none; }
@media (max-width: 479px) { .su-confirm .su-dialog__foot { flex-direction: column; } } /* full-width stack, destructive last */


/* ============ Multi Select ============ */
/* a mode of Combobox (.su-combo): same list/option/av styles, adds label, "+N", chevron, cap + no-results rows */
.su-multiselect { container: su-multiselect / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: min(340px, 100%); font-family: var(--font-sans); }
.su-multiselect__label { color: var(--color-app-ink); }
.su-multiselect .su-combo__box { flex-wrap: nowrap; min-height: 40px; padding: 4px 8px; border-radius: var(--radius-ctrl); }
.su-multiselect .su-chip { flex: 0 1 auto; min-width: 0; height: 24px; max-width: 42%; padding: 0 8px; border-radius: 6px; background: var(--color-app-tray); color: var(--color-app-ink);
  box-shadow: inset 0 0 0 1px var(--color-app-line); font-weight: 500; }
.su-multiselect__chipt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-multiselect .su-chip__x { flex: none; }
.su-multiselect .su-combo__input { min-width: 48px; }
.su-multiselect__more { flex: none; font: 600 12.5px/1 var(--font-sans); color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-multiselect__chev { display: flex; flex: none; margin-left: auto; color: var(--color-app-muted); transition: transform var(--dur-hover) var(--ease-app); }
.su-multiselect__chev svg { width: 16px; height: 16px; }
.su-multiselect:has(.su-combo__input[aria-expanded="true"]) .su-multiselect__chev { transform: rotate(180deg); }
.su-multiselect .su-combo__list { top: calc(100% + 6px); }
.su-multiselect__meta { margin-left: auto; }
.su-multiselect .su-combo__opt[aria-selected="true"]::after { margin-left: 8px; }
.su-multiselect .su-combo__opt:not([aria-selected="true"])::after { content: ""; flex: none; width: 10px; margin-left: 8px; }
.su-multiselect .su-combo__opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.su-multiselect .su-combo__opt:hover:not([aria-disabled="true"]) { background: var(--color-app-hover); }
.su-multiselect__empty { padding: 10px; font: 400 13px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-multiselect[data-full] .su-multiselect__more { color: var(--color-app-accent); }
@container su-multiselect (max-width: 300px) { .su-multiselect__meta { display: none; } }

/* ============ Time Picker ============ */
.su-time { container: su-time / inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: min(300px, 100%); font-family: var(--font-sans); }
.su-time__label { color: var(--color-app-ink); }
.su-time__field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 10px; border-radius: var(--radius-ctrl);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring); cursor: text; transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-time__field:focus-within, .su-time[data-open] .su-time__field { box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-time:has(.su-time__input[aria-invalid="true"]) .su-time__field { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep), 0 0 0 3px var(--color-app-crit-soft); }
.su-time__icon { display: flex; color: var(--color-app-muted); }
.su-time__icon svg { width: 16px; height: 16px; }
.su-time__input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
  font: 600 14.5px/1 var(--font-sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-time__input::placeholder { color: var(--color-app-muted); font-weight: 400; }
.su-time__tz { flex: none; padding: 3px 7px; border-radius: 6px; background: var(--color-app-tray); font: 600 11px/1 var(--font-sans); color: var(--color-app-ink-2); }
.su-time__toggle { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--color-app-muted); cursor: pointer; }
.su-time__toggle:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-time__toggle svg { width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease-app); }
.su-time[data-open] .su-time__toggle svg { transform: rotate(180deg); }
.su-time__err { margin: 0; font: 400 12px/1.4 var(--font-sans); }
.su-time__panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max(100%, 240px); box-sizing: border-box; display: grid; gap: 8px; padding: 10px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-lg);
  animation: su-time-in var(--dur-state) var(--ease-app); }
.su-time__err:not([hidden]) ~ .su-time__panel { top: calc(100% + 6px); }
.su-time__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.su-time__cols--rep { grid-template-columns: 1fr 1fr 1.3fr; }
.su-time__col { display: grid; gap: 4px; min-width: 0; align-content: start; }
.su-time__head { padding: 0 4px; font: 600 11px/1.4 var(--font-sans); color: var(--color-app-ink-label); text-align: center; }
.su-time__list { display: grid; gap: 2px; align-content: start; max-height: 154px; overflow-y: auto; padding: 2px; border-radius: 8px; outline: none;
  scroll-snap-type: y proximity; scrollbar-width: none; overscroll-behavior: contain; }
.su-time__list::-webkit-scrollbar { display: none; }
.su-time__list:focus-visible { box-shadow: 0 0 0 2px var(--color-app-focus); }
.su-time__opt { display: grid; place-items: center; height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; scroll-snap-align: center;
  font: 400 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-ink); cursor: pointer; white-space: nowrap; }
.su-time__opt:hover { background: var(--color-app-hover); }
.su-time__opt[aria-selected="true"], .su-time__opt[aria-checked="true"] { background: var(--color-app-accent); color: var(--color-app-on-accent); font-weight: 600; }
.su-time__opt[aria-disabled="true"] { color: var(--color-app-muted); opacity: .45; text-decoration: line-through; cursor: not-allowed; background: transparent; }
.su-time__rep .su-time__opt:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-time__list:focus-visible .su-time__opt[aria-selected="true"] { box-shadow: 0 0 0 2px var(--color-app-surface), 0 0 0 4px var(--color-app-focus); }
.su-time__foot { display: flex; justify-content: flex-end; gap: 6px; padding-top: 8px; border-top: 1px solid var(--color-app-line); }
@keyframes su-time-in { from { opacity: 0; } }
@container su-time (max-width: 260px) { .su-time__panel { width: 100%; padding: 8px; } .su-time__cols--rep { grid-template-columns: 1fr 1fr; } .su-time__cols--rep > :last-child { grid-column: 1 / -1; } .su-time__cols--rep .su-time__rep { grid-template-columns: repeat(3, 1fr); } }

/* ============ Color Picker ============ */
.su-color { --su-color-pick: var(--color-app-accent); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(300px, 100%); padding: 14px; box-sizing: border-box;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-color__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.su-color__preview { position: relative; flex: none; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--color-app-line);
  background: repeating-conic-gradient(var(--color-app-tray) 0 25%, var(--color-app-surface) 0 50%) 0 0 / 10px 10px; }
.su-color__preview > span { position: absolute; inset: 0; }
.su-color__text { display: grid; gap: 2px; min-width: 0; }
.su-color__title { font: 600 13px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-color__value { font: 400 12px/1.3 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.su-color__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 6px; }
.su-color__sw { position: relative; display: block; padding: 2px; border-radius: 8px; cursor: pointer; transition: box-shadow var(--dur-state) var(--ease-app); }
.su-color__radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.su-color__chip { display: block; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--color-app-line); transition: transform var(--dur-hover) var(--ease-app); }
.su-color__sw:hover .su-color__chip { transform: scale(1.06); }
.su-color__sw:has(:checked) { box-shadow: 0 0 0 2px var(--color-app-ink); animation: su-color-ring var(--dur-state) var(--ease-app); }
/* selected is not color-only: a check badge on the chosen swatch */
.su-color__sw:has(:checked)::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--color-app-surface); box-shadow: 0 0 0 1px var(--color-app-line); pointer-events: none; }
.su-color__sw:has(:checked)::before { content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; width: 6px; height: 3px; margin: -3px 0 0 -3px;
  border: solid var(--color-app-ink); border-width: 0 0 2px 2px; transform: rotate(-45deg); pointer-events: none; }
.su-color__sw:has(:focus-visible) { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-color__alpha .su-slider__title { color: var(--color-app-muted); font-weight: 400; font-size: 12px; }
.su-color__alpha .su-slider__value { color: var(--color-app-ink-2); }
.su-color__custom { display: grid; gap: 6px; }
.su-color__hex { width: 100%; box-sizing: border-box; height: 36px; font-variant-numeric: tabular-nums; }
.su-color__hex[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep), 0 0 0 3px var(--color-app-crit-soft); }
.su-color__err { margin: 0; font: 400 12px/1.4 var(--font-sans); }
@keyframes su-color-ring { from { box-shadow: 0 0 0 0 var(--color-app-ink); } }

/* ============ Range Slider ============ */
.su-range { --a: 0; --b: 1; container: su-range / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: min(360px, 100%); padding: 14px; box-sizing: border-box;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-range__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.su-range__title { font: 600 13px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-range__count { font: 400 12px/1.3 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-range__bars { display: flex; align-items: flex-end; gap: 2px; height: 44px; margin: 0 12px; }
.su-range__bar { flex: 1; height: calc(var(--h) * 100%); min-height: 2px; border-radius: 2px 2px 0 0; background: var(--color-app-line-strong);
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-range__bar[data-in] { background: var(--color-app-accent); }
.su-range__track { position: relative; height: 24px; margin: -8px 12px 0; touch-action: none; cursor: pointer; }
.su-range__rail, .su-range__fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--radius-pill); }
.su-range__rail { left: 0; right: 0; background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-range__fill { left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); background: var(--color-app-accent); }
.su-range__thumb { position: absolute; top: 50%; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; touch-action: none; cursor: grab; outline: none;
  transform: translate(-50%, -50%); transition: transform var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app); }
.su-range__thumb::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-app-surface);
  box-shadow: 0 0 0 2px var(--color-app-accent), 0 1px 3px rgba(0, 0, 0, .25); }
.su-range__thumb[data-i="0"] { left: calc(var(--a) * 100%); }
.su-range__thumb[data-i="1"] { left: calc(var(--b) * 100%); }
.su-range__thumb:focus-visible::before { box-shadow: 0 0 0 2px var(--color-app-accent), 0 0 0 5px var(--color-app-focus); }
.su-range__thumb:focus { z-index: 1; }
.su-range__thumb[data-dragging] { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); }
.su-range__fields { display: flex; align-items: flex-end; gap: 8px; }
.su-range__field { display: grid; gap: 4px; flex: 1; min-width: 0; }
.su-range__flabel { font: 400 11.5px/1.2 var(--font-sans); color: var(--color-app-muted); }
.su-range__box { display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border-radius: var(--radius-ctrl); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-range__box:focus-within { box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-range__unit { font: 400 13px/1 var(--font-sans); color: var(--color-app-muted); }
.su-range__input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: none; font: 600 13.5px/1 var(--font-sans);
  font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-range__dash { padding-bottom: 10px; color: var(--color-app-muted); }
@container su-range (max-width: 260px) { .su-range__bars { height: 32px; } .su-range__fields { gap: 6px; } .su-range__box { padding: 0 8px; } }

/* ============ Search ============ */
.su-search { container: su-search / inline-size; position: relative; width: min(440px, 100%); font-family: var(--font-sans); }
.su-search__box { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px 0 12px; border-radius: var(--radius-ctrl); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-search__box:focus-within { box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-search__box > svg { flex: none; width: 16px; height: 16px; color: var(--color-app-muted); }
.su-search__input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: 400 14px/1 var(--font-sans); color: var(--color-app-ink); }
.su-search__input::placeholder { color: var(--color-app-muted); }
.su-search .su-kbd { flex: none; }
.su-search__panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; display: grid; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-lg); animation: su-search-in var(--dur-state) var(--ease-app); }
.su-search__list { max-height: min(320px, 60vh); overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.su-search__grp + .su-search__grp { margin-top: 4px; }
.su-search__group { padding: 8px 8px 4px; font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-search__row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px; border-radius: 8px; cursor: pointer;
  font: 400 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-search__row[aria-selected="true"] { background: var(--color-app-hover); box-shadow: inset 2px 0 0 var(--color-app-accent); }
.su-search__ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-search__ico svg { width: 14px; height: 14px; }
.su-search__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-search__meta { color: var(--color-app-muted); }
.su-search__row mark { background: none; color: var(--color-app-accent); font-weight: 600; }
.su-search__amt { flex: none; font: 600 12.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-ink-2); }
.su-search__empty { margin: 0; padding: 18px 14px; text-align: center; font: 400 13px/1.45 var(--font-sans); color: var(--color-app-muted); overflow-wrap: anywhere; }
.su-search__empty b { color: var(--color-app-ink); font-weight: 600; }
.su-search[data-loading] .su-search__empty::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; border-radius: 50%;
  border: 2px solid var(--color-app-line); border-top-color: var(--color-app-accent); animation: su-rot .8s linear infinite; }
.su-search__foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-top: 1px solid var(--color-app-line); font: 400 12px/1 var(--font-sans); color: var(--color-app-muted); }
.su-search__foot > span { display: inline-flex; align-items: center; gap: 6px; }
@keyframes su-search-in { from { opacity: 0; } }
@container su-search (max-width: 340px) { .su-search__amt { display: none; } .su-search__foot > span:last-child { display: none; } }

/* ============ Mention Input ============ */
.su-mention { position: relative; width: min(420px, 100%); font-family: var(--font-sans); }
.su-mention__box { border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring); transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-mention__box:focus-within { box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-mention__area { position: relative; min-height: 64px; max-height: 200px; overflow-y: auto; padding: 12px 14px 6px; outline: none; overflow-wrap: anywhere;
  font: 400 14px/1.6 var(--font-sans); color: var(--color-app-ink); }
.su-mention__area[data-empty]::before { content: attr(data-placeholder); position: absolute; color: var(--color-app-muted); pointer-events: none; }
.su-mention__token { padding: 1px 5px; border-radius: 6px; background: var(--color-app-accent-soft); color: var(--color-app-accent); font-weight: 600; white-space: nowrap; }
.su-mention__bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 10px; }
.su-mention__tools { display: flex; gap: 2px; margin-right: auto; }
.su-mention__tool { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--color-app-muted); cursor: pointer; }
.su-mention__tool:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-mention__tool:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-mention__tool svg { width: 16px; height: 16px; }
.su-mention__hint { font: 400 11.5px/1 var(--font-sans); color: var(--color-app-muted); white-space: nowrap; }
.su-mention [data-send][aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.su-mention__menu { position: absolute; z-index: 30; width: min(260px, calc(100% - 8px)); max-height: 232px; overflow-y: auto; margin: 0; padding: 6px; box-sizing: border-box; list-style: none;
  border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); animation: su-mention-in var(--dur-state) var(--ease-app); }
.su-mention__menu [role="option"] { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font: 400 13.5px/1.2 var(--font-sans); color: var(--color-app-ink); }
.su-mention__menu [role="option"][data-active] { background: var(--color-app-hover); }
.su-mention__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-mention__name mark, .su-mention__handle mark { background: none; color: var(--color-app-accent); font-weight: 700; }
.su-mention__handle { flex: none; font-size: 12px; color: var(--color-app-muted); }
.su-mention__note { padding: 8px; font-size: 12.5px; color: var(--color-app-muted); }
@keyframes su-mention-in { from { opacity: 0; } }

/* ============ Image Gallery ============ */
/* Mosaic grid (container query): 2 columns, 3 from 480px, 4 from 720px; the first tile is the large one. Tiles are buttons; the focus ring and
   the selected ring sit on the figure (outside its rounded clip). Captions rise in on hover / focus. */
.su-gallery { container: su-gallery / inline-size; box-sizing: border-box; width: 100%; min-width: 0; padding: 14px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-gallery__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.su-gallery__head > div { flex: 1; min-width: 0; }
.su-gallery__title { margin: 0; font: 600 14px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-gallery__meta { margin: 0; font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-gallery__select[aria-pressed="true"] { background: var(--color-app-tray); color: var(--color-app-ink); }
.su-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 88px; gap: 8px; margin: 0; padding: 0; }
.su-gallery__tile:first-child { grid-row: span 2; }
@container su-gallery (min-width: 480px) { .su-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 96px; } }
@container su-gallery (min-width: 720px) {
  .su-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 104px; }
  .su-gallery__tile:first-child { grid-column: span 2; }
}
.su-gallery__tile, .su-gallery__more { position: relative; min-width: 0; margin: 0; border-radius: 10px; background: var(--color-app-tray);
  transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-gallery__tile[hidden] { display: none; }
.su-gallery__btn, .su-gallery__more { display: block; width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 10px;
  overflow: hidden; background: none; color: inherit; font: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.su-gallery__btn:focus-visible, .su-gallery__more:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-gallery__btn > :is(img, svg), .su-gallery__more > :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: cover; }
.su-gallery__tile:not([data-loaded]) img { opacity: 0; transition: opacity var(--dur-state) var(--ease-app); }
.su-gallery__tile[data-loaded] img { opacity: 1; }
.su-gallery__tile > figcaption { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 7px; border-radius: 6px; background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card); font-size: 11px; line-height: 1.4; color: var(--color-app-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app); }
.su-gallery__tile:is(:hover, :focus-within) > figcaption { opacity: 1; transform: none; }
.su-gallery__check { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring); color: transparent; pointer-events: none; opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-gallery__check > svg { width: 13px; height: 13px; }
.su-gallery[data-selecting] .su-gallery__btn { cursor: pointer; }
.su-gallery[data-selecting] .su-gallery__check { opacity: 1; }
.su-gallery__tile[data-selected] { box-shadow: 0 0 0 2px var(--color-app-surface), 0 0 0 4px var(--color-app-accent); }
.su-gallery__tile[data-selected] .su-gallery__check { background: var(--color-app-accent); color: var(--color-app-on-accent); box-shadow: none; }
.su-gallery__more { cursor: pointer; }
.su-gallery__more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-app-surface); opacity: .82; }
.su-gallery__plus { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 600 16px/1 var(--font-sans);
  color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-gallery__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--color-app-ink-2); }
.su-gallery__bar[hidden] { display: none; }
.su-gallery__count { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.su-gallery__bar > svg { width: 15px; height: 15px; flex: none; color: var(--color-app-muted); }

/* ============ Lightbox ============ */
/* Thumbnails box (.su-lightbox) + the shared viewer .su-lb: a Dialog (data-size="lg", wider) on the sunk surface. The stage keeps the image
   contained at any width; the zoom scales it 2× around --su-lb-ox / --su-lb-oy (double-click point or pointer). Open = FLIP (JS), so the
   dialog itself only fades. */
.su-lightbox { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.su-lightbox__thumb { display: block; flex: none; width: 88px; height: 60px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--color-app-tray);
  box-shadow: var(--shadow-ring); cursor: zoom-in; transition: transform var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app); }
.su-lightbox__thumb:hover { transform: translateY(-1px); box-shadow: var(--shadow-ring), var(--shadow-md); }
.su-lightbox__thumb:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-lightbox__thumb > :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: cover; }
.su-dialog.su-lb { --w: 860px; background: var(--color-app-sunk); }
.su-dialog.su-lb[open] { animation: su-dlg-fade var(--dur-state) var(--ease-app); }
.su-dialog.su-lb[data-closing] { animation: su-dlg-fade-out var(--dur-state) var(--ease-app) forwards; }
.su-dialog.su-lb::backdrop { background: rgb(0 0 0 / .7); }
.su-lb__panel { gap: 0; padding: 0; }
.su-lb__bar { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 8px 8px 8px 14px; }
.su-lb__caption { flex: 1; min-width: 0; margin: 0; font: 600 13px/1.35 var(--font-sans); color: var(--color-app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-lb__count { flex: none; margin-right: 4px; font: 400 12px/1 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-lb__stage { position: relative; overflow: hidden; margin: 0 12px; border-radius: 10px; background: var(--color-app-tray); aspect-ratio: 16 / 10;
  max-height: calc(100dvh - 190px); touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.su-lb__fig { position: absolute; inset: 0; margin: 0; cursor: zoom-in; }
.su-lb__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: var(--su-lb-ox, 50%) var(--su-lb-oy, 50%);
  transition: transform var(--dur-state) var(--ease-app); }
.su-lb__stage[data-zoom] .su-lb__fig { cursor: zoom-out; }
.su-lb__stage[data-zoom] .su-lb__img { transform: scale(2); }
.su-lb__nav.su-iconbtn { position: absolute; top: 50%; z-index: 1; margin-top: -16px; border-radius: 50%; background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-md); }
.su-lb__nav.su-iconbtn:hover { background: var(--color-app-hover); }
.su-lb__nav[data-dir="-1"] { left: 10px; }
.su-lb__nav[data-dir="1"] { right: 10px; }
.su-lb__nav[aria-disabled="true"] { opacity: .4; cursor: default; }
.su-lb__nav[hidden], .su-lb__meta[hidden], .su-lb__load[hidden] { display: none; }
.su-lb__stage[data-zoom] .su-lb__nav { opacity: 0; pointer-events: none; }
.su-lb__meta { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-app-surface);
  font: 400 11px/1.3 var(--font-sans); color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-lb__load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-app-muted); }
.su-lb__load .su-spin { width: 24px; height: 24px; }
.su-lb__stage[data-state="error"]::after { content: "โหลดรูปไม่ได้"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 13px/1 var(--font-sans); color: var(--color-app-ink-2); }
.su-lb__strip { position: relative; display: flex; justify-content: safe center; gap: 6px; padding: 12px; overflow-x: auto; scrollbar-width: none; }
.su-lb__strip::-webkit-scrollbar { display: none; }
.su-lb__thumb { flex: none; width: 52px; height: 36px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--color-app-tray); opacity: .6; cursor: pointer;
  transition: opacity var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app); }
.su-lb__thumb:hover { opacity: .85; }
.su-lb__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--color-app-accent); }
.su-lb__thumb:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-lb__thumb > :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 479px) { .su-lb__stage { margin: 0 8px; } .su-lb__strip { padding: 10px 8px; } }

/* ============ Footer ============ */
/* CSS-only block. Container query on the footer: < 600px stacked · 600–899px two columns · ≥ 900px brand + link columns in one row
   (data-cols = 2 | 3 | 4 link columns). Embeds the Newsletter Signup form compact (no card). */
.su-footer { container: su-footer / inline-size; --su-footer-cols: 3; box-sizing: border-box; width: 100%; min-width: 0; padding: 28px 24px 16px;
  background: var(--color-app-tray); border-top: 1px solid var(--color-app-line); font: 400 13px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-footer[data-cols="2"] { --su-footer-cols: 2; }
.su-footer[data-cols="4"] { --su-footer-cols: 4; }
.su-footer__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 20px; }
@container su-footer (min-width: 600px) { .su-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container su-footer (min-width: 900px) { .su-footer__main { grid-template-columns: minmax(0, 1.7fr) repeat(var(--su-footer-cols), minmax(0, 1fr)); gap: 24px 28px; } }
.su-footer__brand { display: grid; gap: 10px; align-content: start; min-width: 0; }
.su-footer__logo { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 700 15px/1.2 var(--font-sans); letter-spacing: -.01em;
  color: var(--color-app-ink); text-decoration: none; border-radius: var(--radius-ctrl); }
.su-footer__mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-footer__mark > svg { width: 14px; height: 14px; }
.su-footer__tagline { margin: 0; max-width: 38ch; font-size: 13px; color: var(--color-app-ink-2); }
.su-footer .su-newsletter { padding: 0; margin-top: 4px; max-width: 360px; background: none; box-shadow: none; }
.su-footer .su-newsletter__row .su-input { height: 36px; }
.su-footer .su-newsletter__row .su-btn { --h: 36px; }
.su-footer__label { display: block; margin-bottom: 6px; font: 600 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-footer__nav { min-width: 0; }
.su-footer__heading { margin: 0 0 10px; font: 600 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-footer__links { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.su-footer :is(a, .su-footer__logo):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-footer__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; border-radius: 4px; font-size: 13px; color: var(--color-app-ink-2);
  text-decoration: none; transition: color var(--dur-hover) var(--ease-app); }
.su-footer__links a:hover { color: var(--color-app-ink); text-decoration: underline; text-underline-offset: 3px; }
.su-footer__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-pill);
  background: var(--color-app-accent-soft); font: 600 11px/1 var(--font-sans); color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--color-app-line);
  font-size: 12px; color: var(--color-app-muted); }
.su-footer__copy { flex: 1 1 220px; margin: 0; color: var(--color-app-ink-2); }
.su-footer__status { display: inline-flex; align-items: center; gap: 6px; color: var(--color-app-ink-2); text-decoration: none; border-radius: 4px; }
.su-footer__status:hover { color: var(--color-app-ink); }
.su-footer__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--color-app-ok); box-shadow: 0 0 0 3px var(--color-app-ok-soft); }
.su-footer__status[data-tone="warn"] .su-footer__dot { background: var(--color-app-warn); box-shadow: 0 0 0 3px var(--color-app-warn-soft); }
.su-footer__status[data-tone="crit"] .su-footer__dot { background: var(--color-app-crit); box-shadow: 0 0 0 3px var(--color-app-crit-soft); }
.su-footer__social { display: flex; gap: 2px; margin: 0 -6px 0 0; padding: 0; list-style: none; }

/* ============ Contact Form ============ */
/* Info column + form card: two columns from 900px (container query), stacked below. Real <form> underneath; JS adds messages, summary, busy, success. */
.su-contact { container: su-contact / inline-size; box-sizing: border-box; width: 100%; min-width: 0; font: 400 13px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-contact__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@container su-contact (min-width: 900px) { .su-contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; align-items: start; } }
.su-contact__info { display: grid; gap: 6px; align-content: start; min-width: 0; }
.su-contact__eyebrow { margin: 0; font: 600 11px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-contact__title { margin: 0; font: 700 22px/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); }
.su-contact__sub { margin: 0; max-width: 42ch; font-size: 13.5px; color: var(--color-app-ink-2); }
.su-contact__methods { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.su-contact__method { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.su-contact__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-contact__icon > svg { width: 16px; height: 16px; }
.su-contact__method b { display: block; font-weight: 600; color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-contact__method div > span { display: block; font-size: 12px; color: var(--color-app-ink-2); }
.su-contact__card { position: relative; display: grid; gap: 14px; min-width: 0; margin: 0; padding: 18px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-contact__card[hidden] { display: none; }
.su-contact__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container su-contact (min-width: 520px) { .su-contact__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.su-contact__card .su-input { width: 100%; box-sizing: border-box; font: 400 13.5px/1.2 var(--font-sans); color: var(--color-app-ink); }
.su-contact__card .su-field__err { margin: 0; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-crit-deep); }
.su-contact__card .su-field__err[hidden] { display: none; }
.su-contact__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.su-contact__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.su-contact__consent { display: grid; gap: 4px; min-width: 0; }
.su-contact__consent > label { display: flex; align-items: flex-start; gap: 8px; font: 400 12.5px/1.4 var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; }
.su-contact__consent input { flex: none; width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--color-app-accent); }
.su-contact__consent input[aria-invalid="true"] { outline: 2px solid var(--color-app-crit-deep); outline-offset: 1px; }
.su-contact__consent a { color: var(--color-app-ink); }
.su-contact__summary { padding: 10px 12px; border-radius: var(--radius-ctrl); background: var(--color-app-crit-soft); font-size: 12.5px; color: var(--color-app-crit-deep); outline: none; }
.su-contact__summary[hidden] { display: none; }
.su-contact__summary:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-contact__summary p { margin: 0; }
.su-contact__sumtitle { font-weight: 600; }
.su-contact__summary ul { margin: 4px 0 0; padding-left: 18px; }
.su-contact__summary a { color: var(--color-app-crit-deep); text-underline-offset: 2px; }
.su-contact__done { display: grid; justify-items: start; gap: 8px; min-width: 0; padding: 24px 20px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); outline: none; animation: su-rise var(--dur-state) var(--ease-app); }
.su-contact__done[hidden] { display: none; }
.su-contact__done:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-contact__tick { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-app-ok); color: var(--color-app-on-accent); }
.su-contact__tick > svg { width: 18px; height: 18px; }
.su-contact__donetitle { margin: 4px 0 0; font: 700 17px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-contact__donetext { margin: 0 0 6px; color: var(--color-app-ink-2); overflow-wrap: anywhere; }
@container su-contact (max-width: 380px) { .su-contact__foot > .su-btn { width: 100%; } .su-contact__card { padding: 14px; } }

/* ============ Logo Marquee ============ */
/* A styling layer on the Marquee kind: <div class="su-logos su-marquee" data-su="marquee">. Logos are SVG wordmarks (role=img + name);
   the marquee clones the group (aria-hidden + inert) for the seamless loop, pauses on hover / focus, and has the pause button.
   Reduced motion: the row stops and wraps into a centred static grid (B-C7). */
.su-logos.su-marquee { width: 100%; padding: 18px 0 16px; text-align: center; }
.su-logos .su-marquee__head { margin-bottom: 14px; }
.su-logos__caption { margin: 0; font: 400 13px/1.4 var(--font-sans); color: var(--color-app-ink-2); }
.su-logos__caption b { font-weight: 600; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-logos .su-marquee__row { mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent); }
.su-logos__logo { display: inline-flex; align-items: center; height: 36px; padding: 0 22px; color: var(--color-app-muted); transition: color var(--dur-hover) var(--ease-app); }
.su-logos__logo:hover { color: var(--color-app-ink-2); }
.su-logos__logo > svg { display: block; height: 26px; width: auto; overflow: visible; }
.su-logos__word { font: 700 16px/1 var(--font-sans); letter-spacing: -.02em; fill: currentColor; }

/* ============ Animated Background ============ */
/* CSS only: decorative layer (aria-hidden) of blurred blobs / gradient mesh / drifting dot grid behind a content slot. Transform-only
   keyframes on long loops (≥ 20 s); reduced motion leaves the static first frame. Colors are the soft role tokens, so text in the slot
   keeps its normal ink contrast in light and dark. */
.su-animbg { --su-animbg-dur: 32s; --su-animbg-o: .8; --su-animbg-blur: 44px; position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  width: 100%; min-width: 0; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card);
  font-family: var(--font-sans); color: var(--color-app-ink); }
.su-animbg[data-speed="normal"] { --su-animbg-dur: 20s; }
.su-animbg[data-intensity="bold"] { --su-animbg-o: 1; --su-animbg-blur: 32px; }
.su-animbg__layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.su-animbg__blob { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; opacity: var(--su-animbg-o); filter: blur(var(--su-animbg-blur));
  will-change: transform; animation: su-animbg-a var(--su-animbg-dur) ease-in-out infinite alternate; }
.su-animbg__blob:nth-child(1) { top: -25%; left: -10%; background: var(--color-app-accent-soft); }
.su-animbg__blob:nth-child(2) { top: 20%; left: 55%; background: var(--color-app-ok-soft); animation-name: su-animbg-b; animation-duration: calc(var(--su-animbg-dur) * 1.25); }
.su-animbg__blob:nth-child(3) { top: 55%; left: 0; width: 45%; background: var(--color-app-warn-soft); animation-name: su-animbg-c; animation-duration: calc(var(--su-animbg-dur) * .85); }
@keyframes su-animbg-a { to { transform: translate(55%, 30%) scale(1.2); } }
@keyframes su-animbg-b { to { transform: translate(-60%, -25%) scale(.85); } }
@keyframes su-animbg-c { to { transform: translate(40%, -35%) scale(1.15); } }
/* mesh: one oversized layer of three radial gradients that slowly turns */
.su-animbg[data-variant="mesh"] .su-animbg__blob { display: none; }
.su-animbg[data-variant="mesh"] .su-animbg__layer::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(250%, 600px); aspect-ratio: 1;
  translate: -50% -50%; opacity: var(--su-animbg-o);
  background: radial-gradient(circle at 45% 47%, var(--color-app-accent-soft), transparent 16%), radial-gradient(circle at 56% 46%, var(--color-app-ok-soft), transparent 15%),
    radial-gradient(circle at 51% 54%, var(--color-app-warn-soft), transparent 15%);
  will-change: transform; animation: su-animbg-turn calc(var(--su-animbg-dur) * 2) linear infinite; }
@keyframes su-animbg-turn { to { transform: rotate(1turn); } }
/* grid: blobs + a dot grid that drifts one cell per loop (transform, not background-position) */
.su-animbg[data-variant="grid"] .su-animbg__layer::after { content: ""; position: absolute; inset: -24px 0 0 -24px;
  background-image: radial-gradient(var(--color-app-line-strong) 1px, transparent 1.3px); background-size: 24px 24px; opacity: .6;
  will-change: transform; animation: su-animbg-drift var(--su-animbg-dur) linear infinite; }
@keyframes su-animbg-drift { to { transform: translate(24px, 24px); } }
.su-animbg__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: radial-gradient(var(--color-app-ink) .6px, transparent .8px); background-size: 3px 3px; }
.su-animbg__content { position: relative; min-width: 0; }

/* ============ Chat Bubbles ============ */
.su-chat { container: su-chat / inline-size; display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; max-height: var(--su-chat-h, 460px);
  overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-chat__head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border-bottom: 1px solid var(--color-app-line); }
.su-chat__who { display: grid; gap: 1px; flex: 1; min-width: 0; }
.su-chat__name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-chat__status { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11.5px/1.3 var(--font-sans); color: var(--color-app-muted); }
.su-chat__head > .su-chip { flex: none; }
.su-chat__log { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px; outline: none; scrollbar-width: thin; scrollbar-color: var(--color-app-line-strong) transparent; }
.su-chat__log:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-chat__day { align-self: center; font: 500 11px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-chat__group { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.su-chat__group[data-dir="out"] { justify-content: flex-end; }
.su-chat__group > .su-avatar { margin-bottom: 21px; }
.su-chat__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; max-width: 78%; }
.su-chat__group[data-dir="out"] > .su-chat__stack { align-items: flex-end; }
.su-chat__bubble { box-sizing: border-box; max-width: 100%; padding: 8px 12px; border-radius: 14px; overflow-wrap: anywhere; white-space: pre-wrap;
  background: var(--color-app-tray); color: var(--color-app-ink); box-shadow: inset 0 0 0 1px var(--color-app-line); }
/* grouped: the corners that face the sender's side tuck in */
[data-dir="in"] > .su-chat__stack > .su-chat__bubble { border-bottom-left-radius: 6px; }
[data-dir="in"] > .su-chat__stack > .su-chat__bubble ~ .su-chat__bubble { border-top-left-radius: 6px; }
[data-dir="out"] > .su-chat__stack > .su-chat__bubble { border-bottom-right-radius: 6px; background: var(--color-app-accent); color: var(--color-app-on-accent); box-shadow: none; }
[data-dir="out"] > .su-chat__stack > .su-chat__bubble ~ .su-chat__bubble { border-top-right-radius: 6px; }
.su-chat__bubble[data-new] { animation: su-rise var(--dur-state) var(--ease-app); }
.su-chat__bubble[data-status="sending"] { opacity: .72; }
[data-dir="out"] > .su-chat__stack > .su-chat__bubble[data-status="failed"] { background: var(--color-app-crit-soft); color: var(--color-app-crit-deep);
  box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
.su-chat__fail { display: flex; align-items: center; gap: 4px; font: 500 11.5px/1.3 var(--font-sans); color: var(--color-app-crit-deep); }
.su-chat__fail > svg { width: 14px; height: 14px; flex: none; }
.su-chat__retry { min-height: 24px; margin: 0; padding: 0 4px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  font: 600 11.5px/1 var(--font-sans); color: var(--color-app-accent); text-decoration: underline; text-underline-offset: 2px; }
.su-chat__retry:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-chat__meta { display: flex; align-items: center; gap: 4px; margin-top: 1px; font: 400 11px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-chat__meta:empty { display: none; }
.su-chat__receipt { display: inline-flex; align-items: center; gap: 3px; }
.su-chat__receipt > svg { width: 14px; height: 14px; flex: none; }
.su-chat__receipt[data-status="read"] > svg { color: var(--color-app-accent); }
/* typing = the built Thinking Indicator (dots variant) drawn as an incoming bubble */
.su-chat__typing { align-self: flex-start; }
.su-chat__typing .su-thinking__live { gap: 0; padding: 11px 12px; border-radius: 14px 14px 14px 6px; background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-chat__typing :is(.su-thinking__text, .su-thinking__time) { display: none; }
.su-chat__typing .su-thinking__dots i { background: var(--color-app-muted); animation-duration: calc(var(--dur-loop) * 2); }
.su-chat__composer { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--color-app-line); }
.su-chat__input { flex: 1; box-sizing: border-box; min-width: 0; height: 40px; min-height: 40px; max-height: 120px; padding: 10px 12px; resize: none;
  overflow-y: auto; font: 400 14px/1.4 var(--font-sans); }
.su-chat__send { flex: none; width: 40px; padding: 0; }
@container su-chat (max-width: 340px) {
  .su-chat__stack { max-width: 86%; }
  .su-chat__log { padding: 10px; }
}

/* ============ Message Actions ============ */
.su-msgactions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; min-height: 28px; font-family: var(--font-sans); color: var(--color-app-ink-2);
  transition: opacity var(--dur-hover) var(--ease-app); }
/* hover mode: hidden until the message (parent) is hovered, the bar holds focus, a menu is open or a copy just happened; touch always shows */
.su-msgactions[data-reveal="hover"] { opacity: 0; }
:hover > .su-msgactions[data-reveal="hover"], .su-msgactions[data-reveal="hover"]:is(:hover, :focus-within, :has([aria-expanded="true"], [data-state="copied"])) { opacity: 1; }
@media (hover: none) { .su-msgactions[data-reveal="hover"] { opacity: 1; } }
.su-msgactions__btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.su-msgactions__btn[aria-disabled="true"]:hover { background: none; color: var(--color-app-ink-2); }
.su-msgactions__more { display: inline-flex; }
.su-msgactions__sep { flex: none; width: 1px; height: 16px; margin: 0 6px; background: var(--color-app-line); }
.su-msgactions__ver { display: inline-flex; align-items: center; gap: 2px; font: 500 11.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-msgactions__ver .su-msgactions__btn { --s: 24px; }
.su-msgactions__count { min-width: 32px; text-align: center; color: var(--color-app-muted); }
/* the message the bar belongs to (optional layout helper) */
.su-msgactions__msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; min-width: 0; font-family: var(--font-sans); }
.su-msgactions__msg > .su-avatar { grid-row: span 2; }
.su-msgactions__text { margin: 0; padding-top: 3px; font: 400 13px/1.6 var(--font-sans); color: var(--color-app-ink); }
.su-msgactions__msg > .su-msgactions { margin-left: -6px; }

/* ============ Menubar ============ */
.su-menubar { container: su-menubar / inline-size; display: flex; align-items: center; gap: 2px; box-sizing: border-box; min-width: 0; padding: 4px 6px;
  border-radius: 10px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 12.5px/1.2 var(--font-sans); color: var(--color-app-ink); }
.su-menubar__app { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 4px; border-radius: 6px;
  background: var(--color-app-accent); color: var(--color-app-on-accent); font: 700 11px/1 var(--font-sans); }
.su-menubar__bar { display: flex; align-items: center; gap: 2px; min-width: 0; }
.su-menubar__menu { display: contents; }
.su-menubar__top { flex: none; height: 28px; margin: 0; padding: 0 9px; border: 0; border-radius: 6px; background: none; cursor: default; white-space: nowrap;
  font: 400 12.5px/1 var(--font-sans); color: var(--color-app-ink-2); outline: none; transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-menubar__top:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-menubar__top[aria-expanded="true"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); font-weight: 500; }
.su-menubar__top:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-menubar__title { flex: 0 1 auto; min-width: 0; margin-left: auto; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 11.5px/1.2 var(--font-sans); color: var(--color-app-muted); }
.su-menubar__burger { display: none; }
.su-menubar__all { min-width: 200px; }
/* the bar's menus and the compact twin keep the shared menu surface; a little wider for shortcut hints */
.su-menubar .su-menu__list { min-width: 232px; }
@container su-menubar (max-width: 599px) {
  .su-menubar__bar { display: none; }
  .su-menubar__burger { display: inline-grid; }
}

/* ============ Split Button ============ */
.su-splitbtn { position: relative; display: inline-flex; align-items: stretch; min-width: 0; max-width: 100%; vertical-align: middle; }
.su-splitbtn > .su-btn:focus-visible { z-index: 1; }
.su-splitbtn > .su-splitbtn__main { flex: 0 1 auto; min-width: 0; border-radius: var(--radius-ctrl) 0 0 var(--radius-ctrl); }
.su-splitbtn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.su-splitbtn > .su-splitbtn__toggle { flex: none; padding: 0 8px; border-radius: 0 var(--radius-ctrl) var(--radius-ctrl) 0; }
/* divider: a hairline inside the primary fill, an overlap of the two rings for secondary */
.su-splitbtn__main[data-variant="primary"] { box-shadow: var(--shadow-btn), inset -1px 0 0 color-mix(in srgb, var(--color-app-on-accent) 35%, transparent); }
.su-splitbtn__toggle[data-variant="secondary"] { margin-left: -1px; }
.su-splitbtn__toggle > svg { transition: transform var(--dur-state) var(--ease-app); }
.su-splitbtn__toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }
.su-splitbtn > .su-btn[aria-disabled="true"] { opacity: .55; cursor: progress; }
.su-splitbtn > .su-btn[aria-disabled="true"]:active { transform: none; }
.su-splitbtn[data-busy] .su-splitbtn__main > svg:not(.su-splitbtn__spin) { display: none; }
.su-splitbtn__sub { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--color-app-muted); }
.su-splitbtn__menu.su-menu__list { min-width: 232px; }

/* ============ Editable ============ */
.su-editable__list { container: su-editable / inline-size; box-sizing: border-box; min-width: 0; margin: 0; padding: 6px 0; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-editable__row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 6px 10px; }
.su-editable__label { flex: none; width: 84px; padding-top: 9px; font: 400 12px/1.2 var(--font-sans); color: var(--color-app-muted); }
.su-editable { display: grid; flex: 1; gap: 4px; min-width: 0; font: 400 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
/* display and edit share one 32px slot, so swapping never shifts the layout */
.su-editable__display { display: flex; align-items: center; gap: 6px; box-sizing: border-box; width: 100%; min-width: 0; height: 32px; margin: 0; padding: 0 8px;
  border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; text-align: left; cursor: text; transition: background-color var(--dur-hover) var(--ease-app); }
.su-editable__display:not([data-readonly]):is(:hover, :focus-visible) { background: var(--color-app-hover); }
.su-editable__display:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-editable__display[data-readonly] { cursor: default; color: var(--color-app-ink-2); }
.su-editable__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.su-editable__value[data-empty] { color: var(--color-app-muted); }
.su-editable__pen { display: inline-flex; flex: none; color: var(--color-app-muted); opacity: 0; transition: opacity var(--dur-hover) var(--ease-app); }
.su-editable__pen > svg { width: 14px; height: 14px; }
.su-editable__display:is(:hover, :focus-visible) .su-editable__pen { opacity: 1; }
@media (hover: none) { .su-editable__pen { opacity: .7; } }
.su-editable__edit { display: flex; align-items: center; gap: 6px; min-width: 0; height: 32px; }
.su-editable__input { flex: 1; box-sizing: border-box; min-width: 0; height: 32px; padding: 0 8px; border-radius: 6px; font-size: 13.5px; }
.su-editable__edit > .su-btn { --h: 28px; flex: none; width: 28px; padding: 0; border-radius: var(--radius-ctrl); }
.su-editable__edit > .su-btn > svg { width: 14px; height: 14px; }
.su-editable[data-state="saving"] .su-editable__value { opacity: .6; }
.su-editable[data-state="error"] .su-editable__display { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
.su-editable__err { padding: 0 8px; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-crit-deep); }
@container su-editable (max-width: 260px) {
  .su-editable__row { flex-direction: column; gap: 2px; }
  .su-editable__label { width: auto; padding: 0 8px; }
  .su-editable { width: 100%; }
}

/* ============ Bottom Navigation ============ */
/* CSS only: nav.su-bottomnav > a.su-bottomnav__item (aria-current="page" on the active one). Fixed positioning is the host's choice. */
.su-bottomnav { display: flex; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--color-app-surface); box-shadow: inset 0 1px 0 var(--color-app-line); font-family: var(--font-sans); }
.su-bottomnav__item { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  box-sizing: border-box; min-width: 0; min-height: 52px; padding: 4px 2px; border-radius: 12px; text-decoration: none; -webkit-tap-highlight-color: transparent;
  font: 500 11px/1.2 var(--font-sans); color: var(--color-app-muted); transition: color var(--dur-state) var(--ease-app); }
.su-bottomnav__item:hover { color: var(--color-app-ink-2); }
.su-bottomnav__item:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-bottomnav__icon { position: relative; display: grid; place-items: center; width: 48px; height: 28px; }
/* the active pill fades + widens in behind the icon */
.su-bottomnav__icon::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-app-accent-soft); opacity: 0; transform: scaleX(.5);
  transition: opacity var(--dur-state) var(--ease-app), transform var(--dur-state) var(--ease-app); }
.su-bottomnav__icon > svg { position: relative; width: 20px; height: 20px; }
.su-bottomnav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* active: pill + filled icon + bold label — never color alone */
.su-bottomnav__item[aria-current="page"] { color: var(--color-app-accent); font-weight: 650; }
.su-bottomnav__item[aria-current="page"] .su-bottomnav__icon::before { opacity: 1; transform: none; }
.su-bottomnav__item[aria-current="page"] .su-bottomnav__icon > svg { fill: currentColor; fill-opacity: .22; }
.su-bottomnav__badge.su-count { position: absolute; top: -4px; left: calc(50% + 5px); z-index: 1; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 9.5px; font-weight: 700; background: var(--color-app-crit); color: var(--color-app-on-accent); box-shadow: 0 0 0 2px var(--color-app-surface); }
/* data-labels="active": only the current item shows its label (the others keep it for screen readers) */
.su-bottomnav[data-labels="active"] .su-bottomnav__item:not([aria-current="page"]) .su-bottomnav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }


/* ============ Dock ============ */
/* nav > .su-dock__tray (toolbar) > .su-dock__item.su-iconbtn (+ .su-iconbtn__badge, .su-dock__dot) | .su-dock__sep.
   Magnify is transform-only (JS writes translateX + scale per item), so nothing around the dock moves. */
.su-dock { display: flex; justify-content: center; min-width: 0; max-width: 100%; font-family: var(--font-sans); }
.su-dock__tray { position: relative; display: flex; align-items: flex-end; gap: 6px; min-width: 0; max-width: 100%; box-sizing: border-box;
  padding: 8px 10px 14px; border-radius: 20px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-lg); }
.su-dock[data-overflow] .su-dock__tray { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; justify-content: flex-start; }
.su-dock__item.su-iconbtn { --s: 44px; --i: 22px; border-radius: 12px; background: var(--color-app-tray); color: var(--color-app-ink);
  box-shadow: inset 0 0 0 1px var(--color-app-line); transform-origin: 50% 100%; will-change: transform;
  transition: transform var(--dur-state) var(--ease-app), background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-dock[data-magnifying] .su-dock__item, .su-dock[data-magnifying] .su-dock__sep { transition-duration: 90ms; }
.su-dock__item.su-iconbtn:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-dock__item.su-iconbtn:active { transform: none; }
.su-dock__item[aria-current="page"].su-iconbtn { background: var(--color-app-accent-soft); color: var(--color-app-ink); box-shadow: inset 0 0 0 1px var(--color-app-accent); }
.su-dock__item:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; z-index: 1; }
/* running dot: shown under running apps; the current app's dot is a wider accent pill (not color alone) */
.su-dock__dot { position: absolute; left: 50%; bottom: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--radius-pill);
  background: var(--color-app-ink-2); opacity: 0; transition: opacity var(--dur-state) var(--ease-app), width var(--dur-state) var(--ease-app), margin var(--dur-state) var(--ease-app); }
.su-dock__item[data-running] .su-dock__dot { opacity: 1; }
.su-dock__item[aria-current="page"] .su-dock__dot { width: 12px; margin-left: -6px; background: var(--color-app-accent); }
.su-dock__item .su-iconbtn__badge { top: -5px; right: -5px; background: var(--color-app-crit); color: var(--color-app-on-accent); }
.su-dock__sep { align-self: stretch; flex: none; width: 1px; margin: 4px 2px; background: var(--color-app-line-strong); transition: transform var(--dur-state) var(--ease-app); }
/* ============ Table of Contents ============ */
.su-toc { box-sizing: border-box; width: min(260px, 100%); min-width: 0; padding: 14px 14px 12px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink-2); }
.su-toc__title, .su-toc__toggle { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-app-ink-label); }
.su-toc__title > svg, .su-toc__toggle > svg { width: 14px; height: 14px; flex: none; }
.su-toc__toggle { display: none; box-sizing: border-box; width: 100%; min-height: 32px; margin: 0; padding: 0 4px; border: 0; border-radius: var(--radius-ctrl);
  background: transparent; cursor: pointer; text-align: left; }
.su-toc__toggle:hover { background: var(--color-app-hover); }
.su-toc__toggle:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-toc__toggle .su-toc__chev { margin-left: auto; transition: transform var(--dur-state) var(--ease-app); }
.su-toc[data-open] .su-toc__chev { transform: rotate(180deg); }
.su-toc__list, .su-toc__sub { list-style: none; margin: 0; padding: 0; }
.su-toc__list { position: relative; border-left: 1px solid var(--color-app-line-strong); }
.su-toc__link { display: block; margin-left: -1px; padding: 5px 8px 5px 12px; border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.4; text-decoration: none;
  color: var(--color-app-ink-2); overflow-wrap: anywhere; transition: color var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-toc__link[data-depth="2"] { padding-left: 24px; font-size: 12.5px; }
.su-toc__link[data-depth="3"] { padding-left: 36px; font-size: 12.5px; }
.su-toc__link:hover { color: var(--color-app-ink); background: var(--color-app-hover); }
.su-toc__link:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-toc__link[aria-current="location"] { color: var(--color-app-accent); font-weight: 600; }
/* active indicator: one bar that glides to the current link (transform + height) */
.su-toc__ind { position: absolute; left: -1px; top: 0; width: 2px; height: 0; border-radius: 2px; background: var(--color-app-accent); pointer-events: none;
  transition: transform var(--dur-state) var(--ease-app), height var(--dur-state) var(--ease-app); }
.su-toc__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-app-line); display: grid; gap: 10px; justify-items: start; }
.su-toc__progress { width: 100%; gap: 6px; }
.su-toc__progress .su-progress__head { font-size: 12px; }
.su-toc__progress .su-progress__label, .su-toc__progress .su-progress__value { color: var(--color-app-ink-2); font-weight: 400; }
.su-toc__progress .su-progress__track { height: 4px; }
.su-toc__top { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; margin-left: -4px; border-radius: 6px; font-size: 12.5px; color: var(--color-app-ink-2); text-decoration: none; }
.su-toc__top > svg { width: 14px; height: 14px; }
.su-toc__top:hover { color: var(--color-app-ink); text-decoration: underline; }
.su-toc__top:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
/* headings that receive focus after a jump: no ring box around the whole heading, but still visible */
[data-su-toc-target]:focus { outline: none; }
[data-su-toc-target]:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 959.98px) {
  .su-toc { width: 100%; padding: 8px 10px; }
  .su-toc__title { display: none; }
  .su-toc__toggle { display: flex; }
  .su-toc[data-open] .su-toc__toggle { margin-bottom: 8px; }
  .su-toc:not([data-open]) .su-toc__list { display: none; }
  .su-toc .su-toc__foot { margin-top: 6px; padding-top: 8px; }
}
/* ============ Device Mockup ============ */
/* generic frames (no real device shapes): browser (default) | phone (9:19.5 body) | tablet (4:3 body). The root is a size container,
   so bezel, radius and notch scale with it (cqi); the screen is one too, so demo content can size text in cqi. */
.su-device { --su-device-frame: var(--color-app-ink); container: su-device / inline-size; position: relative; box-sizing: border-box; width: 100%;
  max-width: var(--su-device-w, 560px); min-width: 0; margin: 0; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-device__screen { container: su-device-screen / inline-size; position: relative; box-sizing: border-box; overflow: hidden; background: var(--color-app-surface); color: var(--color-app-ink); }
.su-device:not([data-interactive]) .su-device__screen { pointer-events: none; user-select: none; -webkit-user-select: none; } /* no-JS fallback; JS adds inert */
.su-device__screen > img, .su-device__screen > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* browser */
.su-device:not([data-device]), .su-device[data-device="browser"] { overflow: hidden; border-radius: 10px; background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-device__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-app-tray); border-bottom: 1px solid var(--color-app-line); }
.su-device__dots { display: flex; gap: 5px; flex: none; }
.su-device__dots > i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-app-line-strong); }
.su-device__url { flex: 1; min-width: 0; max-width: 62%; margin: 0 auto; padding: 0 10px; height: 20px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--color-app-surface); box-shadow: var(--shadow-ring); font: 400 11px/1 var(--font-sans); color: var(--color-app-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-device:not([data-device]) .su-device__screen, .su-device[data-device="browser"] .su-device__screen { aspect-ratio: var(--su-device-ratio, 16 / 10); }
/* phone + tablet: a body with an even bezel; the screen fills it and clips to its own radius */
.su-device:is([data-device="phone"], [data-device="tablet"]) { border-radius: 15% / 6.9%; background: var(--su-device-frame);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-app-line-strong); }
.su-device[data-device="phone"] { max-width: var(--su-device-w, 240px); aspect-ratio: 9 / 19.5; }
.su-device[data-device="tablet"] { max-width: var(--su-device-w, 520px); aspect-ratio: 4 / 3; border-radius: 5.5% / 7.3%; }
.su-device:is([data-device="phone"], [data-device="tablet"]) .su-device__screen { position: absolute; inset: 3.4cqi; border-radius: 11.5cqi; }
.su-device[data-device="tablet"] .su-device__screen { inset: 3cqi; border-radius: 2.6cqi; }
/* phone notch (decorative) */
.su-device[data-device="phone"] .su-device__screen::before { content: ""; position: absolute; z-index: 2; top: 2.6cqi; left: 50%; width: 30%; height: 7.5cqi;
  transform: translateX(-50%); border-radius: var(--radius-pill); background: var(--su-device-frame); pointer-events: none; }
.su-device[data-frame="soft"] { --su-device-frame: var(--color-app-sunk); }
/* tilt for hero use: eases flat on hover */
.su-device[data-tilt] { transform: perspective(1400px) rotateX(9deg) rotateY(-14deg) rotateZ(1.5deg); transform-origin: 50% 60%;
  transition: transform var(--dur-layout) var(--ease-app); }
.su-device[data-tilt]:hover { transform: none; }
/* ============ Illustration ============ */
/* an SVG sprite of original scenes (<symbol id="su-art-*">) drawn only in role tokens, shown in the su-empty layout through <use>.
   --su-art-tone / --su-art-soft (inherited into the <use> tree) color the main shape; data-art picks the tone. No JS. */
.su-art-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.su-empty__illus { display: block; width: 180px; max-width: 100%; height: auto; aspect-ratio: 200 / 120; overflow: visible; }
.su-empty[data-size="sm"] .su-empty__illus { width: 120px; }
.su-empty[data-art="success"] { --su-art-tone: var(--color-app-ok); --su-art-soft: var(--color-app-ok-soft); }
.su-empty[data-art="error"] { --su-art-tone: var(--color-app-crit); --su-art-soft: var(--color-app-crit-soft); }
.su-empty[data-art] .su-empty__illus + .su-empty__title { margin-top: 12px; }
/* one element per scene floats gently */
.su-art__float { transform-box: fill-box; animation: su-art-float calc(var(--dur-loop) * 5) var(--ease-app) infinite alternate; }
@keyframes su-art-float { from { transform: translateY(1.5px); } to { transform: translateY(-3.5px); } }
/* ============ Error Page ============ */
/* page template: head (brand) + help link on one row, <main> centred below. Search is a plain GET form (su-input + su-btn).
   data-code picks the preset icon here (CSS mask) and, with data-su="errorpage", the default copy. */
.su-errorpage { --tone: var(--color-app-accent); --tone-soft: var(--color-app-accent-soft); container: su-errorpage / inline-size; box-sizing: border-box; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: center; gap: 0 12px; padding: 12px 16px 20px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 14px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-errorpage__head { grid-column: 1; grid-row: 1; display: flex; align-items: center; min-width: 0; min-height: 32px; }
.su-errorpage__brand { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font-sans); letter-spacing: -.01em; color: var(--color-app-ink); text-decoration: none; }
.su-errorpage__brand > svg { width: 20px; height: 20px; flex: none; }
.su-errorpage__help { grid-column: 2; grid-row: 1; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; color: var(--color-app-ink-2); text-decoration: none; }
.su-errorpage__help:hover { color: var(--color-app-ink); text-decoration: underline; }
.su-errorpage__help:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-errorpage__main { grid-column: 1 / -1; grid-row: 2; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; width: 100%; min-width: 0; max-width: 440px; margin: 0 auto; padding: 28px 0 8px; text-align: center; }
@media (min-height: 600px) { .su-errorpage { min-height: var(--su-errorpage-min-h, 100dvh); } .su-errorpage__main { align-self: center; } }
.su-errorpage__art { position: relative; display: block; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 18px; background: var(--tone-soft);
  animation: su-errorpage-float calc(var(--dur-loop) * 5) var(--ease-app) infinite alternate; }
.su-errorpage__art::before { content: ""; position: absolute; inset: 16px; background: var(--tone); -webkit-mask: var(--su-errorpage-icon) center / contain no-repeat; mask: var(--su-errorpage-icon) center / contain no-repeat; }
@keyframes su-errorpage-float { from { transform: translateY(2px); } to { transform: translateY(-5px); } }
.su-errorpage, .su-errorpage[data-code="404"] { --su-errorpage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4zM4 9.5h16M9.5 13l5 3M14.5 13l-5 3'/%3E%3C/svg%3E"); }
.su-errorpage[data-code="403"] { --tone: var(--color-app-warn); --tone-soft: var(--color-app-warn-soft); --su-errorpage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 11V8a4.5 4.5 0 0 1 9 0v3M5.5 11h13v9h-13zM12 14.5v2.5'/%3E%3C/svg%3E"); }
.su-errorpage[data-code="500"] { --tone: var(--color-app-crit); --tone-soft: var(--color-app-crit-soft); --su-errorpage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h16v6H4zM4 13.5h16v6H4zM7.5 7.5h.01M7.5 16.5h.01M12 7.5h4.5M12 16.5h4.5'/%3E%3C/svg%3E"); }
.su-errorpage[data-code="offline"] { --tone: var(--color-app-ink-2); --tone-soft: var(--color-app-tray); --su-errorpage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5a14 14 0 0 1 19 0M5.5 12a9.5 9.5 0 0 1 13 0M8.8 15.4a5 5 0 0 1 6.4 0M12 19h.01M3.5 3.5l17 17'/%3E%3C/svg%3E"); }
.su-errorpage[data-code="maintenance"] { --su-errorpage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5a4 4 0 0 0-5 5L4 16l3.5 3.5L13 14a4 4 0 0 0 5-5l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.su-errorpage__code { margin: 0; font: 600 11px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-errorpage__title { margin: 6px 0 0; font: 700 clamp(22px, 6cqi, 28px)/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--color-app-ink); text-wrap: balance; }
.su-errorpage__desc { margin: 8px 0 0; max-width: 40ch; font-size: 13.5px; line-height: 1.55; color: var(--color-app-ink-2); }
.su-errorpage__search { display: flex; gap: 8px; width: 100%; max-width: 360px; margin: 18px 0 0; }
.su-errorpage__search > .su-input__wrap { flex: 1; min-width: 0; }
.su-errorpage__search > .su-btn { flex: none; }
.su-errorpage__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.su-errorpage__ref { margin: 18px 0 0; font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; }
@container su-errorpage (max-width: 479.98px) {
  .su-errorpage__actions { flex-direction: column; align-self: stretch; width: 100%; max-width: 360px; justify-self: center; }
  .su-errorpage__actions > .su-btn { width: 100%; }
}
/* ============ Gradient Text ============ */
/* real, selectable text painted with a gradient (background-clip: text). Without support it is plain --color-app-ink.
   --su-grad overrides the colors (every stop ≥ 4.5:1 on the surface); data-animate drifts it slowly; multi-line spans repeat the gradient per line. */
.su-gradtext { --su-grad: linear-gradient(100deg, var(--color-app-accent), var(--color-app-accent-hover), var(--color-app-accent)); color: var(--color-app-ink); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .su-gradtext { background-image: var(--su-grad); background-size: 200% 100%; background-position: 0% 50%; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .su-gradtext::selection, .su-gradtext ::selection { color: var(--color-app-ink); -webkit-text-fill-color: var(--color-app-ink); background: var(--color-app-accent-soft); }
}
.su-gradtext[data-animate] { animation: su-gradtext-drift calc(var(--dur-loop) * 12) linear infinite alternate; }
@keyframes su-gradtext-drift { to { background-position: 100% 50%; } }

/* ============ Beams ============ */
/* decorative streaks falling down grid lines (transform / opacity only); data-count 3–8 and --su-beam-color work without JS */
.su-beams { --su-beam-color: var(--color-app-accent); --su-beams-k: 1; position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  box-sizing: border-box; min-height: 200px; padding: 24px 16px; border-radius: var(--radius-card); background: var(--color-app-tray); box-shadow: var(--shadow-ring-card);
  font-family: var(--font-sans); }
.su-beams[data-speed="slow"] { --su-beams-k: 1.8; }
.su-beams__layer { position: absolute; inset: 0; z-index: -1; display: flex; justify-content: space-evenly; pointer-events: none; }
.su-beams__layer::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to top, var(--color-app-tray), transparent); } /* scrim */
.su-beams__line { position: relative; width: 1px; background: var(--color-app-line); }
.su-beams__beam { position: absolute; top: -30%; left: -1px; width: 3px; height: 30%; border-radius: 2px; opacity: 0;
  background: linear-gradient(to bottom, transparent, var(--su-beam-color)); will-change: transform, opacity;
  animation: su-beams-fall calc(var(--dur-loop) * 5 * var(--su-beams-k)) linear infinite; }
@keyframes su-beams-fall { 0% { transform: translateY(0); opacity: 0; } 15%, 75% { opacity: .8; } 100% { transform: translateY(450%); opacity: 0; } }
.su-beams__line:nth-child(2) .su-beams__beam { animation-duration: calc(var(--dur-loop) * 6.3 * var(--su-beams-k)); animation-delay: -1.2s; }
.su-beams__line:nth-child(3) .su-beams__beam { animation-duration: calc(var(--dur-loop) * 5.5 * var(--su-beams-k)); animation-delay: -.6s; }
.su-beams__line:nth-child(4) .su-beams__beam { animation-duration: calc(var(--dur-loop) * 6.8 * var(--su-beams-k)); animation-delay: -2s; }
.su-beams__line:nth-child(5) .su-beams__beam { animation-duration: calc(var(--dur-loop) * 5.2 * var(--su-beams-k)); animation-delay: -1.6s; }
.su-beams__line:nth-child(6) .su-beams__beam { animation-duration: calc(var(--dur-loop) * 7.4 * var(--su-beams-k)); animation-delay: -.3s; }
.su-beams__line:nth-child(7) .su-beams__beam { animation-duration: calc(var(--dur-loop) * 6 * var(--su-beams-k)); animation-delay: -2.6s; }
.su-beams__line:nth-child(8) .su-beams__beam { animation-duration: calc(var(--dur-loop) * 5.8 * var(--su-beams-k)); animation-delay: -1s; }
.su-beams:not([data-count]) .su-beams__line:nth-child(n+7), .su-beams[data-count="3"] .su-beams__line:nth-child(n+4), .su-beams[data-count="4"] .su-beams__line:nth-child(n+5),
.su-beams[data-count="5"] .su-beams__line:nth-child(n+6), .su-beams[data-count="6"] .su-beams__line:nth-child(n+7), .su-beams[data-count="7"] .su-beams__line:nth-child(n+8) { display: none; }
.su-beams[data-paused] .su-beams__beam { animation-play-state: paused; }
.su-beams__card { position: relative; box-sizing: border-box; width: min(240px, 100%); padding: 14px 16px; border-radius: var(--radius-card); text-align: center;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-beams__eyebrow { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-beams__title { margin: 4px 0 0; font: 650 15px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-beams__meta { margin: 6px 0 0; font-size: 12px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }

/* ============ Border Beam ============ */
/* a light that laps the card border: conic-gradient on an @property angle, masked to a ring that inherits the card radius */
@property --su-beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --su-beam-on { syntax: "<number>"; inherits: false; initial-value: 1; } /* unregistered (no @property) → fallback 1e6 below = a static ring */
:where(.su-beam) { position: relative; border-radius: var(--radius-card); }
.su-beam { --su-beam-dur: 6s; --su-beam-color: var(--color-app-accent); --su-beam-width: 1.5px; isolation: isolate; }
.su-beam::before { content: ""; position: absolute; inset: 0; z-index: 1; box-sizing: border-box; padding: var(--su-beam-width); border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--su-beam-a), transparent 0 60%, color-mix(in srgb, var(--su-beam-color) 35%, transparent) 78%, var(--su-beam-color) 91%, transparent 97%);
  -webkit-mask: linear-gradient(var(--color-app-ink) 0 0) content-box, linear-gradient(var(--color-app-ink) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--color-app-ink) 0 0) content-box exclude, linear-gradient(var(--color-app-ink) 0 0);
  animation: su-beam-lap calc(var(--su-beam-dur) * var(--su-beam-on, 1e6)) linear infinite; }
@keyframes su-beam-lap { to { --su-beam-a: 360deg; } }
.su-beam[data-paused]::before, .su-beam[data-pause-hover]:hover::before { animation-play-state: paused; }

/* ============ Spotlight ============ */
/* glow + nearest card borders follow --x / --y (px, set by JS on the container); cards stack under 360px */
.su-spotlight { --su-spot-size: 320px; container: su-spotlight / inline-size; position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; padding: 14px;
  border-radius: var(--radius-card); background: var(--color-app-tray); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-spotlight::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7; transition: opacity var(--dur-state) var(--ease-app);
  background: radial-gradient(circle var(--su-spot-size) at var(--x, 50%) var(--y, 50%), var(--color-app-accent-soft), transparent 70%); }
.su-spotlight:is([data-active], [data-state="drift"])::before { opacity: 1; }
.su-spotlight__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-bottom: 10px; }
.su-spotlight__title { margin: 0; font: 600 13px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-spotlight__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container su-spotlight (max-width: 359px) { .su-spotlight__grid { grid-template-columns: minmax(0, 1fr); } }
.su-spotlight__card { position: relative; isolation: isolate; min-width: 0; padding: 12px; border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-spotlight__card::before, .su-spotlight__card::after { --at: calc(var(--x, -999px) - var(--cx, 0px)) calc(var(--y, -999px) - var(--cy, 0px));
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* border highlight: the ring near the light */
.su-spotlight__card::before { box-sizing: border-box; padding: 1px; background: radial-gradient(circle calc(var(--su-spot-size) * .55) at var(--at), var(--color-app-accent), transparent 70%);
  -webkit-mask: linear-gradient(var(--color-app-ink) 0 0) content-box, linear-gradient(var(--color-app-ink) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--color-app-ink) 0 0) content-box exclude, linear-gradient(var(--color-app-ink) 0 0); }
/* faint wash under the text (z-index -1 inside the card's own stacking context) */
.su-spotlight__card::after { z-index: -1; opacity: .55; background: radial-gradient(circle calc(var(--su-spot-size) * .6) at var(--at), var(--color-app-accent-soft), transparent 70%); }
.su-spotlight__label { margin: 0; font-size: 11.5px; color: var(--color-app-muted); }
.su-spotlight__value { margin: 4px 0 0; font: 650 17px/1.2 var(--font-sans); color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-spotlight__meta { margin: 2px 0 0; font-size: 11px; color: var(--color-app-ink-2); }

/* ============ Text Animation ============ */
/* words: spans rise + unblur with a stagger (transform / opacity / filter only) · type: characters typed over an invisible copy */
.su-textfx { --su-stagger: 60ms; }
.su-textfx__w { display: inline-block; }
.su-textfx[data-state="idle"] .su-textfx__w { opacity: 0; transform: translateY(.4em); filter: blur(4px); }
.su-textfx[data-state="animating"] .su-textfx__w { transition: opacity var(--dur-layout) var(--ease-app), transform var(--dur-layout) var(--ease-app), filter var(--dur-layout) var(--ease-app);
  transition-delay: calc(var(--i, 0) * var(--su-stagger)); }
.su-textfx__hl { color: var(--color-app-accent); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .su-textfx__hl { background: linear-gradient(90deg, var(--color-app-accent), var(--color-app-accent-hover)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.su-textfx[data-effect="type"] .su-textfx__vis { position: relative; display: inline-block; max-width: 100%; padding-right: .75em; vertical-align: bottom; }
.su-textfx__ghost { visibility: hidden; }
.su-textfx__typed { position: absolute; inset: 0 0 auto 0; }
.su-textfx__caret { display: inline-block; width: .5em; height: 1.1em; margin-left: 2px; vertical-align: -.2em; border-radius: 1px; background: var(--color-app-accent);
  animation: su-textfx-blink calc(var(--dur-loop) * 2) steps(1) infinite; } /* 1.3 s period, well under 3 flashes / s */
@keyframes su-textfx-blink { 50% { opacity: 0; } }
.su-textfx__line { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink-2); }
.su-textfx__prompt { color: var(--color-app-muted); }

/* ============ Comparison Slider ============ */
/* after image clipped with clip-path, divider moved with transform — dragging never reflows */
.su-beforeafter { width: min(400px, 100%); min-width: 0; font-family: var(--font-sans); }
.su-beforeafter__frame { --v: 50%; position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: var(--color-app-tray);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.su-beforeafter[data-orientation="vertical"] .su-beforeafter__frame { touch-action: pan-x; cursor: ns-resize; }
.su-beforeafter__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.su-beforeafter__after { clip-path: inset(0 0 0 var(--v)); }
.su-beforeafter[data-orientation="vertical"] .su-beforeafter__after { clip-path: inset(var(--v) 0 0 0); }
.su-beforeafter__divider { position: absolute; inset: 0; pointer-events: none; transform: translateX(var(--v)); }
.su-beforeafter[data-orientation="vertical"] .su-beforeafter__divider { transform: translateY(var(--v)); }
.su-beforeafter__divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--color-app-surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); }
.su-beforeafter[data-orientation="vertical"] .su-beforeafter__divider::before { inset: -1px 0 auto; width: auto; height: 2px; }
.su-beforeafter__handle { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring-card), var(--shadow-md); pointer-events: auto; cursor: inherit; outline: none;
  transition: transform var(--dur-hover) var(--ease-app); }
.su-beforeafter[data-orientation="vertical"] .su-beforeafter__handle { top: 0; left: 50%; }
.su-beforeafter[data-orientation="vertical"] .su-beforeafter__handle svg { rotate: 90deg; }
.su-beforeafter__handle svg { width: 16px; height: 16px; }
.su-beforeafter__handle:focus-visible { box-shadow: 0 0 0 2px var(--color-app-surface), 0 0 0 4px var(--color-app-focus), var(--shadow-md); }
.su-beforeafter[data-dragging] .su-beforeafter__handle { transform: translate(-50%, -50%) scale(1.08); }
.su-beforeafter__label { position: absolute; top: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-app-surface); color: var(--color-app-ink);
  box-shadow: var(--shadow-ring-card); font-size: 11px; font-weight: 600; pointer-events: none; }
.su-beforeafter__label[data-side="before"] { left: 10px; }
.su-beforeafter__label[data-side="after"] { right: 10px; }
.su-beforeafter[data-orientation="vertical"] .su-beforeafter__label[data-side="after"] { top: auto; right: auto; bottom: 10px; left: 10px; }
.su-beforeafter__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; margin-top: 8px; font-size: 11.5px; color: var(--color-app-muted); }
.su-beforeafter__caption b { font-weight: 500; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }

/* ============ Knob ============ */
/* APG slider drawn as a dial: track + value arc (stroke-dasharray on pathLength 100), indicator rotated with transform */
.su-knob { --su-knob-size: 56px; display: inline-grid; justify-items: center; gap: 4px; min-width: 0; font-family: var(--font-sans); }
.su-knob[data-size="lg"] { --su-knob-size: 112px; }
.su-knob__dial { width: var(--su-knob-size); height: var(--su-knob-size); border-radius: 50%; touch-action: none; cursor: ns-resize; outline: none;
  transition: filter var(--dur-hover) var(--ease-app); }
.su-knob__dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.su-knob__dial:hover, .su-knob[data-dragging] .su-knob__dial { filter: drop-shadow(0 0 6px var(--color-app-accent-soft)); }
.su-knob__dial:focus-visible { box-shadow: 0 0 0 2px var(--color-app-surface), 0 0 0 4px var(--color-app-focus); }
.su-knob__track, .su-knob__arc { fill: none; stroke-width: 9; stroke-linecap: round; }
.su-knob[data-size="lg"] :is(.su-knob__track, .su-knob__arc) { stroke-width: 7; }
.su-knob__track { stroke: var(--color-app-tray); }
.su-knob__arc { stroke: var(--color-app-accent); }
.su-knob__face { fill: var(--color-app-surface); stroke: var(--color-app-line); stroke-width: 1; }
.su-knob__ind { transform-origin: 50px 50px; fill: var(--color-app-accent); }
.su-knob__num { fill: currentColor; color: var(--color-app-ink); font: 700 15px var(--font-sans); font-variant-numeric: tabular-nums; }
.su-knob:not([data-size="lg"]) .su-knob__num, .su-knob[data-size="lg"] .su-knob__out { display: none; }
.su-knob__caption { font-size: 11.5px; font-weight: 500; color: var(--color-app-ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.su-knob[data-size="lg"] .su-knob__caption { font-size: 12.5px; font-weight: 600; color: var(--color-app-ink); }
.su-knob__out::before { content: " · "; }
.su-knob[data-resetting] .su-knob__arc { transition: stroke-dasharray var(--dur-state) var(--ease-app), stroke-dashoffset var(--dur-state) var(--ease-app); }
.su-knob[data-resetting] .su-knob__ind { transition: transform var(--dur-state) var(--ease-app); }
.su-knob[data-disabled] { opacity: .5; }
.su-knob[data-disabled] .su-knob__dial { cursor: not-allowed; filter: none; }

/* ============ Scatter Chart ============ */
.su-scatter { --su-sc-0: var(--color-app-accent); --su-sc-1: var(--color-app-muted); --su-sc-2: color-mix(in srgb, var(--color-app-accent) 55%, var(--color-app-ink));
  --su-sc-3: var(--color-app-ink-2); --su-sc-4: color-mix(in srgb, var(--color-app-accent) 50%, var(--color-app-surface));
  container: su-scatter / inline-size; box-sizing: border-box; width: min(520px, 100%); padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-scatter__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.su-scatter__titles { min-width: 0; }
.su-scatter__title { margin: 0; font: 600 13px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-scatter__stat { margin: 0; font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-scatter__legend { display: flex; flex-wrap: wrap; gap: 2px; margin-right: -6px; }
.su-scatter__key { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px; border: 0; border-radius: var(--radius-ctrl); background: none; cursor: pointer;
  font: 500 12px/1 var(--font-sans); color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-scatter__key:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-scatter__key:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-scatter__key svg { width: 12px; height: 12px; overflow: visible; }
.su-scatter__key[aria-pressed="false"] { color: var(--color-app-muted); text-decoration: line-through; }
.su-scatter__key[aria-pressed="false"] svg { opacity: .4; }
.su-scatter__mark { fill: var(--c); stroke: var(--c); }
.su-scatter :is(.su-scatter__mark, .su-scatter__pt)[data-s="0"] { --c: var(--su-sc-0); }
.su-scatter :is(.su-scatter__mark, .su-scatter__pt)[data-s="1"] { --c: var(--su-sc-1); }
.su-scatter :is(.su-scatter__mark, .su-scatter__pt)[data-s="2"] { --c: var(--su-sc-2); }
.su-scatter :is(.su-scatter__mark, .su-scatter__pt)[data-s="3"] { --c: var(--su-sc-3); }
.su-scatter :is(.su-scatter__mark, .su-scatter__pt)[data-s="4"] { --c: var(--su-sc-4); }
.su-scatter__plot { position: relative; min-height: 140px; border-radius: 4px; cursor: crosshair; touch-action: pan-y; }
.su-scatter__plot:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 4px; }
.su-scatter__svg { display: block; width: 100%; overflow: visible; font-family: var(--font-sans); }
.su-scatter__grid line { stroke: var(--color-app-line); stroke-width: 1; }
.su-scatter__tick text { fill: currentColor; color: var(--color-app-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.su-scatter__trend { stroke: var(--color-app-accent); stroke-width: 1.25; stroke-dasharray: 4 4; }
.su-scatter__pt { fill: var(--c); fill-opacity: .5; stroke: var(--c); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.su-scatter__pt[data-s="1"] { fill-opacity: .3; }
.su-scatter:not([data-settled]) .su-scatter__pt { animation: su-scatter-in var(--dur-layout) var(--ease-app) both; animation-delay: calc(var(--i) * 14ms); }
@keyframes su-scatter-in { from { opacity: 0; transform: scale(.3); } }
.su-scatter__pt[data-hl] { fill-opacity: 1; stroke: var(--color-app-surface); stroke-width: 2; }
.su-scatter__pt[data-selected] { fill-opacity: 1; stroke: var(--color-app-ink); stroke-width: 1.5; }
.su-scatter__ring { fill: none; stroke: var(--color-app-ink); stroke-width: 1.5; pointer-events: none; }
.su-scatter__callout rect { fill: var(--color-app-surface); stroke: var(--color-app-line-strong); }
.su-scatter__callout text { fill: currentColor; font-variant-numeric: tabular-nums; }
.su-scatter__callout-t { color: var(--color-app-ink); font-size: 10.5px; font-weight: 600; }
.su-scatter__callout-s { color: var(--color-app-muted); font-size: 10px; }
.su-scatter__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 12.5px; color: var(--color-app-muted); }
.su-scatter__axes { margin: 4px 0 0; font-size: 11px; color: var(--color-app-muted); }
.su-scatter__axes:empty { display: none; }
.su-scatter .su-ctip__row { min-width: 120px; }
/* ============ Area Chart ============ */
/* rides on the Line Chart styles (.su-linechart is added by JS); only the fill, width and entrance differ */
.su-areachart { width: min(520px, 100%); }
.su-areachart .su-linechart__plot { height: 150px; }
.su-areachart__stop { stop-color: var(--color-app-accent); }
.su-areachart .su-linechart__area { opacity: 1; animation: su-areachart-fade var(--dur-layout) var(--ease-app) both; }
@keyframes su-areachart-fade { from { opacity: 0; } }
/* ============ Radar Chart ============ */
.su-radar { --su-rd-0: var(--color-app-accent); --su-rd-1: var(--color-app-muted); --su-rd-2: color-mix(in srgb, var(--color-app-accent) 55%, var(--color-app-ink));
  --su-rd-3: var(--color-app-ink-2); --su-rd-4: color-mix(in srgb, var(--color-app-accent) 55%, var(--color-app-surface));
  container: su-radar / inline-size; box-sizing: border-box; width: min(460px, 100%); padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-radar__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.su-radar__title { margin: 0; font: 600 13px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-radar__legend { display: flex; flex-wrap: wrap; gap: 2px; margin-right: -6px; }
.su-radar__key { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px; border: 0; border-radius: var(--radius-ctrl); background: none; cursor: pointer;
  font: 500 12px/1 var(--font-sans); color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app), opacity var(--dur-hover) var(--ease-app); }
.su-radar__key b { font-weight: 650; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-radar__key:hover, .su-radar__key[data-on] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-radar__key:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-radar__swatch { box-sizing: border-box; width: 12px; height: 0; border-top: 2px solid var(--c); }
.su-radar :is(.su-radar__key, .su-radar__series, .su-ctip__row)[data-s="0"] { --c: var(--su-rd-0); --dash: none; }
.su-radar :is(.su-radar__key, .su-radar__series, .su-ctip__row)[data-s="1"] { --c: var(--su-rd-1); --dash: 4 3; }
.su-radar :is(.su-radar__key, .su-radar__series, .su-ctip__row)[data-s="2"] { --c: var(--su-rd-2); --dash: 1.5 3; }
.su-radar :is(.su-radar__key, .su-radar__series, .su-ctip__row)[data-s="3"] { --c: var(--su-rd-3); --dash: 7 3 1.5 3; }
.su-radar :is(.su-radar__key, .su-radar__series, .su-ctip__row)[data-s="4"] { --c: var(--su-rd-4); --dash: 9 4; }
.su-radar__key[data-s="1"] .su-radar__swatch { border-top-style: dashed; }
.su-radar__key[data-s="2"] .su-radar__swatch { border-top-style: dotted; }
.su-radar__key[data-s="3"] .su-radar__swatch { border-top-style: dashed; border-top-width: 2.5px; }
.su-radar__key[data-s="4"] .su-radar__swatch { border-top-style: double; border-top-width: 3px; }
.su-radar__plot { position: relative; margin-top: 6px; }
.su-radar__svg { display: block; width: 100%; overflow: visible; font-family: var(--font-sans); }
.su-radar__grid :is(polygon, line) { fill: none; stroke: var(--color-app-line); stroke-width: 1; }
.su-radar__labels text { fill: currentColor; color: var(--color-app-ink-2); font-size: 11px; }
.su-radar__series { transform-box: view-box; transition: opacity var(--dur-state) var(--ease-app); }
.su-radar:not([data-settled]) .su-radar__series { animation: su-radar-grow var(--dur-layout) var(--ease-app) both; }
@keyframes su-radar-grow { from { transform: scale(0); opacity: 0; } }
.su-radar__poly { fill: var(--c); fill-opacity: .1; stroke: var(--c); stroke-width: 1.75; stroke-linejoin: round; stroke-dasharray: var(--dash); }
.su-radar__series[data-s="0"] .su-radar__poly { fill-opacity: .2; }
.su-radar__dot { fill: var(--c); stroke: var(--color-app-surface); stroke-width: 1.5; cursor: pointer; }
.su-radar[data-focus] .su-radar__series:not([data-on]) { opacity: .18; }
.su-radar[data-focus] .su-radar__series[data-on] .su-radar__poly { fill-opacity: .26; stroke-width: 2.25; }
.su-radar__ring { fill: none; stroke: var(--color-app-ink); stroke-width: 1.5; pointer-events: none; }
.su-radar .su-ctip__row i { background: var(--c); }
.su-radar__empty { margin: 0; padding: 32px 0; text-align: center; font-size: 12.5px; color: var(--color-app-muted); }
/* ============ Bullet Chart ============ */
/* CSS-only: each row sets --value / --target / --max (and --b1 / --b2 band thresholds in % of max, default 40 / 70) inline; data-state="met|below" picks tone + icon */
.su-bullet { --su-bl-poor: color-mix(in srgb, var(--color-app-ink) 24%, var(--color-app-surface)); --su-bl-fair: color-mix(in srgb, var(--color-app-ink) 13%, var(--color-app-surface));
  --su-bl-good: color-mix(in srgb, var(--color-app-ink) 6%, var(--color-app-surface));
  container: su-bullet / inline-size; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; width: min(480px, 100%); padding: 14px 16px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-bullet__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.su-bullet__title { margin: 0; font: 600 13px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-bullet__keys { display: flex; gap: 10px; font-size: 11.5px; color: var(--color-app-ink-2); }
.su-bullet__key { display: inline-flex; align-items: center; gap: 5px; }
.su-bullet__key::before { content: ""; width: 10px; height: 4px; border-radius: 1px; background: var(--color-app-ink); }
.su-bullet__key[data-k="target"]::before { width: 2.5px; height: 10px; background: var(--color-app-accent); }
.su-bullet__rows { display: flex; flex-direction: column; gap: 10px; }
.su-bullet__row { --b1: 40; --b2: 70; display: grid; grid-template-columns: minmax(80px, 96px) minmax(0, 1fr) auto; grid-template-areas: "label bar value"; gap: 4px 12px; align-items: center;
  margin: 0 -6px; padding: 4px 6px; border-radius: var(--radius-ctrl); transition: background-color var(--dur-hover) var(--ease-app); }
.su-bullet__row:hover { background: var(--color-app-hover); }
.su-bullet__label { grid-area: label; min-width: 0; display: flex; flex-direction: column; }
.su-bullet__name { font-weight: 500; color: var(--color-app-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-bullet__unit { font-size: 11px; color: var(--color-app-muted); }
.su-bullet__bar { grid-area: bar; position: relative; height: 22px; border-radius: 4px; overflow: hidden; background: var(--su-bl-good); }
.su-bullet__band { position: absolute; inset: 0 auto 0 0; }
.su-bullet__band[data-band="fair"] { width: calc(var(--b2) * 1%); background: var(--su-bl-fair); }
.su-bullet__band[data-band="poor"] { width: calc(var(--b1) * 1%); background: var(--su-bl-poor); }
.su-bullet__actual { position: absolute; left: 0; top: 7px; height: 8px; width: calc(min(var(--value), var(--max)) / var(--max) * 100%); border-radius: 0 2px 2px 0;
  background: var(--color-app-ink); transform-origin: left center; }
.su-bullet[data-su-ready]:not([data-in]) .su-bullet__actual { transform: scaleX(0); }
.su-bullet[data-in] .su-bullet__actual { transition: transform var(--dur-layout) var(--ease-app); }
.su-bullet__target { position: absolute; left: calc(min(var(--target), var(--max)) / var(--max) * 100%); top: 3px; bottom: 3px; width: 2.5px; margin-left: -1.25px; border-radius: 1px; background: var(--color-app-accent); }
.su-bullet__value { grid-area: value; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 54px; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-bullet__value::before { content: ""; flex: none; box-sizing: border-box; }
.su-bullet__row[data-state="met"] .su-bullet__value { color: var(--color-app-ok); }
.su-bullet__row[data-state="met"] .su-bullet__value::before { width: 5px; height: 9px; margin: -3px 2px 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.su-bullet__row[data-state="below"] .su-bullet__value::before { width: 0; height: 0; border: 4px solid transparent; border-top: 5px solid var(--color-app-muted); border-bottom: 0; }
.su-bullet__bands { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 11px; color: var(--color-app-muted); }
.su-bullet__bands li { display: inline-flex; align-items: center; gap: 5px; }
.su-bullet__bands li::before { content: ""; width: 10px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-bullet__bands [data-band="poor"]::before { background: var(--su-bl-poor); }
.su-bullet__bands [data-band="fair"]::before { background: var(--su-bl-fair); }
.su-bullet__bands [data-band="good"]::before { background: var(--su-bl-good); }
@container su-bullet (max-width: 340px) {
  .su-bullet__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar"; }
  .su-bullet__label { flex-direction: row; align-items: baseline; gap: 6px; }
}
/* ============ Icon Set ============ */
.su-icons { --su-icons-sw: 1.75; container: su-icons / inline-size; box-sizing: border-box; width: min(420px, 100%); min-width: 0; padding: 14px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-icons__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.su-icons__title { margin: 0; font: 600 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-icons__count { margin: 0; font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-icons__stroke { --pad: 2px; border-radius: 8px; box-shadow: none; }
.su-icons__stroke .su-seg__pill { border-radius: 6px; box-shadow: var(--shadow-ring-card); }
.su-icons__stroke .su-seg__opt { padding: 4px 9px; border-radius: 6px; font: 500 12px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.su-icons__stroke .su-seg__opt[aria-checked="true"] { font-weight: 600; }
.su-icons__search { position: relative; margin-bottom: 10px; }
.su-icons__search svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--color-app-muted); stroke-width: 1.75; stroke-linecap: round; pointer-events: none; }
.su-icons__q { box-sizing: border-box; width: 100%; height: 34px; padding-left: 32px; font-size: 13px; color: var(--color-app-ink); }
.su-icons__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.su-icons__row, .su-icons__gc { display: contents; }
.su-icons__cell { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 10px; cursor: pointer; background: var(--color-app-tray); color: var(--color-app-ink-2);
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app); }
.su-icons__cell:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-icons__cell:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-icons__cell[aria-pressed="true"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); box-shadow: inset 0 0 0 1.5px var(--color-app-accent); }
.su-icons__cell svg { width: 20px; height: 20px; stroke-width: var(--su-icons-sw); transition: stroke-width var(--dur-state) var(--ease-app); }
.su-icons__empty { margin: 0; padding: 22px 8px; border-radius: 10px; background: var(--color-app-tray); text-align: center; font-size: 12.5px; color: var(--color-app-muted); }
.su-icons__detail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-app-line); font-size: 12.5px; }
.su-icons__name { font-weight: 600; color: var(--color-app-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.su-icons__meta { color: var(--color-app-muted); }
.su-icons__copy { margin-left: auto; gap: 6px; }
/* ============ Heatmap ============ */
.su-heatmap { container: su-heatmap / inline-size; box-sizing: border-box; width: min(420px, 100%); min-width: 0; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-heatmap__head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.su-heatmap__titles { flex: 1; min-width: 0; }
.su-heatmap__label { margin: 0; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-heatmap__period { margin: 0; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-heatmap__sum { display: grid; margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.su-heatmap__total { font: 600 16px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-heatmap__sum span { font-size: 11px; color: var(--color-app-muted); }
.su-heatmap__body { position: relative; }
.su-heatmap__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 2px 2px 4px; margin: -2px -2px 0; }
.su-heatmap__grid { display: grid; grid-template-columns: 28px repeat(var(--weeks), minmax(13px, 1fr)); gap: 3px; min-width: min-content; }
.su-heatmap__months, .su-heatmap__row { display: contents; }
.su-heatmap__months span { overflow: visible; white-space: nowrap; font-size: 10px; line-height: 14px; color: var(--color-app-muted); }
.su-heatmap__wd { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; font-size: 10px; line-height: 1; color: var(--color-app-muted); background: var(--color-app-surface); }
.su-heatmap__cell { aspect-ratio: 1; border-radius: 3px; cursor: pointer; background: color-mix(in srgb, var(--color-app-accent) var(--p), var(--color-app-tray)); }
.su-heatmap__cell[data-level="0"] { background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-heatmap__cell[data-out] { visibility: hidden; cursor: default; }
.su-heatmap__cell:hover { outline: 1.5px solid var(--color-app-line-strong); outline-offset: 1px; }
.su-heatmap__cell:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-heatmap__cell[aria-selected="true"] { outline: 2px solid var(--color-app-ink); outline-offset: 1px; }
.su-heatmap:not([data-settled]) .su-heatmap__cell { animation: su-heatmap-in var(--dur-state) var(--ease-app) both; animation-delay: calc(var(--w) * 22ms); }
@keyframes su-heatmap-in { from { opacity: 0; } }
.su-heatmap__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 11px; color: var(--color-app-muted); }
.su-heatmap__status { flex: 1; min-width: 0; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-heatmap__legend { display: inline-flex; align-items: center; gap: 6px; }
.su-heatmap__ramp { display: inline-flex; gap: 3px; }
.su-heatmap__sw { width: 10px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--color-app-accent) var(--p), var(--color-app-tray)); }
.su-heatmap__sw[data-level="0"] { background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-heatmap .su-ctip b { margin-left: 0; }


/* ============ Floating Panel ============ */
/* section.su-float[data-su="float"] > .su-float__bar (.su-float__handle button: grip + .su-float__title, [data-collapse], [data-close])
   + .su-float__body + .su-float__resize. JS writes translate(x, y) + width/height; the bounds element (data-bounds) is the positioning box. */
.su-float { left: 0; top: 0; z-index: 40; display: flex; flex-direction: column; box-sizing: border-box; width: 240px; min-width: 0; max-width: 100%;
  border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-lg); font-family: var(--font-sans);
  color: var(--color-app-ink); overflow: hidden; will-change: transform; }
.su-float[data-gliding] { transition: transform var(--dur-state) var(--ease-app); }
.su-float[data-dragging] { box-shadow: var(--shadow-ring-card), var(--shadow-lg), 0 18px 40px rgba(0,0,0,.18); cursor: grabbing; }
.su-float[data-dragging], .su-float[data-resizing] { user-select: none; -webkit-user-select: none; }
.su-float__bar { display: flex; align-items: center; gap: 2px; flex: none; padding: 4px 4px 4px 4px; border-bottom: 1px solid var(--color-app-line);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.su-float[data-collapsed] .su-float__bar { border-bottom-color: transparent; }
.su-float__handle { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 28px; margin: 0; padding: 0 6px 0 4px; border: 0;
  border-radius: var(--radius-ctrl); background: transparent; color: var(--color-app-ink); font: 600 12.5px/1 var(--font-sans); text-align: left;
  cursor: inherit; touch-action: none; }
.su-float__handle:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 0; }
.su-float__handle > svg { width: 14px; height: 14px; flex: none; color: var(--color-app-muted); }
.su-float__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-app-ink); }
.su-float__bar .su-iconbtn { --s: 26px; --i: 14px; }
.su-float__bar [data-collapse] svg { transition: transform var(--dur-state) var(--ease-app); }
.su-float[data-collapsed] [data-collapse] svg { transform: rotate(180deg); }
.su-float__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.su-float__label { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-float__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.su-float__field { display: flex; align-items: center; gap: 6px; min-width: 0; }
.su-float__k { flex: none; width: 12px; font-size: 11px; color: var(--color-app-muted); }
.su-float__field .su-num__ctl { flex: 1; min-width: 0; height: 28px; }
.su-float__field .su-num__btn { width: 22px; }
.su-float__field .su-num__btn svg { width: 12px; height: 12px; }
.su-float__field .su-num__input { flex: 1; width: 100%; padding: 0 2px; font-size: 12.5px; }
.su-float__range { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-app-ink); }
.su-float__range input { flex: 1; min-width: 0; margin: 0; accent-color: var(--color-app-accent); }
.su-float__range output { width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-float__resize { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; }
.su-float__resize::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 8px; height: 8px; border-right: 2px solid var(--color-app-line-strong);
  border-bottom: 2px solid var(--color-app-line-strong); border-bottom-right-radius: 4px; }
.su-float[data-collapsed] .su-float__resize { display: none; }
/* small screens: a bottom sheet across the bounds (no drag, no resize) */
.su-float[data-sheet] { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 70%; border-radius: 14px 14px 0 0; transform: none; }
.su-float[data-sheet] .su-float__bar { cursor: default; }
.su-float[data-sheet] .su-float__resize { display: none; }
/* ============ Splitter ============ */
/* .su-split[data-su="splitter"] > .su-split__pane + .su-split__sep (> .su-split__grip, optional .su-split__readout) + .su-split__pane.
   JS writes grid-template-columns (rows when vertical) in fr; collapse animates over --dur-layout, drag updates without transition. */
.su-split { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); box-sizing: border-box; min-width: 0; min-height: 0; height: 100%;
  overflow: hidden; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-split[data-animating] { transition: grid-template-columns var(--dur-layout) var(--ease-app), grid-template-rows var(--dur-layout) var(--ease-app); }
.su-split[data-vertical] { grid-template-columns: none; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
.su-split[data-dragging] { user-select: none; -webkit-user-select: none; cursor: col-resize; }
.su-split[data-vertical][data-dragging] { cursor: row-resize; }
.su-split__pane { min-width: 0; min-height: 0; overflow: auto; }
.su-split__pane[data-collapsed] { overflow: hidden; padding: 0 !important; border: 0 !important; }
.su-split__sep { position: relative; z-index: 1; display: grid; place-items: center; width: 9px; min-height: 0; cursor: col-resize; touch-action: none; outline: none; }
.su-split__sep::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--color-app-line); }
.su-split[data-vertical] > .su-split__sep { width: auto; height: 9px; cursor: row-resize; }
.su-split[data-vertical] > .su-split__sep::before { top: 4px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
.su-split__grip { position: relative; width: 5px; height: 28px; border-radius: 3px; background: var(--color-app-line-strong);
  transition: background-color var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app); }
.su-split[data-vertical] > .su-split__sep > .su-split__grip { width: 28px; height: 5px; }
.su-split__sep:hover > .su-split__grip, .su-split[data-dragging] > .su-split__sep > .su-split__grip { background: var(--color-app-accent); }
.su-split__sep:focus-visible > .su-split__grip { background: var(--color-app-accent); outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-split__readout { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1px 6px; border-radius: 4px; background: var(--color-app-ink);
  color: var(--color-app-surface); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-app); }
.su-split[data-vertical] > .su-split__sep > .su-split__readout { left: auto; right: 8px; transform: translateY(-50%); }
.su-split:not([data-vertical]) > .su-split__sep > .su-split__readout { top: 12px; transform: translateX(-50%); }
.su-split[data-dragging] > .su-split__sep > .su-split__readout, .su-split__sep:focus-visible > .su-split__readout { opacity: 1; }
/* narrow (JS sets data-stacked below data-stack px): panes stack, separator hidden */
.su-split[data-stacked] { display: flex; flex-direction: column; height: auto !important; }
.su-split[data-stacked] > .su-split__pane { flex: none; max-height: none; }
.su-split[data-stacked] > .su-split__pane + .su-split__pane { border-top: 1px solid var(--color-app-line); }
/* ============ Custom Element ============ */
/* <su-rating> / <sunset-rating> (light DOM, renders .su-rating__input + value + count) and .su-element: the showcase card
   (.su-element__code line, __live stage, __head, __row attribute rows with __name / __type / __def, __event row) */
.su-element-rating { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-element-rating .su-rating__stars { --s: 20px; }
.su-element__val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-element__count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-element { box-sizing: border-box; width: min(440px, 100%); min-width: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-element__code { margin: 0; padding: 10px 12px; overflow-x: auto; background: var(--color-app-tray); border-bottom: 1px solid var(--color-app-line);
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; color: var(--color-app-ink-2); scrollbar-width: thin; }
.su-element__code .t { color: var(--color-app-accent); } .su-element__code .p { color: var(--color-app-muted); } .su-element__code .v { color: var(--color-app-ink); }
.su-element__live { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 20px 12px; }
.su-element__head { display: flex; justify-content: space-between; gap: 8px; padding: 0 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-app-ink-label); }
.su-element__head span + span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-app-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.su-element__row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 12px; border-top: 1px solid var(--color-app-line); font-size: 12px; color: var(--color-app-ink-2); }
.su-element__name { min-width: 72px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); }
.su-element__type { padding: 1px 6px; border-radius: 4px; background: var(--color-app-accent-soft); color: var(--color-app-ink); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.su-element__def { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-element__row[data-event] .su-element__def { color: var(--color-app-ink); }
/* ============ Share Menu ============ */
/* .su-share.su-popover[data-su="share"] > trigger + .su-share__panel (su-popover panel): __head (__title, close), __access (__acic, __scope su-select,
   __sub, __role su-select), __people (su-avatar stack, __names, [data-manage]), __channels (__ch buttons), .su-share__copy (su-copy) */
.su-share__panel { --su-popover-w: 320px; display: grid; gap: 12px; padding: 14px; }
.su-share__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.su-share__head > svg { width: 16px; height: 16px; flex: none; color: var(--color-app-muted); }
.su-share__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-share__access { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 10px; border-radius: var(--radius-ctrl);
  background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-share__acic { display: inline-flex; flex: none; color: var(--color-app-ok-deep); }
.su-share[data-access="restricted"] .su-share__acic { color: var(--color-app-muted); }
.su-share__acic > svg { width: 16px; height: 16px; }
.su-share__scope { flex: 1; min-width: 0; }
.su-share__sub { display: block; padding: 0 2px; font-size: 11.5px; line-height: 1.3; color: var(--color-app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-share__access .su-select__trigger { height: 26px; padding: 0 6px 0 2px; gap: 4px; box-shadow: none; background: transparent; font-size: 12.5px; font-weight: 500; color: var(--color-app-ink); }
.su-share__access .su-select__trigger:hover { background: var(--color-app-hover); box-shadow: none; }
.su-share__access .su-select__trigger:focus-visible, .su-share__access .su-select__trigger[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--color-app-focus); }
.su-share__access .su-select__chev > svg { width: 13px; height: 13px; }
.su-share__scope .su-select__chev { margin-left: 0; }
.su-share__scope .su-select__value { flex: 0 1 auto; }
.su-share__role { flex: none; }
.su-share__role .su-select__trigger { font-size: 12px; color: var(--color-app-ink-2); }
.su-share__people { display: flex; align-items: center; gap: 8px; min-width: 0; }
.su-share__avs { display: flex; flex: none; }
.su-share__avs > .su-avatar + .su-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--color-app-surface); }
.su-share__names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-app-ink-2); }
.su-share__manage { flex: none; margin: 0; padding: 2px 4px; border: 0; border-radius: 4px; background: none; font: 500 12px/1.3 var(--font-sans); color: var(--color-app-accent); cursor: pointer; }
.su-share__manage:hover { text-decoration: underline; }
.su-share__manage:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-share__channels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding-top: 10px; border-top: 1px solid var(--color-app-line); }
.su-share__ch { display: grid; justify-items: center; gap: 6px; min-width: 0; margin: 0; padding: 8px 2px; overflow-wrap: anywhere; text-align: center; border: 0; border-radius: var(--radius-ctrl); background: transparent;
  font: 400 11.5px/1.2 var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-share__ch:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-share__ch:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 0; }
.su-share__chic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); color: var(--color-app-ink); }
.su-share__chic > svg { width: 16px; height: 16px; stroke-width: 1.75; }
.su-share__copy.su-btn { width: 100%; justify-content: center; }
/* phones: the panel becomes a bottom sheet */
@media (max-width: 480px) {
  .su-share__panel { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; z-index: 1000; width: auto; max-width: none;
    max-height: 85vh; overflow: auto; border-radius: 16px 16px 0 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .su-share__panel .su-popover__arrow { display: none; }
}
/* ============ Reaction Bar ============ */
/* .su-reactions[data-su="reactions"] > .su-reactions__bar (role=group: .su-reactions__pill toggle buttons + .su-reactions__add su-menu with
   .su-reactions__pick role=menu of .su-reactions__emoji) + .su-reactions__who line */
.su-reactions { min-width: 0; font-family: var(--font-sans); }
.su-reactions__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.su-reactions__pill { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 26px; margin: 0; padding: 0 9px; border: 0;
  border-radius: var(--radius-pill); background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); color: var(--color-app-ink-2);
  font: 500 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-reactions__pill:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-reactions__pill[aria-pressed="true"] { background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 1px var(--color-app-accent); color: var(--color-app-ink); font-weight: 600; }
.su-reactions__pill:focus-visible, .su-reactions__addbtn:focus-visible, .su-reactions__emoji:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-reactions__pill[data-pop] { animation: su-reactions-pop var(--dur-state) var(--ease-app); }
.su-reactions__emo { font-size: 13px; line-height: 1; }
.su-reactions__n { display: inline-block; height: 1.1em; overflow: hidden; line-height: 1.1; }
.su-reactions__count { display: inline-block; }
.su-reactions__count[data-roll="up"] { animation: su-reactions-up var(--dur-state) var(--ease-app); }
.su-reactions__count[data-roll="down"] { animation: su-reactions-down var(--dur-state) var(--ease-app); }
.su-reactions__add { display: inline-flex; }
.su-reactions__addbtn { display: inline-grid; place-items: center; width: 30px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: transparent; box-shadow: inset 0 0 0 1px var(--color-app-line); color: var(--color-app-ink-2); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-reactions__addbtn:hover, .su-reactions__addbtn[aria-expanded="true"] { background: var(--color-app-hover); color: var(--color-app-ink); box-shadow: inset 0 0 0 1px var(--color-app-line-strong); }
.su-reactions__addbtn > svg { width: 15px; height: 15px; }
.su-reactions__pick.su-menu__list { display: flex; gap: 2px; min-width: 0; max-width: calc(100vw - 16px); padding: 4px; border-radius: var(--radius-pill); overflow: visible; flex-wrap: wrap; }
.su-reactions__emoji { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent;
  font-size: 17px; line-height: 1; cursor: pointer; transition: transform var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-reactions__emoji:hover, .su-reactions__emoji:focus { background: var(--color-app-hover); transform: scale(1.15); outline: none; }
.su-reactions__emoji:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 0; }
.su-reactions__who { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--color-app-muted); }
@keyframes su-reactions-pop { 50% { transform: scale(1.15); } }
@keyframes su-reactions-up { from { transform: translateY(70%); opacity: 0; } }
@keyframes su-reactions-down { from { transform: translateY(-70%); opacity: 0; } }
/* ============ Webcam Capture ============ */
/* .su-webcam[data-su="webcam"] (JS builds): __view (__ph placeholder, __video, __shot, __guide corners + __scan, __live badge, __res, __hint, __msg, __flash)
   + __bar (__cam su-select, __shutter, retake / stop) + __status (role=status). data-state = idle | starting | live | captured | denied | nocamera */
.su-webcam { box-sizing: border-box; width: min(380px, 100%); min-width: 0; padding: 10px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-webcam__view { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: radial-gradient(70% 90% at 50% 40%, var(--color-app-tray), var(--color-app-sunk)); }
.su-webcam__ph { position: absolute; inset: 0; }
.su-webcam__ph svg { width: 100%; height: 100%; fill: var(--color-app-line-strong); opacity: .7; }
.su-webcam__video, .su-webcam__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-app-sunk); }
.su-webcam[data-state="captured"] .su-webcam__shot { animation: su-webcam-in var(--dur-state) var(--ease-app); }
.su-webcam__guide { position: absolute; left: 50%; top: 50%; width: 38%; height: 58%; transform: translate(-50%, -54%); pointer-events: none; }
.su-webcam__guide i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--color-app-accent); }
.su-webcam__guide i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; }
.su-webcam__guide i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; border-radius: 0 6px 0 0; }
.su-webcam__guide i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 6px; }
.su-webcam__guide i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-radius: 0 0 6px 0; }
.su-webcam__scan { position: absolute; left: 8px; right: 8px; top: 48%; height: 2px; border-radius: 2px; background: var(--color-app-ok); box-shadow: 0 0 8px var(--color-app-ok);
  animation: su-webcam-scan 2.8s var(--ease-app) infinite alternate; }
.su-webcam__live, .su-webcam__res, .su-webcam__hint { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-app-surface) 82%, transparent); color: var(--color-app-ink); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.su-webcam__live { left: 10px; top: 10px; }
.su-webcam__res { right: 10px; top: 10px; font-weight: 500; }
.su-webcam__res:empty { display: none; }
.su-webcam__hint { left: 50%; bottom: 10px; transform: translateX(-50%); max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 500; }
.su-webcam__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-app-crit); animation: su-webcam-blink 1.4s ease-in-out infinite; }
.su-webcam__msg { position: absolute; inset: auto 0 0; display: grid; justify-items: center; gap: 4px; padding: 12px; text-align: center;
  background: linear-gradient(transparent, color-mix(in srgb, var(--color-app-surface) 92%, transparent) 30%); }
.su-webcam__title { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--color-app-ink); }
.su-webcam__help { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--color-app-ink-2); }
.su-webcam__help:empty { display: none; }
.su-webcam[data-state="denied"] .su-webcam__title, .su-webcam[data-state="nocamera"] .su-webcam__title { color: var(--color-app-crit-deep); }
.su-webcam__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.su-webcam__flash { position: absolute; inset: 0; background: var(--color-app-surface); opacity: 0; pointer-events: none; }
.su-webcam[data-flash] .su-webcam__flash { animation: su-webcam-flash var(--dur-layout) var(--ease-app); }
.su-webcam__bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; }
.su-webcam__cam { flex: 1; min-width: 0; }
.su-webcam__cam .su-select__trigger { height: 32px; padding: 0 8px; gap: 6px; font-size: 12px; color: var(--color-app-ink-2); }
.su-webcam__cam .su-select__icon > svg { width: 14px; height: 14px; }
.su-webcam__nocam { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--radius-ctrl); box-shadow: var(--shadow-ring);
  font-size: 12px; color: var(--color-app-muted); white-space: nowrap; overflow: hidden; }
.su-webcam__nocam > svg { width: 14px; height: 14px; flex: none; }
.su-webcam__nocam > span { overflow: hidden; text-overflow: ellipsis; }
.su-webcam__shutter { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 3px solid var(--color-app-accent-soft); border-radius: 50%;
  background: var(--color-app-accent); box-shadow: var(--shadow-md); cursor: pointer; transition: transform var(--dur-hover) var(--ease-app), opacity var(--dur-hover) var(--ease-app); }
.su-webcam__shutter > span { width: 16px; height: 16px; border-radius: 50%; background: var(--color-app-on-accent); }
.su-webcam__shutter:active:not(:disabled) { transform: scale(.94); }
.su-webcam__shutter:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.su-webcam__shutter:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }
.su-webcam__status { margin: 8px 2px 0; font-size: 11.5px; color: var(--color-app-muted); }
.su-webcam[data-state="live"] .su-webcam__status { color: var(--color-app-ok-deep); }
@keyframes su-webcam-scan { from { top: 18%; } to { top: 78%; } }
@keyframes su-webcam-blink { 50% { opacity: .25; } }
@keyframes su-webcam-flash { from { opacity: .85; } }
@keyframes su-webcam-in { from { opacity: 0; } }

/* ============ Credit Card Input ============ */
.su-card { container: su-card / inline-size; display: grid; gap: 10px; width: min(360px, 100%); box-sizing: border-box; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-card__set { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.su-card__set:disabled { opacity: .7; }
.su-card__legend, .su-card__label { padding: 0; margin: 0 0 0; font-size: 12.5px; font-weight: 600; color: var(--color-app-ink); }
.su-card__legend { margin-bottom: 6px; }
.su-card__label { margin-top: 6px; }
.su-card__box { display: grid; border-radius: var(--radius-ctrl); background: var(--color-app-surface); overflow: hidden; box-shadow: var(--shadow-ring);
  transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-card__box:focus-within, .su-card__name:focus { box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-card__row { display: flex; align-items: center; min-width: 0; height: 40px; }
.su-card__row + .su-card__row { border-top: 1px solid var(--color-app-line); }
.su-card__row--num { gap: 8px; padding: 0 10px; }
.su-card__in { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--color-app-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .03em; padding: 0; }
.su-card__in::placeholder { color: var(--color-app-muted); letter-spacing: .03em; }
.su-card__in[aria-invalid="true"] { color: var(--color-app-crit-deep); }
.su-card__exp { padding: 0 10px; border-right: 1px solid var(--color-app-line); }
.su-card__cvcw { flex: 1; display: flex; align-items: center; min-width: 0; height: 100%; padding: 0 10px; }
.su-card__hint { display: flex; color: var(--color-app-muted); }
.su-card__hint > svg { width: 17px; height: 17px; }
.su-card__name { height: 38px; padding: 0 10px; border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring);
  letter-spacing: .04em; text-transform: uppercase; transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-card__name[aria-invalid="true"], .su-card[data-bad-num] .su-card__box, .su-card[data-bad-exp] .su-card__box, .su-card[data-bad-cvc] .su-card__box {
  box-shadow: 0 0 0 1px var(--color-app-crit-deep); }
/* brand slot: the generic card icon cross-fades to the detected brand mark */
.su-card__brand { position: relative; flex: none; display: grid; width: 30px; height: 20px; color: var(--color-app-ink-2); }
.su-card__brand > * { grid-area: 1 / 1; place-self: center; transition: opacity var(--dur-state) var(--ease-app), transform var(--dur-state) var(--ease-app); }
.su-card__brand > svg { width: 20px; height: 20px; }
.su-card__brand > .su-card__mark { opacity: 0; transform: scale(.85); }
.su-card__brand:not([data-brand=""]) > svg { opacity: 0; transform: scale(.85); }
.su-card__brand[data-brand="visa"] > [data-b="visa"], .su-card__brand[data-brand="mastercard"] > [data-b="mastercard"],
.su-card__brand[data-brand="amex"] > [data-b="amex"], .su-card__brand[data-brand="jcb"] > [data-b="jcb"] { opacity: 1; transform: none; }
.su-card__mark { display: inline-grid; place-items: center; min-width: 28px; height: 18px; padding: 0 3px; box-sizing: border-box; border-radius: 4px;
  font: 800 8.5px/1 var(--font-sans); letter-spacing: .02em; font-style: italic; background: var(--color-app-tray); color: var(--color-app-ink);
  box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-card__mark[data-b="visa"] { color: var(--color-app-accent); }
.su-card__mark[data-b="mastercard"] { color: var(--color-app-crit-deep); font-style: normal; }
.su-card__mark[data-b="amex"] { color: var(--color-app-ok-deep); font-style: normal; }
.su-card__acc { flex: none; display: flex; gap: 3px; }
.su-card__acc > .su-card__mark { transition: opacity var(--dur-state) var(--ease-app); }
.su-card__acc > .su-card__mark[data-dim] { opacity: .3; }
.su-card__err { margin: 0; font-size: 12px; line-height: 1.4; color: var(--color-app-crit-deep); }
.su-card__err:empty { display: none; }
.su-card__pay { width: 100%; }
.su-card__pay[data-loading] { pointer-events: none; }
.su-card[data-state="paid"] .su-card__pay { opacity: 1; background: var(--color-app-ok-deep); }
.su-card__note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 12px; line-height: 1.4; text-align: center; color: var(--color-app-muted); }
.su-card__note > svg { flex: none; width: 13px; height: 13px; }
.su-card__status { margin: 0; font-size: 12px; text-align: center; color: var(--color-app-ink-2); }
.su-card__status:empty { display: none; }
.su-card[data-state="paid"] .su-card__status { color: var(--color-app-ok-deep); }
.su-card[data-state="error"] .su-card__status { color: var(--color-app-crit-deep); }
@container su-card (max-width: 329px) { .su-card__acc { display: none; } }

/* ============ Pricing Table ============ */
.su-pricetable { container: su-pricetable / inline-size; display: grid; gap: 16px; width: 100%; min-width: 0; box-sizing: border-box; font: 400 13px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-pricetable__bar { display: flex; justify-content: center; }
.su-pricetable__toggle .su-seg__opt { padding: 7px 14px; font-size: 12.5px; }
.su-pricetable__toggle .su-seg__n { color: var(--color-app-ok-deep); background: var(--color-app-ok-soft); }
.su-pricetable__plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 10px 0 0; list-style: none; }
.su-pricetable__plan { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 14px 14px; border-radius: 12px; box-sizing: border-box;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-pricetable__plan[data-popular] { box-shadow: 0 0 0 1.5px var(--color-app-accent), var(--shadow-lg); }
.su-pricetable__badge { position: absolute; top: -9px; left: 12px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-pricetable__name { margin: 0; font: 600 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-pricetable__price { display: flex; align-items: baseline; gap: 2px; margin: 0; }
.su-pricetable__amount { display: inline-block; font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-pricetable__unit, .su-pricetable__billed, .su-pricetable__desc { font-size: 11.5px; color: var(--color-app-muted); }
.su-pricetable__billed, .su-pricetable__desc { margin: 0; }
.su-pricetable__billed { font-variant-numeric: tabular-nums; color: var(--color-app-ink-2); }
.su-pricetable__feat { display: grid; gap: 5px; margin: 2px 0 6px; padding: 0; list-style: none; font-size: 12px; color: var(--color-app-ink-2); }
.su-pricetable__feat > li { display: flex; gap: 6px; align-items: flex-start; }
.su-pricetable__feat svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--color-app-ok); }
.su-pricetable__plan > [data-cta] { width: 100%; margin-top: auto; }
/* comparison matrix: scrolls inside its own box so the plan header row and the feature column stay pinned */
.su-pricetable__matrix { max-height: var(--su-pricetable-h, 340px); overflow: auto; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card);
  overscroll-behavior: contain; }
.su-pricetable__matrix:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-pricetable__table { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.su-pricetable__cap { caption-side: top; padding: 12px 14px 8px; text-align: left; font: 600 13px/1.3 var(--font-sans); color: var(--color-app-ink); background: var(--color-app-surface); }
.su-pricetable__table th, .su-pricetable__table td { padding: 9px 12px; border-bottom: 1px solid var(--color-app-line); text-align: center; vertical-align: middle; color: var(--color-app-ink-2); }
.su-pricetable__table thead th { position: sticky; top: 0; z-index: 2; background: var(--color-app-surface); box-shadow: inset 0 -1px 0 var(--color-app-line-strong); border-bottom: 0; }
.su-pricetable__table th[scope="row"], .su-pricetable__corner { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 500; color: var(--color-app-ink);
  background: var(--color-app-surface); }
.su-pricetable__table thead .su-pricetable__corner { z-index: 3; }
.su-pricetable__hname { display: block; font-weight: 600; color: var(--color-app-ink); }
.su-pricetable__hprice { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--color-app-muted); }
.su-pricetable__table [data-popular] { background: linear-gradient(var(--color-app-accent-soft) 0 0) var(--color-app-surface); } /* opaque: the sticky header must hide rows under it */
.su-pricetable__table thead [data-popular] .su-pricetable__hname { color: var(--color-app-accent); }
.su-pricetable__group > th { padding-top: 14px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label);
  background: var(--color-app-tray); position: sticky; left: 0; }
.su-pricetable__yes, .su-pricetable__no { display: inline-flex; vertical-align: middle; }
.su-pricetable__yes > svg, .su-pricetable__no > svg { width: 16px; height: 16px; }
.su-pricetable__yes { color: var(--color-app-ok); }
.su-pricetable__no { color: var(--color-app-muted); }
.su-pricetable__table tbody tr:last-child > * { border-bottom: 0; }
@container su-pricetable (min-width: 600px) {
  .su-pricetable__plans { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 10px 4px 6px; scrollbar-width: thin; }
  .su-pricetable__plan { flex: 0 0 min(280px, 46%); scroll-snap-align: start; }
}
@container su-pricetable (min-width: 900px) {
  .su-pricetable__plans { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); overflow: visible; padding: 10px 0 0; }
}

/* ============ Signature Pad ============ */
.su-signature { container: su-signature / inline-size; display: grid; gap: 10px; width: min(400px, 100%); box-sizing: border-box; padding: 14px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-signature__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.su-signature__label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--color-app-ink); }
.su-signature__ref { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-signature__modes .su-tabs__list { gap: 16px; }
.su-signature__modes .su-tabs__tab { padding: 6px 2px 8px; font-size: 12.5px; }
.su-signature__panel { padding-top: 10px; outline: none; }
.su-signature__panel:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; border-radius: var(--radius-ctrl); }
.su-signature__pad { position: relative; height: 130px; border-radius: var(--radius-ctrl); background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line);
  cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.su-signature__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.su-signature__hint { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: 12px; color: var(--color-app-muted); pointer-events: none; }
.su-signature__line { position: absolute; left: 16px; right: 16px; bottom: 26px; border-top: 1px dashed var(--color-app-line-strong); pointer-events: none; }
.su-signature__x { position: absolute; left: 16px; bottom: 30px; font-size: 14px; line-height: 1; color: var(--color-app-muted); pointer-events: none; }
.su-signature__signer { position: absolute; left: 16px; right: 16px; bottom: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px;
  color: var(--color-app-muted); pointer-events: none; }
.su-signature[data-state="confirmed"] .su-signature__pad, .su-signature[data-state="disabled"] .su-signature__pad { cursor: default; }
.su-signature[data-state="disabled"] .su-signature__pad { opacity: .55; }
.su-signature__tlabel { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--color-app-ink-2); }
.su-signature__typed { width: 100%; box-sizing: border-box; height: 36px; font-size: 13px; }
.su-signature__pad--typed { margin-top: 8px; cursor: default; }
.su-signature__script { position: absolute; left: 10%; right: 6%; bottom: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 400 44px/1.1 "Snell Roundhand", "Segoe Script", "Brush Script MT", "Apple Chancery", cursive; }
.su-signature__tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.su-signature__inks .su-seg__opt { padding: 6px 10px; font-size: 12px; }
.su-signature__swatch { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px var(--color-app-line); }
.su-signature__acts { display: flex; gap: 4px; margin-left: auto; }
.su-signature__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.su-signature__why { flex: 1; min-width: 0; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--color-app-muted); }
.su-signature__why:empty { display: none; }
.su-signature [data-confirm][aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.su-signature [data-confirm][aria-disabled="true"]:active { transform: none; }
.su-signature__status { margin: 0; font-size: 12px; color: var(--color-app-ok-deep); }
.su-signature__status:empty { display: none; }
@container su-signature (max-width: 340px) { .su-signature__script { font-size: 34px; } .su-signature__acts { margin-left: 0; } }

/* ============ Particles ============ */
.su-particles { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; border-radius: var(--radius-card); font-family: var(--font-sans);
  background: radial-gradient(120% 90% at 50% 110%, var(--color-app-accent-soft), var(--color-app-tray) 70%); box-shadow: var(--shadow-ring-card); }
.su-particles__canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.su-particles > :not(.su-particles__canvas) { position: relative; z-index: 1; }
.su-particles__eyebrow { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-particles__title { margin: 6px 0 0; font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-particles__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--color-app-ink-2); }

/* ============ Page Transition ============ */
.su-transition { position: relative; overflow: clip; overflow-clip-margin: 4px; min-width: 0; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-transition__view { min-width: 0; }
.su-transition__ghost { position: absolute; top: 0; left: 0; pointer-events: none; }
.su-transition :is(h1, h2, h3, [data-heading])[tabindex="-1"]:focus { outline: none; }
.su-transition :is(h1, h2, h3, [data-heading])[tabindex="-1"]:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; border-radius: 4px; }
::view-transition-old(su-transition), ::view-transition-new(su-transition) { animation-duration: var(--dur-layout, 420ms); animation-timing-function: var(--ease-app, ease); animation-fill-mode: both; }
html[data-su-transition="forward"]::view-transition-old(su-transition) { animation-name: su-transition-out-left; }
html[data-su-transition="forward"]::view-transition-new(su-transition) { animation-name: su-transition-in-right; }
html[data-su-transition="back"]::view-transition-old(su-transition) { animation-name: su-transition-out-right; }
html[data-su-transition="back"]::view-transition-new(su-transition) { animation-name: su-transition-in-left; }
html[data-su-transition]::view-transition-group(*) { animation-duration: var(--dur-layout, 420ms); animation-timing-function: var(--ease-app, ease); }
@keyframes su-transition-out-left { to { opacity: 0; transform: translateX(-24px); } }
@keyframes su-transition-in-right { from { opacity: 0; transform: translateX(24px); } }
@keyframes su-transition-out-right { to { opacity: 0; transform: translateX(24px); } }
@keyframes su-transition-in-left { from { opacity: 0; transform: translateX(-24px); } }
/* demo pages (list / detail) */
.su-transition__crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 10px 14px; border-bottom: 1px solid var(--color-app-line); font-size: 12px; color: var(--color-app-muted); }
.su-transition__crumbs [aria-current] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--color-app-ink); }
.su-transition__crumb { padding: 2px 4px; margin: -2px -4px; border: 0; border-radius: 4px; background: none; font: inherit; color: var(--color-app-ink-2); cursor: pointer; }
.su-transition__crumb:hover { color: var(--color-app-ink); text-decoration: underline; }
.su-transition__crumb:focus-visible, .su-transition__item:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-transition__body { display: grid; gap: 10px; align-content: start; padding: 14px; }
.su-transition__h { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--color-app-ink); }
.su-transition__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.su-transition__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px; border: 0; border-radius: var(--radius-ctrl);
  background: var(--color-app-tray); font: inherit; font-size: 12.5px; text-align: left; color: var(--color-app-ink); cursor: pointer; transition: background var(--dur-hover) var(--ease-app); }
.su-transition__item:hover { background: var(--color-app-hover); }
.su-transition__item > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.su-transition__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.su-transition__meta { margin: 0; font-size: 12px; color: var(--color-app-ink-2); }
.su-transition__team { display: flex; align-items: center; }
.su-transition__team > .su-combo__av + .su-combo__av { margin-left: -6px; box-shadow: 0 0 0 2px var(--color-app-surface); }
.su-transition__team > span:last-child { margin-left: 8px; font-size: 11.5px; color: var(--color-app-muted); }

/* ============ Notification Center ============ */
.su-notify { position: relative; display: inline-block; vertical-align: top; font-family: var(--font-sans); }
.su-notify__bell { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-ctrl);
  background: transparent; color: var(--color-app-ink-2); cursor: pointer; transition: background var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-notify__bell:hover, .su-notify__bell[aria-expanded="true"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-notify__bell:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-notify__bell > svg { width: 17px; height: 17px; }
.su-notify__count { position: absolute; top: -4px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; font-size: 10px;
  background: var(--color-app-crit-deep); color: var(--color-app-on-accent); box-shadow: 0 0 0 2px var(--color-app-surface); }
.su-notify__panel.su-popover__panel { width: min(340px, calc(100vw - 16px)); max-width: none; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: min(420px, 75vh); }
.su-notify__head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 0 12px; }
.su-notify__title { flex: 1; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-app-ink); }
.su-notify__all { padding: 4px 6px; border: 0; border-radius: 6px; background: none; font: 500 12px/1.2 var(--font-sans); color: var(--color-app-accent); cursor: pointer; }
.su-notify__all:hover { background: var(--color-app-hover); }
.su-notify__all[aria-disabled="true"] { color: var(--color-app-muted); cursor: default; background: none; }
.su-notify__all:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-notify__tabs { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.su-notify__tabs > .su-tabs__list { gap: 14px; padding: 0 12px; flex: none; }
.su-notify__tabs .su-tabs__tab { padding: 8px 1px 7px; font-size: 12.5px; }
.su-notify__list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.su-notify__list:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-notify__ul { margin: 0; padding: 0; list-style: none; }
.su-notify__item { position: relative; display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--color-app-line); }
.su-notify__item:hover { background: var(--color-app-hover); }
.su-notify__item[data-new] { animation: su-notify-in var(--dur-state) var(--ease-app); }
.su-notify__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.su-notify__open { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: 400 12.5px/1.45 var(--font-sans); text-align: left; color: var(--color-app-ink-2);
  cursor: pointer; border-radius: 4px; }
.su-notify__open::after { content: ""; position: absolute; inset: 0; } /* whole row clickable; actions sit above */
.su-notify__open:focus-visible { outline: none; }
.su-notify__item:has(> .su-notify__body > .su-notify__open:focus-visible) { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-notify__open b { font-weight: 600; color: var(--color-app-ink); }
.su-notify__item[data-unread] .su-notify__text { color: var(--color-app-ink); }
.su-notify__time { font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-notify__acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.su-notify__done { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 12px; font-weight: 500; color: var(--color-app-ok-deep);
  animation: su-notify-done var(--dur-state) var(--ease-app); }
.su-notify__done > svg { width: 14px; height: 14px; flex: none; }
.su-notify__dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--color-app-accent); visibility: hidden; }
.su-notify__item[data-unread] .su-notify__dot { visibility: visible; }
.su-notify .su-notify__empty { padding: 26px 12px; }
.su-notify .su-notify__empty .su-empty__art::before, .su-notify .su-notify__empty .su-empty__art::after { display: none; }
.su-notify__foot { display: block; flex: none; padding: 9px; text-align: center; font-size: 12px; color: var(--color-app-ink-2); text-decoration: none; }
.su-notify__foot:hover { color: var(--color-app-ink); background: var(--color-app-hover); }
.su-notify__foot:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-notify__close { display: none; }
@media (max-width: 479px) { /* full-screen sheet */
  .su-notify__panel.su-popover__panel { position: fixed; inset: 0 !important; z-index: 60; width: auto; max-height: none; border-radius: 0; }
  .su-notify__close { display: inline-grid; }
  .su-notify__head { padding-top: max(10px, env(safe-area-inset-top)); }
}
@keyframes su-notify-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes su-notify-done { from { opacity: 0; transform: translateY(-3px); } }
/* ============ Map ============ */
.su-map { container: su-map / inline-size; position: relative; box-sizing: border-box; width: 100%; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); font-size: 13px; line-height: 1.45; }
.su-map__stage { position: relative; }
.su-map__vp { position: relative; height: var(--su-map-h, 260px); overflow: hidden; background: var(--color-app-tray); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.su-map[data-state-pan] .su-map__vp { cursor: grabbing; }
.su-map__vp:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 0 2px var(--color-app-focus); pointer-events: none; }
.su-map__tiles { position: absolute; inset: 0; }
.su-map__tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.su-map__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.su-map__route path { fill: none; stroke: var(--color-app-accent); stroke-linecap: round; stroke-linejoin: round; }
.su-map__route-base { stroke-width: 7px; stroke-opacity: .28; }
.su-map__route-line { stroke-width: 3.5px; stroke-dasharray: 1 1; animation: su-map-draw calc(var(--dur-layout) * 3) var(--ease-app) both; } /* draws in once */
@keyframes su-map-draw { from { stroke-dashoffset: 1; } }
.su-map__markers { position: absolute; inset: 0; pointer-events: none; }
.su-map__marker { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--color-app-ink); cursor: pointer; pointer-events: auto; will-change: transform; }
.su-map__marker:focus-visible { outline: none; }
.su-map__marker:focus-visible > :first-child, .su-map__marker:focus-visible > .su-map__av { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-map__marker > * { flex: none; }
.su-map__dot { display: block; width: 12px; height: 12px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--color-app-surface); box-shadow: inset 0 0 0 2.5px var(--color-app-ink-2), 0 0 0 2px var(--color-app-surface); }
.su-map__tag { margin-top: -8px; padding: 1px 6px; border-radius: 5px; background: var(--color-app-surface); box-shadow: inset 0 0 0 1px var(--color-app-line-strong); font-size: 10.5px; font-weight: 600; line-height: 1.5; color: var(--color-app-ink); }
.su-map__pin { display: block; width: 30px; height: 30px; margin: -30px 0 0 -15px; color: var(--color-app-surface); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.su-map__pin svg { width: 100%; height: 100%; display: block; fill: var(--color-app-accent); stroke-width: 1.5; }
.su-map__marker[data-kind="place"] .su-map__pin svg { fill: var(--color-app-ink-2); }
.su-map__av { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; box-sizing: border-box;
  font: 600 11px/1 var(--font-sans); background: var(--color-app-accent); color: var(--color-app-on-accent); border: 3px solid var(--color-app-surface); box-shadow: var(--shadow-md); }
.su-map__ring { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: var(--color-app-accent); opacity: .18; animation: su-map-ring calc(var(--dur-loop) * 3) var(--ease-app) infinite; pointer-events: none; }
@keyframes su-map-ring { from { transform: scale(.4); opacity: .45; } to { transform: scale(1.5); opacity: 0; } }
.su-map__marker[aria-pressed="true"] :is(.su-map__pin, .su-map__dot, .su-map__av) { scale: 1.18; }
.su-map__marker[aria-pressed="true"] .su-map__pin svg { fill: var(--color-app-accent-hover, var(--color-app-accent)); }
.su-map__zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-ctrl);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-map__zbtn { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-app-ink-2); cursor: pointer; }
.su-map__zbtn + .su-map__zbtn { border-top: 1px solid var(--color-app-line); }
.su-map__zbtn svg { width: 15px; height: 15px; }
.su-map__zbtn:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-map__zbtn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-map__zbtn:disabled { opacity: .4; cursor: default; }
.su-map__attr { position: absolute; left: 0; bottom: 0; z-index: 2; max-width: calc(100% - 56px); margin: 0; padding: 2px 7px; border-top-right-radius: 6px; font-size: 10.5px; line-height: 1.5;
  color: var(--color-app-ink-2); background: var(--color-app-surface); }
.su-map__notice { position: absolute; left: 50%; bottom: 30px; z-index: 3; max-width: calc(100% - 80px); margin: 0; padding: 6px 12px; translate: -50% 0; border-radius: var(--radius-pill);
  background: var(--color-app-warn-soft); color: var(--color-app-ink); font-size: 12px; font-weight: 500; box-shadow: var(--shadow-md); text-align: center; }
.su-map__notice[hidden] { display: none; }
.su-map__card { position: absolute; left: 10px; top: 10px; z-index: 2; box-sizing: border-box; max-width: min(280px, calc(100% - 64px)); display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); color: var(--color-app-ink); }
.su-map__card-body { flex: 1; min-width: 0; }
.su-map__card-title { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--color-app-ink); }
.su-map__card-meta { margin: 0; font-size: 11.5px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
@container su-map (max-width: 399px) { /* the info card docks under the map so it never covers it */
  .su-map__card { position: static; max-width: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--color-app-line); }
  .su-map__card .su-chip { margin-left: auto; }
}

/* ============ Flow Canvas ============ */
.su-flowcanvas { container: su-flowcanvas / inline-size; position: relative; box-sizing: border-box; width: 100%; height: var(--su-flowcanvas-h, 300px); overflow: hidden;
  border-radius: var(--radius-card); background: var(--color-app-tray); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-flowcanvas__vp { position: absolute; inset: 0; overflow: hidden; outline: none; touch-action: none; user-select: none; -webkit-user-select: none;
  background-image: radial-gradient(var(--color-app-line-strong) 1px, transparent 1.2px); background-size: 16px 16px; }
.su-flowcanvas__vp:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-flowcanvas[data-space] .su-flowcanvas__vp, .su-flowcanvas[data-space] .su-flowcanvas__node { cursor: grab; }
.su-flowcanvas[data-panning] .su-flowcanvas__vp, .su-flowcanvas[data-panning] .su-flowcanvas__node { cursor: grabbing; }
.su-flowcanvas__world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.su-flowcanvas[data-animating] .su-flowcanvas__world { transition: transform var(--dur-layout) var(--ease-app); }
.su-flowcanvas[data-animating] .su-flowcanvas__vp { transition: background-position var(--dur-layout) var(--ease-app), background-size var(--dur-layout) var(--ease-app); }
.su-flowcanvas__edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.su-flowcanvas__line { fill: none; stroke: var(--color-app-line-strong); stroke-width: 1.5px; }
.su-flowcanvas__hit { fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }
.su-flowcanvas__edge[data-selected] .su-flowcanvas__line { stroke: var(--color-app-accent); stroke-width: 2.5px; }
.su-flowcanvas__edge[data-running] .su-flowcanvas__line { stroke: var(--color-app-accent); stroke-width: 2px; stroke-dasharray: 6 6; animation: su-flowcanvas-run 1s linear infinite; }
@keyframes su-flowcanvas-run { to { stroke-dashoffset: -12; } }
.su-flowcanvas__elabel { font: 500 10.5px var(--font-sans); fill: var(--color-app-ink-2); color: var(--color-app-ink-2); paint-order: stroke; stroke: var(--color-app-tray); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.su-flowcanvas__temp { fill: none; stroke: var(--color-app-accent); stroke-width: 2px; stroke-dasharray: 5 4; pointer-events: none; }
.su-flowcanvas__temp[hidden] { display: none; }
.su-flowcanvas__node { position: absolute; left: 0; top: 0; box-sizing: border-box; width: var(--su-flowcanvas-node-w, 152px); display: grid; gap: 3px; margin: 0; padding: 8px 10px;
  border: 0; border-radius: 10px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: inherit; text-align: left; color: var(--color-app-ink);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.su-flowcanvas__node[data-dragging] { cursor: grabbing; z-index: 2; box-shadow: var(--shadow-ring-card), var(--shadow-lg); }
.su-flowcanvas__node:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }
.su-flowcanvas__node[aria-pressed="true"], .su-flowcanvas__node[data-status="running"] { box-shadow: 0 0 0 1.5px var(--color-app-accent), 0 0 0 5px var(--color-app-accent-soft), var(--shadow-md); }
.su-flowcanvas__node[data-connecting], .su-flowcanvas__node[data-drop] { box-shadow: 0 0 0 2px var(--color-app-accent), var(--shadow-md); }
.su-flowcanvas__node[data-connecting]::after { content: "→"; position: absolute; right: -24px; top: 50%; translate: 0 -50%; font-weight: 700; color: var(--color-app-accent); }
.su-flowcanvas__head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.su-flowcanvas__icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-flowcanvas__icon svg { width: 12px; height: 12px; }
.su-flowcanvas__node[data-status="running"] .su-flowcanvas__icon { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-flowcanvas__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: var(--color-app-ink); }
.su-flowcanvas__detail { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; color: var(--color-app-muted); }
.su-flowcanvas__status.su-chip { position: absolute; top: -9px; right: 8px; height: 17px; padding: 0 6px; font-size: 10px; }
.su-flowcanvas__status.su-chip[data-tone="accent"] { background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-flowcanvas__port { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; box-sizing: border-box; border-radius: 50%; background: var(--color-app-surface);
  box-shadow: inset 0 0 0 2px var(--color-app-line-strong); }
.su-flowcanvas__port[data-port="in"] { left: -5px; }
.su-flowcanvas__port[data-port="out"] { right: -5px; cursor: crosshair; }
.su-flowcanvas__port[data-port="out"]::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.su-flowcanvas__port[data-port="out"]:hover, .su-flowcanvas[data-connecting] .su-flowcanvas__port[data-port="in"] { box-shadow: inset 0 0 0 2px var(--color-app-accent); background: var(--color-app-accent-soft); }
.su-flowcanvas[data-readonly] .su-flowcanvas__node { cursor: pointer; }
.su-flowcanvas[data-readonly] .su-flowcanvas__port[data-port="out"] { cursor: default; pointer-events: none; }
.su-flowcanvas__zoom { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; padding: 2px; border-radius: var(--radius-ctrl);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-flowcanvas__zoom .su-iconbtn { --s: 28px; --i: 14px; }
.su-flowcanvas__zoom .su-iconbtn:disabled { opacity: .4; pointer-events: none; }
.su-flowcanvas__pct { width: 38px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-app-ink-2); }
.su-flowcanvas__bar { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.su-flowcanvas__saved { padding: 2px 6px; border-radius: 6px; background: var(--color-app-surface); font-size: 11px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
@container su-flowcanvas (max-width: 379px) {
  .su-flowcanvas__saved { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
  .su-flowcanvas__zoom .su-iconbtn { --s: 26px; }
  .su-flowcanvas__pct { width: 34px; }
}

/* ============ Flow Diagram ============ */
.su-flow { box-sizing: border-box; width: 100%; padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font-family: var(--font-sans); color: var(--color-app-ink); font-size: 13px; line-height: 1.45; }
.su-flow__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.su-flow__title { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-app-ink); }
.su-flow__chips { display: flex; gap: 6px; }
.su-flow__fig { position: relative; max-width: 100%; margin: 0 auto; }
.su-flow__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--font-sans); }
.su-flow__shape { fill: var(--color-app-surface); stroke: var(--color-app-line-strong); stroke-width: 1.25px; transition: stroke var(--dur-hover) var(--ease-app), fill var(--dur-hover) var(--ease-app); }
.su-flow__node[data-type="decision"] .su-flow__shape { fill: var(--color-app-accent-soft); stroke: var(--color-app-accent); }
.su-flow__node[data-type="start"] .su-flow__shape { fill: var(--color-app-tray); }
.su-flow__node[data-type="end"] .su-flow__shape { fill: var(--color-app-ok-soft); stroke: var(--color-app-ok); }
.su-flow__node[data-tone="warn"] .su-flow__shape { fill: var(--color-app-warn-soft); stroke: var(--color-app-warn); }
.su-flow__node[data-tone="crit"] .su-flow__shape { fill: var(--color-app-crit-soft); stroke: var(--color-app-crit); }
.su-flow__node[data-tone="ok"] .su-flow__shape { fill: var(--color-app-ok-soft); stroke: var(--color-app-ok); }
.su-flow__node[data-hi] .su-flow__shape { stroke: var(--color-app-accent); stroke-width: 2px; }
.su-flow__node:is([data-hover], [data-active]) .su-flow__shape { stroke: var(--color-app-accent); stroke-width: 2.25px; }
.su-flow__node[data-active] .su-flow__shape { fill: var(--color-app-accent-soft); }
.su-flow__label { fill: var(--color-app-ink); color: var(--color-app-ink); font-size: 11px; font-weight: 600; }
.su-flow__detail { fill: var(--color-app-muted); color: var(--color-app-muted); font-size: 9.5px; }
.su-flow__edge { fill: none; stroke: var(--color-app-muted); stroke-width: 1.25px; stroke-linejoin: round; }
.su-flow__edge--back { stroke-dasharray: 4 3; }
.su-flow__edge--hi { stroke: var(--color-app-accent); stroke-width: 2px; stroke-dasharray: 6 4; animation: su-flow-dash var(--dur-loop) linear infinite; }
@keyframes su-flow-dash { to { stroke-dashoffset: -10; } }
.su-flow__arrow { fill: var(--color-app-muted); }
.su-flow__elabel { fill: var(--color-app-ink-2); color: var(--color-app-ink-2); font-size: 9.5px; font-weight: 600; paint-order: stroke; stroke: var(--color-app-surface); stroke-width: 3px; stroke-linejoin: round; }
.su-flow__hits { position: absolute; inset: 0; }
.su-flow__hit { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.su-flow__hit[data-type="start"], .su-flow__hit[data-type="end"] { border-radius: var(--radius-pill); }
.su-flow__hit:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }

/* ============ Activity Feed ============ */
.su-feed { container: su-feed / inline-size; box-sizing: border-box; min-width: 0; padding: 14px 16px 12px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-feed__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.su-feed__title { flex: 1; min-width: 0; margin: 0; font: 600 14px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-feed__tabs { flex: none; }
.su-feed__tabs .su-tabs__list { gap: 14px; box-shadow: none; }
.su-feed__tabs .su-tabs__tab { padding: 6px 1px; font-size: 12.5px; }
.su-feed__scroll { --su-scroll-max: 360px; margin: 0 -6px; padding: 0 6px; overflow-anchor: none; }
.su-feed__list { display: flex; flex-direction: column; }
.su-feed__day { margin: 10px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-feed__item { position: relative; display: flex; gap: 10px; border-radius: var(--radius-ctrl); outline: none; cursor: default; }
.su-feed__item:focus-visible { box-shadow: 0 0 0 2px var(--color-app-focus); }
.su-feed__item[data-new] { animation: su-rise var(--dur-layout) var(--ease-app); }
.su-feed__rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.su-feed__rail::after { content: ""; flex: 1; width: 1px; margin: 4px 0; background: var(--color-app-line); }
.su-feed__item:last-child .su-feed__rail::after, .su-feed__item:has(+ .su-feed__day) .su-feed__rail::after { visibility: hidden; }
.su-feed__av, .su-feed__icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 600;
  background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-feed__item[data-unread] .su-feed__av { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-feed__icon svg { width: 15px; height: 15px; }
.su-feed__item[data-tone="crit"] .su-feed__icon { background: var(--color-app-crit-soft); color: var(--color-app-crit); }
.su-feed__main { flex: 1; min-width: 0; padding: 4px 0 14px; }
.su-feed__line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin: 0; color: var(--color-app-ink-2); }
.su-feed__line > span:first-child { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.su-feed__actor { all: unset; font-weight: 600; color: var(--color-app-ink); cursor: pointer; border-radius: 3px; }
.su-feed__actor:hover, .su-feed__actor[aria-expanded="true"] { text-decoration: underline; }
.su-feed__actor:focus-visible, .su-feed__obj:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-feed__obj { font-weight: 600; color: var(--color-app-ink); text-decoration: none; border-radius: 3px; }
.su-feed__obj:hover { color: var(--color-app-accent); text-decoration: underline; }
.su-feed__time { flex: none; font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-feed__dot { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--color-app-accent); }
.su-feed__body { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-tray); font-size: 12.5px; color: var(--color-app-ink); overflow-wrap: anywhere; }
.su-feed__item[data-tone="crit"] .su-feed__body { padding: 0; margin-top: 4px; background: none; font-size: 12px; color: var(--color-app-crit-deep); }
.su-feed__mention { font-weight: 500; color: var(--color-app-accent); }
.su-feed__mention[data-me] { padding: 0 3px; border-radius: 4px; background: var(--color-app-accent-soft); }
.su-feed__files { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.su-feed__files .su-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-feed__empty { margin: 0; padding: 22px 8px; text-align: center; font-size: 12.5px; color: var(--color-app-muted); }
.su-feed__more { display: flex; width: 100%; justify-content: center; margin: 2px 0 4px; }
.su-feed__more[data-loading] { cursor: progress; }
.su-feed__more[data-loading] .su-spin { width: 14px; height: 14px; }
@container su-feed (max-width: 340px) { .su-feed__head { flex-wrap: wrap; } .su-feed__title { flex-basis: 100%; } }
/* ============ Bento Grid ============ */
/* 12 tracks underneath: a tile spans 12 / data-cols tracks per unit, so 2 / 3 / 4 / 6 columns share one rule set.
   Breakpoints: < 900px viewport (or < 640px grid) two columns (2x2 → 2x1), < 560px viewport (or < 400px grid) one column in DOM order. */
.su-bento { container: su-bento / inline-size; --su-u: 3; box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--su-bento-row, 92px), auto); grid-auto-flow: row dense; gap: var(--su-bento-gap, 10px); min-width: 0;
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-bento[data-cols="2"] { --su-u: 6; } .su-bento[data-cols="3"] { --su-u: 4; } .su-bento[data-cols="6"] { --su-u: 2; }
.su-bento > * { --su-s: var(--su-u); --su-r: 1; grid-column: span var(--su-s); grid-row: span var(--su-r); min-width: 0; }
.su-bento[data-cols="2"] > :is([data-span="2x1"], [data-span="2x2"]) { --su-s: 12; } .su-bento[data-cols="3"] > :is([data-span="2x1"], [data-span="2x2"]) { --su-s: 8; }
.su-bento:not([data-cols]) > :is([data-span="2x1"], [data-span="2x2"]), .su-bento[data-cols="4"] > :is([data-span="2x1"], [data-span="2x2"]) { --su-s: 6; }
.su-bento[data-cols="6"] > :is([data-span="2x1"], [data-span="2x2"]) { --su-s: 4; }
.su-bento > [data-span="1x2"], .su-bento > [data-span="2x2"] { --su-r: 2; }
.su-bento__tile { position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); color: var(--color-app-ink); text-decoration: none; overflow: hidden;
  transition: transform var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app); }
a.su-bento__tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
a.su-bento__tile:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-bento__tile[data-tone="accent"] { background: var(--color-app-accent-soft); }
.su-bento__title { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; color: var(--color-app-ink-label); }
.su-bento__value { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-bento__tile[data-span="2x2"] .su-bento__value { font-size: 28px; }
.su-bento__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--color-app-ink-2); }
.su-bento__note { margin: 0; font-size: 11.5px; color: var(--color-app-muted); }
.su-bento__foot { margin-top: auto; }
.su-bento__tile .su-spark { padding: 0; }
.su-bento__tile .su-spark__plot { flex: 1 1 auto; height: 64px; }
.su-bento__tile[data-span="1x2"] .su-spark__plot { height: 96px; }
.su-bento__bars { display: flex; gap: 2px; margin: 2px 0 0; padding: 0; list-style: none; }
.su-bento__bars > * { flex: 1; height: 12px; border-radius: 2px; background: var(--color-app-ok); }
.su-bento__bars > [data-tone="warn"] { background: var(--color-app-warn); } .su-bento__bars > [data-tone="crit"] { background: var(--color-app-crit); }
.su-bento__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.su-bento__tile:has(> .su-bento__row:only-child) { justify-content: center; }
.su-bento__row > :not(.su-btn, .su-bento__icon) { flex: 1; min-width: 0; }
.su-bento__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-bento__icon svg { width: 16px; height: 16px; }
.su-bento__go { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; color: var(--color-app-muted); }
a.su-bento__tile:hover .su-bento__go { color: var(--color-app-accent); }
/* two columns below a 900px viewport or a 640px-wide grid (sidebars, the store stage at 320px); one column below 560px / a 400px grid */
@media (max-width: 899px) {
  .su-bento > * { --su-s: 6 !important; } .su-bento > :is([data-span="2x1"], [data-span="2x2"]) { --su-s: 12 !important; } .su-bento > [data-span="2x2"] { --su-r: 1; }
}
@container su-bento (max-width: 639px) {
  .su-bento > * { --su-s: 6 !important; } .su-bento > :is([data-span="2x1"], [data-span="2x2"]) { --su-s: 12 !important; } .su-bento > [data-span="2x2"] { --su-r: 1; }
}
@media (max-width: 559px) { .su-bento > * { --su-s: 12 !important; --su-r: 1 !important; } }
@container su-bento (max-width: 399px) { .su-bento > * { --su-s: 12 !important; --su-r: 1 !important; } }
/* ============ Cursor Effect ============ */
.su-cursor { position: relative; overflow: hidden; isolation: isolate; }
.su-cursor__layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.su-cursor__glow, .su-cursor__dot, .su-cursor__head { position: absolute; left: 0; top: 0; will-change: transform; }
.su-cursor__glow::before { content: ""; position: absolute; width: var(--su-cursor-size, 240px); height: var(--su-cursor-size, 240px); left: calc(var(--su-cursor-size, 240px) / -2); top: calc(var(--su-cursor-size, 240px) / -2);
  border-radius: 50%; background: radial-gradient(closest-side, var(--color-app-accent-soft), transparent); opacity: .7; transition: opacity var(--dur-state) var(--ease-app); }
.su-cursor:is([data-state="tracking"], [data-state="magnet"]) .su-cursor__glow::before { opacity: 1; }
.su-cursor__dot::before, .su-cursor__head::before, .su-cursor__head::after { content: ""; position: absolute; border-radius: 50%; }
.su-cursor__dot::before { --s: calc(8px - var(--i) * 4px / var(--n)); width: var(--s); height: var(--s); left: calc(var(--s) / -2); top: calc(var(--s) / -2);
  background: var(--color-app-accent); opacity: calc(.75 - var(--i) * .5 / var(--n)); }
.su-cursor__head::before { width: 8px; height: 8px; left: -4px; top: -4px; background: var(--color-app-accent); }
.su-cursor__head::after { width: 30px; height: 30px; left: -15px; top: -15px; box-shadow: inset 0 0 0 1.5px var(--color-app-accent); transition: transform var(--dur-state) var(--ease-app); }
.su-cursor[data-state="magnet"] .su-cursor__head::after { transform: scale(1.5); }
.su-cursor__dot, .su-cursor__head { opacity: 0; transition: opacity var(--dur-state) var(--ease-app); }
.su-cursor:is([data-state="tracking"], [data-state="magnet"]) :is(.su-cursor__dot, .su-cursor__head) { opacity: 1; }
.su-cursor [data-magnet] { transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-cursor[data-state="off"] .su-cursor__layer > :not(.su-cursor__glow) { display: none; }
.su-cursor__readout { font-variant-numeric: tabular-nums; }
/* ============ Tilt Card ============ */
.su-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.su-tilt :has([data-depth]) { transform-style: preserve-3d; } /* depth layers keep their 3D all the way up to the card */
.su-tilt[data-state="rest"] { transition: transform var(--dur-layout) var(--ease-app); }
.su-tilt[data-state="pressed"] { transition: transform var(--dur-press, 120ms) var(--ease-app); }
.su-tilt__glare { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity var(--dur-state) var(--ease-app); }
.su-tilt__glare::before { content: ""; position: absolute; inset: -50%; mix-blend-mode: screen; transform: translate(var(--su-gx, 0%), var(--su-gy, 0%));
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-app-surface) 55%, transparent), transparent 70%); }
.su-tilt:is([data-state="tilting"], [data-state="pressed"]) .su-tilt__glare { opacity: .8; }
.su-tilt__gyro { position: absolute; right: 8px; bottom: 8px; padding: 4px 9px; border: 0; border-radius: var(--radius-pill); font: 500 11.5px/1.3 var(--font-sans);
  background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring), var(--shadow-md); cursor: pointer; }
.su-tilt__gyro:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-tilt__pass { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; width: min(300px, 100%); aspect-ratio: 1.6; padding: 16px 18px; border-radius: 16px;
  background: radial-gradient(110% 120% at 100% 0%, var(--color-app-accent-hover), transparent 60%), var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white));
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.12); font-family: var(--font-sans); }
.su-tilt__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.su-tilt__row:first-child { align-items: flex-start; }
.su-tilt__k { margin: 0; font-size: 11px; opacity: .8; color: inherit; }
.su-tilt__k[data-caps] { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.su-tilt__v { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: inherit; }
.su-tilt__name { margin: 2px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: inherit; }
/* ============ Scroll Animation ============ */
/* hidden state only once JS set data-reveal-ready (never with reduced motion / no JS); transform + opacity only = no layout shift */
.su-reveal[data-reveal-ready] :is([data-reveal=""], [data-reveal="up"], [data-reveal="fade"], [data-reveal="scale"]) {
  transition: opacity var(--dur-layout) var(--ease-app), transform var(--dur-layout) var(--ease-app); }
.su-reveal[data-reveal-ready] :is([data-reveal=""], [data-reveal="up"], [data-reveal="fade"], [data-reveal="scale"]):not([data-in]) { opacity: 0; }
.su-reveal[data-reveal-ready] :is([data-reveal=""], [data-reveal="up"]):not([data-in]) { transform: translateY(16px); }
.su-reveal[data-reveal-ready] [data-reveal="scale"]:not([data-in]) { transform: scale(.94); }
.su-reveal__bar { position: sticky; top: 0; z-index: 2; height: 2px; background: var(--color-app-accent); transform-origin: 0 50%; transform: scaleX(var(--su-reveal-p, 0)); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .su-reveal[data-scroller="self"] .su-reveal__bar { animation: su-reveal-bar linear both; animation-timeline: scroll(nearest block); }
}
@keyframes su-reveal-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.su-reveal__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px;
  background: var(--color-app-surface); box-shadow: 0 1px 0 var(--color-app-line); font-family: var(--font-sans); }
.su-reveal__head .su-reveal__bar { position: absolute; left: 0; right: 0; top: auto; bottom: -1px; }
.su-reveal__title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-app-ink); }
.su-reveal__hint { font-size: 12px; color: var(--color-app-muted); }
.su-reveal__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px; list-style: none; }
.su-reveal__item { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-reveal__date { flex: none; width: 44px; padding-top: 2px; font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-reveal__body { min-width: 0; }
.su-reveal__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--color-app-ink); }
.su-reveal__text { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--color-app-ink-2); }
/* ============ Mega Menu ============ */
.su-megamenu { position: relative; z-index: 5; font: 400 12.5px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-megamenu__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-megamenu__brand { margin-right: 8px; padding: 4px 2px; border-radius: 4px; font-weight: 700; color: var(--color-app-ink); text-decoration: none; }
.su-megamenu__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.su-megamenu__list > li { margin: 0; }
.su-megamenu__trigger, .su-megamenu__link { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: var(--radius-pill);
  color: var(--color-app-ink-2); cursor: pointer; transition: background var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-megamenu__trigger:hover, .su-megamenu__link:hover, .su-megamenu__trigger[aria-expanded="true"] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-megamenu__trigger[aria-expanded="true"] { font-weight: 600; }
.su-megamenu__trigger svg { width: 12px; height: 12px; transition: transform var(--dur-state) var(--ease-app); }
.su-megamenu__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.su-megamenu :is(.su-megamenu__trigger, .su-megamenu__link, .su-megamenu__brand, .su-megamenu__burger, .su-megamenu__card, .su-megamenu__promo):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-megamenu__burger { all: unset; display: none; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: var(--radius-ctrl); color: var(--color-app-ink); cursor: pointer; }
.su-megamenu__burger:hover { background: var(--color-app-hover); }
.su-megamenu__burger svg { width: 18px; height: 18px; }
/* wide: panels float under the bar over one shared backdrop whose height morphs between panels */
.su-megamenu__stage { position: absolute; left: 0; right: 0; top: calc(100% + 6px); height: 0; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: height var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app); }
.su-megamenu__stage[data-show] { opacity: 1; }
.su-megamenu[data-layout="compact"] .su-megamenu__stage { display: none; }
.su-megamenu__panel { position: absolute; z-index: 1; left: 0; right: 0; top: calc(100% + 6px); box-sizing: border-box; padding: 10px; opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-state) var(--ease-app), transform var(--dur-state) var(--ease-app); }
.su-megamenu__panel[data-switch] { transform: none; }
.su-megamenu__panel[data-show] { opacity: 1; transform: none; }
.su-megamenu__cols { display: flex; flex-wrap: wrap; gap: 8px; }
.su-megamenu__col { flex: 1 1 300px; min-width: 0; }
.su-megamenu__heading { margin: 0; padding: 4px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-megamenu__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.su-megamenu__card { display: flex; gap: 10px; padding: 8px; border-radius: var(--radius-ctrl); color: inherit; text-decoration: none; transition: background var(--dur-hover) var(--ease-app); }
.su-megamenu__card:hover { background: var(--color-app-hover); }
.su-megamenu__icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-ctrl); background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-megamenu__icon svg { width: 16px; height: 16px; }
.su-megamenu__title { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-app-ink); }
.su-megamenu__desc { display: block; font-size: 11.5px; line-height: 1.4; color: var(--color-app-muted); }
.su-megamenu__promo { flex: 1 1 160px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 120px; padding: 12px; border-radius: var(--radius-ctrl);
  background: var(--color-app-accent-soft); color: var(--color-app-ink); text-decoration: none; }
.su-megamenu__promo .su-chip { align-self: flex-start; }
.su-megamenu__promo:hover .su-megamenu__title { text-decoration: underline; }
/* compact: menu button + accordion (set by JS below a 900px viewport or a nav narrower than 600px) */
.su-megamenu[data-layout="compact"] .su-megamenu__burger { display: grid; }
.su-megamenu[data-layout="compact"] .su-megamenu__list { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 2px; }
.su-megamenu[data-layout="compact"][data-menu-open] .su-megamenu__list { display: flex; }
.su-megamenu[data-layout="compact"] :is(.su-megamenu__trigger, .su-megamenu__link) { display: flex; width: 100%; justify-content: space-between; padding: 9px 10px; border-radius: var(--radius-ctrl); font-size: 13px; }
.su-megamenu[data-layout="compact"] .su-megamenu__panel { position: static; padding: 2px 0 8px 8px; opacity: 1; transform: none; transition: none; }
.su-megamenu[data-layout="compact"] .su-megamenu__links { grid-template-columns: 1fr; }
.su-megamenu[data-layout="compact"] .su-megamenu__col, .su-megamenu[data-layout="compact"] .su-megamenu__promo { flex-basis: 100%; }
.su-megamenu[data-layout="compact"] .su-megamenu__promo { min-height: 0; }
/* ============ Diff Viewer ============ */
.su-diff { --su-diff-mono: ui-monospace, SFMono-Regular, Menlo, monospace; container: su-diff / inline-size; display: grid; gap: 10px; box-sizing: border-box;
  width: 100%; min-width: 0; max-width: 100%; font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-diff__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.su-diff__sum { font-size: 12.5px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-diff__sum [data-tone="add"], .su-diff__n[data-tone="add"] { color: var(--color-app-ok-deep); font-weight: 600; }
.su-diff__sum [data-tone="del"], .su-diff__n[data-tone="del"] { color: var(--color-app-crit-deep); font-weight: 600; }
.su-diff__seg .su-seg__opt { padding: 6px 12px; font-size: 12.5px; }
.su-diff__files { display: grid; gap: 12px; min-width: 0; }
.su-diff__file { min-width: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); }
.su-diff__h { margin: 0; font: inherit; color: var(--color-app-ink); }
.su-diff__head { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 9px 12px; border: 0;
  background: var(--color-app-tray); box-shadow: inset 0 -1px 0 var(--color-app-line); font: inherit; color: var(--color-app-ink); text-align: left; cursor: pointer; }
.su-diff__file[data-collapsed] .su-diff__head { box-shadow: none; }
.su-diff__head:hover { background: var(--color-app-hover); }
.su-diff__head:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-diff__chev, .su-diff__icon { display: grid; flex: none; color: var(--color-app-muted); }
.su-diff__chev svg { width: 14px; height: 14px; transition: transform var(--dur-state) var(--ease-app); }
.su-diff__file[data-collapsed] .su-diff__chev svg { transform: rotate(-90deg); }
.su-diff__icon svg { width: 16px; height: 16px; }
.su-diff__path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.4 var(--su-diff-mono); color: var(--color-app-ink); }
.su-diff__n { flex: none; font: 600 12px/1 var(--su-diff-mono); }
.su-diff__bars { display: flex; flex: none; gap: 2px; }
.su-diff__bars > span { width: 7px; height: 7px; border-radius: 1px; background: var(--color-app-line-strong); }
.su-diff__bars > [data-tone="add"] { background: var(--color-app-ok); }
.su-diff__bars > [data-tone="del"] { background: var(--color-app-crit); }
.su-diff__body { overflow: hidden; transition: height var(--dur-state) var(--ease-app); }
.su-diff__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.su-diff__table { width: 100%; min-width: max-content; border-collapse: collapse; table-layout: auto; font: 400 11.5px/1.75 var(--su-diff-mono); color: var(--color-app-ink); }
:where(.su-diff__table) td { padding: 0; vertical-align: top; }
.su-diff__cn { width: 38px; } .su-diff__cs { width: 18px; }
.su-diff__num { min-width: 30px; padding: 0 6px 0 4px; text-align: right; color: var(--color-app-muted); font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none; white-space: nowrap; }
.su-diff__table[data-layout="unified"] .su-diff__num + .su-diff__num, .su-diff__table[data-layout="split"] .su-diff__num { box-shadow: inset -1px 0 0 var(--color-app-line); }
.su-diff__sign { position: relative; width: 18px; text-align: center; color: var(--color-app-muted); -webkit-user-select: none; user-select: none; }
.su-diff__code { padding-right: 12px; white-space: pre; }
.su-diff__table[data-layout="split"] .su-diff__code { width: 50%; }
.su-diff__table[data-layout="split"] .su-diff__code + .su-diff__num { box-shadow: inset 1px 0 0 var(--color-app-line), inset -1px 0 0 var(--color-app-line); }
.su-diff__row[data-tone="add"], .su-diff__table td[data-tone="add"] { background: var(--color-app-ok-soft); }
.su-diff__row[data-tone="del"], .su-diff__table td[data-tone="del"] { background: var(--color-app-crit-soft); }
.su-diff__table td[data-empty] { background: var(--color-app-sunk); }
.su-diff__row[data-tone="add"] .su-diff__sign, .su-diff__sign[data-tone="add"] { color: var(--color-app-ok-deep); }
.su-diff__row[data-tone="del"] .su-diff__sign, .su-diff__sign[data-tone="del"] { color: var(--color-app-crit-deep); }
.su-diff__word { border-radius: 2px; color: inherit; }
[data-tone="add"] > .su-diff__word, [data-tone="add"] .su-diff__word { background: color-mix(in srgb, var(--color-app-ok) 34%, transparent); }
[data-tone="del"] > .su-diff__word, [data-tone="del"] .su-diff__word { background: color-mix(in srgb, var(--color-app-crit) 30%, transparent); }
.su-diff__hunk td { padding: 3px 12px; background: var(--color-app-sunk); color: var(--color-app-ink-2); box-shadow: inset 0 1px 0 var(--color-app-line), inset 0 -1px 0 var(--color-app-line); white-space: pre; }
.su-diff__fold td { padding: 0; background: var(--color-app-tray); box-shadow: inset 0 1px 0 var(--color-app-line), inset 0 -1px 0 var(--color-app-line); }
.su-diff__expand { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: 0; padding: 0 12px; border: 0; background: none;
  font: 500 11.5px/1 var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; }
.su-diff__expand:hover { color: var(--color-app-accent); }
.su-diff__expand:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; border-radius: 6px; }
.su-diff__expand svg { width: 13px; height: 13px; transition: transform var(--dur-state) var(--ease-app); }
.su-diff__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.su-diff__cbtn { position: absolute; top: 2px; left: 50%; display: grid; place-items: center; width: 18px; height: 18px; margin: 0 0 0 -9px; padding: 0; border: 0;
  border-radius: 5px; background: var(--color-app-accent); color: var(--color-app-on-accent); cursor: pointer; opacity: 0; transition: opacity var(--dur-hover) var(--ease-app); }
.su-diff__cbtn svg { width: 12px; height: 12px; }
.su-diff__row:hover .su-diff__cbtn, .su-diff__cbtn:focus { opacity: 1; }
.su-diff__cbtn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
@media (hover: none) { .su-diff__cbtn { opacity: .55; } }
.su-diff__thread td { padding: 0; background: var(--color-app-tray); box-shadow: inset 0 1px 0 var(--color-app-line), inset 0 -1px 0 var(--color-app-line); }
.su-diff__thread-in { position: sticky; left: 0; display: grid; gap: 8px; box-sizing: border-box; width: min(100cqi, 560px); padding: 10px 12px; font: 400 12.5px/1.5 var(--font-sans); white-space: normal; }
.su-diff__comment { display: flex; gap: 8px; }
.su-diff__av { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-app-accent-soft); color: var(--color-app-accent); font: 600 11px/1 var(--font-sans); }
.su-diff__ctext { min-width: 0; }
.su-diff__who { font-weight: 600; color: var(--color-app-ink); }
.su-diff__msg { margin: 0; color: var(--color-app-ink-2); overflow-wrap: anywhere; }
.su-diff__compose { display: grid; gap: 6px; }
.su-diff__ta { height: auto; min-height: 56px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; resize: vertical; }
.su-diff__actions { display: flex; justify-content: flex-end; gap: 6px; }
@container su-diff (max-width: 420px) { .su-diff__bars { display: none; } }
/* ============ Product Tour ============ */
.su-tour { display: contents; }
.su-tour__layer { position: fixed; inset: 0; z-index: 2147483000; box-sizing: border-box; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; overflow: visible; pointer-events: none; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-tour__block { position: absolute; pointer-events: auto; }
.su-tour__spot { position: absolute; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--color-app-accent), 0 0 0 6px var(--color-app-accent-soft), 0 0 0 200vmax rgba(0, 0, 0, .45); }
.su-tour__layer[data-ready] .su-tour__spot { transition: left var(--dur-layout) var(--ease-app), top var(--dur-layout) var(--ease-app),
  width var(--dur-layout) var(--ease-app), height var(--dur-layout) var(--ease-app); }
@media (prefers-reduced-motion: no-preference) { .su-tour__spot { animation: su-tour-pulse 1.8s var(--ease-app) infinite; } }
@keyframes su-tour-pulse { 50% { box-shadow: 0 0 0 2px var(--color-app-accent), 0 0 0 10px var(--color-app-accent-soft), 0 0 0 200vmax rgba(0, 0, 0, .45); } }
.su-tour__card { position: absolute; left: 0; top: 0; box-sizing: border-box; width: min(300px, calc(100% - 16px)); padding: 14px; border-radius: 12px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-lg); pointer-events: auto; outline: none; }
.su-tour__card:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-tour__card[data-side^="dock"] { width: calc(100% - 16px); }
.su-tour__layer[data-ready] .su-tour__card { transition: transform var(--dur-layout) var(--ease-app); }
.su-tour__arrow { position: absolute; width: 10px; height: 10px; background: var(--color-app-surface); transform: rotate(45deg); }
.su-tour__card[data-side="bottom"] .su-tour__arrow { top: -5px; left: calc(var(--su-tour-arrow, 30px) - 5px); }
.su-tour__card[data-side="top"] .su-tour__arrow { bottom: -5px; left: calc(var(--su-tour-arrow, 30px) - 5px); }
.su-tour__card[data-side="right"] .su-tour__arrow { left: -5px; top: calc(var(--su-tour-arrow, 30px) - 5px); }
.su-tour__card[data-side="left"] .su-tour__arrow { right: -5px; top: calc(var(--su-tour-arrow, 30px) - 5px); }
.su-tour__card[data-side^="dock"] .su-tour__arrow { display: none; }
.su-tour__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.su-tour__count { font-variant-numeric: tabular-nums; }
.su-tour__x { margin: -4px -6px 0 auto; }
.su-tour__title { margin: 0 0 4px; font: 600 14px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-tour__text { margin: 0; font: 400 13px/1.5 var(--font-sans); color: var(--color-app-ink-2); }
.su-tour__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 14px; }
.su-tour__dots { display: flex; gap: 4px; margin-right: auto; }
.su-tour__dots > span { width: 6px; height: 6px; border-radius: 3px; background: var(--color-app-line-strong); }
.su-tour__dots > [data-on] { width: 14px; background: var(--color-app-accent); }
/* ============ Form Builder ============ */
.su-formbuilder { container: su-formbuilder / inline-size; box-sizing: border-box; width: 100%; min-width: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 13px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-formbuilder__in { display: grid; grid-template-columns: minmax(130px, 160px) minmax(0, 1fr) minmax(200px, 250px); min-width: 0; }
.su-formbuilder__palette { display: grid; align-content: start; gap: 2px; padding: 10px; background: var(--color-app-tray); box-shadow: inset -1px 0 0 var(--color-app-line); }
.su-formbuilder__ptitle { margin: 0; padding: 2px 8px 6px; font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-formbuilder__types { display: grid; gap: 2px; }
.su-formbuilder__type { display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 32px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; background: transparent;
  font: 500 12.5px/1 var(--font-sans); color: var(--color-app-ink-2); text-align: left; cursor: grab; -webkit-user-select: none; user-select: none;
  transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-formbuilder__type:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-formbuilder__type:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-formbuilder__ticon { display: flex; color: var(--color-app-muted); }
.su-formbuilder__ticon svg { width: 14px; height: 14px; }
.su-formbuilder__ghost { position: fixed; z-index: 2147483000; left: 0; top: 0; background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring-card), var(--shadow-lg);
  pointer-events: none; cursor: grabbing; }
.su-formbuilder__canvas { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 14px; }
.su-formbuilder__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.su-formbuilder__title { flex: 1 1 140px; min-width: 0; margin: 0; font: 600 13.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-formbuilder__mode svg { width: 14px; height: 14px; }
.su-formbuilder__list { position: relative; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.su-formbuilder__field { position: relative; display: flex; align-items: flex-start; gap: 4px; min-width: 0; padding: 6px; border-radius: var(--radius-ctrl);
  background: var(--color-app-surface); box-shadow: inset 0 0 0 1px var(--color-app-line); transition: box-shadow var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-formbuilder[data-dropping] .su-formbuilder__field, .su-sortable[data-dragging] > .su-formbuilder__field:not([data-lifted]), .su-formbuilder__list[data-dragging] > .su-formbuilder__field:not([data-lifted]) {
  transition: transform var(--dur-state) var(--ease-app); }
.su-formbuilder__field[data-selected] { background: var(--color-app-accent-soft); box-shadow: 0 0 0 1.5px var(--color-app-accent); }
.su-formbuilder__field[data-lifted] { z-index: 2; box-shadow: 0 0 0 1px var(--color-app-line-strong), var(--shadow-lg); }
.su-formbuilder__field[data-grabbed] { z-index: 1; box-shadow: 0 0 0 2px var(--color-app-accent), var(--shadow-lg); }
@media (prefers-reduced-motion: no-preference) { .su-formbuilder__field[data-new] { animation: su-formbuilder-in var(--dur-state) var(--ease-app); } }
@keyframes su-formbuilder-in { from { opacity: 0; transform: translateY(-4px); } }
.su-formbuilder__handle { flex: none; display: grid; place-items: center; width: 24px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none;
  fill: var(--color-app-muted); cursor: grab; touch-action: none; }
.su-formbuilder__handle svg { width: 10px; height: 14px; }
.su-formbuilder__handle:hover, .su-formbuilder__handle[aria-pressed="true"] { background: var(--color-app-hover); fill: var(--color-app-ink); }
.su-formbuilder__handle:focus-visible, .su-formbuilder__main:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-formbuilder__main { flex: 1; display: grid; gap: 6px; min-width: 0; margin: 0; padding: 4px; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.su-formbuilder__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-formbuilder__req { color: var(--color-app-crit-deep); }
.su-formbuilder__mock { display: flex; align-items: center; justify-content: space-between; gap: 6px; box-sizing: border-box; height: 28px; min-width: 0; padding: 0 8px; overflow: hidden;
  border-radius: 6px; background: var(--color-app-surface); box-shadow: var(--shadow-ring); font-size: 12px; color: var(--color-app-muted); white-space: nowrap; }
.su-formbuilder__mock svg { flex: none; width: 13px; height: 13px; }
.su-formbuilder__mock[data-type="checkbox"] { justify-content: flex-start; height: auto; padding: 0; background: none; box-shadow: none; color: var(--color-app-ink-2); }
.su-formbuilder__box { flex: none; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--color-app-line-strong); }
.su-formbuilder__del { flex: none; color: var(--color-app-muted); }
.su-formbuilder__del:hover { color: var(--color-app-crit-deep); }
.su-formbuilder__drop { display: grid; place-items: center; min-height: 64px; padding: 10px; border-radius: var(--radius-ctrl); box-shadow: inset 0 0 0 1.5px var(--color-app-line-strong);
  border: 0; outline: 1.5px dashed var(--color-app-line-strong); outline-offset: -1.5px; font-size: 12.5px; color: var(--color-app-muted); text-align: center;
  transition: background-color var(--dur-hover) var(--ease-app), outline-color var(--dur-hover) var(--ease-app); }
.su-formbuilder[data-over] .su-formbuilder__drop { outline-color: var(--color-app-accent); background: var(--color-app-accent-soft); color: var(--color-app-ink); }
.su-formbuilder__ind { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 2px; border-radius: 2px; background: var(--color-app-accent); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-app); }
.su-formbuilder__ind[data-show] { opacity: 1; }
.su-formbuilder__json { border-radius: var(--radius-ctrl); background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-formbuilder__json > summary { padding: 7px 10px; font: 600 12px/1.3 var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; }
.su-formbuilder__json > summary:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; border-radius: var(--radius-ctrl); }
.su-formbuilder__code { max-height: 220px; margin: 0; padding: 0 10px 10px; overflow: auto; font: 400 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); }
.su-formbuilder__form { display: grid; gap: 12px; }
.su-formbuilder__form .su-input { width: 100%; box-sizing: border-box; }
.su-formbuilder__ta { height: auto; padding: 10px 12px; line-height: 1.4; resize: vertical; }
.su-formbuilder__pcheck { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-app-ink); }
.su-formbuilder__pcheck input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-app-accent); }
.su-formbuilder__pfoot { display: flex; justify-content: flex-end; }
.su-formbuilder__panel { display: grid; align-content: start; gap: 12px; min-width: 0; margin: 0; padding: 10px 12px 14px; box-shadow: inset 1px 0 0 var(--color-app-line); }
.su-formbuilder__panel .su-formbuilder__ptitle { padding: 2px 0 0; }
.su-formbuilder__pbody { display: grid; gap: 12px; }
.su-formbuilder__pbody .su-input { width: 100%; box-sizing: border-box; height: 34px; font-size: 13px; }
.su-formbuilder__pbody .su-select__trigger { height: 34px; font-size: 13px; }
.su-formbuilder__opts.su-input { height: auto; padding: 8px 12px; line-height: 1.45; resize: vertical; }
.su-formbuilder__req-row { padding: 0; }
.su-formbuilder__hint { margin: 0; font-size: 12.5px; color: var(--color-app-muted); }
.su-formbuilder__remove { justify-self: start; color: var(--color-app-crit-deep); }
@container su-formbuilder (max-width: 719px) {
  .su-formbuilder__in { grid-template-columns: minmax(0, 1fr); }
  .su-formbuilder__palette { box-shadow: inset 0 -1px 0 var(--color-app-line); }
  .su-formbuilder__types { display: flex; flex-wrap: wrap; gap: 6px; }
  .su-formbuilder__type { background: var(--color-app-surface); box-shadow: var(--shadow-ring); cursor: pointer; }
  .su-formbuilder__panel { box-shadow: inset 0 1px 0 var(--color-app-line); }
}
/* ============ Query Builder ============ */
.su-query { container: su-query / inline-size; display: grid; gap: 12px; box-sizing: border-box; width: 100%; min-width: 0; padding: 14px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 400 13px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-query__tree { min-width: 0; }
.su-query__group { display: grid; gap: 8px; min-width: 0; }
.su-query__group .su-query__group { padding: 10px; border-radius: var(--radius-ctrl); background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-query__group[data-invalid] { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
.su-query__ghead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--color-app-ink-2); }
.su-query__gtag { font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-query__rmg { margin-left: auto; color: var(--color-app-muted); }
.su-query__rules { display: grid; gap: 8px; min-width: 0; }
.su-query__group[data-depth="1"] > .su-query__rules { padding-left: 12px; box-shadow: inset 2px 0 0 var(--color-app-accent); }
.su-query__rules:empty { display: none; }
.su-query__empty { margin: 0; font-size: 12.5px; color: var(--color-app-muted); }
.su-query__group[data-invalid] > .su-query__empty { color: var(--color-app-crit-deep); }
.su-query__rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.su-query__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.su-query__acts { display: inline-flex; gap: 2px; }
.su-query__acts .su-iconbtn { color: var(--color-app-muted); }
.su-query__rm:hover, .su-query__rmg:hover { color: var(--color-app-crit-deep); }
.su-query__err { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--color-app-crit-deep); }
.su-query .su-select__trigger { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.su-query__field { width: 128px; } .su-query__op { width: 96px; } .su-query__comb { width: 132px; }
.su-query__opbox, .su-query__val { display: contents; }
.su-query__venum { width: 140px; }
.su-query__in.su-input { box-sizing: border-box; width: 140px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.su-query__in[type="number"] { font-variant-numeric: tabular-nums; }
.su-query .su-datepicker__field { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.su-query :is(.su-query__in, .su-select__trigger, .su-datepicker__field)[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
.su-query__gfoot { display: flex; flex-wrap: wrap; gap: 4px; }
.su-query__out { display: grid; gap: 8px; }
.su-query__summary { margin: 0; padding: 8px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-tray); font-size: 12.5px; line-height: 1.5; color: var(--color-app-ink-2); overflow-wrap: anywhere; }
.su-query__summary[data-invalid] { color: var(--color-app-crit-deep); }
.su-query__json { border-radius: var(--radius-ctrl); box-shadow: inset 0 0 0 1px var(--color-app-line); }
.su-query__json > summary { padding: 6px 10px; font: 600 12px/1.3 var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; }
.su-query__json > summary:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; border-radius: var(--radius-ctrl); }
.su-query__code { max-height: 220px; margin: 0; padding: 0 10px 10px; overflow: auto; font: 400 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); }
.su-query__rule[data-enter], .su-query__group[data-enter] { animation: su-query-in var(--dur-state) var(--ease-app); }
@keyframes su-query-in { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 160px; } }
.su-query [data-leaving] { overflow: hidden; opacity: 0; transition: height var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app); }
@container su-query (max-width: 559px) {
  .su-query__rule { flex-direction: column; align-items: stretch; }
  .su-query__ctl { flex-direction: column; align-items: stretch; }
  .su-query__field, .su-query__op, .su-query__venum, .su-query__in.su-input { width: 100%; }
  .su-query .su-query__vdate, .su-query .su-query__vdate .su-datepicker__field { width: 100%; }
  .su-query__acts { justify-content: flex-end; }
  .su-query__group[data-depth="1"] > .su-query__rules > .su-query__rule + .su-query__rule { padding-top: 8px; box-shadow: inset 0 1px 0 var(--color-app-line); }
}
/* ============ Minimap ============ */
.su-minimap { container: su-minimap / inline-size; box-sizing: border-box; width: 176px; max-width: 100%; padding: 6px; border-radius: 10px;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-lg); font: 400 11px/1.3 var(--font-sans); color: var(--color-app-ink-2); }
.su-minimap__cap { margin: 0 2px 6px; font-size: 11px; color: var(--color-app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-minimap__map { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--color-app-tray); overflow: hidden; cursor: crosshair; }
.su-minimap__blocks { position: absolute; inset: 0; pointer-events: none; }
.su-minimap__block { position: absolute; min-width: 2px; min-height: 2px; border-radius: 2px; background: var(--color-app-line-strong); }
.su-minimap__block[data-accent] { background: var(--color-app-accent); opacity: .55; }
.su-minimap__vp { position: absolute; box-sizing: border-box; min-width: 6px; min-height: 6px; border-radius: 3px; cursor: grab; touch-action: none; outline: none;
  background: color-mix(in srgb, var(--color-app-accent) 14%, transparent); box-shadow: 0 0 0 1.5px var(--color-app-accent);
  transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-minimap__vp:hover { box-shadow: 0 0 0 2px var(--color-app-accent); }
.su-minimap__vp:focus-visible { box-shadow: 0 0 0 2px var(--color-app-accent), 0 0 0 4px var(--color-app-focus); }
.su-minimap[data-dragging] .su-minimap__vp { cursor: grabbing; box-shadow: 0 0 0 2px var(--color-app-accent); }
.su-minimap__bar { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.su-minimap__bar[hidden] { display: none; }
.su-minimap__bar .su-iconbtn { --s: 24px; --i: 13px; }
.su-minimap__pct { flex: 1; min-width: 0; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-app-ink-2); }

/* ============ Model Viewer 3D ============ */
.su-model3d { container: su-model3d / inline-size; box-sizing: border-box; width: min(420px, 100%); border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink-2); }
.su-model3d__stage { position: relative; height: 230px; overflow: hidden; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  background: radial-gradient(60% 70% at 50% 45%, var(--color-app-surface), var(--color-app-tray)); }
.su-model3d[data-interacting] .su-model3d__stage { cursor: grabbing; }
.su-model3d:not([data-state="ready"]) .su-model3d__stage { cursor: default; }
.su-model3d__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-model3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.su-model3d__canvas[data-off] { visibility: hidden; }
.su-model3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity var(--dur-state) var(--ease-app); }
.su-model3d__poster[data-off] { opacity: 0; pointer-events: none; }
.su-model3d__shadow { position: absolute; left: 50%; top: 66%; width: 160px; height: 34px; margin-left: -80px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .16), transparent); }
.su-model3d__axes { position: absolute; left: 10px; bottom: 10px; width: 40px; height: 40px; pointer-events: none; }
.su-model3d__axes [data-axis="x"] { stroke: var(--color-app-crit); }
.su-model3d__axes [data-axis="y"] { stroke: var(--color-app-ok); }
.su-model3d__axes [data-axis="z"] { stroke: var(--color-app-accent); }
.su-model3d:not([data-state="ready"]) .su-model3d__axes { display: none; }
.su-model3d__tris { position: absolute; right: 10px; top: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); font-size: 11px; line-height: 18px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; pointer-events: none; }
.su-model3d__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px;
  text-align: center; background: color-mix(in srgb, var(--color-app-surface) 55%, transparent); color: var(--color-app-ink-2); }
.su-model3d__overlay[hidden] { display: none; }
.su-model3d__overlay .su-spin { width: 22px; height: 22px; color: var(--color-app-accent); }
.su-model3d__msg { max-width: 30ch; margin: 0; padding: 6px 10px; border-radius: var(--radius-ctrl); background: var(--color-app-surface);
  font: 500 12.5px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-model3d__msg:empty { display: none; }
.su-model3d:is([data-state="error"], [data-state="unsupported"]) .su-model3d__msg { color: var(--color-app-crit-deep); box-shadow: var(--shadow-ring); }
.su-model3d__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--color-app-line); }
.su-model3d__bar .su-iconbtn[aria-pressed="true"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-model3d__name { flex: 1 1 80px; min-width: 0; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--color-app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-model3d .su-seg { --pad: 2px; }
.su-model3d .su-seg__opt { padding: 5px 10px; font-size: 11.5px; }
.su-model3d__views { display: flex; align-items: center; gap: 8px; padding: 0 10px 10px; }
.su-model3d__vlabel { font-size: 11px; font-weight: 600; color: var(--color-app-ink-label); }
@container su-model3d (max-width: 359px) {
  .su-model3d__stage { height: 200px; }
  .su-model3d__name { order: 5; flex-basis: 100%; margin: 2px 0 0; }
  .su-model3d__shade { margin-left: auto; }
  .su-model3d .su-seg__opt { padding: 5px 8px; }
}

/* ============ Markdown Editor ============ */
.su-mdeditor { container: su-mdeditor / inline-size; box-sizing: border-box; width: min(520px, 100%); min-width: 0; overflow: hidden;
  border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring); font-family: var(--font-sans); color: var(--color-app-ink);
  transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-mdeditor:focus-within { box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-mdeditor__head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-bottom: 1px solid var(--color-app-line); background: var(--color-app-tray); }
.su-mdeditor__tabs { position: relative; flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--color-app-sunk); }
.su-mdeditor__pill { position: absolute; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: 5px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); pointer-events: none; }
.su-mdeditor[data-ready] .su-mdeditor__pill { transition: transform var(--dur-state) var(--ease-app), width var(--dur-state) var(--ease-app); }
.su-mdeditor__tab { position: relative; z-index: 1; padding: 3px 10px; border: 0; border-radius: 5px; background: none; cursor: pointer;
  font: 500 12.5px/1.4 var(--font-sans); color: var(--color-app-muted); transition: color var(--dur-hover) var(--ease-app); }
.su-mdeditor__tab:hover, .su-mdeditor__tab[aria-selected="true"] { color: var(--color-app-ink); }
.su-mdeditor__tab[aria-selected="true"] { font-weight: 600; }
.su-mdeditor__tab:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
/* toolbar scrolls sideways when it does not fit (320px) — the auto margin right-aligns it only while there is room */
.su-mdeditor__toolbar { display: flex; gap: 1px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.su-mdeditor__toolbar::-webkit-scrollbar { display: none; }
.su-mdeditor__toolbar > :first-child { margin-left: auto; }
.su-mdeditor__tool { flex: none; display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: 700 13px/1 var(--font-sans); color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-mdeditor__tool:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-mdeditor__tool:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-mdeditor__tool[aria-disabled="true"] { opacity: .4; cursor: default; background: transparent; }
.su-mdeditor__tool[data-cmd="italic"] { font-style: italic; font-weight: 500; font-family: Georgia, serif; }
.su-mdeditor__tool[data-cmd="heading"] { font-weight: 600; }
.su-mdeditor__tool svg { width: 14px; height: 14px; stroke-width: 2; }
.su-mdeditor__body { display: grid; min-width: 0; }
.su-mdeditor__panel { min-width: 0; }
.su-mdeditor__panel:not([data-on]) { display: none; }
.su-mdeditor__ta { display: block; box-sizing: border-box; width: 100%; min-height: 160px; margin: 0; padding: 12px 14px; border: 0; outline: 0; resize: vertical;
  background: transparent; color: var(--color-app-ink); font: 400 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.su-mdeditor__ta::placeholder { color: var(--color-app-muted); }
.su-mdeditor__preview { box-sizing: border-box; min-height: 160px; max-height: 380px; overflow: auto; padding: 12px 14px; outline: none; overflow-wrap: anywhere;
  font: 400 13.5px/1.6 var(--font-sans); color: var(--color-app-ink); }
.su-mdeditor__preview:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-mdeditor__preview > :first-child { margin-top: 0; }
.su-mdeditor__preview > :last-child { margin-bottom: 0; }
.su-mdeditor__preview :is(h1, h2, h3, h4, h5, h6) { margin: 14px 0 6px; font-family: var(--font-sans); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--color-app-ink); }
.su-mdeditor__preview h1 { font-size: 20px; }
.su-mdeditor__preview h2 { font-size: 17px; }
.su-mdeditor__preview h3 { font-size: 15px; }
.su-mdeditor__preview :is(h4, h5, h6) { font-size: 13.5px; }
.su-mdeditor__preview :is(p, ul, ol, blockquote, pre) { margin: 0 0 10px; }
.su-mdeditor__preview :is(ul, ol) { padding-left: 22px; }
.su-mdeditor__preview li + li, .su-mdeditor__preview li > :is(ul, ol) { margin-top: 2px; }
.su-mdeditor__preview li > :is(ul, ol) { margin-bottom: 0; }
.su-mdeditor__preview li:has(> input[type="checkbox"]) { list-style: none; margin-left: -20px; }
.su-mdeditor__preview li > input[type="checkbox"] { width: 14px; height: 14px; margin: 0 4px 0 0; vertical-align: -2px; accent-color: var(--color-app-accent); }
.su-mdeditor__preview a { color: var(--color-app-accent); text-decoration: underline; text-underline-offset: 2px; }
.su-mdeditor__preview strong { font-weight: 700; color: var(--color-app-ink); }
.su-mdeditor__preview code { padding: 1px 5px; border-radius: 5px; background: var(--color-app-tray); color: var(--color-app-ink); font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.su-mdeditor__preview pre { padding: 10px 12px; overflow-x: auto; border-radius: 8px; background: var(--color-app-tray); }
.su-mdeditor__preview pre code { padding: 0; background: none; white-space: pre; }
.su-mdeditor__preview blockquote { padding: 2px 0 2px 12px; border-left: 3px solid var(--color-app-line-strong); color: var(--color-app-ink-2); }
.su-mdeditor__preview hr { height: 1px; margin: 12px 0; border: 0; background: var(--color-app-line); }
.su-mdeditor__preview .su-mdeditor__empty { color: var(--color-app-muted); }
.su-mdeditor__foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 14px; border-top: 1px solid var(--color-app-line);
  font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
/* data-preview="split": write and preview side by side once the editor is at least 900px wide */
@container su-mdeditor (min-width: 900px) {
  .su-mdeditor[data-preview="split"] .su-mdeditor__body { grid-template-columns: 1fr 1fr; }
  .su-mdeditor[data-preview="split"] .su-mdeditor__panel { display: block; }
  .su-mdeditor[data-preview="split"] .su-mdeditor__panel + .su-mdeditor__panel { border-left: 1px solid var(--color-app-line); }
  .su-mdeditor[data-preview="split"] .su-mdeditor__tabs { display: none; }
  .su-mdeditor[data-preview="split"] .su-mdeditor__tool[aria-disabled="true"] { opacity: 1; cursor: pointer; }
}
/* ============ Comment Thread ============ */
.su-thread { box-sizing: border-box; width: min(460px, 100%); min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-thread__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.su-thread__kicker { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-app-ink-label); }
.su-thread__anchor { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--color-app-ink-2); }
.su-thread__status { flex: none; margin-left: auto; }
.su-thread__done { display: none; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-app-ink-2); }
.su-thread__done[data-on] { display: flex; }
/* resolve folds the conversation away (grid rows 1fr → 0fr) */
.su-thread__fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-layout) var(--ease-app), opacity var(--dur-layout) var(--ease-app); }
.su-thread[data-status="resolved"] .su-thread__fold { grid-template-rows: 0fr; opacity: 0; }
.su-thread[data-status="resolved"] .su-thread__inner { overflow: hidden; } /* open: visible, so the @mention menu is never clipped */
.su-thread__inner { min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 3px; margin: -3px; }
.su-thread__list, .su-thread__replies { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.su-thread__replies { position: relative; margin-top: 12px; }
.su-thread__replies::before { content: ""; position: absolute; left: 11px; top: -6px; bottom: 14px; width: 1px; background: var(--color-app-line); }
.su-thread__replies > .su-thread__item { padding-left: 34px; }
.su-thread__item[data-new] > .su-thread__c { animation: su-rise var(--dur-layout) var(--ease-app); }
.su-thread__c { display: flex; gap: 10px; min-width: 0; }
.su-thread__main { flex: 1; min-width: 0; }
.su-thread__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.su-thread__name { font-weight: 600; color: var(--color-app-ink); }
.su-thread__meta time, .su-thread__edited { font-size: 11.5px; color: var(--color-app-muted); }
.su-thread__body { margin-top: 2px; color: var(--color-app-ink-2); overflow-wrap: anywhere; }
.su-thread__body .su-mention__token, .su-thread__area .su-mention__token { padding: 0 3px; }
.su-thread__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.su-thread__rx { display: contents; }
.su-thread__react { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-app-tray); box-shadow: inset 0 0 0 1px var(--color-app-line); font: 500 11.5px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app), box-shadow var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-thread__react:hover { background: var(--color-app-hover); }
.su-thread__react[aria-pressed="true"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); box-shadow: inset 0 0 0 1px var(--color-app-accent); }
.su-thread__add { display: grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-app-muted); cursor: pointer; }
.su-thread__add:hover, .su-thread__add[aria-expanded="true"] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-thread__add svg { width: 14px; height: 14px; }
.su-thread__act { height: 22px; padding: 0 4px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: 500 11.5px/1 var(--font-sans); color: var(--color-app-muted);
  transition: color var(--dur-hover) var(--ease-app); }
.su-thread__act:hover { color: var(--color-app-ink); }
.su-thread :is(.su-thread__react, .su-thread__add, .su-thread__act, .su-thread__emoji):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-thread__pick { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  animation: su-rise var(--dur-state) var(--ease-app); }
.su-thread__emoji { display: grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; font-size: 13px; cursor: pointer; }
.su-thread__emoji:hover { background: var(--color-app-hover); }
.su-thread__composer { position: relative; display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-thread__composer:focus-within, .su-thread__edit .su-thread__area:focus { box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-thread__composer[data-inline] { margin: 10px 0 0 34px; animation: su-rise var(--dur-state) var(--ease-app); }
.su-thread__area { position: relative; flex: 1; min-width: 0; min-height: 20px; max-height: 140px; overflow-y: auto; padding: 6px 0; outline: none; overflow-wrap: anywhere;
  font: 400 13px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-thread__area[data-empty]::before { content: attr(data-placeholder); position: absolute; color: var(--color-app-muted); pointer-events: none; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
.su-thread__composer [data-send][aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.su-thread__composer .su-btn { flex: none; }
.su-thread__edit { margin-top: 4px; display: grid; gap: 6px; }
.su-thread__edit .su-thread__area { padding: 6px 10px; border-radius: 8px; box-shadow: var(--shadow-ring); }
.su-thread__editbar { display: flex; justify-content: flex-end; gap: 6px; }
/* ============ Usage Meter ============ */
.su-usage { box-sizing: border-box; width: min(400px, 100%); min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-usage__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.su-usage__titles { min-width: 0; }
.su-usage__title { display: block; font-weight: 600; color: var(--color-app-ink); }
.su-usage__reset { display: block; font-size: 12px; color: var(--color-app-muted); }
.su-usage__row { display: flex; flex-direction: column; gap: 6px; }
.su-usage__line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.su-usage__label { min-width: 0; font-weight: 500; color: var(--color-app-ink); }
.su-usage__val { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-usage__val b { font-weight: 600; }
.su-usage__val span { color: var(--color-app-muted); }
.su-usage__bar { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-app-tray); }
.su-usage__fill { display: block; height: 100%; border-radius: inherit; background: var(--color-app-accent); transform-origin: left; transform: scaleX(var(--p));
  transition: transform var(--dur-layout) var(--ease-app), background-color var(--dur-state) var(--ease-app); }
.su-usage:not([data-in]) .su-usage__fill { transform: scaleX(0); } /* bars fill on first view */
.su-usage__help { font-size: 11.5px; color: var(--color-app-muted); }
.su-usage__row[data-level="warn"] .su-usage__fill { background: var(--color-app-warn); }
.su-usage__row[data-level="warn"] .su-usage__help { color: var(--color-app-warn-deep); }
.su-usage__row:is([data-level="crit"], [data-level="over"]) .su-usage__fill { background: var(--color-app-crit); }
.su-usage__row:is([data-level="crit"], [data-level="over"]) .su-usage__help { color: var(--color-app-crit-deep); }
.su-usage__row[data-level="over"] .su-usage__val b { color: var(--color-app-crit-deep); }
.su-usage__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-app-line); }
/* ============ Transfer List ============ */
.su-transfer { container: su-transfer / inline-size; box-sizing: border-box; width: min(600px, 100%); min-width: 0; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-transfer__grid { display: flex; gap: 8px; align-items: stretch; }
.su-transfer__pane { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-transfer__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--color-app-line); background: var(--color-app-tray); }
.su-transfer__all { position: relative; display: grid; flex: none; cursor: pointer; }
.su-transfer__all .su-check__input { left: 0; top: 0; width: 16px; height: 16px; }
.su-transfer__all .su-check__box { margin: 0; }
.su-transfer__all:has(input:disabled) { opacity: .45; cursor: default; }
.su-transfer__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); }
.su-transfer__search { padding: 6px 6px 2px; }
.su-transfer__q.su-input { box-sizing: border-box; width: 100%; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.su-transfer__list { box-sizing: border-box; min-height: 120px; max-height: 240px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; outline: none;
  display: grid; gap: 1px; align-content: start; }
.su-transfer__list:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.su-transfer__opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; user-select: none;
  font: 400 13px/1.35 var(--font-sans); color: var(--color-app-ink); transition: background-color var(--dur-hover) var(--ease-app); }
.su-transfer__opt:hover { background: var(--color-app-hover); }
.su-transfer__list:focus-visible .su-transfer__opt[data-active] { background: var(--color-app-hover); box-shadow: inset 0 0 0 1.5px var(--color-app-focus); }
.su-transfer__opt .su-check__box { margin: 0; }
.su-transfer :is(.su-transfer__opt[aria-selected="true"], .su-transfer__all:has(input:checked), .su-transfer__all:has(input:indeterminate)) .su-check__box { background: var(--color-app-accent); box-shadow: none; }
.su-transfer__opt[aria-selected="true"] .su-check__tick, .su-transfer__all:has(input:checked:not(:indeterminate)) .su-check__tick { stroke-dashoffset: 0; }
.su-transfer__all:has(input:indeterminate) .su-check__dash { opacity: 1; }
.su-transfer__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.su-transfer__opt[data-new] { animation: su-transfer-in var(--dur-state) var(--ease-app); }
@keyframes su-transfer-in { from { opacity: 0; transform: translateX(var(--su-transfer-from, -8px)); } }
.su-transfer__pane[data-side="0"] .su-transfer__opt[data-new] { --su-transfer-from: 8px; }
.su-transfer__empty { margin: 0; padding: 4px 12px 12px; font: 400 12px/1.4 var(--font-sans); color: var(--color-app-muted); }
.su-transfer__moves { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.su-transfer__moves .su-btn { width: 32px; padding: 0; }
.su-transfer__moves .su-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: var(--shadow-ring); }
.su-transfer__moves .su-btn[aria-disabled="true"][data-variant="primary"] { background: var(--color-app-tray); color: var(--color-app-muted); }
/* under 560px the panes stack and the arrows point down / up */
@container su-transfer (max-width: 559px) {
  .su-transfer__grid { flex-direction: column; }
  .su-transfer__pane { flex: none; }
  .su-transfer__moves { flex-direction: row; }
  .su-transfer__moves svg { transform: rotate(90deg); }
  .su-transfer__list { max-height: 200px; }
}
/* ============ Phone Input ============ */
.su-phone { position: relative; box-sizing: border-box; display: grid; gap: 6px; width: min(320px, 100%); min-width: 0; font-family: var(--font-sans); }
.su-phone__box { position: relative; min-width: 0; }
.su-phone__field.su-input__wrap { padding-left: 0; gap: 0; }
.su-phone__cc { position: relative; flex: none; display: flex; align-items: center; gap: 6px; align-self: stretch; margin: 1px 0 1px 1px; padding: 0 8px 0 9px; border-radius: 9px 0 0 9px; /* inside the wrap's inset ring */ cursor: pointer; outline: none;
  background: var(--color-app-tray); box-shadow: inset -1px 0 0 var(--color-app-line); font: 400 13.5px/1 var(--font-sans); color: var(--color-app-ink);
  font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; transition: background-color var(--dur-hover) var(--ease-app); }
.su-phone__cc:hover { background: var(--color-app-hover); }
.su-phone__cc:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-phone__cc > svg { width: 12px; height: 12px; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-phone__cc[aria-expanded="true"] > svg { transform: rotate(180deg); }
.su-phone__flag { font-size: 15px; line-height: 1; }
.su-phone__cc--native { padding: 0; }
.su-phone__select { appearance: none; -webkit-appearance: none; align-self: stretch; height: 100%; margin: 0; padding: 0 24px 0 10px; border: 0; outline: 0; cursor: pointer;
  background: transparent; font: 400 13.5px/1 var(--font-sans); color: var(--color-app-ink); }
.su-phone__select:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-phone__cc--native > svg { position: absolute; right: 8px; pointer-events: none; }
.su-phone__in { padding: 0 10px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.su-phone__icon { padding-right: 12px; }
.su-phone__icon:empty { display: none; }
.su-phone__menu { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); box-sizing: border-box; width: min(260px, 100%); max-height: 240px; overflow-y: auto; margin: 0; padding: 6px;
  list-style: none; border-radius: 12px; background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); animation: su-mention-in var(--dur-state) var(--ease-app); }
.su-phone__menu [role="option"] { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font: 400 13.5px/1.2 var(--font-sans); color: var(--color-app-ink); }
.su-phone__menu [role="option"][data-active] { background: var(--color-app-hover); }
.su-phone__menu [role="option"][aria-selected="true"] { font-weight: 600; }
.su-phone__name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.su-phone__code { flex: none; font-size: 12.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-phone .su-field__err { margin: 0; font: 400 12px/1.4 var(--font-sans); }
/* ============ Cascader ============ */
.su-cascader { position: relative; box-sizing: border-box; display: grid; gap: 6px; width: min(380px, 100%); min-width: 0; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-cascader__trigger { display: flex; align-items: center; gap: 6px; box-sizing: border-box; width: 100%; height: 36px; min-width: 0; padding: 0 10px; border: 0; cursor: pointer; text-align: left;
  border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring); font: 400 13.5px/1 var(--font-sans); color: var(--color-app-ink);
  transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-cascader__trigger:hover { box-shadow: inset 0 0 0 1px var(--color-app-muted); }
.su-cascader__trigger:focus-visible, .su-cascader__trigger[aria-expanded="true"] { outline: none; box-shadow: 0 0 0 1px var(--color-app-accent), 0 0 0 3px var(--color-app-accent-soft); }
.su-cascader__value { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.4; }
.su-cascader__sep, .su-cascader__ph { color: var(--color-app-muted); }
.su-cascader__trigger > svg { flex: none; width: 16px; height: 16px; color: var(--color-app-muted); transition: transform var(--dur-state) var(--ease-app); }
.su-cascader__trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.su-cascader__panel { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); box-sizing: border-box; width: max-content; min-width: 100%; max-width: min(640px, calc(100vw - 32px));
  overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-lg);
  animation: su-mention-in var(--dur-state) var(--ease-app); }
.su-cascader__search { padding: 6px 6px 2px; }
.su-cascader__q.su-input { box-sizing: border-box; width: 100%; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.su-cascader__cols { display: flex; overflow-x: auto; scroll-snap-type: x proximity; } /* depth > 4 scrolls sideways */
.su-cascader__col { flex: none; box-sizing: border-box; width: 150px; max-height: 260px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; display: grid; gap: 1px; align-content: start;
  scroll-snap-align: end; border-right: 1px solid var(--color-app-line); }
.su-cascader__col:last-child { border-right: 0; }
.su-cascader__col[data-new] { animation: su-casc-in var(--dur-state) var(--ease-app); }
@keyframes su-casc-in { from { opacity: 0; transform: translateX(-8px); } }
.su-cascader__opt { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 8px; border-radius: 6px; cursor: pointer; outline: none;
  font: 400 13px/1.35 var(--font-sans); color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app); }
.su-cascader__opt:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-cascader__opt[aria-selected="true"] { background: var(--color-app-accent-soft); color: var(--color-app-ink); font-weight: 600; }
.su-cascader__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-cascader__opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: none; }
.su-cascader__opt > svg { flex: none; width: 12px; height: 12px; color: var(--color-app-muted); }
.su-cascader__text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.su-cascader__loading, .su-cascader__none { padding: 8px; font: 400 12.5px/1.3 var(--font-sans); color: var(--color-app-muted); }
.su-cascader__results { max-height: 260px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; }
.su-cascader__results [role="option"] { padding: 7px 8px; border-radius: 6px; cursor: pointer; font: 400 13px/1.35 var(--font-sans); color: var(--color-app-ink-2); }
.su-cascader__results [role="option"][data-active] { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-cascader__results mark { background: none; color: var(--color-app-accent); font-weight: 700; }
.su-cascader__nav { padding: 4px 4px 0; }
.su-cascader__back { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 30px; padding: 0 8px 0 4px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: 600 12.5px/1 var(--font-sans); color: var(--color-app-ink); }
.su-cascader__back:hover { background: var(--color-app-hover); }
.su-cascader__back:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-cascader__back svg { flex: none; width: 14px; height: 14px; }
.su-cascader__back span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* < 480px: one drill-down list at a time with a back button */
.su-cascader[data-narrow] .su-cascader__panel { width: 100%; max-width: none; }
.su-cascader[data-narrow] .su-cascader__col { display: none; width: 100%; border-right: 0; }
.su-cascader[data-narrow] .su-cascader__col[data-current] { display: grid; }
/* ============ Calendar Scheduler ============ */
.su-cal { container: su-cal / inline-size; --slot: 22px; box-sizing: border-box; width: min(720px, 100%); min-width: 0; padding: 14px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  font: 400 13px/1.45 var(--font-sans); color: var(--color-app-ink); }
.su-cal__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; min-width: 0; }
.su-cal__head { flex: 1 1 160px; min-width: 0; }
.su-cal__title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--color-app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-cal__sub { margin: 0; font-size: 12px; color: var(--color-app-muted); }
.su-cal__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.su-cal__nav { position: relative; display: flex; align-items: center; gap: 2px; }
.su-cal__ib { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-ctrl); background: transparent; cursor: pointer;
  color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-cal__ib:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-cal__ib:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-cal__ib svg { width: 16px; height: 16px; }
.su-cal__today { height: 28px; }
.su-cal .su-cal__jump { position: static; display: inline-flex; }
.su-cal .su-cal__jump .su-datepicker__field { width: 28px; height: 28px; min-width: 0; padding: 0; box-shadow: none; background: transparent; }
.su-cal .su-cal__jump .su-datepicker__field:hover { background: var(--color-app-hover); }
.su-cal__seg { font-size: 12px; }
.su-cal__new { width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; }
.su-cal__grid { position: relative; display: grid; grid-template-columns: 40px repeat(var(--cols, 5), minmax(0, 1fr)); grid-template-rows: auto repeat(var(--rows, 20), var(--slot));
  min-width: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.su-cal__grid[data-mode="month"] { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--rows, 5), minmax(64px, auto)); }
.su-cal__row { display: contents; }
.su-cal__corner { display: block; }
.su-cal__dh { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 6px; font-size: 10.5px; color: var(--color-app-muted); min-width: 0; }
.su-cal__dn { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-cal__dh[aria-current="date"] { color: var(--color-app-accent); font-weight: 600; }
.su-cal__dh[aria-current="date"] .su-cal__dn { background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-cal__time { position: relative; padding-right: 6px; font-size: 10px; text-align: right; color: var(--color-app-muted); font-variant-numeric: tabular-nums; transform: translateY(-6px); white-space: nowrap; }
.su-cal__slot { position: relative; min-width: 0; border-left: 1px solid var(--color-app-line); outline: none; cursor: cell; }
.su-cal__slot[data-hour] { box-shadow: inset 0 1px 0 var(--color-app-line); }
.su-cal__slot[data-today] { background: var(--color-app-tray); }
.su-cal__slot:hover { background: var(--color-app-hover); }
.su-cal__slot:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); z-index: 3; }
.su-cal__slot[data-last] { border-bottom: 1px solid var(--color-app-line); }
.su-cal__ev { position: absolute; z-index: 1; top: calc(var(--top) * var(--slot) + 1px); height: calc(var(--len) * var(--slot) - 2px + var(--grow, 0px)); min-height: 12px;
  left: calc(var(--col) * 100% / var(--n) + 1px); width: calc(100% / var(--n) - 2px); box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch;
  padding: 2px 4px; overflow: hidden; border: 0; border-radius: 5px; text-align: left; cursor: grab; touch-action: none;
  font: 400 10.5px/1.3 var(--font-sans); background: var(--color-app-accent-soft); box-shadow: inset 2px 0 0 var(--color-app-accent); color: var(--color-app-ink);
  transition: box-shadow var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app); }
.su-cal__ev[data-type="key"] { background: var(--color-app-accent); box-shadow: none; color: var(--color-app-on-accent); }
.su-cal__ev[data-type="break"] { background: var(--color-app-tray); box-shadow: inset 2px 0 0 var(--color-app-line-strong); color: var(--color-app-ink-2); }
.su-cal__ev[data-type="focus"] { background: var(--color-app-surface); box-shadow: inset 0 0 0 1px var(--color-app-line-strong); color: var(--color-app-ink-2); }
.su-cal__ev:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; z-index: 4; }
.su-cal__ev[data-drag] { z-index: 5; cursor: grabbing; transition: none; box-shadow: var(--shadow-md); opacity: .95; }
.su-cal__evt { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-cal__evtime { opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.su-cal__ev[data-short] { padding-top: 1px; padding-bottom: 0; }
.su-cal__ev[data-short] .su-cal__evtime { display: none; }
.su-cal__rs { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.su-cal__rs::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 12px; height: 2px; margin-left: -6px; border-radius: 1px; background: currentColor; opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-app); }
.su-cal__ev:hover .su-cal__rs::after, .su-cal__ev:focus-visible .su-cal__rs::after { opacity: .5; }
.su-cal[data-dragging] .su-cal__slot:hover { background: none; }
.su-cal[data-dragging] .su-cal__slot[data-today]:hover { background: var(--color-app-tray); }
.su-cal__ghost { position: absolute; z-index: 2; left: 1px; right: 1px; top: calc(var(--top) * var(--slot) + 1px); height: calc(var(--len) * var(--slot) - 2px);
  box-sizing: border-box; padding: 2px 4px; border-radius: 5px; background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-app-accent), var(--shadow-md);
  font: 600 10.5px/1.3 var(--font-sans); color: var(--color-app-ink); font-variant-numeric: tabular-nums; pointer-events: none; overflow: hidden; }
.su-cal__now { position: absolute; z-index: 3; left: -3px; right: 0; top: calc(var(--at) * 100%); height: 2px; margin-top: -1px; grid-row: 2 / -1; background: var(--color-app-crit); pointer-events: none; }
.su-cal__now::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-app-crit); }
/* month view */
.su-cal__grid[data-mode="month"] .su-cal__dh { padding-bottom: 4px; }
.su-cal__mday { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 3px; box-sizing: border-box; border-top: 1px solid var(--color-app-line); outline: none; cursor: default; }
.su-cal__mday + .su-cal__mday { border-left: 1px solid var(--color-app-line); }
.su-cal__mday[data-out] .su-cal__mdn { color: var(--color-app-muted); }
.su-cal__mday:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-cal__mdn { align-self: flex-start; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; box-sizing: border-box; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 500; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-cal__mday[aria-current="date"] .su-cal__mdn { background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-cal__mev { display: block; min-width: 0; padding: 1px 4px; border: 0; border-radius: 4px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 10.5px/1.35 var(--font-sans); background: var(--color-app-accent-soft); color: var(--color-app-ink); }
.su-cal__mev[data-type="key"] { background: var(--color-app-accent); color: var(--color-app-on-accent); }
.su-cal__mev[data-type="break"], .su-cal__mev[data-type="focus"] { background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-cal__mev:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-cal__more { padding: 0 4px; font-size: 10.5px; color: var(--color-app-ink-2); }
/* hover card + dialog bits */
.su-cal__card { width: min(260px, calc(100vw - 32px)); }
.su-cal__cardmeta { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--color-app-ink-2); }
.su-cal__cardhint { margin-left: auto; font-size: 11px; color: var(--color-app-muted); }
.su-cal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-app-accent-soft); box-shadow: inset 0 0 0 2px var(--color-app-accent); }
.su-cal__dot[data-type="key"] { background: var(--color-app-accent); }
.su-cal__dot[data-type="break"] { background: var(--color-app-tray); box-shadow: inset 0 0 0 2px var(--color-app-line-strong); }
.su-cal__dot[data-type="focus"] { background: var(--color-app-surface); box-shadow: inset 0 0 0 1px var(--color-app-line-strong); }
.su-cal__frow { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; min-width: 0; }
.su-cal__frow .su-input { min-width: 0; padding: 0 8px; }
.su-cal__err { margin: 0; min-height: 1em; font-size: 12px; color: var(--color-app-crit-deep); }
.su-cal__err:empty { display: none; }
.su-cal__dlg .su-dialog__foot { flex-wrap: wrap; }
.su-cal__gap { flex: 1; }
.su-btn.su-cal__del[data-variant] { color: var(--color-app-crit-deep); }
.su-cal__del[hidden] { display: none; }
@container su-cal (max-width: 520px) {
  .su-cal__tools { width: 100%; justify-content: space-between; }
  .su-cal__grid { grid-template-columns: 34px repeat(var(--cols, 5), minmax(0, 1fr)); }
  .su-cal__mday { padding: 2px 1px; }
  .su-cal__mev { padding: 1px 2px; font-size: 9.5px; }
  .su-cal__mev .su-cal__evtime { display: none; }
}
@container su-cal (max-width: 360px) { .su-cal__frow { grid-template-columns: 1fr 1fr; } .su-cal__frow > :first-child { grid-column: 1 / -1; } }
/* ============ Video Player ============ */
.su-video { container: su-video / inline-size; position: relative; box-sizing: border-box; width: min(560px, 100%); min-width: 0; margin: 0; overflow: hidden;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; outline: none; cursor: pointer;
  background: radial-gradient(120% 90% at 80% 10%, var(--color-app-accent-soft), transparent 60%), radial-gradient(90% 70% at 10% 100%, var(--color-app-ok-soft), transparent 65%), var(--color-app-tray); }
.su-video__frame:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.su-video__top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none;
  transition: opacity var(--dur-state) var(--ease-app); }
.su-video__chap { min-width: 0; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card);
  font-size: 12px; font-weight: 500; color: var(--color-app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-video__chap[hidden] { display: none; }
.su-video__badge { margin-left: auto; padding: 2px 7px; border-radius: 6px; background: var(--color-app-surface); font-size: 11px; font-weight: 600; color: var(--color-app-ink-2); }
.su-video__big { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0 0 0 3px; border: 0; border-radius: 50%;
  background: var(--color-app-accent); color: var(--color-app-on-accent); box-shadow: 0 0 0 8px var(--color-app-accent-soft), var(--shadow-lg); cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-app), opacity var(--dur-state) var(--ease-app); }
.su-video__big:hover { transform: scale(1.06); }
.su-video__big svg { width: 20px; height: 20px; }
.su-video[data-state="ended"] .su-video__big { padding: 0; }
.su-video[data-state="playing"] .su-video__big, .su-video[data-buffering] .su-video__big, .su-video[data-error] .su-video__big { opacity: 0; pointer-events: none; }
.su-video__spin { position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; color: var(--color-app-accent); pointer-events: none; }
.su-video__spin .su-spin { width: 24px; height: 24px; }
.su-video__spin[hidden] { display: none; }
.su-video__title { position: absolute; left: 12px; bottom: 10px; max-width: calc(100% - 24px); padding: 2px 8px; border-radius: 6px; background: var(--color-app-surface); box-sizing: border-box;
  font-size: 12px; color: var(--color-app-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity var(--dur-state) var(--ease-app); }
.su-video[data-state="playing"] .su-video__title { opacity: 0; }
.su-video__cc { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 3px 10px; border-radius: 6px; box-sizing: border-box;
  background: var(--color-app-ink); color: var(--color-app-surface); font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; white-space: pre-line; }
.su-video__cc[hidden] { display: none; }
.su-video:not([data-state="playing"]) .su-video__title ~ .su-video__cc { bottom: 40px; } /* clear the title chip while paused */
.su-video__err { position: absolute; inset: auto 12px 50% 12px; transform: translateY(50%); margin: 0; padding: 8px 12px; border-radius: 8px; text-align: center;
  background: var(--color-app-crit-soft); color: var(--color-app-crit-deep); font-size: 13px; font-weight: 500; }
.su-video__err[hidden] { display: none; }
.su-video[data-idle] .su-video__top, .su-video[data-idle] .su-video__cc { opacity: 0; }
.su-video[data-idle] .su-video__frame { cursor: none; }
.su-video__bar { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 4px; background: var(--color-app-surface); transition: opacity var(--dur-state) var(--ease-app); }
.su-video__scrub { position: relative; height: 16px; border-radius: 4px; outline: none; cursor: pointer; touch-action: none; }
.su-video__scrub:focus-visible { box-shadow: 0 0 0 2px var(--color-app-focus); }
.su-video__track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; overflow: hidden; background: var(--color-app-line); }
.su-video__buf > span { position: absolute; top: 0; bottom: 0; background: var(--color-app-line-strong); }
.su-video__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--color-app-accent); }
.su-video__ticks > span { position: absolute; top: 50%; width: 2px; height: 6px; margin: -3px 0 0 -1px; border-radius: 1px; background: var(--color-app-surface); pointer-events: none; }
.su-video__thumb { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--color-app-accent);
  box-shadow: 0 0 0 3px var(--color-app-accent-soft); pointer-events: none; transition: transform var(--dur-hover) var(--ease-app); }
.su-video__scrub:hover .su-video__thumb, .su-video[data-scrubbing] .su-video__thumb { transform: scale(1.2); }
.su-video__tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  background: var(--color-app-ink); color: var(--color-app-surface); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.su-video__tip[hidden] { display: none; }
.su-video__row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.su-video__btn { flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-ctrl); background: none; cursor: pointer;
  color: var(--color-app-ink); font: 600 12px/1 var(--font-sans); transition: background-color var(--dur-hover) var(--ease-app); }
.su-video__btn:hover { background: var(--color-app-hover); }
.su-video__btn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 0; }
.su-video__btn svg { width: 18px; height: 18px; }
.su-video__btn[hidden] { display: none; }
.su-video__btn[aria-pressed="true"] { color: var(--color-app-accent); }
.su-video__rate { padding: 0 6px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-video__vol { flex: 0 1 72px; min-width: 40px; height: 14px; margin: 0 4px; accent-color: var(--color-app-accent); cursor: pointer; }
.su-video__time { margin-left: 4px; font-size: 12px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-video__dur { color: var(--color-app-muted); }
.su-video__sp { flex: 1; min-width: 4px; }
.su-video__menu { min-width: 150px; }
.su-video[data-fullscreen] { width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
.su-video[data-fullscreen] .su-video__frame { flex: 1; aspect-ratio: auto; }
.su-video[data-fullscreen] .su-video__bar { position: absolute; left: 0; right: 0; bottom: 0; box-shadow: var(--shadow-md); }
.su-video[data-fullscreen][data-idle] .su-video__bar { opacity: 0; }
@container su-video (max-width: 420px) {
  .su-video__vol { display: none; } /* volume collapses into mute (↑ / ↓ still change it) */
  .su-video__pipbtn { display: none; } /* picture-in-picture stays in the right-click menu */
  .su-video__time { font-size: 11.5px; margin-left: 2px; }
  .su-video__btn { min-width: 28px; }
  .su-video__chap { font-size: 11.5px; }
}
@container su-video (max-width: 300px) { .su-video__btn { min-width: 26px; } .su-video__time { margin-left: 0; } }
/* ============ Audio Player ============ */
.su-audio { container: su-audio / inline-size; box-sizing: border-box; width: min(380px, 100%); min-width: 0; padding: 14px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-audio__head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.su-audio__cover { flex: none; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 10px;
  background: linear-gradient(135deg, var(--color-app-accent), var(--color-app-warn)); color: var(--color-app-on-accent); }
.su-audio__cover svg { width: 20px; height: 20px; }
.su-audio__cover img { width: 100%; height: 100%; object-fit: cover; }
.su-audio__meta { flex: 1; min-width: 0; }
.su-audio__title { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--color-app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-audio__show { margin: 0; font-size: 12px; color: var(--color-app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-audio__like, .su-audio__btn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer;
  color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-audio__like { width: 30px; height: 30px; }
.su-audio__like:hover, .su-audio__btn:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-audio__like svg { width: 16px; height: 16px; transition: transform var(--dur-state) var(--ease-app); }
.su-audio__like[aria-pressed="true"] { color: var(--color-app-crit); }
.su-audio__like[aria-pressed="true"] svg { fill: currentColor; transform: scale(1.1); }
.su-audio__btn { position: relative; }
.su-audio__btn svg { width: 18px; height: 18px; }
.su-audio__n { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); font-size: 7.5px; font-weight: 700; line-height: 1; }
.su-audio__wave { position: relative; display: block; height: 24px; margin-top: 14px; border-radius: 4px; outline: none; cursor: pointer; touch-action: none; }
.su-audio__wave:focus-visible { box-shadow: 0 0 0 2px var(--color-app-focus); outline-offset: 2px; }
.su-audio__bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.su-audio__bars > span { flex: 1; min-width: 1px; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--color-app-line-strong); }
.su-audio__bars--played > span { background: var(--color-app-accent); }
.su-audio__bars--played { clip-path: inset(0 100% 0 0); }
.su-audio__times { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-audio__ctrls { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.su-audio__play { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-app-accent); color: var(--color-app-on-accent); box-shadow: var(--shadow-md); transition: background-color var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app); }
.su-audio__play:hover { background: var(--color-app-accent-hover); }
.su-audio__play:active { transform: scale(.96); }
.su-audio__play > svg { width: 18px; height: 18px; animation: su-audio-morph var(--dur-state) var(--ease-app); }
@keyframes su-audio-morph { from { transform: scale(.6) rotate(-20deg); opacity: 0; } }
.su-audio[data-buffering] .su-audio__play > svg { opacity: 0; }
.su-audio__spin { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-app-on-accent); }
.su-audio__spin[hidden] { display: none; }
.su-audio__spin .su-spin { width: 18px; height: 18px; }
.su-audio__speed { position: absolute; right: 0; min-width: 44px; margin-left: 6px; padding: 3px 8px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-app-tray); font: 600 11px/1.3 var(--font-sans); color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; transition: background-color var(--dur-hover) var(--ease-app); }
.su-audio__speed:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-audio :is(.su-audio__like, .su-audio__btn, .su-audio__play, .su-audio__speed):focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-audio__err { margin: 8px 0 0; font-size: 12px; color: var(--color-app-crit-deep); text-align: center; }
.su-audio__err[hidden] { display: none; }
@container su-audio (max-width: 300px) {
  .su-audio__ctrls { justify-content: flex-start; gap: 6px; }
  .su-audio__cover { width: 44px; height: 44px; }
}
/* ============ Image Editor ============ */
.su-imgedit { container: su-imgedit / inline-size; box-sizing: border-box; width: min(560px, 100%); min-width: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-imgedit__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 12px; border-bottom: 1px solid var(--color-app-line); }
.su-imgedit__file { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--color-app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-imgedit__dim { font-weight: 400; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-imgedit__acts { flex: none; display: flex; align-items: center; gap: 4px; }
.su-imgedit__ib, .su-imgedit__tool { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-ctrl); background: transparent; cursor: pointer;
  color: var(--color-app-ink-2); transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-imgedit__ib:hover:not(:disabled), .su-imgedit__tool:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-imgedit__ib:disabled { opacity: .4; cursor: default; }
.su-imgedit__ib svg, .su-imgedit__tool svg { width: 16px; height: 16px; }
.su-imgedit__ib:focus-visible, .su-imgedit__tool:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-imgedit__tool[aria-pressed="true"] { background: var(--color-app-accent-soft); color: var(--color-app-accent); }
.su-imgedit__export .su-spin { width: 14px; height: 14px; }
.su-imgedit__body { display: flex; min-width: 0; }
.su-imgedit__rail { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-right: 1px solid var(--color-app-line); }
.su-imgedit__stage { position: relative; flex: 1 1 220px; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--color-app-tray); min-height: 200px; }
.su-imgedit__fit { --maxh: 280px; position: relative; overflow: hidden; aspect-ratio: var(--ar, 1.6); width: min(100%, calc(var(--maxh) * var(--ar, 1.6))); border-radius: 4px; touch-action: none; }
.su-imgedit__fit[hidden] { display: none; }
.su-imgedit[data-tool="crop"] .su-imgedit__fit { overflow: visible; } /* handles + dimmed surround reach past the image; the stage clips */
.su-imgedit__canvas { position: absolute; display: block; max-width: none; }
.su-imgedit__crop { position: absolute; box-sizing: border-box; outline: 1.5px solid var(--color-app-accent); box-shadow: 0 0 0 999px rgba(0, 0, 0, .38); cursor: move; touch-action: none; }
.su-imgedit__crop[hidden] { display: none; }
.su-imgedit__crop:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-imgedit__grid { position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background: linear-gradient(to right, transparent calc(33.333% - .5px), var(--color-app-on-accent) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), var(--color-app-on-accent) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), var(--color-app-on-accent) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), var(--color-app-on-accent) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)); }
.su-imgedit__h { position: absolute; width: 12px; height: 12px; box-sizing: border-box; background: var(--color-app-surface); border: 1.5px solid var(--color-app-accent); border-radius: 2px;
  transition: transform var(--dur-hover) var(--ease-app); }
.su-imgedit__h::before { content: ""; position: absolute; inset: -8px; } /* bigger hit area */
.su-imgedit__h[data-h="nw"] { left: -6px; top: -6px; cursor: nwse-resize; } .su-imgedit__h[data-h="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.su-imgedit__h[data-h="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; } .su-imgedit__h[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.su-imgedit__h:hover, .su-imgedit[data-dragging] .su-imgedit__h { transform: scale(1.25); }
.su-imgedit__dz { width: 100%; }
.su-imgedit__dz[hidden] { display: none; }
.su-imgedit__dz .su-dz__zone { background: var(--color-app-surface); }
.su-imgedit__spin { position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; color: var(--color-app-accent); }
.su-imgedit__spin[hidden] { display: none; }
.su-imgedit__spin .su-spin { width: 24px; height: 24px; }
.su-imgedit[data-over] .su-imgedit__stage { box-shadow: inset 0 0 0 2px var(--color-app-accent); }
.su-imgedit__panel { flex: 1 1 170px; min-width: 0; max-width: 220px; display: grid; gap: 14px; align-content: start; padding: 12px; border-left: 1px solid var(--color-app-line); }
.su-imgedit__sec { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.su-imgedit__sec[hidden] { display: none; }
.su-imgedit__label { margin: 0; padding: 0; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--color-app-ink-label); }
.su-imgedit__hint { margin: 0; font-size: 11px; line-height: 1.45; color: var(--color-app-ink-2); }
.su-imgedit__seg { justify-self: start; font-size: 12px; }
.su-imgedit .su-imgedit__sl { gap: 4px; }
.su-imgedit .su-imgedit__sl .su-slider__head { font-size: 11px; }
.su-imgedit__fx { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.su-imgedit__fx > legend { grid-column: 1 / -1; margin-bottom: 2px; }
.su-imgedit__preset { position: relative; display: grid; justify-items: center; gap: 3px; padding: 4px 2px; border-radius: 8px; cursor: pointer; font-size: 10.5px; color: var(--color-app-ink-2);
  transition: background-color var(--dur-hover) var(--ease-app); }
.su-imgedit__preset:hover { background: var(--color-app-hover); }
.su-imgedit__preset input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.su-imgedit__sw { width: 36px; height: 26px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--color-app-line);
  background: linear-gradient(160deg, var(--color-app-accent-soft) 0 45%, var(--color-app-warn) 45% 55%, var(--color-app-accent) 55% 75%, var(--color-app-ok) 75%); }
.su-imgedit__preset:has(input:checked) { color: var(--color-app-ink); font-weight: 600; }
.su-imgedit__preset:has(input:checked) .su-imgedit__sw { box-shadow: 0 0 0 2px var(--color-app-accent); }
.su-imgedit__preset:has(input:focus-visible) { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
@container su-imgedit (max-width: 540px) {
  .su-imgedit__body { flex-direction: column; }
  .su-imgedit__rail { order: 2; flex-direction: row; justify-content: space-around; border-right: 0; border-top: 1px solid var(--color-app-line); padding: 6px 8px; }
  .su-imgedit__stage { order: 1; flex: none; min-height: 160px; padding: 10px; }
  .su-imgedit__fit { --maxh: 240px; }
  .su-imgedit__panel { order: 3; max-width: none; border-left: 0; border-top: 1px solid var(--color-app-line); }
  .su-imgedit__head { padding: 8px 10px; }
}
@container su-imgedit (max-width: 340px) { .su-imgedit__acts { gap: 0; } .su-imgedit__acts .su-btn[data-act="reset"] { padding-inline: 6px; } }
/* ============ QR Code ============ */
/* The plate is always light with dark modules (scanners expect that), derived from the theme's own surface / ink tokens */
.su-qr { --su-qr-size: 184px; container: su-qr / inline-size; box-sizing: border-box; width: min(300px, 100%); min-width: 0; margin: 0 auto; padding: 16px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card), var(--shadow-md);
  text-align: center; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-qr__title { font: 600 13.5px/1.35 var(--font-sans); color: var(--color-app-ink); }
.su-qr__timer { margin-top: 2px; font: 400 12px/1.35 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-qr__timer[hidden], .su-qr__title[hidden] { display: none; }
.su-qr[data-state="expiring"] .su-qr__timer { color: var(--color-app-warn-deep); font-weight: 600; }
.su-qr[data-state="expired"] .su-qr__timer { color: var(--color-app-crit-deep); font-weight: 600; }
.su-qr__plate { position: relative; box-sizing: border-box; width: min(var(--su-qr-size), 100%); aspect-ratio: 1; margin: 12px auto 0; overflow: hidden;
  border-radius: 12px; background: var(--color-app-surface); background: oklch(from var(--color-app-surface) .985 .004 h); box-shadow: var(--shadow-ring); }
.su-qr__head + .su-qr__plate { margin-top: 12px; }
.su-qr__svg { display: block; width: 100%; height: 100%; transition: filter var(--dur-state) var(--ease-app), opacity var(--dur-state) var(--ease-app); }
.su-qr__mods { fill: var(--color-app-ink); fill: oklch(from var(--color-app-ink) .2 min(c, .03) h); }
.su-qr__logo { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 22%;
  background: var(--color-app-accent); color: var(--color-app-on-accent); font: 800 clamp(10px, 6cqi, 15px)/1 var(--font-sans);
  box-shadow: 0 0 0 2px oklch(from var(--color-app-surface) .985 .004 h); overflow: hidden; }
.su-qr__logo[hidden] { display: none; }
.su-qr[data-state="expired"] .su-qr__svg, .su-qr[data-state="expired"] .su-qr__logo { filter: blur(4px); opacity: .45; }
.su-qr__expired { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 8px; }
.su-qr__expired[hidden] { display: none; }
.su-qr__expired-text { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-app-surface); font: 600 12px/1.4 var(--font-sans); color: var(--color-app-ink); box-shadow: var(--shadow-ring); }
.su-qr__refresh > svg { width: 14px; height: 14px; }
.su-qr__link { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 4px 4px 10px; border-radius: var(--radius-ctrl);
  background: var(--color-app-tray); font: 400 12px/1.4 var(--font-sans); color: var(--color-app-ink-2); }
.su-qr__text { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-app-ink-2); }
.su-qr__dl { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.su-qr__dl .su-btn > svg { width: 14px; height: 14px; }
@container su-qr (max-width: 240px) { .su-qr__link { flex-wrap: wrap; padding: 6px; } .su-qr__text { flex-basis: 100%; text-align: center; } .su-qr__link .su-btn { margin-inline: auto; } }

/* ============ PDF Viewer ============ */
.su-pdf { container: su-pdf / inline-size; position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: min(760px, 100%); min-width: 0;
  height: var(--su-pdf-h, 520px); overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring-card), var(--shadow-md); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-pdf__head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px 2px; }
.su-pdf__ficon { flex: none; width: 16px; height: 16px; color: var(--color-app-crit); }
.su-pdf__name { flex: 1; min-width: 0; font: 600 12.5px/1.3 var(--font-sans); color: var(--color-app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-pdf__barwrap { min-width: 0; border-bottom: 1px solid var(--color-app-line); }
.su-pdf__bar { padding: 4px 8px 6px; }
.su-pdf__count { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 400 12px/1 var(--font-sans); color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-pdf__pagein { box-sizing: border-box; width: 38px; height: 26px; padding: 0 4px; border: 0; border-radius: 6px; background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); font: 500 12px/1 var(--font-sans); color: var(--color-app-ink); text-align: center; font-variant-numeric: tabular-nums; }
.su-pdf__pagein:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-pdf__of { white-space: nowrap; color: var(--color-app-ink-2); }
.su-pdf__pct { flex: none; min-width: 48px; padding-inline: 4px; font-variant-numeric: tabular-nums; }
.su-pdf__native-note { flex: 1; min-width: 0; padding-left: 4px; font: 400 12px/1.3 var(--font-sans); color: var(--color-app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-pdf__find { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--color-app-line); background: var(--color-app-tray); }
.su-pdf__find[hidden] { display: none; }
.su-pdf__q { flex: 1; min-width: 0; box-sizing: border-box; height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-surface);
  box-shadow: var(--shadow-ring); font: 400 12.5px/1 var(--font-sans); color: var(--color-app-ink); }
.su-pdf__q:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-pdf__hits { flex: none; min-width: 3.5em; font: 400 12px/1 var(--font-sans); color: var(--color-app-ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.su-pdf__body { flex: 1; display: flex; min-height: 0; }
.su-pdf__rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 84px; padding: 10px 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-app-tray); border-right: 1px solid var(--color-app-line); }
.su-pdf__rail[hidden] { display: none; }
.su-pdf__thumb { display: grid; justify-items: center; gap: 4px; flex: none; width: 64px; padding: 4px 0; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--color-app-muted); }
.su-pdf__thumb:hover { background: var(--color-app-hover); }
.su-pdf__thumb:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-pdf__tpage { display: block; width: 48px; overflow: hidden; border-radius: 3px; background: var(--color-app-surface); box-shadow: var(--shadow-ring); }
.su-pdf__tpage > canvas { display: block; width: 100%; height: 100%; }
.su-pdf__tpage > .su-skel { height: 100%; border-radius: 0; }
.su-pdf__tnum { font: 400 10.5px/1 var(--font-sans); color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-pdf__thumb[aria-current="page"] .su-pdf__tpage { box-shadow: 0 0 0 2px var(--color-app-accent); }
.su-pdf__thumb[aria-current="page"] .su-pdf__tnum { color: var(--color-app-ink); font-weight: 700; }
.su-pdf__view { position: relative; flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; background: var(--color-app-sunk); }
.su-pdf__view:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-pdf__pages { display: flex; flex-direction: column; align-items: center; gap: 12px; width: max-content; min-width: 100%; box-sizing: border-box; padding: 12px 16px; }
.su-pdf__page { position: relative; flex: none; overflow: hidden; border-radius: 2px; background: var(--color-app-surface); background: oklch(from var(--color-app-surface) .99 .004 h); box-shadow: var(--shadow-md); }
.su-pdf__sheet { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; }
.su-pdf__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.su-pdf__pskel { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; }
.su-pdf__page[data-ready] .su-pdf__pskel { display: none; }
/* text layer: invisible but selectable glyph runs over the canvas; marks are the highlight layer */
.su-pdf__text { position: absolute; inset: 0; line-height: 1; }
.su-pdf__text > span { position: absolute; white-space: pre; color: transparent; transform-origin: 0 0; cursor: text; font-family: sans-serif; }
.su-pdf__text > span::selection, .su-pdf__text mark::selection { background: color-mix(in srgb, var(--color-app-accent) 35%, transparent); }
.su-pdf__hit { border-radius: 2px; background: color-mix(in srgb, var(--color-app-warn) 45%, transparent); color: transparent; }
.su-pdf__hit[data-current] { background: color-mix(in srgb, var(--color-app-accent) 50%, transparent); box-shadow: 0 0 0 2px var(--color-app-accent); }
.su-pdf__native { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.su-pdf[data-mode="native"] .su-pdf__pages { width: 100%; height: 100%; padding: 0; }
.su-pdf__nativefb { margin: 24px 16px; font: 400 13px/1.5 var(--font-sans); color: var(--color-app-ink-2); text-align: center; }
.su-pdf__nativefb a { color: var(--color-app-accent); font-weight: 600; }
.su-pdf__loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--color-app-sunk); }
.su-pdf__loading[hidden], .su-pdf__error[hidden] { display: none; }
.su-pdf__ghost { display: grid; gap: 8px; align-content: start; box-sizing: border-box; width: min(220px, 60cqi); aspect-ratio: 612 / 792; padding: 20px 18px;
  border-radius: 2px; background: var(--color-app-surface); box-shadow: var(--shadow-md); }
.su-pdf__loadtext { font-size: 12px; }
.su-pdf__error { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; text-align: center; }
.su-pdf__errtext { margin: 0; font: 500 13px/1.5 var(--font-sans); color: var(--color-app-ink); }
.su-pdf__printframe { position: fixed; width: 0; height: 0; border: 0; visibility: hidden; }
@container su-pdf (max-width: 639px) { .su-pdf__rail { display: none; } }
@container su-pdf (max-width: 380px) { .su-pdf__head { padding-inline: 10px; } .su-pdf__bar { padding-inline: 4px; } .su-pdf__pages { padding: 8px; } }


/* ============ Reduced motion (C7) ============ */
@media (prefers-reduced-motion: reduce) {
  [class^="su-"], [class^="su-"] *, [class^="su-"]::before, [class^="su-"]::after { animation: none !important; transition: none !important; }
  .su-di__done path, .su-pt__box path, .su-step__done path, .su-chart__line { stroke-dashoffset: 0; }
  /* Dialog: opacity only (still animates, so close() keeps waiting for animationend) */
  .su-dialog[open] { animation: su-dlg-fade var(--dur-state) var(--ease-app) !important; }
  .su-dialog[data-closing] { animation: su-dlg-fade-out var(--dur-state) var(--ease-app) forwards !important; }
  .su-tip { transform: none; }

  .su-streamtext__caret { opacity: 1; }
  .su-kpi__card[aria-busy="true"] :is(.su-kpi__label, .su-kpi__value, .su-kpi__ctx) { background: var(--color-app-tray); }

  .su-toolcall__item::details-content { transition: none; }
  .su-toolcall__spin .su-spin { display: none; }
  .su-toolcall__spin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .su-prompt__send .su-spin { display: none; }
  .su-prompt__input { transition: none; } /* also when the author's textarea carries its own class first */
  .su-agentrun__spin .su-spin { display: none; }
  .su-agentrun__spin::before { content: ""; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: currentColor; }
  .su-iconbtn:active { transform: none; }
  .su-check__tick { transition: none; }
  .su-switch__ctl[aria-busy="true"]::before { animation: none; }
  /* Spinner: no rotation — a slow opacity pulse instead; data-delay still hides it for the first N ms (opacity, not motion) */
  .su-spinner .su-spin { animation: su-spinner-pulse 1.6s ease-in-out infinite !important; }
  .su-spinner[data-delay] { animation: su-spinner-in 1ms linear var(--su-spinner-delay, 300ms) both !important; }
  /* Progress: indeterminate = static 30% bar */
  .su-progress[data-indeterminate] .su-progress__fill { transform: none; }
  .su-skeleton__b::after { display: none; }
  .su-slider__input::-webkit-slider-thumb { transition: none; transform: none !important; }
  .su-slider__input::-moz-range-thumb { transition: none; transform: none !important; }
  .su-code__copy svg { transition: none; }
  .su-gauge__bar { transition: none; }
  .su-hovercard { transform: none; }
  .su-marquee__row { overflow-x: auto; mask-image: none; scrollbar-width: thin; }
  .su-marquee__track { animation: none; transform: none; }
  .su-marquee__toggle { display: none; }
  .su-testimonial__track { transition: none; }
  .su-menu__chev, .su-select__chev { transition: none; }
  /* Popover: opacity only (no translate) */
  .su-popover__panel[data-show] { animation: su-popover-fade var(--dur-state) var(--ease-app) !important; }
  /* Accordion: JS closes instantly (reduced()); Rating: bars at full width, no pop; Steps: connector jumps; Confetti: su.confetti() is a no-op */
  .su-rating__star[data-pop] svg { animation: none; }
  .su-confetti__badge { opacity: 1; transform: none; }
  /* Drawer: opacity only (still animates, so close() keeps waiting for animationend) */
  .su-drawer[open] { animation: su-dlg-fade var(--dur-state) var(--ease-app) !important; }
  .su-drawer[data-closing] { animation: su-dlg-fade-out var(--dur-state) var(--ease-app) forwards !important; }
  .su-carousel__viewport { scroll-behavior: auto; }
  .su-nav__panel { transform: none; }
  /* FAQ: accordion closes instantly (reduced()); Features: no hidden fade state; Ctx meter: no pulse, widths jump */
  .su-features__item { opacity: 1 !important; transform: none !important; }
  .su-ctxmeter[data-state="compacting"] .su-ctxmeter__bar { opacity: .7; }
  /* Voice Input: bars rest at mid height, no pulse ring, no caret blink (timer still runs) */
  .su-voice__wave i[data-on] { transform: scaleY(.5) !important; }
  .su-voice__ring { display: none; }
  /* Landing: every section visible at once (no fade-up); Checkout: success tick shown drawn; Product: image swap has no cross-fade (JS) */
  .su-landing .su-landing__main > section { opacity: 1 !important; transform: none !important; }
  .su-checkout__tick :is(circle, path) { stroke-dashoffset: 0; }
  /* Agent Inspector: running bars hold still at a dimmed opacity; Pivot / Kit: rows and colors change instantly */
  .su-agent [data-live] > .su-tree__row .su-agent__bar i { opacity: .7; }
  /* Org Chart: children appear without the slide, connectors without the draw-in */
  .su-org__node > .su-org__kids, .su-org[data-intro] :is(.su-org__kids, .su-org__node)::before, .su-org[data-intro] .su-org__node::after { animation: none !important; }
  .su-toolbar__select svg { transition: none; }
  .su-cart__line[data-leaving] { opacity: 0; }
  /* Document Editor: saving dot is a static dimmed dot; Gen UI: frames appear without fade/rise, skeleton without shimmer; Report Generator: tiles + bar jump */
  .su-doc__status[data-state="saving"] .su-doc__dot { opacity: .6; }
  .su-genui__frame[data-enter] { opacity: 1; transform: none; }
  /* Copy: icons swap instantly · Scroll Area: edge fades are scroll-linked, not motion, so they keep working · Thinking: static label + "…"
     Shimmer: static tray blocks (no sweep), .su-shimmer text becomes plain ink-2 text · Number Input: no nudge (C7 above) */
  @supports (animation-timeline: scroll()) {
    .su-scroll { animation: su-scroll-top linear both, su-scroll-bot linear both !important; animation-timeline: scroll(self), scroll(self) !important;
      animation-range: 0 var(--su-fade), calc(100% - var(--su-fade)) 100% !important; }
  }
  .su-shimmer { background: none; color: var(--color-app-ink-2); }
  .su-thinking[data-dots] .su-thinking__text::after { content: "…"; }
  .su-skel { background-image: none; }
  /* Avatar Group: no hover spread · Newsletter: success appears without fade · Password: ticks don't pop · Tags: no enter/exit scale (JS removes at once) */
  .su-avatars__stack:is(:hover, :focus-within, :has([aria-expanded="true"])) > * + * { margin-left: var(--ov); }
  .su-avatars__stack > .su-avatar:hover { transform: none; }
  /* FAB / Speed Dial: actions fade in together (no stagger, no rise), the + does not rotate, hide-on-scroll is a plain fade */
  .su-fab__list[data-show] .su-fab__action { animation: su-fab-fade var(--dur-state) var(--ease-app) both !important; animation-delay: 0s !important; }
  .su-fab__main[aria-expanded="true"] .su-fab__icon { rotate: none; }
  .su-fab[data-hidden] .su-fab__main { translate: none; }
  /* Timeline: current marker holds still (no pulse ring) */
  [data-state="current"] > .su-timeline__marker::before { display: none; }
  /* Range Slider: no thumb scale while dragging */
  .su-range__thumb[data-dragging] { transform: translate(-50%, -50%); }
  /* Gallery: captions / check / ring change instantly (C7 above) · Lightbox: no fade, FLIP or cross-fade (JS checks reduced()), zoom jumps */
  .su-dialog.su-lb[open], .su-dialog.su-lb[data-closing], .su-dialog.su-lb::backdrop { animation: none !important; }
  /* Logo Marquee: no loop, no clones (Marquee JS) — the logos wrap into a centred static grid instead of a scroll row */
  .su-logos .su-marquee__row { overflow: visible; mask-image: none; }
  .su-logos .su-marquee__track { width: auto; }
  .su-logos .su-marquee__group { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  /* Animated Background: the C7 rule above stops every layer, leaving the static first frame; Contact: success appears without the rise */
  .su-dock__item, .su-dock__sep { transform: none !important; } /* Dock: no magnify */
  .su-toc__ind { transition: none !important; } /* Table of Contents: indicator jumps */
  .su-device[data-tilt] { transform: none; } /* Device Mockup: no tilt */
  .su-art__float { animation: none !important; transform: none; } /* Illustration: still */
  .su-errorpage__art { animation: none !important; transform: none; } /* Error Page: static */
  /* Beams: streaks hidden, a static soft glow in the beam tint instead */
  .su-beams__beam { display: none; }
  .su-beams__layer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 35%, color-mix(in srgb, var(--su-beam-color) 22%, transparent), transparent 70%); }
  /* Border Beam: a full static ring, no lap */
  .su-beam::before { animation: none; background: color-mix(in srgb, var(--su-beam-color) 75%, transparent); } /* also when su-beam is not the first class */
  /* Spotlight: JS pins the glow to the centre; Text Animation: JS shows the final text at once, caret stays solid (C7 above);
     Comparison Slider: no handle scale; Knob: no hover glow fade, reset jumps (C7 above) */
  .su-beforeafter[data-dragging] .su-beforeafter__handle { transform: translate(-50%, -50%); }
  /* Scatter: points appear at once (C7 above stops the pop-in) */
  .su-scatter__pt { opacity: 1; transform: none; }
  /* Area Chart: area shown at once, line without draw-in (C7 above) */
  /* Radar: polygons drawn at full size at once, dimming without fade */
  .su-radar__series { transform: none; opacity: 1; }
  .su-radar[data-focus] .su-radar__series:not([data-on]) { opacity: .18; }
  /* Bullet: bars at their value at once (no grow) */
  .su-bullet[data-su-ready]:not([data-in]) .su-bullet__actual { transform: none; }
  /* Icon Set: stroke width and selection change instantly (C7 above) */
  /* Heatmap: cells shown at once (no column fade) */
  .su-heatmap__cell { opacity: 1; }
  .su-float[data-gliding] { transition: none; } /* Floating Panel: snap jumps (JS also skips the glide) */
  .su-share__panel[data-show] { animation: none !important; } /* Share Menu: opens instantly (no popover fade) */
  .su-reactions__emoji:hover, .su-reactions__emoji:focus { transform: none; } /* Reaction Bar: no pop / roll / hover scale */
  .su-card__brand > * { transition: none !important; } /* Credit Card Input: brand mark swaps instantly; errors never shake */
  .su-pricetable__plans { scroll-behavior: auto; } /* Pricing Table: prices swap without the roll (JS checks reduced()) */
  html[data-su-transition]::view-transition-old(su-transition), html[data-su-transition]::view-transition-new(su-transition), html[data-su-transition]::view-transition-group(*) { animation: none !important; } /* Page Transition: instant (JS also skips the API) */
  .su-notify__item[data-new] { animation: su-notify-fade var(--dur-state) var(--ease-app) both !important; } /* Notification Center: new item fades only (no slide) */
  @keyframes su-notify-fade { from { opacity: 0; } }
  .su-map__ring { display: none; } /* Map: no pulse; route shown whole at once; move() jumps (JS checks reduced()) */
  /* Flow Canvas: fit jumps, running edge dashes hold still (C7 above) · Flow Diagram: highlighted path dashes hold still (C7 above) */
  a.su-bento__tile:hover { transform: none; } /* Bento: hover keeps the shadow, no lift */
  .su-tilt { transform: none !important; } /* Tilt Card: no tilt (JS also stays off) */
  .su-reveal :is([data-reveal=""], [data-reveal="up"], [data-reveal="fade"], [data-reveal="scale"]) { opacity: 1 !important; transform: none !important; } /* Scroll Animation: all visible (JS never hides); progress bar follows --su-reveal-p */
  .su-megamenu__panel { transform: none; } /* Mega Menu: panels and backdrop switch instantly (C7 above), no drop */
  .su-tour__spot { animation: none; } /* Product Tour: no pulse; spotlight and card jump between targets (C7 above) */
  .su-formbuilder[data-dropping] .su-formbuilder__field { transform: none !important; } /* Form Builder: cards never shift while a field is dragged in (indicator line only) */
  .su-query [data-leaving] { display: none; } /* Query Builder: rows appear / disappear at once (JS also skips the exit) */
  .su-minimap__vp { transition: none; } /* Minimap: click-to-jump scrolls instantly (JS checks reduced()) */
  .su-model3d__poster { transition: none; } /* Model Viewer 3D: no auto-rotate, no orbit easing / inertia (JS checks reduced()) */
  .su-audio__play > svg, .su-audio__like svg { animation: none; transform: none; } /* Audio Player: icon swaps instantly */
  /* QR Code: expired blur appears at once (C7 above) · PDF Viewer: page jumps without smooth scroll (JS checks reduced()) */
}


/* ======================================================================
   Wave 250 (2026-10-25): 48 components. Role tokens only, BEM su-<block>__part.
   ====================================================================== */

/* ============ Content Card ============ */
.su-ccard { display: grid; grid-template-rows: auto 1fr; width: min(320px, 100%); box-sizing: border-box; overflow: hidden; position: relative;
  background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink);
  transition: box-shadow var(--dur-hover) var(--ease-app), transform var(--dur-hover) var(--ease-app); }
.su-ccard__media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--color-app-accent-soft), var(--color-app-tray)); display: grid; place-items: center; color: var(--color-app-ink-2); }
.su-ccard__media svg { width: 40px; height: 40px; }
.su-ccard__body { display: grid; gap: 8px; padding: 16px; align-content: start; }
.su-ccard__eyebrow { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-muted); }
.su-ccard__title { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; }
.su-ccard__title a { color: inherit; text-decoration: none; }
.su-ccard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.su-ccard__title a:focus-visible { outline: none; }
.su-ccard:has(.su-ccard__title a:focus-visible) { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-ccard:has(.su-ccard__title a):hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.su-ccard__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--color-app-ink-2); }
.su-ccard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; font-size: 12px; color: var(--color-app-muted); }
.su-ccard__foot .su-btn { position: relative; z-index: 1; }
.su-ccard[data-layout="row"] { width: min(560px, 100%); grid-template-rows: none; grid-template-columns: minmax(120px, 38%) 1fr; }
.su-ccard[data-layout="row"] .su-ccard__media { aspect-ratio: auto; }
@media (max-width: 480px) { .su-ccard[data-layout="row"] { grid-template-columns: 1fr; } .su-ccard[data-layout="row"] .su-ccard__media { aspect-ratio: 16 / 9; } }

/* ============ Divider ============ */
.su-divider { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; border: 0; font: 500 12px/1 var(--font-sans); color: var(--color-app-muted); }
.su-divider::before, .su-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-app-line); }
.su-divider:empty { gap: 0; }
.su-divider:empty::after { display: none; }
.su-divider[data-align="start"]::before { flex: 0 0 16px; }
.su-divider[data-align="end"]::after { flex: 0 0 16px; }
.su-divider[data-variant="dashed"]::before, .su-divider[data-variant="dashed"]::after { background: repeating-linear-gradient(90deg, var(--color-app-line-strong) 0 4px, transparent 4px 8px); }
.su-divider[aria-orientation="vertical"] { display: inline-block; width: 1px; height: auto; min-height: 1em; align-self: stretch; background: var(--color-app-line); }
.su-divider[aria-orientation="vertical"]::before, .su-divider[aria-orientation="vertical"]::after { display: none; }

/* ============ Kbd ============ */
.su-keys { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1 var(--font-sans); color: var(--color-app-muted); white-space: nowrap; }
.su-keys .su-kbd { box-shadow: inset 0 -1px 0 var(--color-app-line-strong), var(--shadow-ring); }
.su-keys[data-size="lg"] .su-kbd { min-width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
.su-keylist { display: grid; gap: 0; width: min(380px, 100%); margin: 0; padding: 6px 0; list-style: none; background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-keylist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; font-size: 13.5px; color: var(--color-app-ink); }
.su-keylist li + li { border-top: 1px solid var(--color-app-line); }

/* ============ Badge ============ */
.su-badge { position: relative; display: inline-flex; vertical-align: middle; }
.su-badge__n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--color-app-crit-deep); color: var(--color-white); font: 700 10.5px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-app-surface); transform-origin: center; animation: su-badge-in var(--dur-state) var(--ease-app); }
.su-badge__n:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -1px; right: -1px; }
.su-badge__n[data-tone="accent"] { background: var(--color-app-accent); color: var(--color-app-on-accent, var(--color-white)); }
.su-badge__n[data-tone="ok"] { background: var(--color-app-ok-deep); }
.su-badge__n[hidden] { display: none; }
@keyframes su-badge-in { from { transform: scale(.4); opacity: 0; } }

/* ============ Status Dot ============ */
.su-status { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.2 var(--font-sans); color: var(--color-app-ink); }
.su-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-app-line-strong); }
.su-status[data-tone="ok"]::before { background: var(--color-app-ok); box-shadow: 0 0 0 3px var(--color-app-ok-soft); }
.su-status[data-tone="warn"]::before { background: var(--color-app-warn); box-shadow: 0 0 0 3px var(--color-app-warn-soft); }
.su-status[data-tone="crit"]::before { background: var(--color-app-crit); box-shadow: 0 0 0 3px var(--color-app-crit-soft); }
.su-status[data-pulse]::before { animation: su-status-pulse 1.6s var(--ease-app) infinite; }
@keyframes su-status-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }

/* ============ Aspect Ratio ============ */
.su-ratio { --r: 16 / 9; position: relative; width: 100%; aspect-ratio: var(--r); overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-tray); }
.su-ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.su-ratio[data-ratio="1:1"] { --r: 1; } .su-ratio[data-ratio="4:3"] { --r: 4 / 3; } .su-ratio[data-ratio="21:9"] { --r: 21 / 9; } .su-ratio[data-ratio="3:4"] { --r: 3 / 4; }
.su-ratio__ph { display: grid; place-items: center; color: var(--color-app-ink-2); font: 600 13px/1 var(--font-sans); background: linear-gradient(135deg, var(--color-app-accent-soft), var(--color-app-tray)); }

/* ============ List Group ============ */
.su-list { width: min(380px, 100%); box-sizing: border-box; margin: 0; padding: 4px; list-style: none; background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-list__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: var(--radius-ctrl); color: var(--color-app-ink); text-decoration: none; }
.su-list__item:is(a, button) { width: 100%; box-sizing: border-box; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app); }
.su-list__item:is(a, button):hover { background: var(--color-app-hover); }
.su-list__item:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-list__item[aria-current] { background: var(--color-app-accent-soft); }
.su-list__icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--color-app-tray); color: var(--color-app-ink-2); }
.su-list__icon svg { width: 16px; height: 16px; }
.su-list__text { display: grid; gap: 2px; min-width: 0; }
.su-list__title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-list__sub { font-size: 12px; color: var(--color-app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-list__end { font-size: 12px; color: var(--color-app-muted); display: inline-flex; align-items: center; gap: 6px; }
.su-list__end svg { width: 14px; height: 14px; }
.su-list > li + li { border-top: 1px solid var(--color-app-line); }

/* ============ Description List ============ */
.su-dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; width: min(460px, 100%); margin: 0; padding: 4px 16px; box-sizing: border-box; background: var(--color-app-surface);
  border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); font: 13.5px/1.5 var(--font-sans); }
.su-dl dt, .su-dl dd { margin: 0; padding: 10px 0; }
.su-dl dt { color: var(--color-app-muted); font-weight: 500; }
.su-dl dd { color: var(--color-app-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.su-dl dt:not(:first-of-type), .su-dl dt:not(:first-of-type) + dd { border-top: 1px solid var(--color-app-line); }
@media (max-width: 420px) { .su-dl { grid-template-columns: 1fr; } .su-dl dt { padding-bottom: 0; } .su-dl dd { padding-top: 2px; border-top: 0 !important; } }

/* ============ Collapsible ============ */
.su-collapse { width: min(420px, 100%); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-collapse__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; margin-left: -8px; border: 0; border-radius: var(--radius-ctrl); background: none;
  font: 600 13.5px/1.2 var(--font-sans); color: var(--color-app-ink); cursor: pointer; }
.su-collapse__btn:hover { background: var(--color-app-hover); }
.su-collapse__btn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-collapse__btn svg { width: 14px; height: 14px; transition: transform var(--dur-state) var(--ease-app); }
.su-collapse__btn[aria-expanded="true"] svg { transform: rotate(90deg); }
.su-collapse__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-layout) var(--ease-app), visibility 0s linear var(--dur-layout); visibility: hidden; }
.su-collapse__panel[data-open] { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-layout) var(--ease-app); }
.su-collapse__inner { overflow: hidden; min-height: 0; font-size: 13.5px; line-height: 1.55; color: var(--color-app-ink-2); }
.su-collapse__inner > :first-child { margin-top: 8px; }

/* ============ Callout ============ */
.su-callout { --tone: var(--color-app-accent); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; width: min(520px, 100%); box-sizing: border-box; padding: 14px 16px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: inset 3px 0 0 var(--tone), var(--shadow-ring-card); font: 13.5px/1.55 var(--font-sans); color: var(--color-app-ink-2); }
.su-callout__icon { grid-row: span 2; width: 20px; height: 20px; color: var(--tone); margin-top: 1px; }
.su-callout__title { margin: 0; font-weight: 650; color: var(--color-app-ink); }
.su-callout__body { margin: 0; grid-column: 2; }
.su-callout__body code { font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: var(--color-app-tray); color: var(--color-app-ink); }
.su-callout[data-tone="ok"] { --tone: var(--color-app-ok-deep); } .su-callout[data-tone="warn"] { --tone: var(--color-app-warn); } .su-callout[data-tone="crit"] { --tone: var(--color-app-crit-deep); }

/* ============ Countdown ============ */
.su-countdown { display: inline-grid; gap: 10px; justify-items: center; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-countdown__label { margin: 0; font-size: 12.5px; color: var(--color-app-muted); }
.su-countdown__units { display: flex; gap: 8px; }
.su-countdown__unit { display: grid; justify-items: center; gap: 4px; min-width: 60px; padding: 10px 8px; border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-countdown__n { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.su-countdown__u { font-size: 11px; color: var(--color-app-muted); }
.su-countdown[data-done] .su-countdown__n { color: var(--color-app-muted); }
@media (max-width: 380px) { .su-countdown__unit { min-width: 50px; } .su-countdown__n { font-size: 21px; } }

/* ============ Simple Table ============ */
.su-stable { width: min(620px, 100%); overflow-x: auto; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-stable:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-stable table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--color-app-ink); }
.su-stable caption { padding: 12px 16px 4px; text-align: left; font-weight: 650; }
.su-stable th, .su-stable td { padding: 10px 16px; text-align: left; white-space: nowrap; }
.su-stable th { font-size: 12px; font-weight: 600; color: var(--color-app-muted); border-bottom: 1px solid var(--color-app-line); }
.su-stable td { border-bottom: 1px solid var(--color-app-line); }
.su-stable tr:last-child td { border-bottom: 0; }
.su-stable [data-num] { text-align: right; font-variant-numeric: tabular-nums; }
.su-stable[data-striped] tbody tr:nth-child(even) { background: var(--color-app-sunk); }
.su-stable tbody tr:hover { background: var(--color-app-hover); }
@media (max-width: 520px) {
  .su-stable[data-stack] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .su-stable[data-stack] tr { display: grid; padding: 8px 0; border-bottom: 1px solid var(--color-app-line); }
  .su-stable[data-stack] td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 16px; border: 0; white-space: normal; }
  .su-stable[data-stack] td::before { content: attr(data-label); color: var(--color-app-muted); font-size: 12px; }
}

/* ============ Meter ============ */
.su-meter { display: grid; gap: 6px; width: min(320px, 100%); font-family: var(--font-sans); }
.su-meter__head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--color-app-ink); }
.su-meter__value { font-variant-numeric: tabular-nums; color: var(--color-app-ink-2); }
.su-meter__track { --p: 0; height: 8px; border-radius: var(--radius-pill); background: var(--color-app-tray); overflow: hidden; }
.su-meter__fill { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--color-app-ok); transition: width var(--dur-layout) var(--ease-app), background-color var(--dur-state) var(--ease-app); }
.su-meter[data-level="warn"] .su-meter__fill { background: var(--color-app-warn); }
.su-meter[data-level="crit"] .su-meter__fill { background: var(--color-app-crit); }
.su-meter__segs { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 4px; }
.su-meter__segs > span { height: 6px; border-radius: var(--radius-pill); background: var(--color-app-tray); transition: background-color var(--dur-state) var(--ease-app); }
.su-meter__segs > span[data-on] { background: var(--seg, var(--color-app-ok)); }
.su-meter__hint { font-size: 12px; color: var(--color-app-muted); }

/* ============ Back to Top ============ */
.su-totop { position: sticky; bottom: 0; margin-left: auto; z-index: 5; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-md), var(--shadow-ring); cursor: pointer;
  transition: opacity var(--dur-state) var(--ease-app), transform var(--dur-state) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-totop svg { width: 18px; height: 18px; }
.su-totop:hover { background: var(--color-app-hover); }
.su-totop:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-totop[data-hidden] { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
.su-totop[data-fixed] { position: fixed; right: 20px; bottom: 20px; }
.su-totop-demo { position: relative; display: flex; flex-direction: column; width: min(420px, 100%); height: 280px; overflow: auto; padding: 16px; box-sizing: border-box; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 13.5px/1.6 var(--font-sans); color: var(--color-app-ink-2); }

/* ============ Cookie Consent ============ */
.su-cookie { width: min(560px, 100%); box-sizing: border-box; display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface);
  box-shadow: var(--shadow-lg), var(--shadow-ring); font: 13.5px/1.55 var(--font-sans); color: var(--color-app-ink-2); }
.su-cookie[data-fixed] { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: min(560px, calc(100% - 32px)); }
.su-cookie__title { margin: 0; font-size: 14.5px; font-weight: 650; color: var(--color-app-ink); }
.su-cookie__text { margin: 0; }
.su-cookie__text a { color: var(--color-app-ink); }
.su-cookie__prefs { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); }
.su-cookie__prefs[hidden] { display: none; }
.su-cookie__pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--color-app-ink); }
.su-cookie__pref input { width: 16px; height: 16px; accent-color: var(--color-app-accent); }
.su-cookie__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.su-cookie[hidden] { display: none; }
.su-cookie__done { margin: 0; color: var(--color-app-ok-deep); font-weight: 600; }

/* ============ Skip Link ============ */
.su-skip { position: absolute; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: var(--radius-ctrl); background: var(--color-app-ink); color: var(--color-app-ground);
  font: 600 13.5px/1 var(--font-sans); text-decoration: none; transform: translateY(-160%); transition: transform var(--dur-state) var(--ease-app); }
.su-skip:focus { transform: none; outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-skip-demo { position: relative; width: min(460px, 100%); padding: 64px 16px 16px; box-sizing: border-box; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 13.5px/1.6 var(--font-sans); color: var(--color-app-ink-2); overflow: hidden; }
.su-skip-demo nav { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-app-line); }
.su-skip-demo main:focus { outline: 2px dashed var(--color-app-focus); outline-offset: 4px; }

/* ============ Link ============ */
.su-link { color: var(--color-app-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-app-accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  border-radius: 3px; transition: text-decoration-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-link:hover { text-decoration-color: currentColor; }
.su-link:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-link[data-variant="subtle"] { font-weight: inherit; color: var(--color-app-ink-2); text-decoration-color: var(--color-app-line-strong); }
.su-link[data-variant="standalone"] { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.su-link[data-variant="standalone"]:hover { text-decoration: underline; }
.su-link svg { width: .9em; height: .9em; vertical-align: -.08em; margin-left: 2px; }
.su-link[aria-disabled="true"] { color: var(--color-app-muted); text-decoration: none; pointer-events: none; }
.su-link-demo { display: grid; gap: 12px; width: min(460px, 100%); font: 14px/1.6 var(--font-sans); color: var(--color-app-ink-2); }
.su-link-demo p { margin: 0; }

/* ============ File Input ============ */
.su-file { display: grid; gap: 8px; width: min(380px, 100%); font-family: var(--font-sans); }
.su-file__label { font-size: 13px; font-weight: 600; color: var(--color-app-ink-label); }
.su-file__row { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; border-radius: var(--radius-ctrl); background: var(--color-app-surface); box-shadow: var(--shadow-ring); }
.su-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.su-file__btn { flex: none; }
.su-file__input:focus-visible + .su-file__btn { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--color-app-muted); }
.su-file[data-has] .su-file__name { color: var(--color-app-ink); }
.su-file__clear { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--color-app-muted); cursor: pointer; }
.su-file__clear:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-file__clear:focus-visible { outline: 2px solid var(--color-app-focus); }
.su-file__clear svg { width: 14px; height: 14px; }
.su-file__clear[hidden] { display: none; }
.su-file__hint { margin: 0; font-size: 12px; color: var(--color-app-muted); }
.su-file[data-error] .su-file__hint { color: var(--color-app-crit-deep); }
.su-file[data-error] .su-file__row { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }

/* ============ Radio Card ============ */
.su-rcard { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: min(560px, 100%); margin: 0; padding: 0; border: 0; font-family: var(--font-sans); }
.su-rcard__legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; color: var(--color-app-ink-label); }
.su-rcard__opt { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring); cursor: pointer;
  transition: box-shadow var(--dur-hover) var(--ease-app), background-color var(--dur-hover) var(--ease-app); }
.su-rcard__opt:hover { background: var(--color-app-hover); }
.su-rcard__input { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; margin: 0; accent-color: var(--color-app-accent); }
.su-rcard__opt:has(:checked) { box-shadow: inset 0 0 0 2px var(--color-app-accent); background: var(--color-app-accent-soft); }
.su-rcard__opt:has(:focus-visible) { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-rcard__opt:has(:disabled) { opacity: .5; cursor: not-allowed; }
.su-rcard__title { padding-right: 24px; font-size: 14px; font-weight: 650; color: var(--color-app-ink); }
.su-rcard__desc { font-size: 12.5px; line-height: 1.45; color: var(--color-app-ink-2); }
.su-rcard__price { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }

/* ============ Blockquote ============ */
.su-quote { position: relative; width: min(520px, 100%); box-sizing: border-box; margin: 0; padding: 4px 0 4px 20px; box-shadow: inset 3px 0 0 var(--color-app-accent); font-family: var(--font-sans); }
.su-quote__text { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--color-app-ink); }
.su-quote__by { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--color-app-muted); }
.su-quote__by b { color: var(--color-app-ink); font-weight: 600; }
.su-quote__av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-app-accent-soft); color: var(--color-app-ink); font-weight: 700; font-size: 12px; }
.su-quote[data-variant="pull"] { padding: 20px 0; box-shadow: inset 0 1px 0 var(--color-app-line), inset 0 -1px 0 var(--color-app-line); text-align: center; }
.su-quote[data-variant="pull"] .su-quote__text { font-size: 21px; }
.su-quote[data-variant="pull"] .su-quote__by { justify-content: center; }

/* ============ Media Object ============ */
.su-mediaobj { display: flex; align-items: flex-start; gap: 12px; width: min(480px, 100%); font-family: var(--font-sans); }
.su-mediaobj__fig { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--color-app-accent-soft); color: var(--color-app-ink); font-weight: 700; font-size: 14px; }
.su-mediaobj__fig[data-shape="square"] { border-radius: var(--radius-ctrl); }
.su-mediaobj__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.su-mediaobj__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.su-mediaobj__title { margin: 0; font-size: 14px; font-weight: 650; color: var(--color-app-ink); }
.su-mediaobj__meta { font-size: 12px; color: var(--color-app-muted); }
.su-mediaobj__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--color-app-ink-2); overflow-wrap: anywhere; }
.su-mediaobj__end { flex: none; }
.su-mediaobj .su-mediaobj { margin-top: 12px; }

/* ============ Loading Overlay ============ */
.su-overlay { position: relative; }
.su-overlay__veil { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 10px; border-radius: inherit;
  background: color-mix(in srgb, var(--color-app-surface) 82%, transparent); backdrop-filter: blur(2px); font: 500 13px/1 var(--font-sans); color: var(--color-app-ink);
  animation: su-overlay-in var(--dur-state) var(--ease-app); }
.su-overlay__veil[hidden] { display: none; }
.su-overlay__veil .su-spin { width: 24px; height: 24px; color: var(--color-app-accent); }
@keyframes su-overlay-in { from { opacity: 0; } }

/* ============ Relative Time ============ */
.su-reltime { font-variant-numeric: tabular-nums; color: inherit; text-decoration: underline dotted var(--color-app-line-strong); text-underline-offset: 3px; cursor: help; }
.su-reltime-list { display: grid; gap: 0; width: min(380px, 100%); margin: 0; padding: 4px 16px; box-sizing: border-box; list-style: none; background: var(--color-app-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-ring-card); font: 13.5px/1.4 var(--font-sans); color: var(--color-app-ink); }
.su-reltime-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; }
.su-reltime-list li + li { border-top: 1px solid var(--color-app-line); }
.su-reltime-list .su-reltime { color: var(--color-app-muted); flex: none; }

/* ============ Progress Ring ============ */
.su-ring { --size: 72px; position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); font-family: var(--font-sans); }
.su-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.su-ring__track { fill: none; stroke: var(--color-app-tray); }
.su-ring__bar { fill: none; stroke: var(--color-app-accent); stroke-linecap: round; transition: stroke-dashoffset var(--dur-layout) var(--ease-app), stroke var(--dur-state) var(--ease-app); }
.su-ring[data-tone="ok"] .su-ring__bar { stroke: var(--color-app-ok); }
.su-ring[data-tone="crit"] .su-ring__bar { stroke: var(--color-app-crit); }
.su-ring__label { position: relative; font-size: calc(var(--size) * .22); font-weight: 700; color: var(--color-app-ink); font-variant-numeric: tabular-nums; }
.su-ring[data-size="sm"] { --size: 40px; } .su-ring[data-size="lg"] { --size: 112px; }
.su-ring[data-size="sm"] .su-ring__label { display: none; }
.su-ring[data-indeterminate] svg { animation: su-rot 1s linear infinite; }
.su-ring-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.su-ring-cap { display: grid; justify-items: center; gap: 8px; font: 12.5px/1.3 var(--font-sans); color: var(--color-app-muted); }

/* ============ Chip Filter ============ */
.su-chipfilter { display: flex; flex-wrap: wrap; gap: 8px; width: min(560px, 100%); font-family: var(--font-sans); }
.su-chipfilter__chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--color-app-surface); box-shadow: var(--shadow-ring);
  font: 500 13px/1 var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-app), color var(--dur-hover) var(--ease-app); }
.su-chipfilter__chip:hover { background: var(--color-app-hover); color: var(--color-app-ink); }
.su-chipfilter__chip:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-chipfilter__chip[aria-pressed="true"] { background: var(--color-app-accent-soft); color: var(--color-app-ink); box-shadow: inset 0 0 0 1.5px var(--color-app-accent); }
.su-chipfilter__chip svg { width: 14px; height: 14px; display: none; }
.su-chipfilter__chip[aria-pressed="true"] svg { display: block; }
.su-chipfilter__n { font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-chipfilter__status { width: 100%; margin: 4px 0 0; font-size: 12px; color: var(--color-app-muted); }

/* ============ Pagination Dots ============ */
.su-dots { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-pill); }
.su-dots__dot { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: var(--radius-pill); cursor: pointer; transition: width var(--dur-state) var(--ease-app); }
.su-dots__dot::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-app-line-strong); transition: width var(--dur-state) var(--ease-app), background-color var(--dur-state) var(--ease-app); }
.su-dots__dot[aria-current="true"] { width: 36px; }
.su-dots__dot[aria-current="true"]::before { width: 22px; background: var(--color-app-accent); }
.su-dots__dot:hover::before { background: var(--color-app-muted); }
.su-dots__dot[aria-current="true"]:hover::before { background: var(--color-app-accent-hover); }
.su-dots__dot:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 0; }
.su-dots-demo { display: grid; gap: 12px; justify-items: center; width: min(360px, 100%); font-family: var(--font-sans); }
.su-dots-demo__slide { width: 100%; box-sizing: border-box; min-height: 120px; display: grid; place-items: center; padding: 16px; text-align: center; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-size: 14px; color: var(--color-app-ink); }
.su-dots-demo__slide[hidden] { display: none; }

/* ============ Virtual List ============ */
.su-vlist { --row: 44px; position: relative; width: min(460px, 100%); height: 320px; overflow: auto; overscroll-behavior: contain; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-vlist:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-vlist__spacer { position: relative; }
.su-vlist__row { position: absolute; left: 0; right: 0; height: var(--row); box-sizing: border-box; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid var(--color-app-line); font-size: 13.5px; color: var(--color-app-ink); cursor: pointer; }
.su-vlist__row:hover { background: var(--color-app-hover); }
.su-vlist__row[aria-selected="true"] { background: var(--color-app-accent-soft); }
.su-vlist__row[data-active] { box-shadow: inset 3px 0 0 var(--color-app-focus); }
.su-vlist__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-vlist__id { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-vlist__end { font-size: 12px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-vlist-meta { margin: 8px 0 0; font: 12px/1.4 var(--font-sans); color: var(--color-app-muted); }

/* ============ Infinite Scroll ============ */
.su-infinite { width: min(460px, 100%); height: 340px; overflow: auto; overscroll-behavior: contain; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-infinite__list { margin: 0; padding: 0; list-style: none; }
.su-infinite__item { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--color-app-line); animation: su-overlay-in var(--dur-state) var(--ease-app); }
.su-infinite__item:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-infinite__t { font-size: 13.5px; font-weight: 600; color: var(--color-app-ink); }
.su-infinite__s { font-size: 12px; color: var(--color-app-muted); }
.su-infinite__foot { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px; font-size: 12.5px; color: var(--color-app-muted); }
.su-infinite__foot .su-spin { color: var(--color-app-accent); }

/* ============ Faceted Search ============ */
.su-facets { container: su-facets / inline-size; width: min(760px, 100%); }
.su-facets__in { display: grid; grid-template-columns: 200px 1fr; gap: 16px; box-sizing: border-box; padding: 16px; border-radius: var(--radius-card);
  background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-facets__side { display: grid; gap: 14px; align-content: start; }
.su-facets__group { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; min-width: 0; }
.su-facets__legend { padding: 0; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--color-app-muted); text-transform: uppercase; letter-spacing: .04em; }
.su-facets__opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-app-ink-2); cursor: pointer; }
.su-facets__opt input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-app-accent); }
.su-facets__opt[data-zero] { color: var(--color-app-muted); }
.su-facets__cnt { margin-left: auto; font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-facets__main { display: grid; gap: 10px; align-content: start; min-width: 0; }
.su-facets__q { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); box-shadow: var(--shadow-ring); font: 13.5px var(--font-sans); color: var(--color-app-ink); }
.su-facets__q:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-facets__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-app-muted); min-height: 24px; }
.su-facets__bar .su-chip { cursor: pointer; border: 0; font-family: inherit; font-size: 12px; }
.su-facets__bar .su-chip:focus-visible { outline: 2px solid var(--color-app-focus); }
.su-facets__clear { margin-left: auto; }
.su-facets__results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.su-facets__card { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); box-shadow: var(--shadow-ring); font-size: 13px; }
.su-facets__card b { font-weight: 600; color: var(--color-app-ink); }
.su-facets__card span { font-size: 12px; color: var(--color-app-muted); }
.su-facets__empty { padding: 24px; text-align: center; font-size: 13px; color: var(--color-app-muted); }
.su-facets__toggle { display: none !important; }
@container su-facets (max-width: 560px) {
  .su-facets__in { grid-template-columns: 1fr; }
  .su-facets__toggle { display: inline-flex !important; justify-self: start; }
  .su-facets__side[data-collapsed] { display: none; }
}

/* ============ Editable Table ============ */
.su-etable { width: min(680px, 100%); border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-etable__scroll { overflow-x: auto; }
.su-etable table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--color-app-ink); }
.su-etable th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--color-app-muted); border-bottom: 1px solid var(--color-app-line); white-space: nowrap; }
.su-etable th[data-num] { text-align: right; }
.su-etable td { padding: 0; border-bottom: 1px solid var(--color-app-line); white-space: nowrap; }
.su-etable__cell { display: block; min-height: 40px; box-sizing: border-box; padding: 10px 12px; outline: none; cursor: cell; }
.su-etable__cell:focus { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-etable td[data-num] .su-etable__cell { text-align: right; font-variant-numeric: tabular-nums; }
.su-etable__cell[data-dirty] { background: var(--color-app-warn-soft); }
.su-etable__cell[data-invalid] { box-shadow: inset 0 0 0 2px var(--color-app-crit-deep); }
.su-etable__edit { display: block; width: 100%; min-width: 80px; box-sizing: border-box; height: 40px; padding: 0 12px; border: 0; background: var(--color-app-sunk); font: inherit; color: var(--color-app-ink); outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
td[data-num] .su-etable__edit { text-align: right; }
.su-etable__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--color-app-muted); }
.su-etable__foot > div { display: flex; gap: 8px; }

/* ============ Permission Matrix ============ */
.su-perm { width: min(640px, 100%); border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); }
.su-perm__scroll { overflow-x: auto; }
.su-perm table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--color-app-ink); }
.su-perm caption { padding: 14px 16px 6px; text-align: left; font-size: 14.5px; font-weight: 650; }
.su-perm th, .su-perm td { padding: 9px 12px; border-bottom: 1px solid var(--color-app-line); }
.su-perm thead th { font-size: 12px; font-weight: 600; color: var(--color-app-muted); text-align: center; white-space: nowrap; }
.su-perm thead th:first-child, .su-perm tbody th { text-align: left; }
.su-perm tbody th { font-weight: 500; color: var(--color-app-ink); min-width: 140px; }
.su-perm tbody th small { display: block; font-size: 11.5px; color: var(--color-app-muted); font-weight: 400; }
.su-perm td { text-align: center; }
.su-perm tr[data-group] th { padding-top: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-app-muted); background: var(--color-app-sunk); }
.su-perm__box { width: 16px; height: 16px; margin: 0; accent-color: var(--color-app-accent); cursor: pointer; }
.su-perm__box:disabled { cursor: not-allowed; }
.su-perm__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px; font-size: 12.5px; color: var(--color-app-muted); }
.su-perm__foot > div { display: flex; gap: 8px; }

/* ============ Audit Log ============ */
.su-audit { container: su-audit / inline-size; width: min(680px, 100%); box-sizing: border-box; display: grid; gap: 10px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-audit__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.su-audit__title { margin: 0; font-size: 15px; font-weight: 650; }
.su-audit__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.su-audit__tools input, .su-audit__tools select { height: 34px; min-width: 0; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); box-shadow: var(--shadow-ring); font: 13px var(--font-sans); color: var(--color-app-ink); }
.su-audit__tools input { flex: 1 1 160px; }
.su-audit__tools input:focus-visible, .su-audit__tools select:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-audit__list { margin: 0; padding: 0; list-style: none; }
.su-audit__row { border-top: 1px solid var(--color-app-line); }
.su-audit__row[hidden] { display: none; }
.su-audit__sum { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; border-radius: var(--radius-ctrl); }
.su-audit__sum:hover { background: var(--color-app-hover); }
.su-audit__sum:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-audit__time { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-audit__what { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-audit__what b { font-weight: 600; }
.su-audit__what code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--color-app-tray); }
.su-audit__detail { margin: 0 4px 10px; padding: 10px 12px; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.su-audit__detail[hidden] { display: none; }
.su-audit__empty { padding: 20px; text-align: center; font-size: 13px; color: var(--color-app-muted); }
.su-audit__empty[hidden] { display: none; }
.su-audit__count { font-size: 12px; color: var(--color-app-muted); }
@container su-audit (max-width: 440px) { .su-audit__sum { grid-template-columns: 1fr auto; } .su-audit__time { grid-column: 1 / -1; } }

/* ============ API Keys ============ */
.su-apikeys { width: min(640px, 100%); box-sizing: border-box; display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-apikeys__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.su-apikeys__title { margin: 0; font-size: 15px; font-weight: 650; }
.su-apikeys__new { display: flex; flex-wrap: wrap; gap: 8px; }
.su-apikeys__new[hidden] { display: none; }
.su-apikeys__new input { flex: 1; min-width: 160px; height: 36px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); box-shadow: var(--shadow-ring); font: 13px var(--font-sans); color: var(--color-app-ink); }
.su-apikeys__new input:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-apikeys__reveal { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-ctrl); background: var(--color-app-ok-soft); font-size: 13px; color: var(--color-app-ink); }
.su-apikeys__reveal[hidden] { display: none; }
.su-apikeys__reveal p { margin: 0; }
.su-apikeys__secret { display: flex; gap: 8px; align-items: center; min-width: 0; }
.su-apikeys__secret code { flex: 1; min-width: 0; overflow-x: auto; padding: 8px 10px; border-radius: 8px; background: var(--color-app-surface); font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.su-apikeys__list { margin: 0; padding: 0; list-style: none; }
.su-apikeys__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-app-line); font-size: 13px; }
.su-apikeys__name { display: grid; gap: 2px; min-width: 0; }
.su-apikeys__name b { font-weight: 600; }
.su-apikeys__name span { font-size: 12px; color: var(--color-app-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; }
.su-apikeys__used { font-size: 12px; color: var(--color-app-muted); white-space: nowrap; }
.su-apikeys__row[data-revoked] .su-apikeys__name b { text-decoration: line-through; color: var(--color-app-muted); }
@media (max-width: 480px) { .su-apikeys__row { grid-template-columns: 1fr auto; } .su-apikeys__used { grid-column: 1; grid-row: 2; } }

/* ============ Plan Switcher ============ */
.su-plans { container: su-plans / inline-size; width: min(760px, 100%); box-sizing: border-box; display: grid; gap: 16px; font-family: var(--font-sans); color: var(--color-app-ink); }
.su-plans__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.su-plans__title { margin: 0; font-size: 16px; font-weight: 650; }
.su-plans__period { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--color-app-tray); }
.su-plans__period button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: none; font: 600 12.5px var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; }
.su-plans__period button[aria-checked="true"] { background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring); }
.su-plans__period button:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-plans__save { margin-left: 4px; font-size: 11px; color: var(--color-app-ok-deep); }
.su-plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.su-plans__card { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); }
.su-plans__card[data-current] { box-shadow: inset 0 0 0 2px var(--color-app-accent); }
.su-plans__name { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
.su-plans__price { margin: 0; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.su-plans__price small { font-size: 12.5px; font-weight: 500; color: var(--color-app-muted); }
.su-plans__feat { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 12.5px; color: var(--color-app-ink-2); }
.su-plans__feat li::before { content: "✓ "; color: var(--color-app-ok-deep); font-weight: 700; }
.su-plans__card .su-btn { width: 100%; }
.su-plans__confirm { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-app-sunk); box-shadow: var(--shadow-ring); font-size: 13px; color: var(--color-app-ink-2); }
.su-plans__confirm[hidden] { display: none; }
.su-plans__confirm p { margin: 0; }
.su-plans__confirm b { color: var(--color-app-ink); }
.su-plans__confirm div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@container su-plans (max-width: 600px) { .su-plans__grid { grid-template-columns: 1fr; } }

/* ============ Team Invite ============ */
.su-invite { width: min(520px, 100%); box-sizing: border-box; display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-invite__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.su-invite__title { margin: 0; font-size: 15px; font-weight: 650; }
.su-invite__seats { font-size: 12.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-invite__seatbar { height: 6px; border-radius: var(--radius-pill); background: var(--color-app-tray); overflow: hidden; }
.su-invite__seatbar span { display: block; height: 100%; background: var(--color-app-accent); transition: width var(--dur-layout) var(--ease-app); }
.su-invite__form { display: flex; flex-wrap: wrap; gap: 8px; }
.su-invite__form input, .su-invite__form select { height: 36px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); box-shadow: var(--shadow-ring); font: 13px var(--font-sans); color: var(--color-app-ink); }
.su-invite__form input { flex: 1; min-width: 180px; }
.su-invite__form input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--color-app-crit-deep); }
.su-invite__form :focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-invite__err { margin: 0; font-size: 12px; color: var(--color-app-crit-deep); }
.su-invite__err:empty { display: none; }
.su-invite__list { margin: 0; padding: 0; list-style: none; }
.su-invite__row { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-app-line); font-size: 13px; }
.su-invite__av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-app-accent-soft); color: var(--color-app-ink); font-weight: 700; font-size: 12px; }
.su-invite__who { display: grid; min-width: 0; }
.su-invite__who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-invite__who span { font-size: 12px; color: var(--color-app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 440px) { .su-invite__row { grid-template-columns: 32px 1fr auto; } .su-invite__row .su-chip { display: none; } }

/* ============ Saved Views ============ */
.su-views { display: flex; align-items: center; gap: 4px; width: 100%; box-sizing: border-box; padding: 4px; border-radius: var(--radius-pill); background: var(--color-app-tray); font-family: var(--font-sans); overflow-x: auto; }
.su-views__list { display: flex; gap: 4px; }
.su-views__tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: none; font: 600 12.5px var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; }
.su-views__tab[aria-selected="true"] { background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring); }
.su-views__tab:focus-visible, .su-views__add:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-views__n { font-size: 11px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-views__dirty { width: 6px; height: 6px; border-radius: 50%; background: var(--color-app-warn); }
.su-views__add { flex: none; margin-left: auto; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: none; font: 600 12.5px var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; white-space: nowrap; }
.su-views__add:hover, .su-views__tab:hover { color: var(--color-app-ink); }
.su-views__name { flex: none; height: 30px; width: 130px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--color-app-surface); box-shadow: inset 0 0 0 2px var(--color-app-focus); font: 12.5px var(--font-sans); color: var(--color-app-ink); outline: none; }
.su-views-demo { display: grid; gap: 10px; width: min(680px, 100%); }
.su-views-demo__body { padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font: 13px/1.5 var(--font-sans); color: var(--color-app-ink-2); }
.su-views-demo__body b { color: var(--color-app-ink); }

/* ============ Radial Bar Chart ============ */
.su-radial { container: su-radial / inline-size; width: min(460px, 100%); }
.su-radial__in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 20px; box-sizing: border-box; padding: 16px;
  border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-radial__svg { width: 168px; height: 168px; transform: rotate(-90deg); }
.su-radial__track { fill: none; stroke: var(--color-app-tray); }
.su-radial__bar { fill: none; stroke-linecap: round; transition: stroke-dashoffset var(--dur-layout) var(--ease-app); }
.su-radial__legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; }
.su-radial__legend li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; }
.su-radial__legend i { width: 10px; height: 10px; border-radius: 3px; }
.su-radial__legend b { font-variant-numeric: tabular-nums; font-weight: 600; }
.su-radial__title { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 650; }
@container su-radial (max-width: 380px) { .su-radial__in { grid-template-columns: 1fr; justify-items: center; } .su-radial__legend { width: 100%; } }

/* ============ Stacked Bar Chart ============ */
.su-stacked { width: min(620px, 100%); box-sizing: border-box; display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-stacked__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.su-stacked__title { margin: 0; font-size: 14px; font-weight: 650; }
.su-stacked__legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.su-stacked__key { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--color-app-sunk); font: 500 12px var(--font-sans); color: var(--color-app-ink); cursor: pointer; }
.su-stacked__key i { width: 9px; height: 9px; border-radius: 3px; }
.su-stacked__key[aria-pressed="false"] { text-decoration: line-through; }
.su-stacked__key[aria-pressed="false"] i { opacity: .3; }
.su-stacked__key:focus-visible { outline: 2px solid var(--color-app-focus); }
.su-stacked__plot { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 10px; height: 200px; padding-top: 8px; border-bottom: 1px solid var(--color-app-line); }
.su-stacked__col { display: flex; flex-direction: column-reverse; height: 100%; justify-content: flex-start; position: relative; outline: none; border-radius: 6px 6px 0 0; overflow: hidden; cursor: default; }
.su-stacked__col:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-stacked__seg { width: 100%; flex: none; transition: height var(--dur-layout) var(--ease-app); }
.su-stacked__x { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; font-size: 11.5px; color: var(--color-app-muted); text-align: center; }
.su-stacked__tip { min-height: 18px; margin: 0; font-size: 12.5px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }

/* ============ Histogram ============ */
.su-histo { width: min(560px, 100%); box-sizing: border-box; display: grid; gap: 10px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-histo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.su-histo__title { margin: 0; font-size: 14px; font-weight: 650; }
.su-histo__bins { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-app-muted); }
.su-histo__bins input { width: 110px; accent-color: var(--color-app-accent); }
.su-histo__plot { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 180px; border-bottom: 1px solid var(--color-app-line); outline: none; }
.su-histo__bar { flex: 1; min-width: 2px; background: var(--color-app-accent); opacity: .8; border-radius: 3px 3px 0 0; transition: height var(--dur-layout) var(--ease-app); }
.su-histo__bar:hover, .su-histo__bar[data-active] { opacity: 1; background: var(--color-app-accent-hover); }
.su-histo__mean { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--color-app-ink-2); pointer-events: none; }
.su-histo__axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-histo__stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 12.5px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-histo__stats b { color: var(--color-app-ink); }
.su-histo__plot:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 4px; }

/* ============ Calendar Heatmap ============ */
.su-calheat { width: min(760px, 100%); box-sizing: border-box; display: grid; gap: 10px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-calheat__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.su-calheat__title { margin: 0; font-size: 14px; font-weight: 650; }
.su-calheat__sum { font-size: 12.5px; color: var(--color-app-muted); }
.su-calheat__scroll { overflow-x: auto; padding: 4px; }
.su-calheat__grid { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; grid-auto-columns: 11px; gap: 3px; width: max-content; outline: none; }
.su-calheat__grid:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }
.su-calheat__d { width: 11px; height: 11px; border-radius: 3px; background: var(--color-app-tray); }
.su-calheat__d[data-l="1"] { background: color-mix(in srgb, var(--color-app-accent) 30%, var(--color-app-tray)); }
.su-calheat__d[data-l="2"] { background: color-mix(in srgb, var(--color-app-accent) 55%, var(--color-app-tray)); }
.su-calheat__d[data-l="3"] { background: color-mix(in srgb, var(--color-app-accent) 78%, var(--color-app-tray)); }
.su-calheat__d[data-l="4"] { background: var(--color-app-accent); }
.su-calheat__d[data-active] { box-shadow: 0 0 0 2px var(--color-app-focus); }
.su-calheat__d[data-pad] { visibility: hidden; }
.su-calheat__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--color-app-muted); }
.su-calheat__scale { display: inline-flex; align-items: center; gap: 3px; }
.su-calheat__tip { margin: 0; min-height: 18px; font-size: 12.5px; color: var(--color-app-ink-2); }

/* ============ Mail Inbox ============ */
.su-mail { container: su-mail / inline-size; width: min(860px, 100%); }
.su-mail__in { display: grid; grid-template-columns: 300px 1fr; height: 440px; overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-mail__side { display: grid; grid-template-rows: auto 1fr; min-height: 0; border-right: 1px solid var(--color-app-line); }
.su-mail__tools { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--color-app-line); }
.su-mail__tools input { flex: 1; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); box-shadow: var(--shadow-ring); font: 13px var(--font-sans); color: var(--color-app-ink); }
.su-mail__tools input:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-mail__list { margin: 0; padding: 0; list-style: none; overflow: auto; outline: none; }
.su-mail__item { display: grid; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--color-app-line); cursor: pointer; }
.su-mail__item:hover { background: var(--color-app-hover); }
.su-mail__item[aria-selected="true"] { background: var(--color-app-accent-soft); }
.su-mail__list:focus-visible .su-mail__item[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--color-app-focus); }
.su-mail__row1 { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.su-mail__from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-mail__item[data-unread] .su-mail__from, .su-mail__item[data-unread] .su-mail__subj { font-weight: 700; }
.su-mail__when { flex: none; font-size: 11.5px; color: var(--color-app-muted); }
.su-mail__subj { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-mail__snip { font-size: 12px; color: var(--color-app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-mail__read { display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0; }
.su-mail__rhead { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-app-line); }
.su-mail__back { display: none !important; }
.su-mail__rtitle { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-mail__body { overflow: auto; padding: 16px; font-size: 13.5px; line-height: 1.6; color: var(--color-app-ink-2); }
.su-mail__body:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-mail__body p { margin: 0 0 10px; }
.su-mail__meta { margin: 0 0 12px; font-size: 12.5px; color: var(--color-app-muted); }
.su-mail__empty { padding: 24px; text-align: center; font-size: 13px; color: var(--color-app-muted); }
@container su-mail (max-width: 600px) {
  .su-mail__in { grid-template-columns: 1fr; }
  .su-mail[data-view="read"] .su-mail__side, .su-mail:not([data-view="read"]) .su-mail__read { display: none; }
  .su-mail__back { display: inline-flex !important; }
  .su-mail__side { border-right: 0; }
}

/* ============ Upload Queue ============ */
.su-upq { width: min(520px, 100%); box-sizing: border-box; display: grid; gap: 10px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-upq__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.su-upq__title { margin: 0; font-size: 14.5px; font-weight: 650; }
.su-upq__sum { font-size: 12.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-upq__drop { display: grid; place-items: center; gap: 4px; padding: 16px; border: 0; width: 100%; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); box-shadow: inset 0 0 0 1.5px var(--color-app-line-strong); font: 13px var(--font-sans); color: var(--color-app-ink-2); text-align: center; cursor: pointer; transition: box-shadow var(--dur-hover) var(--ease-app); }
.su-upq__drop b { color: var(--color-app-ink); }
.su-upq__drop[data-over] { box-shadow: inset 0 0 0 2px var(--color-app-accent); background: var(--color-app-accent-soft); }
.su-upq__drop:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 2px; }
.su-upq__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.su-upq__item { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); }
.su-upq__info { display: grid; min-width: 0; }
.su-upq__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.su-upq__state { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-upq__item[data-status="done"] .su-upq__state { color: var(--color-app-ok-deep); }
.su-upq__item[data-status="error"] .su-upq__state { color: var(--color-app-crit-deep); }
.su-upq__bar { grid-column: 1 / -1; height: 4px; border-radius: var(--radius-pill); background: var(--color-app-tray); overflow: hidden; }
.su-upq__bar span { display: block; height: 100%; width: 0; background: var(--color-app-accent); transition: width .2s linear; }
.su-upq__item[data-status="done"] .su-upq__bar span { background: var(--color-app-ok); }
.su-upq__item[data-status="error"] .su-upq__bar span { background: var(--color-app-crit); }
.su-upq__acts { display: flex; gap: 4px; }
.su-upq__acts button { height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--color-app-surface); box-shadow: var(--shadow-ring); font: 600 11.5px var(--font-sans); color: var(--color-app-ink); cursor: pointer; }
.su-upq__acts button:focus-visible { outline: 2px solid var(--color-app-focus); }

/* ============ Image Cropper ============ */
.su-crop { width: min(520px, 100%); box-sizing: border-box; display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-crop__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); touch-action: none; user-select: none; }
.su-crop__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.su-crop__img[data-demo] { background: radial-gradient(circle at 30% 35%, var(--color-app-accent) 0 14%, transparent 15%), radial-gradient(circle at 70% 60%, var(--color-app-ok) 0 18%, transparent 19%), linear-gradient(160deg, var(--color-app-accent-soft), var(--color-app-tray) 60%, var(--color-app-warn-soft)); }
.su-crop__box { position: absolute; box-shadow: 0 0 0 9999px rgb(0 0 0 / .5), inset 0 0 0 1.5px var(--color-white); cursor: move; outline: none; }
.su-crop__box:focus-visible { box-shadow: 0 0 0 9999px rgb(0 0 0 / .5), inset 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-app-focus); }
.su-crop__box::before, .su-crop__box::after { content: ""; position: absolute; inset: 33.33% 0; border-block: 1px solid rgb(255 255 255 / .35); pointer-events: none; }
.su-crop__box::after { inset: 0 33.33%; border-block: 0; border-inline: 1px solid rgb(255 255 255 / .35); }
.su-crop__h { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-md); }
.su-crop__h[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; } .su-crop__h[data-h="ne"] { right: 0; top: 0; cursor: nesw-resize; }
.su-crop__h[data-h="sw"] { left: 0; bottom: 0; cursor: nesw-resize; } .su-crop__h[data-h="se"] { right: 0; bottom: 0; cursor: nwse-resize; }
.su-crop__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.su-crop__ratios { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--color-app-tray); }
.su-crop__ratios button { height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: none; font: 600 12px var(--font-sans); color: var(--color-app-ink-2); cursor: pointer; }
.su-crop__ratios button[aria-checked="true"] { background: var(--color-app-surface); color: var(--color-app-ink); box-shadow: var(--shadow-ring); }
.su-crop__ratios button:focus-visible { outline: 2px solid var(--color-app-focus); }
.su-crop__out { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }

/* ============ JSON Viewer ============ */
.su-json { width: min(560px, 100%); box-sizing: border-box; max-height: 380px; overflow: auto; padding: 12px 8px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card);
  font: 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-app-ink); }
.su-json__bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--color-app-line); font-family: var(--font-sans); }
.su-json__bar input { flex: 1; min-width: 120px; height: 30px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); box-shadow: var(--shadow-ring); font: 12.5px var(--font-sans); color: var(--color-app-ink); }
.su-json__bar input:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-json [role=tree], .su-json [role=group] { margin: 0; padding: 0; list-style: none; }
.su-json [role=group] { padding-left: 18px; }
.su-json [role=treeitem] { outline: none; }
.su-json__line { display: block; padding: 0 8px; border-radius: 5px; white-space: nowrap; cursor: default; }
.su-json [role=treeitem]:focus-visible > .su-json__line { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-json__line:hover { background: var(--color-app-hover); }
.su-json__tw { display: inline-block; width: 14px; color: var(--color-app-muted); transition: transform var(--dur-hover) var(--ease-app); }
.su-json [aria-expanded="true"] > .su-json__line .su-json__tw { transform: rotate(90deg); }
.su-json [aria-expanded="false"] > [role=group] { display: none; }
.su-json__k { color: var(--color-app-ink); font-weight: 600; }
.su-json__s { color: var(--color-app-ok-deep); } .su-json__n { color: var(--color-app-warn-deep); } .su-json__b { color: var(--color-app-crit-deep); } .su-json__z { color: var(--color-app-muted); }
.su-json__sum { color: var(--color-app-muted); }
.su-json__line[data-hit] { background: var(--color-app-warn-soft); }
.su-json__count { font-size: 12px; color: var(--color-app-muted); }

/* ============ Log Viewer ============ */
.su-logs { width: min(720px, 100%); box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto; height: 360px; overflow: hidden; border-radius: var(--radius-card); background: var(--color-app-sunk); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-logs__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--color-app-line); background: var(--color-app-surface); }
.su-logs__bar input { flex: 1; min-width: 120px; height: 30px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); box-shadow: var(--shadow-ring); font: 12.5px var(--font-sans); color: var(--color-app-ink); }
.su-logs__bar input:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 1px; }
.su-logs__lvl { height: 28px; padding: 0 9px; border: 0; border-radius: var(--radius-pill); background: var(--color-app-tray); font: 600 11.5px var(--font-sans); color: var(--color-app-ink); cursor: pointer; }
.su-logs__lvl[aria-pressed="false"] { text-decoration: line-through; color: var(--color-app-muted); }
.su-logs__lvl:focus-visible { outline: 2px solid var(--color-app-focus); }
.su-logs__out { overflow: auto; padding: 6px 0; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; outline: none; }
.su-logs__out:focus-visible { box-shadow: inset 0 0 0 2px var(--color-app-focus); }
.su-logs__ln { display: grid; grid-template-columns: 70px 46px 1fr; gap: 8px; padding: 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.su-logs__ln:hover { background: var(--color-app-hover); }
.su-logs__ts { color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-logs__lv { font-weight: 700; }
.su-logs__ln[data-l="info"] .su-logs__lv { color: var(--color-app-ink-2); }
.su-logs__ln[data-l="warn"] .su-logs__lv { color: var(--color-app-warn-deep); }
.su-logs__ln[data-l="error"] .su-logs__lv { color: var(--color-app-crit-deep); }
.su-logs__ln[data-l="error"] { background: var(--color-app-crit-soft); }
.su-logs__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--color-app-line); background: var(--color-app-surface); font-size: 12px; color: var(--color-app-muted); }
.su-logs__foot label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.su-logs__foot input { accent-color: var(--color-app-accent); }
@media (max-width: 480px) { .su-logs__ln { grid-template-columns: auto auto 1fr; } }

/* ============ Status Page ============ */
.su-uptime { width: min(680px, 100%); box-sizing: border-box; display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-uptime__overall { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-ctrl); background: var(--color-app-ok-soft); font-size: 14px; font-weight: 650; color: var(--color-app-ink); }
.su-uptime__overall[data-tone="warn"] { background: var(--color-app-warn-soft); }
.su-uptime__overall[data-tone="crit"] { background: var(--color-app-crit-soft); }
.su-uptime__svc { display: grid; gap: 6px; padding: 10px 0 0; border-top: 1px solid var(--color-app-line); }
.su-uptime__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.su-uptime__pct { font-size: 12px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-uptime__bars { display: grid; grid-template-columns: repeat(var(--n, 45), 1fr); gap: 2px; height: 28px; outline: none; }
.su-uptime__bars:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: 3px; }
.su-uptime__d { border-radius: 2px; background: var(--color-app-ok); }
.su-uptime__d[data-s="warn"] { background: var(--color-app-warn); }
.su-uptime__d[data-s="crit"] { background: var(--color-app-crit); }
.su-uptime__d[data-s="none"] { background: var(--color-app-tray); }
.su-uptime__d[data-active] { box-shadow: 0 0 0 2px var(--color-app-focus); }
.su-uptime__axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-app-muted); }
.su-uptime__tip { margin: 0; min-height: 18px; font-size: 12.5px; color: var(--color-app-ink-2); }

/* ============ Onboarding Checklist ============ */
.su-checklist { width: min(440px, 100%); box-sizing: border-box; display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-checklist__head { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.su-checklist__title { margin: 0; font-size: 15px; font-weight: 650; }
.su-checklist__count { font-size: 12.5px; color: var(--color-app-muted); font-variant-numeric: tabular-nums; }
.su-checklist__bar { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-pill); background: var(--color-app-tray); overflow: hidden; }
.su-checklist__bar span { display: block; height: 100%; background: var(--color-app-ok); transition: width var(--dur-layout) var(--ease-app); }
.su-checklist__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.su-checklist__item { border-radius: var(--radius-ctrl); }
.su-checklist__item[data-open] { background: var(--color-app-sunk); }
.su-checklist__btn { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: var(--radius-ctrl); background: none; font: 500 13.5px var(--font-sans); color: var(--color-app-ink); text-align: left; cursor: pointer; }
.su-checklist__btn:hover { background: var(--color-app-hover); }
.su-checklist__btn:focus-visible { outline: 2px solid var(--color-app-focus); outline-offset: -2px; }
.su-checklist__tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--color-app-line-strong); color: transparent; transition: background-color var(--dur-state) var(--ease-app); }
.su-checklist__tick svg { width: 12px; height: 12px; }
.su-checklist__item[data-done] .su-checklist__tick { background: var(--color-app-ok-deep); box-shadow: none; color: var(--color-white); }
.su-checklist__item[data-done] .su-checklist__label { color: var(--color-app-muted); text-decoration: line-through; }
.su-checklist__time { font-size: 11.5px; color: var(--color-app-muted); }
.su-checklist__panel { display: grid; gap: 10px; padding: 0 10px 12px 42px; font-size: 13px; line-height: 1.55; color: var(--color-app-ink-2); }
.su-checklist__panel[hidden] { display: none; }
.su-checklist__panel p { margin: 0; }
.su-checklist__panel > div { display: flex; flex-wrap: wrap; gap: 8px; }
.su-checklist__done { margin: 0; padding: 12px; border-radius: var(--radius-ctrl); background: var(--color-app-ok-soft); font-size: 13.5px; font-weight: 600; color: var(--color-app-ink); }
.su-checklist__done[hidden] { display: none; }

/* ============ Pricing Calculator ============ */
.su-calc { container: su-calc / inline-size; width: min(680px, 100%); }
.su-calc__in { display: grid; grid-template-columns: 1fr 240px; gap: 16px; box-sizing: border-box; padding: 16px; border-radius: var(--radius-card); background: var(--color-app-surface); box-shadow: var(--shadow-ring-card); font-family: var(--font-sans); color: var(--color-app-ink); }
.su-calc__inputs { display: grid; gap: 14px; align-content: start; min-width: 0; }
.su-calc__title { margin: 0; font-size: 15px; font-weight: 650; }
.su-calc__f { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.su-calc__f > label, .su-calc__f > legend { padding: 0; display: flex; justify-content: space-between; width: 100%; font-size: 13px; font-weight: 600; color: var(--color-app-ink-label); }
.su-calc__f output { font-variant-numeric: tabular-nums; color: var(--color-app-ink); }
.su-calc__f input[type=range] { width: 100%; accent-color: var(--color-app-accent); }
.su-calc__opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-app-ink-2); cursor: pointer; }
.su-calc__opt input { accent-color: var(--color-app-accent); margin: 0; }
.su-calc__sum { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: var(--radius-ctrl); background: var(--color-app-sunk); }
.su-calc__line { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--color-app-ink-2); font-variant-numeric: tabular-nums; }
.su-calc__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 8px; border-top: 1px solid var(--color-app-line); }
.su-calc__total b { font-size: 24px; font-variant-numeric: tabular-nums; }
.su-calc__total span { font-size: 12px; color: var(--color-app-muted); }
.su-calc__note { margin: 0; font-size: 11.5px; color: var(--color-app-muted); }
@container su-calc (max-width: 520px) { .su-calc__in { grid-template-columns: 1fr; } }

/* ============ Wave 250 reduced motion (C7) ============ */
@media (prefers-reduced-motion: reduce) {
  .su-ccard, .su-collapse__panel, .su-collapse__btn svg, .su-meter__fill, .su-meter__segs > span, .su-totop, .su-skip, .su-ring__bar, .su-dots__dot, .su-dots__dot::before, .su-radial__bar, .su-stacked__seg,
  .su-histo__bar, .su-upq__bar span, .su-checklist__bar span, .su-invite__seatbar span, .su-json__tw, .su-checklist__tick, .su-link, .su-chipfilter__chip, .su-rcard__opt { transition: none !important; }
  .su-badge__n, .su-overlay__veil, .su-infinite__item { animation: none !important; }
  .su-status[data-pulse]::before, .su-ring[data-indeterminate] svg { animation: none !important; }
  .su-ccard:has(.su-ccard__title a):hover { transform: none; }
}
/* wave 250: titles/code keep the component ink (store headings must not leak in) */
.su-ccard__title, .su-ccard__title a, .su-audit__title, .su-apikeys__title, .su-plans__title, .su-plans__name, .su-invite__title, .su-radial__title, .su-stacked__title, .su-histo__title, .su-calheat__title, .su-mail__rtitle, .su-upq__title, .su-checklist__title, .su-calc__title { color: var(--color-app-ink); }
.su-audit__what code, .su-apikeys code { color: var(--color-app-ink); background: var(--color-app-sunk); }