/* =============================================================================
   NEXUS — Admin Console Design System
   RTL-first, dark/light, token-driven. Built on top of Tailwind CDN utilities.

   Contract with assets/admin.js (do not break):
     #sidebar / #sidebar-overlay        toggled with Tailwind .translate-x-full
     #theme-toggle > i                  swapped between .fa-sun / .fa-moon
     #accent-picker .accent-swatch      writes --primary-hue on <html>
     .sidebar-link[data-target] .active navigation
     .page-content + .hidden            page switching
     #modal / #modal-content            .hidden .opacity-0 .-translate-y-10 .scale-95
     #user-drawer-panel                 .-translate-x-full
   Tailwind's runtime <style> is appended AFTER this file, so utility overrides
   here either use !important or out-specify (`.glass .foo`) on purpose.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* =============================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* -- accent: admin.js writes --primary-hue as a bare number (e.g. 220) ---- */
  --primary-hue: 220;
  --secondary-hue: 260;
  --accent-s: 92%;

  --accent: hsl(var(--primary-hue) var(--accent-s) 63%);
  --accent-hi: hsl(var(--primary-hue) var(--accent-s) 72%);
  --accent-lo: hsl(var(--primary-hue) var(--accent-s) 52%);
  --accent-2: hsl(calc(var(--primary-hue) + 42) var(--accent-s) 66%);
  --accent-3: hsl(calc(var(--primary-hue) - 34) var(--accent-s) 62%);
  --accent-soft: hsl(var(--primary-hue) var(--accent-s) 63% / 0.14);
  --accent-softer: hsl(var(--primary-hue) var(--accent-s) 63% / 0.07);
  --accent-ring: hsl(var(--primary-hue) var(--accent-s) 63% / 0.32);
  --accent-glow: hsl(var(--primary-hue) var(--accent-s) 55% / 0.45);
  --gradient-accent: linear-gradient(115deg, var(--accent-lo), var(--accent-2));

  /* -- semantic ----------------------------------------------------------- */
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.14);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.14);

  /* -- surfaces (dark, default) ------------------------------------------- */
  --bg: #05070e;
  --bg-2: #080b15;
  --surface-1: rgba(19, 25, 41, 0.72);
  --surface-2: rgba(28, 36, 56, 0.78);
  --surface-3: rgba(255, 255, 255, 0.045);
  --surface-4: rgba(255, 255, 255, 0.075);
  --surface-solid: #131926;
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(148, 163, 184, 0.3);
  --line-top: rgba(255, 255, 255, 0.09);

  --text: #e8eefb;
  --text-2: #a4b2ca;
  --text-3: #7d8ba6; /* 5.3:1 on --surface-1 — AA for the 0.72rem meta text */
  --text-inv: #05070e;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 28px 60px -24px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 12px 34px -12px var(--accent-glow);

  /* -- geometry ----------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  --sb-w: 17rem;
  --sb-rail: 5rem;
  --topbar-h: 4.25rem;

  /* -- motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 420ms;

  --font: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  color-scheme: dark;
}

:root.light {
  --bg: #eef1f8;
  --bg-2: #f7f9fd;
  --surface-1: rgba(255, 255, 255, 0.88);
  --surface-2: #ffffff;
  --surface-3: rgba(15, 23, 42, 0.04);
  --surface-4: rgba(15, 23, 42, 0.07);
  --surface-solid: #ffffff;
  --line: rgba(15, 23, 42, 0.1);
  --line-strong: rgba(15, 23, 42, 0.2);
  --line-top: rgba(255, 255, 255, 0.9);

  --text: #0a1020;
  --text-2: #445069;
  --text-3: #5b6880; /* 5.6:1 on the light card surface */
  --text-inv: #ffffff;

  /* darkened from the tailwind-600 defaults so badge text clears 4.5:1
     against its own tinted -soft background */
  --ok: #046c4e;
  --ok-soft: rgba(4, 108, 78, 0.12);
  --warn: #9a4404;
  --warn-soft: rgba(154, 68, 4, 0.12);
  --danger: #be123c;
  --danger-soft: rgba(190, 18, 60, 0.1);
  --info: #0369a1;
  --info-soft: rgba(3, 105, 161, 0.12);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 28px -14px rgba(15, 23, 42, 0.28);
  --shadow-lg: 0 30px 60px -28px rgba(15, 23, 42, 0.35);
  --shadow-glow: 0 12px 30px -14px var(--accent-glow);

  color-scheme: light;
}

/* =============================================================================
   2. BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.glass {
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  position: relative;
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}

/* --- ambient aurora field -------------------------------------------------- */
body.glass::before {
  content: '';
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 78% 8%, hsl(var(--primary-hue) 95% 58% / 0.24), transparent 62%),
    radial-gradient(34% 40% at 12% 24%, hsl(calc(var(--primary-hue) + 52) 92% 60% / 0.20), transparent 64%),
    radial-gradient(46% 44% at 46% 104%, hsl(calc(var(--primary-hue) - 40) 90% 56% / 0.16), transparent 66%);
  filter: blur(18px);
  animation: aurora-drift 26s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

/* fine grain + grid, keeps large flat areas from banding */
body.glass::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to left, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(72% 62% at 60% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 62% at 60% 0%, #000 0%, transparent 78%);
}

:root.light body.glass::before { filter: blur(26px); opacity: 0.75; }

@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2.5%, 0) scale(1.06); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* --- focus ----------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: fixed;
  top: 0;
  right: 50%;
  transform: translate(50%, -140%);
  z-index: 200;
  padding: 0.7rem 1.4rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: translate(50%, 0); }

/* --- scrollbars ------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* =============================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-shadow: none;
}

.num,
.stat-kpi p,
.analytics-card .text-2xl,
.table-cool td,
.mini-table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

code, kbd, pre, .font-mono { font-family: var(--font-mono); }

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.45rem;
  padding: 0 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* =============================================================================
   4. APP SHELL
   ========================================================================== */

.content {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: 0;
  padding: 0 !important;
  scroll-behavior: smooth;
  transition: margin-right var(--t-slow) var(--ease);
}

.shell-inner {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 1.25rem 1rem 5rem;
}

@media (min-width: 768px) {
  .content { margin-right: var(--sb-w); }
  .shell-inner { padding: 1.5rem 1.75rem 6rem; }
  html[data-sidebar='rail'] .content { margin-right: var(--sb-rail); }
}

@media (min-width: 1400px) {
  .shell-inner { padding: 1.75rem 2.5rem 6rem; }
}

/* --- scroll progress ------------------------------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  z-index: 60;
  background: var(--gradient-accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width 90ms linear;
  pointer-events: none;
}

/* =============================================================================
   5. SIDEBAR
   ========================================================================== */

#sidebar {
  width: var(--sb-w) !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent) !important;
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

@media (min-width: 768px) {
  html[data-sidebar='rail'] #sidebar { width: var(--sb-rail) !important; }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1rem;
  min-height: var(--topbar-h);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.brand-mark {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--gradient-accent);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 17px;
  background: var(--gradient-accent);
  filter: blur(12px);
  opacity: 0.5;
  z-index: -1;
}

.brand-text { min-width: 0; line-height: 1.25; }
.brand-text strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}
.brand-text span {
  display: block;
  font-size: 0.68rem;
  color: var(--text-3);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* --- nav filter ------------------------------------------------------------ */
.sidebar-filter {
  position: relative;
  flex: 0 0 auto;
  padding: 0.85rem 0.85rem 0.35rem;
}
.sidebar-filter i {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-30%);
  font-size: 0.72rem;
  color: var(--text-3);
  pointer-events: none;
}
.sidebar-filter input {
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 0 2.1rem 0 0.75rem !important;
  font-size: 0.82rem;
  border-radius: var(--r-sm) !important;
}

.sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem 0.7rem 1rem;
}
.sidebar nav::-webkit-scrollbar { width: 0; }
.sidebar nav ul { list-style: none; margin: 0; padding: 0; }

/* --- group headers --------------------------------------------------------- */
.sidebar-section { margin-top: 0.55rem; }

.sidebar-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.15rem;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.sidebar-group-toggle:hover { color: var(--text-2); background: var(--surface-3); }
.sidebar-group-toggle > span { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.sidebar-group-toggle .fa-chevron-down {
  font-size: 0.6rem;
  transition: transform var(--t) var(--ease);
  opacity: 0.7;
}
.sidebar-group-toggle:hover { transform: none; }

.sidebar-sublist { margin: 0 0 0.3rem; }
.sidebar-sublist.collapsed { display: none; }
.rotate-180 { transform: rotate(180deg); }

/* --- links ----------------------------------------------------------------- */
.sidebar a.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 42px;
  padding: 0.5rem 0.75rem !important;
  margin-bottom: 0.15rem !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-2);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}

.sidebar a.sidebar-link i {
  width: 1.35rem;
  margin: 0 !important;
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-3);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

.sidebar a.sidebar-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-3);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.sidebar a.sidebar-link:hover { color: var(--text); transform: none; }
.sidebar a.sidebar-link:hover::before { opacity: 1; }
.sidebar a.sidebar-link:hover i { color: var(--text-2); }

.sidebar a.sidebar-link.active {
  color: #fff;
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}
.sidebar a.sidebar-link.active::before {
  opacity: 1;
  background: var(--gradient-accent);
  box-shadow: var(--shadow-glow);
}
.sidebar a.sidebar-link.active i { color: #fff; }

/* right-edge active marker */
.sidebar a.sidebar-link.active::after {
  content: '';
  position: absolute;
  right: -0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

.sidebar-link .nav-badge {
  margin-inline-start: auto;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sidebar-link .nav-badge[data-count]:not([data-count='0']):not([data-count='']) { display: inline-flex; }

/* --- footer ---------------------------------------------------------------- */
.sidebar-foot {
  flex: 0 0 auto;
  padding: 0.75rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--r-md);
  background: var(--surface-3);
  min-width: 0;
}
.sidebar-user .avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.sidebar-user .who { min-width: 0; line-height: 1.3; }
.sidebar-user .who b { display: block; font-size: 0.8rem; color: var(--text); }
.sidebar-user .who small { display: block; font-size: 0.68rem; color: var(--text-3); }
.sidebar-user .logout {
  margin-inline-start: auto;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.sidebar-user .logout:hover { color: var(--danger); background: var(--danger-soft); }

#sidebar-collapse-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 36px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
#sidebar-collapse-btn:hover { background: var(--surface-3); color: var(--text-2); transform: none; }
#sidebar-collapse-btn i { transition: transform var(--t-slow) var(--ease); }
@media (min-width: 768px) { #sidebar-collapse-btn { display: flex; } }

/* --- rail mode ------------------------------------------------------------- */
@media (min-width: 768px) {
  html[data-sidebar='rail'] .brand-text,
  html[data-sidebar='rail'] .sidebar-filter,
  html[data-sidebar='rail'] .sidebar-group-toggle > span > span,
  html[data-sidebar='rail'] .sidebar-group-toggle .fa-chevron-down,
  html[data-sidebar='rail'] .sidebar-link > span,
  html[data-sidebar='rail'] .sidebar-user .who,
  html[data-sidebar='rail'] #sidebar-collapse-btn span { display: none; }

  html[data-sidebar='rail'] .sidebar-brand { justify-content: center; padding-inline: 0; }
  html[data-sidebar='rail'] .sidebar-group-toggle { justify-content: center; padding-inline: 0; }
  html[data-sidebar='rail'] .sidebar-sublist.collapsed { display: block; }
  html[data-sidebar='rail'] .sidebar a.sidebar-link { justify-content: center; padding-inline: 0 !important; }
  html[data-sidebar='rail'] .sidebar a.sidebar-link i { font-size: 1.05rem; }
  html[data-sidebar='rail'] .sidebar-user { justify-content: center; padding-inline: 0; }
  html[data-sidebar='rail'] .sidebar-user .logout { margin: 0; }
  html[data-sidebar='rail'] #sidebar-collapse-btn i { transform: rotate(180deg); }

}

/* Rail tooltips are a single fixed element positioned by ui.js — a CSS
   ::after would be clipped by #sidebar's overflow:hidden. */
#rail-tip {
  position: fixed;
  z-index: 90;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
#rail-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }

#sidebar-overlay {
  background: rgba(3, 5, 10, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* =============================================================================
   6. TOPBAR
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--topbar-h);
  padding: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

@media (min-width: 768px) {
  .topbar { padding: 0.6rem 1.75rem; }
}
@media (min-width: 1400px) {
  .topbar { padding: 0.6rem 2.5rem; }
}

.topbar-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 0.82rem;
  color: var(--text-3);
}
.topbar-crumbs .sep { opacity: 0.4; font-size: 0.6rem; }
#breadcrumb-current {
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-spacer { flex: 1 1 auto; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

/* --- command trigger ------------------------------------------------------- */
#cmdk-trigger {
  display: none;
  align-items: center;
  gap: 0.6rem;
  height: 40px;
  flex: 0 1 22rem;
  min-width: 14rem;
  padding: 0 0.55rem 0 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
#cmdk-trigger:hover {
  transform: none;
  border-color: var(--accent);
  background: var(--accent-softer);
  color: var(--text-2);
}
#cmdk-trigger .keys { margin-inline-start: auto; display: flex; gap: 0.2rem; }
#cmdk-trigger-mobile { display: inline-flex; }
@media (min-width: 900px) {
  #cmdk-trigger { display: flex; }
  #cmdk-trigger-mobile { display: none !important; }
}

/* --- icon buttons ---------------------------------------------------------- */
.icon-btn,
.btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  background: transparent !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.icon-btn:hover,
.btn-icon:hover {
  transform: none;
  background: var(--surface-3) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.btn-icon { width: 36px; height: 36px; }

#theme-toggle i { transition: transform var(--t-slow) var(--ease); }
#theme-toggle:hover i { transform: rotate(35deg); }
:root.light #theme-toggle { color: var(--text-2) !important; }

.icon-btn .dot {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg);
}
.icon-btn .dot[data-count]:not([data-count='0']):not([data-count='']) {
  display: inline-flex;
  animation: pulse-dot 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 0 rgba(251, 113, 133, 0.55); }
  60%      { box-shadow: 0 0 0 2px var(--bg), 0 0 0 7px rgba(251, 113, 133, 0); }
}

/* --- clock ----------------------------------------------------------------- */
#live-clock {
  display: none;
  align-items: center;
  gap: 0.45rem;
  height: 40px;
  padding: 0 0.8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#live-clock .pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
  animation: pulse-live 2.2s var(--ease-in-out) infinite;
}
@keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (min-width: 1180px) { #live-clock { display: flex; } }

/* --- accent popover -------------------------------------------------------- */
.accent-wrap { position: relative; }

#accent-picker {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 40;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
  padding: 0.85rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top left;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
#accent-picker.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
#accent-picker > span { grid-column: 1 / -1; font-size: 0.7rem; color: var(--text-3); }

.accent-swatch {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: linear-gradient(140deg,
      hsl(var(--swatch-hue, 220) 92% 62%),
      hsl(calc(var(--swatch-hue, 220) + 42) 92% 64%)) !important;
  box-shadow: 0 4px 12px -4px hsl(var(--swatch-hue, 220) 92% 50% / 0.7);
  cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.accent-swatch:hover { transform: translateY(-2px) scale(1.06); }
.accent-swatch.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px hsl(var(--swatch-hue, 220) 92% 55%);
}

/* =============================================================================
   7. COMMAND PALETTE
   ========================================================================== */

#cmdk {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 2rem;
  background: rgba(3, 5, 12, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}
#cmdk.open { opacity: 1; visibility: visible; }

.cmdk-panel {
  width: min(100%, 40rem);
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-top) inset;
  transform: translateY(-14px) scale(0.97);
  opacity: 0;
  transition: transform var(--t-slow) var(--ease), opacity var(--t) var(--ease);
}
#cmdk.open .cmdk-panel { transform: translateY(0) scale(1); opacity: 1; }

.cmdk-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.cmdk-search i { color: var(--text-3); font-size: 0.9rem; }
.cmdk-search input {
  flex: 1;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 1rem;
  font-family: var(--font);
}
.cmdk-search input:focus { box-shadow: none !important; border: 0 !important; }

.cmdk-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem;
  overscroll-behavior: contain;
}
.cmdk-group-label {
  padding: 0.6rem 0.75rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  font-size: 0.88rem;
  text-align: right;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cmdk-item:hover { transform: none; }
.cmdk-item .ic {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 0.8rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cmdk-item .lbl { min-width: 0; flex: 1; }
.cmdk-item .lbl b { display: block; font-weight: 600; color: inherit; }
.cmdk-item .lbl small { display: block; font-size: 0.72rem; color: var(--text-3); }
.cmdk-item .go { opacity: 0; font-size: 0.7rem; color: var(--text-3); transition: opacity var(--t-fast); }
.cmdk-item[aria-selected='true'] {
  background: var(--accent-soft);
  color: var(--text);
}
.cmdk-item[aria-selected='true'] .ic { background: var(--accent); color: #fff; }
.cmdk-item[aria-selected='true'] .go { opacity: 1; }

.cmdk-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-3); font-size: 0.85rem; }

.cmdk-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  color: var(--text-3);
}
.cmdk-foot span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* =============================================================================
   8. SURFACES / CARDS
   ========================================================================== */

/* `.bg-white` is the card primitive across admin.php and admin.js output. */
.bg-white {
  position: relative;
  background: var(--surface-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
/* hairline top highlight */
.bg-white::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--line-top), transparent);
  pointer-events: none;
}

.glass .bg-white\/5 {
  background: var(--surface-3) !important;
  border-color: var(--line) !important;
  border-radius: var(--r-md);
}
.glass .bg-white\/10 { background: var(--surface-4) !important; }
.glass .border-white\/10 { border-color: var(--line) !important; }
.glass .border-slate-600,
.glass .border-slate-700 { border-color: var(--line) !important; }
.glass .bg-slate-800\/50,
.glass .bg-slate-700,
.glass .bg-slate-700\/50,
.glass .bg-slate-600\/50 { background: var(--surface-3) !important; }

.panel {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-3);
  padding: 1rem;
}

/* =============================================================================
   9. PAGE HEAD + TOOLBAR
   ========================================================================== */

.page-content { position: relative; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.page-head .titles { min-width: 0; }
.page-head h2 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  background: linear-gradient(100deg, var(--text) 30%, var(--text-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) { .page-head h2 { font-size: 1.9rem; } }
.page-head p {
  margin: 0.3rem 0 0;
  font-size: 0.83rem;
  color: var(--text-3);
  max-width: 68ch;
}
.page-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* accent rule under the title */
.page-head .titles::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.6rem;
  border-radius: var(--r-pill);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-glow);
}

.toolbar {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-3);
  margin-bottom: 1rem;
}
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.toolbar-row > .grow { flex: 1 1 16rem; min-width: 0; }

.search-field { position: relative; flex: 1 1 16rem; min-width: 0; }
.search-field > i {
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 0.85rem;
  pointer-events: none;
  transition: color var(--t) var(--ease);
}
.search-field input { padding-right: 2.6rem !important; }
.search-field:focus-within > i { color: var(--accent); }

.section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.section-title .ic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.82rem;
  flex: 0 0 auto;
}
.section-sub { font-size: 0.76rem; color: var(--text-3); margin: 0.25rem 0 0; }

.widget-title {
  color: var(--text-2) !important;
  font-size: 0.9rem;
  font-weight: 600;
}

/* =============================================================================
   10. BUTTONS
   ========================================================================== */

button { transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease) !important; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:hover { transform: none; }
button:active:not(:disabled) { transform: translateY(1px); }

.btn-sm,
.liquid-pill,
.btn-primary,
.btn-ghost,
.btn-accent,
.btn-outline-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--gradient-accent) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 16px 40px -14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary:disabled { opacity: 0.5; filter: grayscale(0.4); }

.btn-ghost,
.liquid-pill {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled),
.liquid-pill:hover:not(:disabled) {
  background: var(--surface-4) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
.btn-ghost:disabled, .liquid-pill:disabled { opacity: 0.45; }

.liquid-pill { border-radius: var(--r-pill); backdrop-filter: none; }

.btn-accent {
  background: linear-gradient(115deg, var(--accent-2), var(--accent-3)) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 12px 30px -14px hsl(calc(var(--primary-hue) + 42) 92% 50% / 0.7);
}
.btn-accent:hover:not(:disabled) { filter: brightness(1.08); }
.btn-accent:disabled { opacity: 0.5; }

.btn-outline-danger {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent) !important;
}
.btn-outline-danger:hover:not(:disabled) {
  background: var(--danger-soft) !important;
  border-color: var(--danger) !important;
}
.btn-outline-danger:disabled { opacity: 0.45; }

/* legacy gradient buttons from the old markup are normalised */
.glass .bg-gradient-to-r {
  background-image: var(--gradient-accent) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  color: #fff !important;
  box-shadow: var(--shadow-glow);
}
.glass .bg-indigo-600,
.glass .bg-indigo-600:hover { background-color: var(--accent) !important; color: #fff !important; }
.glass .bg-red-600 { background-color: var(--danger) !important; }
.glass .bg-green-600 { background-color: var(--ok) !important; }

/* ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.4);
  animation: ripple-out 620ms var(--ease);
  pointer-events: none;
}
@keyframes ripple-out { to { transform: scale(3.2); opacity: 0; } }

.quick-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.quick-action i { color: var(--text-3); transition: color var(--t) var(--ease); }
.quick-action:hover {
  transform: none;
  background: var(--accent-softer);
  border-color: var(--accent);
  color: var(--text);
}
.quick-action:hover i { color: var(--accent); }

/* =============================================================================
   11. FORMS
   ========================================================================== */

label { color: var(--text-2); font-size: 0.83rem; }
.glass label.font-semibold,
.glass label.block { color: var(--text); font-weight: 600; }

/* `:where()` keeps this base at specificity (0,0,1) so the component overrides
   below (.search-field input, .cmdk-search input, …) can win, while !important
   still beats Tailwind's preflight `input { padding: 0 }` whichever order the
   runtime stylesheet lands in. */
input:where(:not([type='checkbox'], [type='radio'], [type='file'])),
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.9rem !important;
  background: var(--surface-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  color: var(--text) !important;
  font-family: var(--font);
  font-size: 0.88rem;
  line-height: 1.5;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}

textarea { min-height: 92px; resize: vertical; line-height: 1.75; }

input::placeholder,
textarea::placeholder { color: var(--text-3); opacity: 1; }

input:where(:not([type='checkbox'], [type='radio'])):hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) { border-color: var(--line-strong) !important; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  background: var(--surface-4) !important;
  box-shadow: 0 0 0 4px var(--accent-ring) !important;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-left: 2.4rem !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(0.95rem + 5px) calc(50% + 2px), calc(0.95rem) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select option { background: var(--surface-solid); color: var(--text); }

input[type='checkbox']:not(.peer),
input[type='radio'] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

input[type='date'],
input[type='month'] { cursor: pointer; }
input[type='date']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
  opacity: 0.8;
}
:root.light input[type='date']::-webkit-calendar-picker-indicator,
:root.light input[type='month']::-webkit-calendar-picker-indicator { filter: none; }

input[type='number'] { -moz-appearance: textfield; }
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.field { display: grid; gap: 0.4rem; }
.field .hint { font-size: 0.72rem; color: var(--text-3); line-height: 1.6; }

/* --- toggle switch --------------------------------------------------------- */
.toggle-track {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  width: 3rem !important;
  height: 1.6rem !important;
  border-radius: var(--r-pill) !important;
  background: var(--surface-4) !important;
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.32);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.peer:checked + .toggle-track {
  background: var(--gradient-accent) !important;
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.peer:checked + .toggle-track::after { transform: translateX(1.4rem); background: #fff; }
.peer:focus-visible + .toggle-track { box-shadow: 0 0 0 4px var(--accent-ring); }

.switch-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 0;
  cursor: pointer;
}
.switch-row .lbl { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.switch-row .sub { font-size: 0.74rem; color: var(--text-3); margin-top: 0.1rem; }

/* --- settings groups ------------------------------------------------------- */
.settings-group {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-3);
  padding: 1.1rem 1.15rem;
}
.settings-group + .settings-group { margin-top: 1rem; }
.settings-group > .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
}
.settings-group .divide > * + * {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 1rem;
}

/* =============================================================================
   12. TABLES
   ========================================================================== */

.overflow-x-auto { position: relative; }

.table-cool {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

.table-cool thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: right;
  padding: 0.7rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-3);
  white-space: nowrap;
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-strong);
}
.table-cool thead th:first-child { border-top-right-radius: var(--r-md); }
.table-cool thead th:last-child { border-top-left-radius: var(--r-md); }

.table-cool tbody tr {
  transition: background var(--t-fast) var(--ease);
}
.table-cool tbody td {
  padding: 0.75rem 0.9rem;
  vertical-align: middle;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.table-cool tbody tr:last-child td { border-bottom: 0; }
.table-cool tbody tr:hover td { background: var(--surface-3); color: var(--text); }
.table-cool tbody tr:hover td:first-child { box-shadow: inset -2px 0 0 var(--accent); }

/* admin.js wraps its wide tables in `.overflow-hidden.rounded-xl.border`, which
   clips instead of scrolling — with 9 nowrap columns the orders table simply
   lost its right-hand side. Make that wrapper the horizontal scroller; the
   rounded border then stays put while the table scrolls inside it. */
.overflow-hidden.rounded-xl.border {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-color: var(--line) !important;
  border-radius: var(--r-md) !important;
}

/* Action cells: admin.js used to put `display:flex` straight on the <td>, which
   drops the cell out of the table's own layout (the browser then wraps it in an
   anonymous cell that inherits none of the padding or borders below). The flex
   now lives on an inner div. */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* A status cell can stack an order badge, a provisioning badge, a receipt badge
   and up to three explanatory lines. Group them so the badges read as one row
   and the notes as a quiet block underneath. */
.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 9rem;
  max-width: 17rem;
}
.cell-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.cell-note {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-3);
}
.cell-note + .cell-note { margin-top: -0.1rem; }

/* buttons inside data tables are dense by necessity — up to five per row */
.table-cool .btn-sm,
.table-cool .btn-primary,
.table-cool .btn-ghost,
.table-cool .btn-accent,
.table-cool .btn-outline-danger {
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  font-size: 0.77rem;
  border-radius: var(--r-sm);
}

/* a bare <button> in a table (the discounts page ships several) would otherwise
   render as Tailwind preflight's transparent, borderless box */
.table-cool tbody button:not([class*='btn-']):not(.pagination-btn) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 0.77rem;
  font-weight: 600;
}
.table-cool tbody button:not([class*='btn-']):not(.pagination-btn):hover {
  background: var(--surface-4);
  border-color: var(--line-strong);
  color: var(--text);
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.mini-table th {
  text-align: right;
  padding: 0.45rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mini-table td {
  text-align: right;
  padding: 0.5rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.mini-table tbody tr:last-child td { border-bottom: 0; }
.mini-table tbody tr:hover td { color: var(--text); background: var(--surface-3); }

/* Horizontal-scroll affordance.
   A mask, not absolutely-positioned pseudo-elements: an ::after inside a
   scroll container scrolls away with the content, whereas a mask is painted in
   the element's own box. Bonus — it fades to true transparency, so it needs no
   colour that matches whatever surface sits behind the table. */
.scroll-x-shadow.fade-l,
.scroll-x-shadow.fade-r,
.scroll-x-shadow.fade-lr {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.scroll-x-shadow.fade-l {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px);
  mask-image: linear-gradient(to right, transparent 0, #000 36px);
}
.scroll-x-shadow.fade-r {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 36px);
  mask-image: linear-gradient(to left, transparent 0, #000 36px);
}
.scroll-x-shadow.fade-lr {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.empty-state {
  display: grid;
  place-items: center;
  gap: 0.6rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-3);
}
.empty-state .ic {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 1.3rem;
}

/* =============================================================================
   13. BADGES, PILLS, TAGS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  background: var(--surface-4);
  color: var(--text-2);
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  opacity: 0.9;
}
.badge-online { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.badge-maintenance { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
.badge-neutral { background: var(--surface-4); color: var(--text-2); border-color: var(--line); }
.badge-accent {
  background: var(--accent-soft);
  color: var(--accent-hi);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
:root.light .badge-accent { color: var(--accent-lo); }

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--surface-4);
  border: 1px solid var(--line);
  color: var(--text-2);
  box-shadow: none;
}
.tag-pill::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-left: 0.4rem;
  background: var(--tag-color, var(--accent));
  box-shadow: 0 0 8px var(--tag-color, var(--accent));
}

.tag-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.tag-choice:hover { border-color: var(--line-strong); background: var(--surface-4); }
.tag-choice input { accent-color: var(--accent); }
.tag-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.orders-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.orders-tab:hover { color: var(--text-2); background: var(--surface-3); transform: none; }
.orders-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
:root.light .orders-tab.active { color: var(--accent-lo); }

.server-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.server-dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.server-dot.off { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.analytics-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-3);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
}

/* =============================================================================
   14. KPI + ANALYTICS WIDGETS
   ========================================================================== */

.stat-kpi {
  position: relative;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  cursor: default;
}
.stat-kpi::after {
  content: '';
  position: absolute;
  inset: auto auto -50% -20%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--gradient-accent);
  filter: blur(48px);
  opacity: 0.16;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  pointer-events: none;
}
.stat-kpi:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-lg);
}
.stat-kpi:hover::after { opacity: 0.3; transform: scale(1.15); }
.stat-kpi h3 {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  letter-spacing: 0.01em;
}
.stat-kpi p {
  margin-top: 0.25rem;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  color: var(--text) !important;
  line-height: 1.15;
}

.icon-pill {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  font-size: 1.2rem;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent-hi);
  box-shadow: inset 0 1px 0 var(--line-top);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
:root.light .icon-pill { color: var(--accent-lo); }
.stat-kpi:hover .icon-pill {
  background: var(--gradient-accent);
  color: #fff;
  transform: scale(1.06) rotate(-4deg);
  border-color: transparent;
}

.analytics-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.15rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.analytics-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.analytics-card .text-2xl {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  color: var(--text) !important;
  line-height: 1.2;
}
.analytics-card.region-card,
.analytics-card.retention-card { gap: 0.75rem; }
.analytics-card.lifecycle-card { gap: 1rem; }

.lifecycle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lifecycle-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
  color: var(--info);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}
.lifecycle-metric { display: flex; flex-direction: column; gap: 0.55rem; }
.lifecycle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-2);
}
.lifecycle-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
}
.lifecycle-tile {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.lifecycle-tile:hover { border-color: var(--line-strong); background: var(--surface-4); }
.lifecycle-tile .tile-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent-hi);
  font-size: 0.85rem;
}
:root.light .lifecycle-tile .tile-icon { color: var(--accent-lo); }
.lifecycle-tile .tile-body { display: flex; flex-direction: column; min-width: 0; }
.lifecycle-tile .label { font-size: 0.72rem; color: var(--text-3); }
.lifecycle-tile .value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.lifecycle-hint { font-size: 0.76rem; line-height: 1.6; }
.lifecycle-hint-safe { color: var(--ok); }
.lifecycle-hint-warning { color: var(--warn); }
.lifecycle-hint-critical { color: var(--danger); }
.lifecycle-hint-neutral { color: var(--text-3); }

.retention-badge {
  display: inline-flex;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent-hi);
  font-size: 0.74rem;
  font-weight: 600;
}
:root.light .retention-badge { color: var(--accent-lo); }

.retention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0.65rem;
}
.retention-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.retention-chip .label { font-size: 0.7rem; color: var(--text-3); }
.retention-chip .value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.insight-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line);
  transition: border-color var(--t) var(--ease);
}
.insight-row:hover { border-color: var(--line-strong); }
.insight-label { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.insight-sub { font-size: 0.74rem; color: var(--text-3); margin-top: 0.2rem; line-height: 1.55; }
.insight-progress { min-width: 120px; display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end; }
.insight-progress span { font-size: 0.74rem; color: var(--text-2); }

.progress {
  width: 100%;
  height: 7px;
  background: var(--surface-4);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-accent);
  box-shadow: 0 0 12px -2px var(--accent-glow);
  transition: width var(--t-slow) var(--ease);
}

/* --- lists / timeline ------------------------------------------------------ */
.glass-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.glass-row {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid transparent;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.glass-row:hover {
  background: var(--surface-4);
  border-color: var(--line);
  transform: translateX(-3px);
}
.glass-row .title { font-weight: 600; color: var(--text); }
.glass-row .meta { color: var(--text-3); font-size: 0.8rem; }

.timeline { list-style: none; margin: 0; padding: 0.25rem 1rem 0.25rem 0; display: flex; flex-direction: column; gap: 0.75rem; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  right: 5px;
  width: 2px;
  background: linear-gradient(to bottom, var(--line-strong), transparent);
}
.timeline li {
  position: relative;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.8rem 0.95rem;
  margin-right: 1.15rem;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.timeline li::before {
  content: '';
  position: absolute;
  right: -1.32rem;
  top: 1.1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg-2), 0 0 12px var(--accent-glow);
}
.timeline li:hover { border-color: var(--line-strong); transform: translateX(-3px); }

/* =============================================================================
   15. PAGINATION
   ========================================================================== */

.pagination-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.6rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text-2);
  font-weight: 600;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.pagination-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--surface-4);
  border-color: var(--line-strong);
  color: var(--text);
}
.pagination-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pagination-btn.active {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 40px;
  color: var(--text-3);
}

/* =============================================================================
   16. MODAL + DRAWER
   ========================================================================== */

.modal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
  background: rgba(3, 5, 12, 0.7) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
@media (min-width: 768px) { .modal { align-items: center; } }

#modal-content {
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--line-top);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  width: min(100%, 42rem);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform var(--t-slow) var(--ease);
}
@media (max-width: 640px) {
  #modal-content { padding: 1.5rem 1.15rem !important; max-height: calc(100vh - 3rem); }
}
#modal-content h3 { font-size: 1.1rem; }

#user-drawer-panel {
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent) !important;
  border-right: 1px solid var(--line) !important;
  border-left: 0;
  color: var(--text) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow-lg);
}
#user-drawer-overlay { background: rgba(3, 5, 12, 0.6); backdrop-filter: blur(4px); }

/* =============================================================================
   17. FEEDBACK — toasts, loaders, skeletons
   (ID specificity beats the <style> admin.js injects at runtime)
   ========================================================================== */

#toast-host {
  top: auto !important;
  bottom: 1.25rem !important;
  left: 50% !important;
  gap: 0.5rem;
  width: min(92vw, 26rem);
}
@media (min-width: 768px) {
  #toast-host {
    left: auto !important;
    right: 1.5rem !important;
    bottom: 1.5rem !important;
    transform: none !important;
  }
}

#toast-host .toast {
  min-width: 0 !important;
  width: 100%;
  padding: 0.85rem 1rem !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line-strong);
  border-right-width: 3px;
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent) !important;
  color: var(--text) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  transform: translateY(10px) scale(0.97) !important;
  transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease) !important;
}
#toast-host .toast.show { transform: translateY(0) scale(1) !important; }
#toast-host .toast .icon {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  border-radius: var(--r-sm) !important;
  position: relative;
}
#toast-host .toast .icon::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.7rem;
  color: #fff;
}
#toast-host .toast.success { border-right-color: var(--ok); }
#toast-host .toast.success .icon { background: var(--ok) !important; }
#toast-host .toast.success .icon::after { content: '\f00c'; }
#toast-host .toast.error { border-right-color: var(--danger); }
#toast-host .toast.error .icon { background: var(--danger) !important; }
#toast-host .toast.error .icon::after { content: '\f00d'; }
#toast-host .toast.info { border-right-color: var(--info); }
#toast-host .toast.info .icon { background: var(--info) !important; }
#toast-host .toast.info .icon::after { content: '\f129'; }

.loader {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--surface-4);
  border-top-color: var(--accent);
  border-right-color: var(--accent-2);
  animation: spin 780ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

body .skeleton {
  background: linear-gradient(
    100deg,
    var(--surface-3) 30%,
    var(--surface-4) 50%,
    var(--surface-3) 70%
  ) !important;
  background-size: 220% 100% !important;
  border-radius: var(--r-sm);
  animation: shimmer 1.4s var(--ease-in-out) infinite !important;
}

/* =============================================================================
   18. LOGS TERMINAL
   ========================================================================== */

.logs-terminal {
  min-height: 480px;
  max-height: 66vh;
  overflow: auto;
  direction: ltr;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(color-mix(in srgb, #04070f 88%, transparent), color-mix(in srgb, #04070f 88%, transparent)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
  color: #cfe9dd;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}
:root.light .logs-terminal {
  background: #0b1220;
  color: #d7fbe8;
}
.logs-terminal-row {
  display: grid;
  grid-template-columns: 78px 78px 92px 160px 1fr;
  gap: 12px;
  align-items: start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  padding: 5px 0;
  transition: background var(--t-fast);
}
.logs-terminal-row:hover { background: rgba(148, 163, 184, 0.06); }
.logs-terminal-row:last-child { border-bottom: 0; }
.logs-terminal-time { color: #7dd3fc; }
.logs-terminal-level-info { color: #6ee7b7; }
.logs-terminal-level-warning { color: #fcd34d; }
.logs-terminal-level-error { color: #fda4af; }
.logs-terminal-context { color: #99f6e4; opacity: 0.72; }

@media (max-width: 768px) {
  .logs-terminal { min-height: 380px; font-size: 11px; }
  .logs-terminal-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
}

/* =============================================================================
   19. PAGE TRANSITIONS + ENTRANCE
   ========================================================================== */

.page-content.is-entering > * {
  animation: rise-in var(--t-slow) var(--ease) backwards;
}
.page-content.is-entering > *:nth-child(1) { animation-delay: 0ms; }
.page-content.is-entering > *:nth-child(2) { animation-delay: 45ms; }
.page-content.is-entering > *:nth-child(3) { animation-delay: 90ms; }
.page-content.is-entering > *:nth-child(4) { animation-delay: 135ms; }
.page-content.is-entering > *:nth-child(n + 5) { animation-delay: 170ms; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

#back-to-top {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 30;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  color: var(--text-2);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  cursor: pointer;
}
#back-to-top.show { opacity: 1; visibility: visible; transform: none; }
#back-to-top:hover { color: var(--text); border-color: var(--accent); }

/* --- keyboard shortcut sheet ---------------------------------------------- */
.shortcut-grid { display: grid; gap: 0.5rem; }
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-size: 0.85rem;
  color: var(--text-2);
}
.shortcut-row .keys { display: flex; gap: 0.25rem; }

/* =============================================================================
   20. LOGIN
   ========================================================================== */

body.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
  padding: 1.5rem;
}

.auth-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 62rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .auth-shell { grid-template-columns: 1fr minmax(0, 27rem); gap: 4rem; }
}

.auth-brand { display: none; }
@media (min-width: 1024px) {
  .auth-brand { display: block; animation: rise-in 700ms var(--ease) 80ms backwards; }
}
.auth-brand .brand-mark { width: 62px; height: 62px; border-radius: 19px; font-size: 1.6rem; margin: 0; }
.auth-brand h1 {
  margin: 1.5rem 0 0.75rem;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.auth-brand h1 span {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-brand > p {
  font-size: 1rem;
  color: var(--text-2);
  max-width: 40ch;
  line-height: 1.8;
}
.auth-points {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.auth-points li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.88rem;
  color: var(--text-2);
}
.auth-points i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent-hi);
  font-size: 0.8rem;
}
:root.light .auth-points i { color: var(--accent-lo); }

.auth-card {
  position: relative;
  z-index: 1;
  width: min(100%, 27rem);
  padding: 2.25rem 1.9rem;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--line-top);
  animation: rise-in 620ms var(--ease) backwards;
}

.auth-card .brand-mark { width: 58px; height: 58px; border-radius: 18px; font-size: 1.5rem; margin: 0 auto; }

.auth-title {
  margin: 1.1rem 0 0.3rem;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.auth-sub { text-align: center; font-size: 0.82rem; color: var(--text-3); margin: 0 0 1.75rem; }

.auth-field { position: relative; }
.auth-field > i.lead {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 0.85rem;
  pointer-events: none;
  transition: color var(--t) var(--ease);
}
.auth-field input { padding-right: 2.75rem !important; height: 50px; }
.auth-field:focus-within > i.lead { color: var(--accent); }
.auth-field .peek {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.auth-field .peek:hover { color: var(--text); background: var(--surface-3); }

.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 0.95rem;
  margin-bottom: 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-right-width: 3px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.82rem;
  line-height: 1.6;
  animation: shake 420ms var(--ease-in-out);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.auth-submit {
  width: 100%;
  min-height: 50px;
  font-size: 0.95rem;
  font-weight: 700;
}

.auth-foot {
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: var(--text-3);
}

.caps-hint {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  color: var(--warn);
}
.caps-hint.show { display: flex; }

/* =============================================================================
   21. UTILITY REMAPS (Tailwind palette → tokens, keeps light mode readable)
   ========================================================================== */

.glass .text-white,
.glass .text-slate-100,
.glass .text-slate-200,
.glass .text-gray-900,
.glass .text-gray-800,
.glass .text-gray-700 { color: var(--text) !important; }

.glass .text-slate-300,
.glass .text-gray-600 { color: var(--text-2) !important; }

.glass .text-slate-400,
.glass .text-slate-500,
.glass .text-gray-500,
.glass .text-gray-400 { color: var(--text-3) !important; }

.glass .text-emerald-300, .glass .text-emerald-500, .glass .text-green-400 { color: var(--ok) !important; }
.glass .text-amber-300, .glass .text-amber-500,
.glass .text-orange-300, .glass .text-orange-400 { color: var(--warn) !important; }
.glass .text-red-400, .glass .text-red-500, .glass .text-rose-200,
.glass .text-rose-300, .glass .text-rose-500 { color: var(--danger) !important; }
.glass .text-sky-300, .glass .text-blue-400 { color: var(--info) !important; }
.glass .text-indigo-300, .glass .text-pink-300 { color: var(--accent-hi) !important; }
:root.light .glass .text-indigo-300, :root.light .glass .text-pink-300 { color: var(--accent-lo) !important; }

.glass .hover\:text-red-500:hover { color: var(--danger) !important; }

/* keep the settings page's own sticky header, hide the legacy h2 */
#settings > h2 { display: none !important; }

.settings-sticky {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
}

/* Tailwind's runtime <style> may land before this file, so `hidden` has to beat
   the component defaults declared here that also set `display`. Scoped on
   purpose — a blanket `.hidden{display:none!important}` would break every
   `hidden sm:inline` / `lg:hidden` responsive pair. */
.modal.hidden,
.page-content.hidden,
.hidden.field,
.hidden.btn-sm,
.hidden.btn-primary,
.hidden.btn-ghost,
.hidden.btn-accent,
.hidden.btn-outline-danger,
.hidden.liquid-pill,
.hidden.icon-btn,
.hidden.btn-icon,
.hidden.badge,
.hidden.quick-action,
.hidden.analytics-card { display: none !important; }

/* the same guard, for the responsive pairs that must survive either order */
#mobile-menu-btn { display: none; }
@media (max-width: 767px) { #mobile-menu-btn { display: inline-flex; } }
@media (min-width: 1024px) { .auth-card .brand-mark.lg\:hidden { display: none; } }

/* =============================================================================
   22. RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
  .page-head h2 { font-size: 1.35rem; }
  .topbar { margin-bottom: 1rem; }
  .glass-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.85rem 1rem;
  }
  #back-to-top { bottom: 1rem; left: 1rem; }
  .lifecycle-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .lifecycle-badge { align-self: stretch; justify-content: center; }
  .cmdk-panel { max-height: 76vh; }
  #cmdk { padding-top: 6vh; }
}

@media (max-width: 640px) {
  /* keep the topbar to one row on a 375px viewport */
  #shortcuts-btn { display: none; }
  .topbar { gap: 0.25rem; padding-inline: 0.75rem; }
  .topbar-actions { gap: 0.15rem; }
  .icon-btn { width: 38px; height: 38px; }
}

@media (max-width: 480px) {
  .page-head { align-items: flex-start; }
  .page-head .actions { width: 100%; }
  .page-head .actions > * { flex: 1 1 auto; }
  .toolbar { padding: 0.75rem; }
}

/* =============================================================================
   23. MOTION PREFERENCES / PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body.glass::before { animation: none; }
}

/* color-mix() is used for the translucent chrome. On engines without it the
   whole declaration is dropped, which would leave those surfaces transparent —
   so fall back to the solid token. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #sidebar { background: var(--bg-2) !important; }
  .topbar { background: var(--bg); }
  .table-cool thead th { background: var(--surface-solid); }
  .cmdk-panel,
  #modal-content,
  #user-drawer-panel,
  #toast-host .toast,
  #back-to-top,
  .auth-card { background: var(--surface-solid) !important; }
  .logs-terminal { background: #06090f; }
}

@media print {
  #sidebar, .topbar, #back-to-top, #cmdk, #toast-host, #scroll-progress { display: none !important; }
  .content { margin: 0 !important; height: auto !important; overflow: visible !important; }
  body.glass { background: #fff; color: #000; overflow: visible; }
  body.glass::before, body.glass::after { display: none; }
  .bg-white { background: #fff !important; border-color: #ddd !important; box-shadow: none; }
}
