/* ════════════════════════════════════════════════════════════════════
   CFS PRO — COMPONENTS
   Buttons, cards, inputs, tables, badges, tabs, tooltips, toasts,
   progress, skeletons, stat cards, phase cards, star ratings.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════ */
.btn {
  --btn-bg: var(--surface);
  --btn-bd: var(--border-strong);
  --btn-fg: var(--text-1);
  --btn-bg-h: var(--surface-2);
  --btn-bd-h: var(--text-1);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 8px 14px;
  min-height: 36px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-med);
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background var(--d-2) var(--ease-out),
    border-color var(--d-2) var(--ease-out),
    box-shadow var(--d-2) var(--ease-out),
    transform var(--d-1) var(--ease-out),
    color var(--d-2) var(--ease-out);
}
.btn:hover {
  background: var(--btn-bg-h);
  border-color: var(--btn-bd-h);
  box-shadow: var(--sh-2);
}
.btn:active { transform: translateY(1px); box-shadow: var(--sh-1); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: var(--sh-0);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.75; }

/* Variants */
.btn-primary {
  --btn-bg: var(--ink-950);
  --btn-bd: var(--ink-950);
  --btn-fg: var(--text-inv);
  --btn-bg-h: var(--ink-800);
  --btn-bd-h: var(--ink-800);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .btn-primary {
  --btn-bg: var(--paper);
  --btn-bd: var(--paper);
  --btn-fg: var(--ink-950);
  --btn-bg-h: #FFFFFF;
}
.btn-primary:hover { box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.10); }

.btn-accent {
  --btn-bg: var(--accent-500);
  --btn-bd: var(--accent-600);
  --btn-fg: var(--on-accent);
  --btn-bg-h: var(--accent-600);
  --btn-bd-h: var(--accent-700);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-accent:hover { box-shadow: var(--sh-gold-glow); }

.btn-secondary { /* default styles above */ }

.btn-ghost {
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-bg-h: var(--surface-3);
  --btn-bd-h: transparent;
  box-shadow: none;
}
.btn-ghost:hover { box-shadow: none; }

.btn-danger {
  --btn-bg: var(--err-bg);
  --btn-bd: var(--err-bd);
  --btn-fg: var(--err-tx);
  --btn-bg-h: var(--err-solid);
  --btn-bd-h: var(--err-solid);
}
.btn-danger:hover { color: #fff; }

.btn-icon {
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--r-3);
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-fg: var(--text-2);
  --btn-bg-h: var(--surface-3);
  box-shadow: none;
}
.btn-icon:hover { box-shadow: none; color: var(--text-1); }

/* Sizes */
.btn-sm { min-height: 28px; padding: 6px 10px; font-size: var(--fs-12); }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { min-height: 44px; padding: 12px 20px; font-size: var(--fs-14); }
.btn-xl { min-height: 52px; padding: 14px 24px; font-size: var(--fs-15); font-weight: var(--fw-sem); }
.btn-block { width: 100%; }

/* Button group */
.btn-group {
  display: inline-flex;
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
  isolation: isolate;
}
.btn-group .btn {
  border-radius: 0;
  margin-inline-start: -1px;
  box-shadow: none;
}
.btn-group .btn:first-child { border-start-start-radius: var(--r-3); border-end-start-radius: var(--r-3); margin-inline-start: 0; }
.btn-group .btn:last-child { border-start-end-radius: var(--r-3); border-end-end-radius: var(--r-3); }
.btn-group .btn:hover { z-index: 1; }

/* ════════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: var(--sh-1);
  overflow: hidden;
  position: relative;
}
.card-elev { box-shadow: var(--sh-2); }
.card-flat { box-shadow: none; }

.card-hover {
  transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out), border-color var(--d-3) var(--ease-out);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  border-color: var(--border-strong);
}

.card-head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-sem);
  color: var(--text-1);
  letter-spacing: var(--tr-snug);
}
.card-sub {
  font-size: var(--fs-11);
  font-family: var(--font-mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}
.card-body { padding: var(--s-5); }
.card-foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

.card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-bd);
}

.card-ink {
  background: var(--ink-950);
  border-color: var(--ink-800);
  color: var(--text-inv);
}
.card-ink .card-title, .card-ink .card-sub { color: var(--text-inv); }
.card-ink .card-sub { color: rgba(245,241,226,.55); }

/* ════════════════════════════════════════════════════════════════════
   STAT CARDS / KPI
   ════════════════════════════════════════════════════════════════════ */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  box-shadow: var(--sh-1);
}
.stat::after {
  content: "";
  position: absolute;
  top: 0; inset-inline-end: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle at top right, var(--accent-50), transparent 60%);
  pointer-events: none;
  opacity: .6;
}
[data-theme="dark"] .stat::after { background: radial-gradient(circle at top right, rgba(184,149,78,.08), transparent 60%); }
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-3);
}
.stat-val {
  font-family: var(--font-mono);
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  letter-spacing: var(--tr-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-val .unit { font-size: var(--fs-14); color: var(--text-3); margin-inline-start: 4px; font-weight: var(--fw-med); }
.stat-sub {
  font-size: var(--fs-11);
  color: var(--text-2);
  font-family: var(--font-mono);
}
.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-sem);
  padding: 2px 6px;
  border-radius: var(--r-2);
}
.stat-delta.up   { background: var(--ok-bg); color: var(--ok-tx); }
.stat-delta.down { background: var(--err-bg); color: var(--err-tx); }
.stat-delta.flat { background: var(--surface-3); color: var(--text-2); }

.stat-highlight {
  background: var(--ink-950);
  color: var(--text-inv);
  border-color: var(--ink-800);
}
.stat-highlight .stat-label { color: rgba(245,241,226,.55); }
.stat-highlight .stat-val   { color: var(--paper); }
.stat-highlight .stat-sub   { color: rgba(245,241,226,.6); }
.stat-highlight::after { background: radial-gradient(circle at top right, rgba(184,149,78,.20), transparent 60%); opacity: 1; }

/* ════════════════════════════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════════════════════════════ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.field-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-3);
  font-weight: var(--fw-sem);
}
.field-hint  { font-size: var(--fs-11); color: var(--text-3); }
.field-err   { font-size: var(--fs-11); color: var(--err-tx); }

.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.4);
  transition:
    border-color var(--d-2) var(--ease-out),
    box-shadow var(--d-2) var(--ease-out),
    background var(--d-2) var(--ease-out);
}
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea {
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.02);
}
.input.mono, .input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent-500);
  box-shadow: var(--sh-1), 0 0 0 3px var(--accent-50);
}
[data-theme="dark"] .input:focus,
[data-theme="dark"] .select:focus,
[data-theme="dark"] .textarea:focus {
  box-shadow: var(--sh-1), 0 0 0 3px rgba(184,149,78,.18);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
}
.textarea { min-height: 80px; resize: vertical; }

.input-sm { padding: 6px 10px; font-size: var(--fs-12); }
.input-lg { padding: 12px 14px; font-size: var(--fs-15); }

/* Floating label */
.field-float {
  position: relative;
}
.field-float .input,
.field-float .textarea {
  padding-top: 18px;
  padding-bottom: 6px;
}
.field-float .field-label {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  pointer-events: none;
  background: transparent;
  transition: all var(--d-2) var(--ease-out);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--text-3);
  font-weight: var(--fw-reg);
}
.field-float .input:focus + .field-label,
.field-float .input:not(:placeholder-shown) + .field-label,
.field-float .textarea:focus + .field-label,
.field-float .textarea:not(:placeholder-shown) + .field-label {
  top: 4px;
  font-size: var(--fs-10);
  color: var(--text-3);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  font-weight: var(--fw-sem);
}

/* Input group with icon */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-inline-start: 36px; }
.input-group-ic {
  position: absolute;
  inset-inline-start: 12px;
  width: 16px; height: 16px;
  color: var(--text-3);
  pointer-events: none;
}

/* Select */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6960' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-inline-start: 12px;
  padding-inline-end: 36px;
  cursor: pointer;
}
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B5B0A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* Checkbox / Radio */
.check, .radio {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: all var(--d-2) var(--ease-out);
}
.check { border-radius: var(--r-2); }
.radio { border-radius: 50%; }
.check:hover, .radio:hover { border-color: var(--ink-700); }
.check:checked, .radio:checked {
  background: var(--ink-950);
  border-color: var(--ink-950);
}
.check:checked::after {
  content: "";
  width: 10px; height: 6px;
  border-inline-start: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg) translate(1px, -1px);
}
.radio:checked::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--paper);
}

/* Toggle switch */
.switch {
  --w: 36px;
  --h: 20px;
  position: relative;
  display: inline-block;
  width: var(--w);
  height: var(--h);
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch-knob {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: var(--r-full);
  transition: background var(--d-2) var(--ease-out);
  pointer-events: none;
}
.switch-knob::before {
  content: "";
  position: absolute;
  width: calc(var(--h) - 4px);
  height: calc(var(--h) - 4px);
  top: 2px;
  inset-inline-start: 2px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: var(--sh-2);
  transition: transform var(--d-3) var(--ease-spring);
}
.switch input:checked ~ .switch-knob {
  background: var(--ink-950);
}
[data-theme="dark"] .switch input:checked ~ .switch-knob { background: var(--accent-500); }
[dir="rtl"] .switch input:checked ~ .switch-knob::before { transform: translateX(calc((var(--w) - var(--h)) * -1)); }
[dir="ltr"] .switch input:checked ~ .switch-knob::before { transform: translateX(calc(var(--w) - var(--h))); }
.switch input:focus-visible ~ .switch-knob { box-shadow: var(--sh-focus); }

/* ════════════════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════════════════ */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-13);
}
.table thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-sem);
  color: var(--text-3);
  text-align: start;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  white-space: nowrap;
  z-index: 2;
}
.table thead th.sortable { cursor: pointer; user-select: none; }
.table thead th.sortable:hover { color: var(--text-1); }
.table thead th.sortable::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-inline-start: 6px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
  opacity: .4;
  vertical-align: middle;
}
.table thead th.sort-asc::after  { transform: rotate(180deg); opacity: 1; }
.table thead th.sort-desc::after { opacity: 1; }

.table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--divider);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--d-1) var(--ease-out); }
.table tbody tr:hover { background: var(--surface-2); }
.table.zebra tbody tr:nth-child(even) { background: var(--surface-2); }
.table.zebra tbody tr:nth-child(even):hover { background: var(--surface-3); }
.table tbody tr.core-row { background: var(--core-bg); }
.table tbody tr.opt-row  { background: transparent; }
.table tbody tr.opt-off  { opacity: .4; }
.table .num, .table .mono { font-variant-numeric: tabular-nums; }
.table-compact tbody td { padding: 6px 10px; }
.table-compact thead th { padding: 6px 10px; }

/* ════════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-sem);
  padding: 2px 7px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.badge-neutral { background: var(--surface-3); color: var(--text-2); border-color: var(--border); }
.badge-ink     { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); }
.badge-accent  { background: var(--accent-soft); color: var(--accent-700); border-color: var(--accent-200); }
[data-theme="dark"] .badge-accent { color: var(--accent-300); border-color: rgba(184,149,78,.3); }

.badge-ok   { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); }
.badge-warn { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd); }
.badge-err  { background: var(--err-bg); color: var(--err-tx); border-color: var(--err-bd); }
.badge-info { background: var(--info-bg); color: var(--info-tx); border-color: var(--info-bd); }

/* Solid variants */
.badge-solid.badge-ok   { background: var(--ok-solid);   color: #fff; border-color: var(--ok-solid); }
.badge-solid.badge-warn { background: var(--warn-solid); color: #fff; border-color: var(--warn-solid); }
.badge-solid.badge-err  { background: var(--err-solid);  color: #fff; border-color: var(--err-solid); }
.badge-solid.badge-info { background: var(--info-solid); color: #fff; border-color: var(--info-solid); }

/* Core / opt domain badges */
.badge-core { background: var(--core-bg); color: var(--core-tx); border-color: var(--core-bd); }
.badge-opt  { background: var(--opt-bg);  color: var(--opt-tx);  border-color: var(--opt-bd); }
.badge-qs   { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd); }

.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ════════════════════════════════════════════════════════════════════
   TABS — underline + pill variants
   ════════════════════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-med);
  color: var(--text-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.tab:hover { color: var(--text-1); }
.tab.active {
  color: var(--text-1);
  border-bottom-color: var(--ink-950);
  font-weight: var(--fw-sem);
}
[data-theme="dark"] .tab.active { border-bottom-color: var(--accent-400); }
.tab svg { width: 16px; height: 16px; }
.tab-count {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  padding: 1px 6px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  color: var(--text-3);
}
.tab.active .tab-count { background: var(--ink-950); color: var(--paper); }

/* Pill tabs */
.tabs-pill {
  display: inline-flex;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  gap: 2px;
}
.tabs-pill .tab {
  padding: 6px 14px;
  border-radius: var(--r-full);
  border-bottom: none;
  margin-bottom: 0;
  font-size: var(--fs-12);
}
.tabs-pill .tab.active {
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--sh-1);
  border-bottom: none;
}

/* ════════════════════════════════════════════════════════════════════
   TOOLTIPS — appear BELOW the element with a little arrow.
   Defaulting to "below" prevents off-screen overflow when triggers sit
   in a sticky topbar (the most common case in this app).
   Add data-tip-pos="top" on an element to flip the tip above instead.
   ════════════════════════════════════════════════════════════════════ */
[data-tip] {
  position: relative;
}
[data-tip]::after,
[data-tip]::before {
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
  z-index: var(--z-tooltip);
}
/* tooltip bubble */
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--ink-950);
  color: var(--paper);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-med);
  white-space: nowrap;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(15, 16, 20, 0.18), 0 2px 6px rgba(15, 16, 20, 0.10);
}
/* tiny arrow */
[data-tip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 4px solid transparent;
  border-bottom-color: var(--ink-950);
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Opt-in: tooltip above the trigger (rare; e.g. footer/bottom buttons) */
[data-tip][data-tip-pos="top"]::after {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
}
[data-tip][data-tip-pos="top"]::before {
  top: auto;
  bottom: calc(100% + 2px);
  border-bottom-color: transparent;
  border-top-color: var(--ink-950);
  transform: translateX(-50%) translateY(4px);
}
[data-tip][data-tip-pos="top"]:hover::after,
[data-tip][data-tip-pos="top"]:hover::before {
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   TOASTS
   ════════════════════════════════════════════════════════════════════ */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-4);
  min-width: 280px;
  font-size: var(--fs-13);
  animation: slideInEnd var(--d-3) var(--ease-spring);
}
.toast-ic {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--text-2);
  margin-top: 1px;
}
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: var(--fw-sem); color: var(--text-1); }
.toast-msg { font-size: var(--fs-12); color: var(--text-2); margin-top: 2px; }
.toast-close { color: var(--text-3); padding: 0; width: 20px; height: 20px; display: grid; place-items: center; }
.toast-ok   { border-color: var(--ok-bd); }   .toast-ok .toast-ic   { color: var(--ok-solid); }
.toast-warn { border-color: var(--warn-bd); } .toast-warn .toast-ic { color: var(--warn-solid); }
.toast-err  { border-color: var(--err-bd); }  .toast-err .toast-ic  { color: var(--err-solid); }
.toast-info { border-color: var(--info-bd); } .toast-info .toast-ic { color: var(--info-solid); }

/* ════════════════════════════════════════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════════════════════════════════════════ */
.progress {
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: var(--grad-gold);
  border-radius: inherit;
  transition: width var(--d-4) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.progress-bar.ok   { background: var(--ok-solid); }
.progress-bar.warn { background: var(--warn-solid); }
.progress-bar.err  { background: var(--err-solid); }
.progress-bar.indeterminate {
  width: 30% !important;
  animation: indeterminate 1.6s var(--ease-in-out) infinite;
}
.progress-lg { height: 10px; }
.progress-xs { height: 3px; }

/* Stepper progress */
.steps { display: flex; gap: var(--s-2); align-items: center; }
.step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-12);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.step-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-size: var(--fs-11);
  font-weight: var(--fw-sem);
  background: var(--surface);
}
.step.done .step-dot { background: var(--ink-950); border-color: var(--ink-950); color: var(--paper); }
.step.active .step-dot { border-color: var(--accent-500); color: var(--accent-700); background: var(--accent-50); }
.step.done, .step.active { color: var(--text-1); }

/* ════════════════════════════════════════════════════════════════════
   SKELETON LOADERS
   ════════════════════════════════════════════════════════════════════ */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%);
  background-size: 200% 100%;
  animation: shimmer 1.6s var(--ease-linear) infinite;
  border-radius: var(--r-2);
  display: block;
}
.skel-line { height: 12px; }
.skel-block { height: 80px; border-radius: var(--r-4); }
.skel-circle { border-radius: 50%; }

/* ════════════════════════════════════════════════════════════════════
   PHASE CARDS (formula display)
   ════════════════════════════════════════════════════════════════════ */
.phase {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  margin-bottom: var(--s-3);
  overflow: hidden;
  box-shadow: var(--sh-1);
  position: relative;
}
.phase::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-500);
  opacity: .35;
}
.phase[data-phase="A"]::before { background: var(--accent-500); }
.phase[data-phase="B"]::before { background: var(--sage-500); }
.phase[data-phase="C"]::before { background: var(--info-solid); }
.phase[data-phase="D"]::before { background: var(--ink-600); }

.phase-head {
  padding: 12px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.phase-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--accent-700);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: var(--r-2);
}
.phase-name {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-sem);
  color: var(--text-1);
  margin-inline-start: var(--s-2);
}
.phase-total {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-med);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.phase-body { padding: 0; }

/* ════════════════════════════════════════════════════════════════════
   STAR RATING
   ════════════════════════════════════════════════════════════════════ */
.stars {
  display: inline-flex;
  gap: 2px;
  font-family: var(--font-mono);
}
.star {
  width: 16px; height: 16px;
  color: var(--border-strong);
  cursor: pointer;
  transition: color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-spring);
}
.star.filled { color: var(--accent-500); }
.star:hover { transform: scale(1.15); }
.stars[data-readonly] .star { cursor: default; }
.stars[data-readonly] .star:hover { transform: none; }

/* ════════════════════════════════════════════════════════════════════
   ALERT / BANNER (warnbar / okbar replacements)
   ════════════════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  font-size: var(--fs-12);
  background: var(--surface-2);
  color: var(--text-2);
  line-height: var(--lh-norm);
}
.alert-ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.alert-body { flex: 1; min-width: 0; }
.alert strong { color: var(--text-1); font-weight: var(--fw-sem); }
.alert-ok   { background: var(--ok-bg);   border-color: var(--ok-bd);   color: var(--ok-tx); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-tx); }
.alert-err  { background: var(--err-bg);  border-color: var(--err-bd);  color: var(--err-tx); }
.alert-info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-tx); }

/* ════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════════════ */
.empty {
  text-align: center;
  padding: var(--s-9) var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  color: var(--text-2);
}
.empty-art {
  width: 96px; height: 96px;
  color: var(--text-3);
  opacity: .5;
}
.empty-title {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-sem);
  color: var(--text-1);
}
.empty-msg { font-size: var(--fs-13); color: var(--text-2); max-width: 42ch; }

/* ════════════════════════════════════════════════════════════════════
   DIVIDER
   ════════════════════════════════════════════════════════════════════ */
.divider {
  height: 1px;
  background: var(--grad-hairline);
  border: none;
  margin: var(--s-5) 0;
}
.divider-v {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}

/* ════════════════════════════════════════════════════════════════════
   CHIP (compact filter / tag)
   ════════════════════════════════════════════════════════════════════ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-12);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--d-2) var(--ease-out);
}
.chip:hover { border-color: var(--ink-400); color: var(--text-1); }
.chip.active {
  background: var(--ink-950);
  color: var(--paper);
  border-color: var(--ink-950);
}
.chip svg { width: 12px; height: 12px; }

/* ════════════════════════════════════════════════════════════════════
   QUICK-ACTION CARDS (used on empty / dashboard)
   ════════════════════════════════════════════════════════════════════ */
.qa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  cursor: pointer;
  position: relative;
  text-align: start;
  overflow: hidden;
  transition: all var(--d-3) var(--ease-out);
  box-shadow: var(--sh-1);
}
.qa-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-gold-soft);
  opacity: 0;
  transition: opacity var(--d-3) var(--ease-out);
  pointer-events: none;
}
[data-theme="dark"] .qa-card::before { background: linear-gradient(135deg, rgba(184,149,78,.08), rgba(184,149,78,.02)); }
.qa-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-300);
  box-shadow: var(--sh-3);
}
.qa-card:hover::before { opacity: 1; }
.qa-card > * { position: relative; z-index: 1; }
.qa-card-ic {
  width: 36px; height: 36px;
  border-radius: var(--r-3);
  background: var(--surface-3);
  display: grid; place-items: center;
  color: var(--accent-700);
  margin-bottom: var(--s-2);
  transition: all var(--d-3) var(--ease-out);
}
.qa-card:hover .qa-card-ic { background: var(--accent-500); color: var(--paper); transform: rotate(-4deg); }
.qa-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-sem);
  color: var(--text-1);
}
.qa-card-sub {
  font-size: var(--fs-12);
  color: var(--text-2);
  line-height: var(--lh-norm);
}
.qa-card-kbd {
  margin-top: var(--s-3);
  display: flex;
  gap: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   HERO ILLUSTRATION (CSS-art for empty state)
   ════════════════════════════════════════════════════════════════════ */
.hero-illu {
  width: 220px;
  height: 220px;
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 auto var(--s-5);
}
.hero-illu svg {
  width: 100%; height: 100%;
}
.hero-illu::before, .hero-illu::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.hero-illu::before {
  background: radial-gradient(circle, var(--accent-100), transparent 60%);
  opacity: .8;
  animation: float 6s var(--ease-in-out) infinite;
}
[data-theme="dark"] .hero-illu::before { background: radial-gradient(circle, rgba(184,149,78,.18), transparent 60%); }
.hero-illu::after {
  border: 1px dashed var(--border-strong);
  inset: 16px;
  animation: spin 40s linear infinite;
  opacity: .4;
}