/* ==========================================================================
   Components · glass panels, buttons, fields, tabs, tables, dialogs
   ========================================================================== */

/* ======================= Panel ========================================= */
.panel {
  position: relative;
  background: var(--glass-1);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), var(--inset-top), var(--ring);
  backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  min-width: 0;
}
.panel--flush { padding: 0; }
.panel--pad { padding: 16px 18px; }
.panel--strong { background: var(--glass-2); }

.panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
  min-height: 42px;
}
.panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: .01em;
}
.panel__title svg { width: 15px; height: 15px; color: var(--sky-600); }
.panel__sub { font-size: var(--fs-11); color: var(--ink-faint); }
.panel__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.panel__body { padding: 14px 16px; min-width: 0; }
.panel__body--tight { padding: 11px 13px; }
.panel__body--flush { padding: 0; }

/* ======================= Page header =================================== */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  min-height: 42px;
}
.page-head__main { min-width: 0; }
.page-head h1 {
  font-size: var(--fs-22);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.page-head__sub {
  margin-top: 4px;
  font-size: var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.55;
}
.page-head__sub b { font-weight: 600; color: var(--ink-2); }
.page-head__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-top: 2px;
}
.page-head__stamp {
  font-size: var(--fs-11);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ======================= Buttons ======================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink-2);
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  box-shadow: 0 1px 2px rgba(6, 42, 66, .06), var(--inset-top);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background var(--dur-2) linear,
    color var(--dur-2) linear,
    border-color var(--dur-2) linear;
}

.btn svg { width: 14px; height: 14px; flex: none; }
.btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px -6px rgba(6, 42, 66, .38), var(--inset-top); }
.btn:active { transform: translateY(0) scale(.975); transition-duration: 60ms; }
.btn:disabled,
.btn[aria-disabled="true"] {
  transform: none;
  opacity: .46;
  box-shadow: none;
  cursor: not-allowed;
  filter: saturate(.5);
}
.btn[aria-disabled="true"] { pointer-events: auto; }

/* shine sweep */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}
.btn:hover::after { animation: shine var(--dur-4) var(--ease-out); }

/* primary: near-black ink fill — exactly one per screen ------------------- */
.btn--primary {
  color: #fff;
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, #17303d 0%, #0e2430 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 6px 16px -8px rgba(9, 32, 46, .55),
    0 1px 2px rgba(9, 32, 46, .22);
  font-weight: 600;
}
.btn--primary:hover {
  background: linear-gradient(180deg, #1d3d4d 0%, #133140 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 10px 22px -10px rgba(9, 32, 46, .6);
  border-color: rgba(255, 255, 255, .22);
}
.btn--primary svg { color: #fff; }

:root[data-theme="dark"] .btn--primary {
  color: #0b1a23;
  background: linear-gradient(180deg, #f4f9fc 0%, #dbe7ef 100%);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 20px -12px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .btn--primary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e6f0f7 100%);
}
:root[data-theme="dark"] .btn--primary svg { color: #0b1a23; }
:root[data-theme="dark"] .btn--primary .ripple { background: rgba(9, 32, 46, .18); }

/* secondary: glass with a defter border ---------------------------------- */
.btn--secondary {
  color: var(--sky-700);
  background: var(--glass-2);
  border-color: rgba(11, 112, 168, .20);
}
.btn--secondary:hover { background: rgba(255, 255, 255, .92); border-color: rgba(11, 112, 168, .34); }
:root[data-theme="dark"] .btn--secondary { color: #c4e6fb; border-color: rgba(140, 205, 240, .22); }
:root[data-theme="dark"] .btn--secondary:hover { background: rgba(30, 74, 104, .75); }

/* ghost ------------------------------------------------------------------ */
.btn--ghost {
  color: var(--ink-2);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .55); border-color: transparent; }
:root[data-theme="dark"] .btn--ghost:hover { background: rgba(255, 255, 255, .08); }
.btn--ghost svg { color: var(--ink-muted); }

/* danger ----------------------------------------------------------------- */
.btn--danger {
  color: #fff;
  background: linear-gradient(180deg, #d8503a, #bd3520);
  border-color: rgba(255, 190, 176, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -10px rgba(150, 32, 18, .85);
}
.btn--danger:hover { background: linear-gradient(180deg, #e35d44, #c73c25); }

.btn--danger-ghost {
  color: var(--danger-500);
  background: transparent;
  border-color: rgba(198, 58, 34, .22);
  box-shadow: none;
}
.btn--danger-ghost:hover { background: var(--danger-bg); border-color: rgba(198, 58, 34, .4); }

/* quiet / text ----------------------------------------------------------- */
.btn--text {
  height: auto;
  padding: 2px 4px;
  color: var(--sky-700);
  background: none;
  border: 0;
  box-shadow: none;
  font-size: var(--fs-12);
}
.btn--text:hover { transform: none; text-decoration: underline; text-underline-offset: 3px; }

/* sizes ------------------------------------------------------------------- */
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--r-xs); }
.btn--sm svg { width: 13px; height: 13px; }
.btn--xs { height: 24px; padding: 0 8px; font-size: 11.5px; border-radius: var(--r-xs); }
.btn--xs svg { width: 12px; height: 12px; }
.btn--lg { height: 42px; padding: 0 22px; font-size: 13.5px; border-radius: var(--r-md); }
.btn--block { width: 100%; }
.btn--pill { border-radius: var(--r-pill); }

/* icon button ------------------------------------------------------------- */
.btn-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs);
  color: var(--ink-2);
  border: 1px solid transparent;
  transition: background var(--dur-2) linear, color var(--dur-2) linear, transform var(--dur-2) var(--ease-out), border-color var(--dur-2) linear;
}
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:hover { background: rgba(255, 255, 255, .62); color: var(--ink); border-color: var(--glass-line); transform: translateY(-1px); }
:root[data-theme="dark"] .btn-icon:hover { background: rgba(255, 255, 255, .10); }
.btn-icon:active { transform: scale(.92); }
.btn-icon.is-on { background: var(--sky-100); color: var(--sky-700); border-color: rgba(11, 112, 168, .2); }

/* loading ---------------------------------------------------------------- */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: .55; }
.btn__spinner {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin .7s linear infinite;
  flex: none;
}

/* ripple ------------------------------------------------------------------ */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .55);
  pointer-events: none;
  animation: ripple .55s var(--ease-out) forwards;
}
.btn--primary .ripple { background: rgba(255, 255, 255, .7); }
.btn--ghost .ripple,
.btn--secondary .ripple { background: rgba(11, 112, 168, .16); }

/* ======================= Toolbar ======================================= */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--glass-1);
  border: 1px solid var(--glass-line);
  box-shadow: var(--inset-top), var(--ring);
  backdrop-filter: blur(var(--blur-1)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(150%);
  margin-bottom: var(--gap);
}
.toolbar--plain { background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; }
.toolbar__sep { width: 1px; height: 20px; background: var(--hairline); margin: 0 2px; }
.toolbar__label { font-size: var(--fs-11); color: var(--ink-faint); }
.toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ======================= Fields ======================================== */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-11);
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.field__label .req { color: var(--danger-500); }
.field__hint { font-size: var(--fs-11); color: var(--ink-faint); }

.input,
.textarea,
.select {
  width: 100%;
  height: var(--control-h);
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--glass-3);
  border: 1px solid var(--hairline-strong);
  box-shadow: inset 0 1px 2px rgba(6, 42, 66, .04);
  transition: border-color var(--dur-2) linear, box-shadow var(--dur-2) linear, background var(--dur-2) linear;
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); }
.input:hover,
.textarea:hover,
.select:hover { border-color: rgba(11, 112, 168, .34); background: rgba(255, 255, 255, .92); }
.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--sky-400);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 0 0 3px rgba(26, 142, 205, .15);
  outline: none;
}
.input:disabled,
.textarea:disabled,
.select:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--glass-sunk);
}
.input--sm { height: 28px; font-size: 12px; }
.input--search { padding-left: 31px; }
.input--num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; }

.textarea {
  height: auto;
  min-height: 92px;
  padding: 9px 11px;
  line-height: 1.7;
  resize: vertical;
}
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] .select { background: rgba(8, 30, 47, .62); }
:root[data-theme="dark"] .input:hover,
:root[data-theme="dark"] .textarea:hover,
:root[data-theme="dark"] .select:hover { background: rgba(12, 40, 60, .8); }
:root[data-theme="dark"] .input:focus,
:root[data-theme="dark"] .textarea:focus { background: rgba(10, 34, 52, .92); }

.input-wrap { position: relative; min-width: 0; }
.input-wrap > svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-faint);
  pointer-events: none;
}
.textarea-wrap { position: relative; }
.textarea-wrap .textarea { padding-bottom: 24px; }
.textarea-count {
  position: absolute;
  right: 9px;
  bottom: 6px;
  font-family: var(--font-num);
  font-size: 10.5px;
  color: var(--ink-faint);
  background: var(--glass-3);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  pointer-events: none;
}

.select-wrap { position: relative; }
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  cursor: pointer;
}
.select.input--sm { height: 28px; font-size: 11.5px; padding-right: 24px; }
.select-wrap > svg {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--ink-muted);
  pointer-events: none;
}
:root[data-theme="dark"] .select option { background: #0a2438; color: var(--ink); }

/* checkbox / radio / switch ---------------------------------------------- */
.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-12);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 4.5px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-3);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) linear, transform var(--dur-1) var(--ease-out);
}
.check__box svg { width: 10px; height: 10px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.check:hover .check__box { border-color: var(--sky-400); }
.check input:checked + .check__box {
  background: var(--sky-600);
  border-color: var(--sky-600);
}
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px rgba(26, 142, 205, .22); }
.check.is-disabled { opacity: .45; cursor: not-allowed; }

.check--radio .check__box { border-radius: 50%; }
.check--radio input:checked + .check__box { background: var(--glass-3); border-color: var(--sky-600); }
.check--radio .check__box::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky-600);
  transform: scale(0);
  transition: transform var(--dur-2) var(--ease-spring);
}
.check--radio input:checked + .check__box::after { transform: scale(1); }
.check--radio .check__box svg { display: none; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-12);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative;
  flex: none;
  width: 34px;
  height: 19px;
  border-radius: var(--r-pill);
  background: rgba(7, 60, 92, .18);
  border: 1px solid rgba(7, 60, 92, .12);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) linear;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(6, 42, 66, .35);
  transition: transform var(--dur-2) var(--ease-spring);
}
.switch input:checked + .switch__track { background: var(--sky-500); border-color: var(--sky-500); }
.switch input:checked + .switch__track::after { transform: translateX(15px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px rgba(26, 142, 205, .22); }
:root[data-theme="dark"] .switch__track { background: rgba(255, 255, 255, .18); }

.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--glass-sunk);
  border: 1px solid var(--glass-line);
}
.seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 26px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: var(--fs-12);
  color: var(--ink-muted);
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) linear, box-shadow var(--dur-2) linear;
}
.seg__btn svg { width: 13px; height: 13px; }
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-active {
  color: var(--sky-800);
  font-weight: 600;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 3px rgba(6, 42, 66, .12);
}
:root[data-theme="dark"] .seg__btn.is-active { background: rgba(46, 104, 142, .9); color: #eaf6ff; }

/* ======================= Tabs ========================================== */
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
  padding: 0 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { height: 0; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 13px;
  font-size: var(--fs-13);
  color: var(--ink-muted);
  white-space: nowrap;
  transition: color var(--dur-2) linear;
}
.tab svg { width: 13px; height: 13px; }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--sky-800); font-weight: 600; }
:root[data-theme="dark"] .tab.is-active { color: #9adcff; }
.tab.is-active::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--sky-600);
  animation: tab-line var(--dur-3) var(--ease-out);
}
.tab__count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: var(--r-pill);
  font-family: var(--font-num);
  font-size: 10px;
  background: rgba(7, 60, 92, .10);
  color: var(--ink-2);
}
.tab.is-active .tab__count { background: var(--sky-600); color: #fff; }

/* pill tabs --------------------------------------------------------------- */
.pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  color: var(--ink-2);
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  transition: background var(--dur-2) linear, color var(--dur-2) linear, transform var(--dur-2) var(--ease-out), border-color var(--dur-2) linear;
}
.pill:hover { transform: translateY(-1px); border-color: rgba(11, 112, 168, .3); }
.pill.is-active {
  color: #fff;
  background: linear-gradient(180deg, var(--sky-500), var(--sky-600));
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 6px 14px -8px rgba(7, 86, 131, .9);
}
.pill svg { width: 12px; height: 12px; }

/* ======================= Table ========================================= */
.table-wrap {
  position: relative;
  overflow: auto;
  border-radius: var(--r-md);
  max-height: 100%;
}
.table {
  width: 100%;
  font-size: 12.5px;
  color: var(--ink-2);
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 38px;
  padding: 0 12px;
  text-align: left;
  font-size: var(--fs-11);
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: .02em;
  white-space: nowrap;
  background: rgba(247, 252, 255, .82);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
:root[data-theme="dark"] .table thead th { background: rgba(9, 34, 52, .88); }
.table thead th.num { text-align: right; }
.table th .sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font: inherit;
}
.table th .sort svg { width: 9px; height: 9px; opacity: .45; transition: opacity var(--dur-2), transform var(--dur-2); }
.table th .sort:hover { color: var(--sky-700); }
.table th .sort.is-sorted { color: var(--sky-700); }
.table th .sort.is-sorted svg { opacity: 1; }
.table th .sort.is-asc svg { transform: rotate(180deg); }

.table tbody td {
  height: var(--row-h);
  padding: 6px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  white-space: nowrap;
}
.table tbody tr { transition: background var(--dur-2) linear; }
.table tbody tr:hover { background: rgba(255, 255, 255, .46); }
:root[data-theme="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, .05); }
.table tbody tr.is-selected { background: rgba(26, 142, 205, .10); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.table td.ink { color: var(--ink); font-weight: 500; }
.table--dense tbody td { height: 38px; }
.table--compact tbody td { height: 34px; padding-top: 4px; padding-bottom: 4px; }

.table--freeze th:first-child,
.table--freeze td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: rgba(248, 252, 255, .72);
}
:root[data-theme="dark"] .table--freeze th:first-child,
:root[data-theme="dark"] .table--freeze td:first-child { background: rgba(11, 34, 52, .82); }
.table--freeze thead th:first-child { z-index: 3; }

.col-check { width: 36px; padding-right: 0 !important; }
.col-num { text-align: right; }
.col-idx { width: 42px; color: var(--ink-faint); font-family: var(--font-num); }

.cell-user { display: flex; align-items: center; gap: 8px; }
.avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #063d5e;
  background: linear-gradient(180deg, #d6f0ff, #a9dcf8);
  border: 1px solid rgba(255, 255, 255, .7);
}
.avatar--lg { width: 34px; height: 34px; font-size: 12px; }
.avatar--accent { background: linear-gradient(180deg, #cdf1f3, #8ddde1); color: #03343a; }
.avatar--h1 { background: linear-gradient(180deg, #d9efff, #a7d9f7); color: #063d5e; }
.avatar--h2 { background: linear-gradient(180deg, #ffeac8, #ffd18c); color: #04363c; }
.avatar--h3 { background: linear-gradient(180deg, #d7f4e8, #a5e5cd); color: #054a3b; }
.avatar--h4 { background: linear-gradient(180deg, #ffe1dc, #ffc2b7); color: #5c1d12; }
.avatar--h5 { background: linear-gradient(180deg, #e6ebfa, #cbd3f1); color: #232a52; }
.avatar--h6 { background: linear-gradient(180deg, #f2e8d4, #e0cba8); color: #43301a; }
.cell-user__txt { min-width: 0; }
.cell-user__name { color: var(--ink); font-weight: 500; line-height: 1.25; }
.cell-user__sub { font-size: 10.5px; color: var(--ink-faint); line-height: 1.3; }

.table-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-12);
}
.table-empty svg { width: 28px; height: 28px; margin: 0 auto 8px; color: var(--ink-faint); opacity: .7; }

/* ======================= Status badges ================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--glass-sunk);
  border: 1px solid var(--glass-line);
  flex: none;
}
.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--ok { color: var(--success-600); background: var(--success-bg); border-color: rgba(15, 138, 95, .18); }
.badge--live { color: var(--danger-500); background: var(--danger-bg); border-color: rgba(198, 58, 34, .18); }
.badge--live::before { animation: pulse-dot 1.6s var(--ease-in-out) infinite; }
.badge--wait { color: var(--warn-500); background: var(--warn-bg); border-color: rgba(161, 102, 10, .2); }
.badge--off { color: var(--ink-faint); background: rgba(7, 60, 92, .05); }
.badge--sky { color: var(--sky-700); background: var(--glass-tint-sky); border-color: rgba(11, 112, 168, .18); }
.badge--accent { color: var(--accent-700); background: var(--glass-tint-accent); border-color: rgba(168, 100, 18, .18); }
.badge--plain::before { display: none; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--sky-700);
  background: var(--glass-tint-sky);
  border: 1px solid rgba(11, 112, 168, .16);
}

/* ======================= Stats ========================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  background: var(--glass-1);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), var(--inset-top), var(--ring);
  backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  overflow: hidden;
  margin-bottom: 14px;
}
.stat {
  position: relative;
  padding: 12px 16px 13px;
  min-width: 0;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--hairline);
}
.stat__label {
  font-size: var(--fs-11);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.stat__value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-26);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-top: 3px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.stat__value small { font-size: var(--fs-11); font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.stat__value.is-accent { color: var(--accent-600); }
.stat__value.is-live { color: var(--danger-500); }
.stat__value.is-ok { color: var(--success-600); }
.stat__delta { font-size: var(--fs-11); color: var(--ink-faint); margin-top: 2px; }
.stat--tight .stat__value { font-size: var(--fs-22); }

/* ======================= Pager ========================================= */
.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-12);
  color: var(--ink-muted);
}
.pager__info { margin-right: auto; font-variant-numeric: tabular-nums; }
.pager__info b { font-family: var(--font-num); color: var(--ink); font-weight: 600; }
.page-btn {
  min-width: 27px;
  height: 27px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  font-family: var(--font-num);
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.page-btn:hover:not(:disabled) { background: #fff; color: var(--sky-700); transform: translateY(-1px); }
.page-btn.is-active {
  color: #fff;
  background: linear-gradient(180deg, var(--sky-500), var(--sky-600));
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 4px 10px -6px rgba(7, 86, 131, .9);
}
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-btn svg { width: 11px; height: 11px; margin: 0 auto; }
.pager .select { width: auto; height: 27px; font-size: 11.5px; padding: 0 24px 0 9px; }

/* ======================= Empty / loading =============================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 46px 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-12);
  animation: fade-in var(--dur-3) var(--ease-out) both;
}
.empty__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--sky-600);
  background: var(--glass-tint-sky);
  border: 1px dashed rgba(11, 112, 168, .28);
  margin-bottom: 2px;
}
.empty__icon svg { width: 22px; height: 22px; }
.empty__title { font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); }
.empty__desc { font-size: var(--fs-11); color: var(--ink-faint); max-width: 380px; line-height: 1.6; }
.empty--inline { padding: 20px 16px; }
.empty--inline .empty__icon { width: 42px; height: 42px; }
.empty--dashed {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  margin: 12px;
  padding: 30px 16px;
}

.skeleton {
  border-radius: 4px;
  background: rgba(11, 112, 168, .10);
  animation: skeleton-pulse 1.4s var(--ease-in-out) infinite;
}

/* ======================= Notices ======================================= */
.notice {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-11);
  line-height: 1.6;
  color: var(--ink-muted);
  background: var(--glass-sunk);
  border: 1px solid var(--hairline);
}
.notice svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--sky-600); }
.notice--warn { color: #7a4d05; background: var(--warn-bg); border-color: rgba(161, 102, 10, .24); }
.notice--warn svg { color: var(--warn-500); }
.notice--danger { color: var(--danger-600); background: var(--danger-bg); border-color: rgba(198, 58, 34, .22); }
.notice--danger svg { color: var(--danger-500); }
.notice--accent { background: var(--glass-tint-accent); border-color: rgba(168, 100, 18, .2); }
.notice--accent svg { color: var(--accent-600); }
:root[data-theme="dark"] .notice--warn { color: #f3d296; }
.notice b { color: inherit; font-weight: 600; }

/* ======================= Log console =================================== */
.log {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--r-md);
  background: rgba(7, 28, 44, .82);
  border: 1px solid rgba(150, 205, 235, .16);
  overflow: hidden;
}
.log__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  font-size: 11px;
  color: rgba(190, 220, 240, .7);
  border-bottom: 1px solid rgba(150, 205, 235, .12);
  background: rgba(5, 22, 36, .6);
}
.log__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: #9fc4dc;
  white-space: pre-wrap;
  word-break: break-all;
}
.log__line { animation: log-in var(--dur-2) var(--ease-out) both; }
.log__line .t { color: #5d8ba8; }
.log__line .ok { color: #5fd6a3; }
.log__line .warn { color: #ffcf7a; }
.log__line .err { color: #ff8e7c; }
.log__line .hl { color: #8fd8ff; }

/* ======================= Split panes =================================== */
.split {
  display: grid;
  gap: var(--gap);
  min-height: 0;
}
.split--sidebar { grid-template-columns: 330px minmax(0, 1fr); }
.split--equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--thirds { grid-template-columns: 250px minmax(0, 1fr) 236px; }
.split--read { grid-template-columns: 258px minmax(0, 1fr); }

/* ======================= Misc ========================================== */
.form-grid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--1 { grid-template-columns: minmax(0, 1fr); }
.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-field { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--ink-muted); }
.inline-field .input { width: 68px; height: 28px; text-align: center; padding: 0 6px; font-size: 12px; }

.divider { height: 1px; background: var(--hairline); margin: 12px 0; }
.divider--v { width: 1px; height: auto; align-self: stretch; margin: 0 4px; }

.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

.hint-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-11);
  color: var(--ink-faint);
  line-height: 1.5;
}
.hint-line svg { width: 12px; height: 12px; flex: none; }

.kv { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 10px; font-size: var(--fs-12); }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; color: var(--ink-2); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.mini-card {
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: var(--glass-1);
  border: 1px solid var(--glass-line);
  box-shadow: var(--inset-top), var(--ring);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) linear, border-color var(--dur-2) linear, box-shadow var(--dur-2);
}
.mini-card:hover { transform: translateY(-2px); background: var(--glass-2); box-shadow: var(--shadow-1), var(--inset-top), var(--ring); border-color: rgba(255, 255, 255, .9); }
.mini-card__title { display: flex; align-items: center; gap: 7px; font-size: var(--fs-13); font-weight: 600; }
.mini-card__title svg { width: 16px; height: 16px; color: var(--sky-600); }
.mini-card__desc { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 5px; line-height: 1.6; }

.bar {
  position: relative;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(7, 60, 92, .10);
  overflow: hidden;
}
.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sky-400), var(--sky-600));
  transition: width var(--dur-4) var(--ease-out);
}
.bar__fill.is-accent { background: linear-gradient(90deg, #8ddde1, var(--accent-600)); }
.bar__fill.is-ok { background: linear-gradient(90deg, #6adcae, var(--success-600)); }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  color: var(--ink-2);
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
}
.chip svg { width: 10px; height: 10px; color: var(--ink-faint); }
.chip__x { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: rgba(7, 60, 92, .08); }
.chip__x:hover { background: var(--danger-bg); color: var(--danger-500); }

.meter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-faint);
}
.meter .bar { flex: 1 1 auto; }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.spark i { width: 3px; border-radius: 1px; background: rgba(26, 142, 205, .35); }
.spark i.is-hot { background: var(--sky-600); }

/* ---- dark theme: text that sits on a tinted chip ---------------------- */
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .link-name,
:root[data-theme="dark"] .badge--sky,
:root[data-theme="dark"] .event-chip.is-sky,
:root[data-theme="dark"] .var,
:root[data-theme="dark"] .score { color: #9dd6f7; }

:root[data-theme="dark"] .badge--accent,
:root[data-theme="dark"] .event-chip.is-accent,
:root[data-theme="dark"] .gift-name { color: #8ddde1; }

:root[data-theme="dark"] .event-chip { color: #b9cfdd; background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .tag { background: rgba(38, 126, 178, .28); border-color: rgba(120, 200, 240, .22); }
:root[data-theme="dark"] .var { background: rgba(38, 126, 178, .26); border-color: rgba(120, 200, 240, .22); }
:root[data-theme="dark"] .chip { background: rgba(255, 255, 255, .07); border-color: rgba(160, 215, 250, .16); }
:root[data-theme="dark"] .kbd { background: rgba(255,255,255,.08); }