@charset "UTF-8";
/*
 * =====================================================================
 *  ZENTHROIC UI  -  Design System (single-file, standalone)
 * =====================================================================
 *  Design System
 *  Developer    : PrimeTriple4
 *  Organization : Zenthroic
 *
 *  Watermark    : Zenthroic  |  PrimeTriple4
 *  Licence note : Source-code ownership identifier. Keep this header.
 *
 *  This file is self-contained. It carries tokens, reset, layout,
 *  every component, utilities, light and dark themes, responsive rules,
 *  print rules and accessibility rules. Nothing else is required.
 *
 *  Themes   : [data-theme="light"] | [data-theme="dark"] | system
 *  Spacing  : 4px / 8px scale
 *  Breakpoints (mobile first)
 *    Mobile        0   - 575px
 *    Small tablet  576 - 767px
 *    Tablet        768 - 991px
 *    Desktop       992 - 1199px
 *    Large         1200px +
 *
 *  Contents
 *    01  Tokens (light, dark, system dark)
 *    02  Reset and base
 *    03  Typography and icons
 *    04  Utilities
 *    05  App shell (sidebar, navbar, content, footer)
 *    06  Auth and status layout
 *    07  Buttons
 *    08  Badges, chips and tags
 *    09  Forms
 *    10  Cards
 *    11  Alerts, banners and toasts
 *    12  Dialog, dropdown, tooltip and popover
 *    13  Avatars
 *    14  Lists, key/value, code and timeline
 *    15  Navigation (breadcrumb, tabs, segmented, pagination, steps)
 *    16  Tables
 *    17  Feedback (loading bar, spinner, skeleton, progress, empty)
 *    18  Misc (divider, kbd, accordion, rating)
 *    19  Page compositions and styleguide helpers
 *    20  Dark theme refinements
 *    21  Print, motion and contrast
 * =====================================================================
 */

/* =====================================================================
   01  TOKENS
   Zenthroic | PrimeTriple4
   ===================================================================== */
:root {
  color-scheme: light;

  /* Ownership identifiers (never rendered) */
  --zt-system: "Zenthroic UI";
  --zt-developer: "PrimeTriple4";
  --zt-organization: "Zenthroic";

  /* Type */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.625rem, 1.45rem + 0.6vw, 1.875rem);
  --fs-3xl: clamp(2rem, 1.7rem + 1vw, 2.5rem);
  --lh-tight: 1.25;
  --lh-snug: 1.35;
  --lh-base: 1.5;
  --lh-loose: 1.7;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-tight: -0.01em;
  --ls-wide: 0.04em;

  /* Spacing (4 / 8 scale) */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Radius */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Control heights */
  --h-xs: 24px;
  --h-sm: 32px;
  --h-md: 38px;
  --h-lg: 44px;
  --h-xl: 52px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 220ms;

  /* Layout */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 72px;
  --navbar-h: 60px;
  --content-max: 1440px;

  /* Stacking */
  --z-sticky: 20;
  --z-navbar: 30;
  --z-backdrop: 35;
  --z-sidebar: 40;
  --z-dropdown: 50;
  --z-dialog: 60;
  --z-toast: 70;
  --z-loadbar: 80;

  /* Violet brand scale */
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;

  /* Surfaces */
  --c-bg: #f6f5fb;
  --c-surface: #ffffff;
  --c-surface-2: #faf9fd;
  --c-surface-3: #f1effa;
  --c-sidebar: #ffffff;
  --c-border: #e6e3f1;
  --c-border-strong: #d3cfe5;
  --c-overlay: rgba(20, 16, 40, 0.5);

  /* Text */
  --c-text: #1b1830;
  --c-text-2: #4a4663;
  --c-text-3: #6f6a89;
  --c-placeholder: #9993b3;

  /* Brand */
  --c-primary: #6d28d9;
  --c-primary-hover: #5b21b6;
  --c-primary-active: #4c1d95;
  --c-primary-soft: #ede9fe;
  --c-primary-soft-2: #ddd6fe;
  --c-primary-soft-text: #5b21b6;
  --c-primary-text: #6d28d9;
  --c-on-primary: #ffffff;
  --c-focus: #7c3aed;
  --c-ring: rgba(109, 40, 217, 0.22);
  --c-primary-border: rgba(109, 40, 217, 0.45);

  /* Status */
  --c-success: #15803d;
  --c-success-solid: #15803d;
  --c-success-hover: #166534;
  --c-success-soft: #dcfce7;
  --c-success-text: #166534;
  --c-success-border: #86efac;
  --c-danger: #b91c1c;
  --c-danger-solid: #dc2626;
  --c-danger-hover: #b91c1c;
  --c-danger-soft: #fee2e2;
  --c-danger-text: #991b1b;
  --c-danger-border: #fca5a5;
  --c-warning: #b45309;
  --c-warning-solid: #d97706;
  --c-warning-soft: #fef3c7;
  --c-warning-text: #92400e;
  --c-warning-border: #fcd34d;
  --c-info: #0369a1;
  --c-info-solid: #0284c7;
  --c-info-soft: #e0f2fe;
  --c-info-text: #075985;
  --c-info-border: #7dd3fc;
  --c-neutral-soft: #eeedf5;
  --c-neutral-text: #4a4663;

  /* Elevation */
  --sh-xs: 0 1px 1px rgba(27, 24, 48, 0.04);
  --sh-sm: 0 1px 2px rgba(27, 24, 48, 0.06);
  --sh-md: 0 4px 14px rgba(27, 24, 48, 0.08), 0 1px 3px rgba(27, 24, 48, 0.06);
  --sh-lg: 0 16px 40px rgba(27, 24, 48, 0.16), 0 2px 6px rgba(27, 24, 48, 0.08);
  --sh-inset: inset 0 1px 2px rgba(27, 24, 48, 0.06);
  --sh-primary: 0 1px 2px rgba(76, 29, 149, 0.3);

  /* Finishing */
  --btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  --hero-wash: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0) 60%);
  --scrollbar-thumb: #cfcbe2;

  /* Native select chevron, colour baked in */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6a89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --skeleton-a: #ece9f6;
  --skeleton-b: #f7f5fc;
}

/* ---------------------------------------------------------------------
   Dark theme (explicit)
   Zenthroic | PrimeTriple4
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #0f0d1a;
  --c-surface: #1a1726;
  --c-surface-2: #1f1c2e;
  --c-surface-3: #282439;
  --c-sidebar: #14111f;
  --c-border: #2d2842;
  --c-border-strong: #3d3758;
  --c-overlay: rgba(6, 4, 14, 0.68);

  --c-text: #f1effa;
  --c-text-2: #bcb7d4;
  --c-text-3: #908ab0;
  --c-placeholder: #716b90;

  --c-primary: #7c3aed;
  --c-primary-hover: #8b5cf6;
  --c-primary-active: #6d28d9;
  --c-primary-soft: rgba(139, 92, 246, 0.18);
  --c-primary-soft-2: rgba(139, 92, 246, 0.28);
  --c-primary-soft-text: #c4b5fd;
  --c-primary-text: #a78bfa;
  --c-on-primary: #ffffff;
  --c-focus: #a78bfa;
  --c-ring: rgba(167, 139, 250, 0.34);
  --c-primary-border: rgba(167, 139, 250, 0.55);

  --c-success: #4ade80;
  --c-success-solid: #16a34a;
  --c-success-hover: #15803d;
  --c-success-soft: rgba(34, 197, 94, 0.14);
  --c-success-text: #86efac;
  --c-success-border: rgba(74, 222, 128, 0.38);
  --c-danger: #f87171;
  --c-danger-solid: #dc2626;
  --c-danger-hover: #ef4444;
  --c-danger-soft: rgba(239, 68, 68, 0.15);
  --c-danger-text: #fca5a5;
  --c-danger-border: rgba(248, 113, 113, 0.42);
  --c-warning: #fbbf24;
  --c-warning-solid: #d97706;
  --c-warning-soft: rgba(245, 158, 11, 0.15);
  --c-warning-text: #fcd34d;
  --c-warning-border: rgba(251, 191, 36, 0.42);
  --c-info: #38bdf8;
  --c-info-solid: #0284c7;
  --c-info-soft: rgba(56, 189, 248, 0.15);
  --c-info-text: #7dd3fc;
  --c-info-border: rgba(56, 189, 248, 0.42);
  --c-neutral-soft: #2a2640;
  --c-neutral-text: #bcb7d4;

  --sh-xs: 0 1px 1px rgba(0, 0, 0, 0.35);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  --sh-lg: 0 16px 40px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --sh-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-primary: 0 1px 2px rgba(0, 0, 0, 0.5);

  --btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  --hero-wash: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0) 60%);
  --scrollbar-thumb: #3d3758;

  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23908ab0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --skeleton-a: #252138;
  --skeleton-b: #302b47;
}

/* ---------------------------------------------------------------------
   System dark: applies when no explicit light theme is chosen
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --c-bg: #0f0d1a;
    --c-surface: #1a1726;
    --c-surface-2: #1f1c2e;
    --c-surface-3: #282439;
    --c-sidebar: #14111f;
    --c-border: #2d2842;
    --c-border-strong: #3d3758;
    --c-overlay: rgba(6, 4, 14, 0.68);

    --c-text: #f1effa;
    --c-text-2: #bcb7d4;
    --c-text-3: #908ab0;
    --c-placeholder: #716b90;

    --c-primary: #7c3aed;
    --c-primary-hover: #8b5cf6;
    --c-primary-active: #6d28d9;
    --c-primary-soft: rgba(139, 92, 246, 0.18);
    --c-primary-soft-2: rgba(139, 92, 246, 0.28);
    --c-primary-soft-text: #c4b5fd;
    --c-primary-text: #a78bfa;
    --c-focus: #a78bfa;
    --c-ring: rgba(167, 139, 250, 0.34);
    --c-primary-border: rgba(167, 139, 250, 0.55);

    --c-success: #4ade80;
    --c-success-solid: #16a34a;
    --c-success-hover: #15803d;
    --c-success-soft: rgba(34, 197, 94, 0.14);
    --c-success-text: #86efac;
    --c-success-border: rgba(74, 222, 128, 0.38);
    --c-danger: #f87171;
    --c-danger-solid: #dc2626;
    --c-danger-hover: #ef4444;
    --c-danger-soft: rgba(239, 68, 68, 0.15);
    --c-danger-text: #fca5a5;
    --c-danger-border: rgba(248, 113, 113, 0.42);
    --c-warning: #fbbf24;
    --c-warning-solid: #d97706;
    --c-warning-soft: rgba(245, 158, 11, 0.15);
    --c-warning-text: #fcd34d;
    --c-warning-border: rgba(251, 191, 36, 0.42);
    --c-info: #38bdf8;
    --c-info-solid: #0284c7;
    --c-info-soft: rgba(56, 189, 248, 0.15);
    --c-info-text: #7dd3fc;
    --c-info-border: rgba(56, 189, 248, 0.42);
    --c-neutral-soft: #2a2640;
    --c-neutral-text: #bcb7d4;

    --sh-xs: 0 1px 1px rgba(0, 0, 0, 0.35);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
    --sh-lg: 0 16px 40px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --sh-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-primary: 0 1px 2px rgba(0, 0, 0, 0.5);

    --btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    --hero-wash: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0) 60%);
    --scrollbar-thumb: #3d3758;

    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23908ab0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --skeleton-a: #252138;
    --skeleton-b: #302b47;
  }
}

/* =====================================================================
   02  RESET AND BASE
   Zenthroic | PrimeTriple4
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--navbar-h) + var(--s-4));
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font: var(--fw-regular) var(--fs-base) / var(--lh-base) var(--font-sans);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
figure { margin: 0; }
small { font-size: var(--fs-xs); }
strong, b { font-weight: var(--fw-semibold); }
em, i { font-style: italic; }
mark { padding: 0 2px; border-radius: var(--r-xs); background: var(--c-warning-soft); color: var(--c-warning-text); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
sub, sup { font-size: 0.75em; line-height: 0; }

a {
  color: var(--c-primary-text);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

hr {
  height: 0;
  margin: var(--s-4) 0;
  border: 0;
  border-top: 1px solid var(--c-border);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  color: var(--c-primary-soft-text);
}

pre code {
  padding: 0;
  background: none;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
  font-weight: var(--fw-medium);
}

summary { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

::selection {
  background: var(--c-primary-soft-2);
  color: var(--c-text);
}

[hidden] { display: none !important; }

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

/* Theme init guard: transitions stay off until the first frame */
.no-transition,
.no-transition *,
.no-transition *::before,
.no-transition *::after {
  transition: none !important;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-loadbar);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: var(--fw-medium);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  text-decoration: none;
}

/* =====================================================================
   03  TYPOGRAPHY AND ICONS
   Zenthroic | PrimeTriple4
   ===================================================================== */
.display { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.02em; }
.h1 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.lead { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--c-text-2); }
.eyebrow {
  color: var(--c-primary-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.overline {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.tabular { font-variant-numeric: tabular-nums; }
.link { color: var(--c-primary-text); font-weight: var(--fw-medium); }
.link-muted { color: var(--c-text-3); }
.link-muted:hover { color: var(--c-text); }

/* Section heading with the violet bar used in the showcase */
.section-heading {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.section-heading::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
}

/* Icons: inline sprite, stroke style */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }
.icon-2xl { width: 32px; height: 32px; }
.icon-fill { fill: currentColor; stroke: none; }

/* Icon in a tinted tile */
.icon-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
}

.icon-tile-sm { width: 32px; height: 32px; }
.icon-tile-lg { width: 48px; height: 48px; border-radius: var(--r-lg); }
.icon-tile--success { background: var(--c-success-soft); color: var(--c-success-text); }
.icon-tile--danger { background: var(--c-danger-soft); color: var(--c-danger-text); }
.icon-tile--warning { background: var(--c-warning-soft); color: var(--c-warning-text); }
.icon-tile--info { background: var(--c-info-soft); color: var(--c-info-text); }
.icon-tile--neutral { background: var(--c-surface-3); color: var(--c-text-2); }

/* =====================================================================
   04  UTILITIES
   Zenthroic | PrimeTriple4
   ===================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-contents { display: contents; }

/* Flex */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.place-center { display: grid; place-items: center; }

/* Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }

/* Grid helpers */
.grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-full { grid-column: 1 / -1; }
.auto-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Stack and cluster */
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cluster-sm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: var(--s-1); }
.m-2 { margin: var(--s-2); }
.m-3 { margin: var(--s-3); }
.m-4 { margin: var(--s-4); }
.m-6 { margin: var(--s-6); }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.ml-1 { margin-left: var(--s-1); }
.ml-2 { margin-left: var(--s-2); }
.mr-1 { margin-right: var(--s-1); }
.mr-2 { margin-right: var(--s-2); }
.mx-2 { margin-inline: var(--s-2); }
.my-2 { margin-block: var(--s-2); }
.my-4 { margin-block: var(--s-4); }

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: var(--s-1); }
.p-2 { padding: var(--s-2); }
.p-3 { padding: var(--s-3); }
.p-4 { padding: var(--s-4); }
.p-5 { padding: var(--s-5); }
.p-6 { padding: var(--s-6); }
.p-8 { padding: var(--s-8); }
.px-2 { padding-inline: var(--s-2); }
.px-3 { padding-inline: var(--s-3); }
.px-4 { padding-inline: var(--s-4); }
.px-6 { padding-inline: var(--s-6); }
.py-1 { padding-block: var(--s-1); }
.py-2 { padding-block: var(--s-2); }
.py-3 { padding-block: var(--s-3); }
.py-4 { padding-block: var(--s-4); }
.py-6 { padding-block: var(--s-6); }
.pt-0 { padding-top: 0; }
.pt-4 { padding-top: var(--s-4); }
.pb-0 { padding-bottom: 0; }
.pb-4 { padding-bottom: var(--s-4); }

/* Text */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); }
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.uppercase { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.underline { text-decoration: underline; text-underline-offset: 2px; }
.nowrap { white-space: nowrap; }
.wrap-anywhere { overflow-wrap: anywhere; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.leading-tight { line-height: var(--lh-tight); }
.leading-loose { line-height: var(--lh-loose); }

/* Colour */
.text-default { color: var(--c-text); }
.text-secondary { color: var(--c-text-2); }
.text-muted { color: var(--c-text-3); }
.text-primary { color: var(--c-primary-text); }
.text-success { color: var(--c-success); }
.text-danger { color: var(--c-danger); }
.text-warning { color: var(--c-warning); }
.text-info { color: var(--c-info); }
.text-on-primary { color: var(--c-on-primary); }
.bg-page { background: var(--c-bg); }
.bg-surface { background: var(--c-surface); }
.bg-surface-2 { background: var(--c-surface-2); }
.bg-surface-3 { background: var(--c-surface-3); }
.bg-primary { background: var(--c-primary); color: var(--c-on-primary); }
.bg-primary-soft { background: var(--c-primary-soft); color: var(--c-primary-soft-text); }
.bg-success-soft { background: var(--c-success-soft); color: var(--c-success-text); }
.bg-danger-soft { background: var(--c-danger-soft); color: var(--c-danger-text); }
.bg-warning-soft { background: var(--c-warning-soft); color: var(--c-warning-text); }
.bg-info-soft { background: var(--c-info-soft); color: var(--c-info-text); }
.bg-transparent { background: transparent; }

/* Border, radius, shadow */
.border { border: 1px solid var(--c-border); }
.border-strong { border: 1px solid var(--c-border-strong); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--c-border); }
.border-b { border-bottom: 1px solid var(--c-border); }
.border-l { border-left: 1px solid var(--c-border); }
.border-r { border-right: 1px solid var(--c-border); }
.border-primary { border-color: var(--c-primary); }
.border-dashed { border-style: dashed; }
.rounded-0 { border-radius: 0; }
.rounded-sm { border-radius: var(--r-sm); }
.rounded { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }
.rounded-pill { border-radius: var(--r-pill); }
.rounded-circle { border-radius: 50%; }
.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--sh-xs); }
.shadow-sm { box-shadow: var(--sh-sm); }
.shadow-md { box-shadow: var(--sh-md); }
.shadow-lg { box-shadow: var(--sh-lg); }

/* Position, size, overflow */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; top: 0; z-index: var(--z-sticky); }
.inset-0 { inset: 0; }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-100 { height: 100%; }
.min-w-0 { min-width: 0; }
.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1040px; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-none { pointer-events: none; }
.select-none { user-select: none; }
.select-all { user-select: all; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }

/* Container */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

@media (min-width: 768px) { .container { padding-inline: var(--s-6); } }
@media (min-width: 1200px) { .container { padding-inline: var(--s-8); } }

/* Responsive display */
@media (max-width: 767.98px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .show-mobile { display: none !important; } }
@media (max-width: 991.98px) { .hide-tablet { display: none !important; } }
@media (min-width: 992px) { .show-tablet { display: none !important; } }

@media (min-width: 576px) {
  .d-sm-none { display: none; }
  .d-sm-flex { display: flex; }
  .d-sm-block { display: block; }
  .d-sm-grid { display: grid; }
}

@media (min-width: 768px) {
  .d-md-none { display: none; }
  .d-md-flex { display: flex; }
  .d-md-block { display: block; }
  .d-md-grid { display: grid; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none; }
  .d-lg-flex { display: flex; }
  .d-lg-block { display: block; }
  .d-lg-grid { display: grid; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   05  APP SHELL
   .app > .sidebar + .app-main (.navbar, #content, .footer)
   Zenthroic | PrimeTriple4
   ===================================================================== */
.app {
  min-height: 100vh;
  min-height: 100dvh;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  width: min(var(--sidebar-w), 86vw);
  background: var(--c-sidebar);
  border-right: 1px solid var(--c-border);
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow), width var(--t-base) var(--ease);
}

body.sidebar-open .sidebar {
  visibility: visible;
  transform: none;
  box-shadow: var(--sh-lg);
  transition-delay: 0s;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: var(--c-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}

body.sidebar-open .sidebar-backdrop {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body.sidebar-open { overflow: hidden; }

.sidebar-brand {
  display: flex;
  align-items: center;
  flex: none;
  height: var(--navbar-h);
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--c-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  color: var(--c-text);
}

.brand:hover { text-decoration: none; }

.brand-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--c-primary);
  background-image: var(--btn-sheen);
  color: var(--c-on-primary);
  box-shadow: var(--sh-primary);
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.brand-text strong {
  font-size: var(--fs-md);
  letter-spacing: var(--ls-tight);
}

.brand-text small {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-3);
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-heading {
  padding: var(--s-4) var(--s-3) var(--s-2);
  color: var(--c-text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.sidebar-group-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  height: 40px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--c-text-2);
  font-weight: var(--fw-medium);
  text-align: left;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.sidebar-group-toggle:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
}

.sidebar-group.is-open > .sidebar-group-toggle { color: var(--c-text); }
.sidebar-group.has-active > .sidebar-group-toggle { color: var(--c-primary-text); }

.sidebar-group-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-caret {
  color: var(--c-text-3);
  transition: transform var(--t-base) var(--ease);
}

.sidebar-group.is-open > .sidebar-group-toggle .sidebar-caret { transform: rotate(180deg); }

.sidebar-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease);
}

.sidebar-group.is-open > .sidebar-sub { grid-template-rows: 1fr; }

.sidebar-sub-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: visibility 0s linear var(--t-slow);
}

.sidebar-group.is-open > .sidebar-sub > .sidebar-sub-inner {
  visibility: visible;
  transition-delay: 0s;
}

.sidebar-sub-inner > li:first-child { margin-top: 2px; }
.sidebar-sub-inner > li + li { margin-top: 2px; }

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--s-3) 0 44px;
  border-radius: var(--r-md);
  color: var(--c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.sidebar-link::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.sidebar-link:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
  text-decoration: none;
}

.sidebar-link.is-active {
  background: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
  font-weight: var(--fw-medium);
}

.sidebar-link.is-active::before { opacity: 1; }

/* Flat top-level link (no group) */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  font-weight: var(--fw-medium);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.sidebar-item:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
  text-decoration: none;
}

.sidebar-item.is-active {
  background: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
}

.sidebar-foot {
  flex: none;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-border);
}

@media (min-width: 992px) {
  .sidebar {
    visibility: visible;
    transform: none;
  }

  body.sidebar-open { overflow: visible; }
  body.sidebar-open .sidebar { box-shadow: none; }
  .sidebar-backdrop { display: none; }

  .app-main {
    padding-left: var(--sidebar-w);
    transition: padding-left var(--t-base) var(--ease);
  }

  body.sidebar-collapsed .app-main { padding-left: var(--sidebar-w-collapsed); }

  /* Collapsed: icon rail that expands as an overlay on hover or focus */
  body.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) { width: var(--sidebar-w-collapsed); }

  body.sidebar-collapsed .sidebar:hover,
  body.sidebar-collapsed .sidebar:focus-within { box-shadow: var(--sh-lg); }

  body.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .brand-text,
  body.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-group-label,
  body.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-caret,
  body.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-sub,
  body.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-heading { display: none; }

  body.sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar-group-toggle {
    justify-content: center;
    padding: 0;
  }
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  height: var(--navbar-h);
  padding: 0 var(--s-4);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.navbar-spacer { flex: 1; }

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.navbar-nav {
  display: none;
  align-items: stretch;
  gap: var(--s-1);
  height: 100%;
  margin: 0 var(--s-4);
  padding: 0;
  list-style: none;
}

.navbar-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-3);
  color: var(--c-text-2);
  font-weight: var(--fw-medium);
  transition: color var(--t-fast) var(--ease);
}

.navbar-link:hover {
  color: var(--c-text);
  text-decoration: none;
}

.navbar-link::after {
  content: "";
  position: absolute;
  right: var(--s-3);
  bottom: -1px;
  left: var(--s-3);
  height: 2px;
  border-radius: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transition: transform var(--t-base) var(--ease);
}

.navbar-link.is-active,
.navbar-link[aria-current="page"] { color: var(--c-primary-text); }

.navbar-link.is-active::after,
.navbar-link[aria-current="page"]::after { transform: scaleX(1); }

.navbar-search {
  position: relative;
  display: none;
  width: 240px;
}

.navbar-search .icon {
  position: absolute;
  top: 50%;
  left: var(--s-3);
  margin-top: -9px;
  color: var(--c-text-3);
  pointer-events: none;
}

.navbar-search .input {
  padding-left: 38px;
  border-radius: var(--r-pill);
  background-color: var(--c-surface-2);
}

@media (min-width: 768px) {
  .navbar { padding: 0 var(--s-6); }
  .navbar-search { display: block; }
}

@media (min-width: 1200px) {
  .navbar-nav { display: flex; }
}

@media (min-width: 992px) { .navbar .navbar-menu-btn { display: none; } }
@media (max-width: 991.98px) { .navbar .navbar-collapse-btn { display: none; } }

.navbar-user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 44px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  text-align: left;
  transition: background-color var(--t-fast) var(--ease);
}

.navbar-user:hover { background: var(--c-surface-3); }

.navbar-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.navbar-user-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.navbar-user-role {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

@media (max-width: 575.98px) { .navbar-user-meta { display: none; } }

/* ---------- Content ---------- */
.content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-8);
}

@media (min-width: 768px) { .content { padding: var(--s-6) var(--s-6) var(--s-10); } }
@media (min-width: 1200px) { .content { padding: var(--s-8) var(--s-8) var(--s-10); } }

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.page-heading {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.page-subtitle { color: var(--c-text-3); }

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.messages {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.messages:empty { display: none; }

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) { .footer { padding: var(--s-4) var(--s-6); } }
@media (min-width: 1200px) { .footer { padding: var(--s-4) var(--s-8); } }

/* =====================================================================
   06  AUTH AND STATUS LAYOUT
   Zenthroic | PrimeTriple4
   ===================================================================== */
.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--s-6) var(--s-4);
  background: var(--hero-wash), var(--c-bg);
}

.auth-tools {
  position: fixed;
  top: var(--s-3);
  right: var(--s-3);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.auth-card--wide { max-width: 600px; }

@media (min-width: 576px) { .auth-card { padding: var(--s-8); } }

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.auth-head {
  margin-bottom: var(--s-6);
  text-align: center;
}

.auth-head p {
  margin-top: var(--s-2);
  color: var(--c-text-3);
}

.auth-form {
  display: grid;
  gap: var(--s-4);
}

.auth-foot {
  margin-top: var(--s-5);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  text-align: center;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.auth-status {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
}

.auth-status-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.auth-status-icon--success { background: var(--c-success-soft); color: var(--c-success); }
.auth-status-icon--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.auth-status-icon--info { background: var(--c-info-soft); color: var(--c-info); }
.auth-status-icon--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.auth-status p { color: var(--c-text-3); }
.auth-status .btn { margin-top: var(--s-2); }
.auth-status .form-actions { justify-content: center; }
.auth-actions { margin-top: var(--s-5); }

/* =====================================================================
   07  BUTTONS
   Zenthroic | PrimeTriple4
   ===================================================================== */
.btn {
  --btn-bg: var(--c-surface-3);
  --btn-bg-hover: var(--c-border);
  --btn-bg-active: var(--c-border-strong);
  --btn-fg: var(--c-text);
  --btn-border: transparent;
  --btn-px: var(--s-4);
  --btn-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  position: relative;
  height: var(--h-md);
  padding: 0 var(--btn-px);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.btn:hover {
  background: var(--btn-bg-hover);
  text-decoration: none;
}

.btn:active {
  background: var(--btn-bg-active);
  transform: translateY(0.5px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-ring);
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Variants ---------- */
.btn-primary {
  --btn-bg: var(--c-primary);
  --btn-bg-hover: var(--c-primary-hover);
  --btn-bg-active: var(--c-primary-active);
  --btn-fg: var(--c-on-primary);
  --btn-shadow: var(--sh-primary);
  background-image: var(--btn-sheen);
}

.btn-primary:hover,
.btn-primary:active { background-image: var(--btn-sheen); }

.btn-secondary {
  --btn-bg: var(--c-surface-3);
  --btn-bg-hover: var(--c-border);
  --btn-bg-active: var(--c-border-strong);
  --btn-fg: var(--c-text);
}

.btn-outline {
  --btn-bg: transparent;
  --btn-bg-hover: var(--c-primary-soft);
  --btn-bg-active: var(--c-primary-soft-2);
  --btn-fg: var(--c-primary-text);
  --btn-border: var(--c-primary-border);
}

.btn-outline-neutral {
  --btn-bg: transparent;
  --btn-bg-hover: var(--c-surface-3);
  --btn-bg-active: var(--c-border);
  --btn-border: var(--c-border-strong);
}

.btn-soft {
  --btn-bg: var(--c-primary-soft);
  --btn-bg-hover: var(--c-primary-soft-2);
  --btn-bg-active: var(--c-primary-soft-2);
  --btn-fg: var(--c-primary-soft-text);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--c-surface-3);
  --btn-bg-active: var(--c-border);
  --btn-fg: var(--c-text-2);
}

.btn-ghost:hover { color: var(--c-text); }

.btn-link {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-bg-active: transparent;
  --btn-fg: var(--c-primary-text);
  --btn-px: var(--s-1);
  height: auto;
  min-height: 0;
  padding-block: var(--s-1);
}

.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.btn-success {
  --btn-bg: var(--c-success-solid);
  --btn-bg-hover: var(--c-success-hover);
  --btn-bg-active: var(--c-success-hover);
  --btn-fg: #fff;
  --btn-shadow: var(--sh-xs);
  background-image: var(--btn-sheen);
}

.btn-danger {
  --btn-bg: var(--c-danger-solid);
  --btn-bg-hover: var(--c-danger-hover);
  --btn-bg-active: var(--c-danger-hover);
  --btn-fg: #fff;
  --btn-shadow: var(--sh-xs);
  background-image: var(--btn-sheen);
}

.btn-warning {
  --btn-bg: var(--c-warning-solid);
  --btn-bg-hover: #b45309;
  --btn-bg-active: #92400e;
  --btn-fg: #fff;
  --btn-shadow: var(--sh-xs);
  background-image: var(--btn-sheen);
}

.btn-info {
  --btn-bg: var(--c-info-solid);
  --btn-bg-hover: #0369a1;
  --btn-bg-active: #075985;
  --btn-fg: #fff;
  --btn-shadow: var(--sh-xs);
  background-image: var(--btn-sheen);
}

.btn-outline-danger {
  --btn-bg: transparent;
  --btn-bg-hover: var(--c-danger-soft);
  --btn-bg-active: var(--c-danger-soft);
  --btn-fg: var(--c-danger);
  --btn-border: var(--c-danger-border);
}

.btn-outline-success {
  --btn-bg: transparent;
  --btn-bg-hover: var(--c-success-soft);
  --btn-bg-active: var(--c-success-soft);
  --btn-fg: var(--c-success);
  --btn-border: var(--c-success-border);
}

.btn-soft-danger {
  --btn-bg: var(--c-danger-soft);
  --btn-bg-hover: var(--c-danger-border);
  --btn-bg-active: var(--c-danger-border);
  --btn-fg: var(--c-danger-text);
}

.btn-soft-success {
  --btn-bg: var(--c-success-soft);
  --btn-bg-hover: var(--c-success-border);
  --btn-bg-active: var(--c-success-border);
  --btn-fg: var(--c-success-text);
}

.btn-danger-ghost:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger-text);
}

/* ---------- Sizes ---------- */
.btn-xs {
  --btn-px: var(--s-2);
  height: var(--h-xs);
  gap: var(--s-1);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}

.btn-sm {
  --btn-px: var(--s-3);
  height: var(--h-sm);
  font-size: var(--fs-sm);
}

.btn-lg {
  --btn-px: var(--s-6);
  height: var(--h-lg);
  font-size: var(--fs-md);
}

.btn-xl {
  --btn-px: var(--s-8);
  height: var(--h-xl);
  border-radius: var(--r-lg);
  font-size: var(--fs-md);
}

.btn-xs .icon { width: 14px; height: 14px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-lg .icon,
.btn-xl .icon { width: 20px; height: 20px; }

/* ---------- Shape and width ---------- */
.btn-pill { border-radius: var(--r-pill); }
.btn-block { display: flex; width: 100%; }

/* ---------- Icon-only: square at every size ---------- */
.btn-icon { width: var(--h-md); padding: 0; }
.btn-icon.btn-xs { width: var(--h-xs); }
.btn-icon.btn-sm { width: var(--h-sm); }
.btn-icon.btn-lg { width: var(--h-lg); }
.btn-icon.btn-xl { width: var(--h-xl); }
.btn-icon.btn-round { border-radius: 50%; }

/* ---------- Loading: label stays so width does not jump ---------- */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

.btn.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn-icon.is-loading .icon { display: none; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Group ---------- */
.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.btn-group > .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.btn-group > .btn:only-child { border-radius: var(--r-md); }

.btn-group > .btn:hover,
.btn-group > .btn:focus-visible { z-index: 1; }

.btn-group > .btn[aria-pressed="true"],
.btn-group > .btn.is-active {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-on-primary);
  --btn-border: var(--c-primary);
  z-index: 1;
}

.btn-group-vertical { display: inline-flex; flex-direction: column; }
.btn-group-vertical > .btn { border-radius: 0; }
.btn-group-vertical > .btn + .btn { margin-top: -1px; }
.btn-group-vertical > .btn:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.btn-group-vertical > .btn:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }

/* Split button: main action plus caret */
.btn-split { display: inline-flex; }
.btn-split > .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.btn-split > .btn:last-child { width: var(--h-md); padding: 0; border-left: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0 var(--r-md) var(--r-md) 0; }

/* Floating action button */
.btn-fab {
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-6);
  z-index: var(--z-sticky);
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--sh-lg);
}

/* Counter or dot on an icon button */
.btn-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-danger-solid);
  box-shadow: 0 0 0 2px var(--c-surface);
}

.btn-count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--c-danger-solid);
  box-shadow: 0 0 0 2px var(--c-surface);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* Password reveal icon swap */
.btn[aria-pressed="true"] .icon-eye { display: none; }
.btn[aria-pressed="false"] .icon-eye-off { display: none; }

/* Theme toggle: show the icon for the theme you would switch to */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; }
}

/* Segmented theme switch (sun | moon pill) */
.theme-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
}

.theme-switch > button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text-3);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.theme-switch > button[aria-pressed="true"],
.theme-switch > button.is-active {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

/* =====================================================================
   08  BADGES, CHIPS AND TAGS
   Zenthroic | PrimeTriple4
   ===================================================================== */
.badge {
  --badge-bg: var(--c-neutral-soft);
  --badge-fg: var(--c-neutral-text);
  --badge-border: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--badge-border);
  border-radius: var(--r-pill);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}

.badge-sm { height: 18px; padding: 0 8px; font-size: var(--fs-2xs); }
.badge-md { height: 26px; padding: 0 12px; font-size: var(--fs-sm); }
.badge-lg { height: 30px; padding: 0 14px; font-size: var(--fs-base); }

.badge-primary { --badge-bg: var(--c-primary-soft); --badge-fg: var(--c-primary-soft-text); }
.badge-success { --badge-bg: var(--c-success-soft); --badge-fg: var(--c-success-text); }
.badge-danger { --badge-bg: var(--c-danger-soft); --badge-fg: var(--c-danger-text); }
.badge-warning { --badge-bg: var(--c-warning-soft); --badge-fg: var(--c-warning-text); }
.badge-info { --badge-bg: var(--c-info-soft); --badge-fg: var(--c-info-text); }
.badge-neutral { --badge-bg: var(--c-neutral-soft); --badge-fg: var(--c-neutral-text); }

/* Solid fill */
.badge-solid { --badge-fg: #fff; }
.badge-solid.badge-primary { --badge-bg: var(--c-primary); }
.badge-solid.badge-success { --badge-bg: var(--c-success-solid); }
.badge-solid.badge-danger { --badge-bg: var(--c-danger-solid); }
.badge-solid.badge-warning { --badge-bg: var(--c-warning-solid); }
.badge-solid.badge-info { --badge-bg: var(--c-info-solid); }
.badge-solid.badge-neutral { --badge-bg: var(--c-text-3); }

/* Outline: transparent fill, coloured border */
.badge-outline {
  --badge-bg: transparent;
  --badge-border: var(--c-border-strong);
}

.badge-outline.badge-primary { --badge-border: var(--c-primary-border); }
.badge-outline.badge-success { --badge-border: var(--c-success-border); }
.badge-outline.badge-danger { --badge-border: var(--c-danger-border); }
.badge-outline.badge-warning { --badge-border: var(--c-warning-border); }
.badge-outline.badge-info { --badge-border: var(--c-info-border); }

/* Dot marker for status values */
.badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* Ring marker (hollow dot) */
.badge-ring::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

/* Square badge */
.badge-square { border-radius: var(--r-sm); }

/* Count pill (notification numbers) */
.count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-danger-solid);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.count-primary { background: var(--c-primary); }
.count-neutral { background: var(--c-surface-3); color: var(--c-text-2); }

/* Status dot on its own */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--c-text-3);
}

.dot-success { background: var(--c-success-solid); }
.dot-danger { background: var(--c-danger-solid); }
.dot-warning { background: var(--c-warning-solid); }
.dot-info { background: var(--c-info-solid); }
.dot-primary { background: var(--c-primary); }

/* Chips and tags */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 28px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

button.chip:hover,
a.chip:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
  text-decoration: none;
}

.chip.is-selected,
.chip[aria-pressed="true"] {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
}

.chip-remove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  opacity: 0.7;
}

.chip-remove:hover {
  background: rgba(127, 127, 127, 0.2);
  opacity: 1;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.tag-primary { background: var(--c-primary-soft); color: var(--c-primary-soft-text); }
.tag-mono { font-family: var(--font-mono); }

/* =====================================================================
   09  FORMS
   Zenthroic | PrimeTriple4
   ===================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
}

.label {
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.label.is-required::after {
  content: " *";
  color: var(--c-danger);
}

.label-optional {
  margin-left: var(--s-1);
  color: var(--c-text-3);
  font-weight: var(--fw-regular);
}

.field-help {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.field-error {
  display: none;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-danger);
  font-size: var(--fs-sm);
}

.field-success {
  display: none;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-success);
  font-size: var(--fs-sm);
}

.field.is-invalid .field-error,
.field.is-valid .field-success { display: flex; }

.field.is-invalid .field-help,
.field.is-valid .field-help { display: none; }

.form-grid { display: grid; gap: var(--s-5); }

@media (min-width: 768px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid > .span-full { grid-column: 1 / -1; }
  .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.form-section + .form-section {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}

.form-section-title {
  margin-bottom: var(--s-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

/* ---------- Text-like controls ---------- */
.input,
.select,
.textarea {
  display: block;
  width: 100%;
  height: var(--h-md);
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.4;
  box-shadow: var(--sh-xs);
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder { color: var(--c-placeholder); }

.input:hover:not(:disabled):not([readonly]),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled):not([readonly]) { border-color: var(--c-text-3); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-focus);
  box-shadow: 0 0 0 3px var(--c-ring);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background-color: var(--c-surface-3);
  color: var(--c-text-3);
  cursor: not-allowed;
  box-shadow: none;
}

.input[readonly],
.textarea[readonly] { background-color: var(--c-surface-2); }

.input.is-mono,
.textarea.is-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* Sizes */
.input-sm,
.select-sm { height: var(--h-sm); padding: 0 var(--s-2); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.input-lg,
.select-lg { height: var(--h-lg); padding: 0 var(--s-4); font-size: var(--fs-md); }
.input-xl { height: var(--h-xl); padding: 0 var(--s-5); font-size: var(--fs-md); border-radius: var(--r-lg); }
.textarea-sm { min-height: 72px; font-size: var(--fs-sm); }
.textarea-lg { min-height: 140px; font-size: var(--fs-md); }
.input-pill { border-radius: var(--r-pill); }

/* Validation */
.is-invalid > .input,
.is-invalid > .select,
.is-invalid > .textarea,
.is-invalid > .input-group,
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid { border-color: var(--c-danger); background-color: var(--c-danger-soft); }

.is-invalid > .input:focus,
.is-invalid > .select:focus,
.is-invalid > .textarea:focus,
.input.is-invalid:focus { box-shadow: 0 0 0 3px var(--c-danger-soft); }

.is-valid > .input,
.is-valid > .select,
.is-valid > .textarea,
.is-valid > .input-group,
.input.is-valid,
.select.is-valid,
.textarea.is-valid { border-color: var(--c-success); background-color: var(--c-success-soft); }

.is-valid > .input:focus,
.is-valid > .select:focus,
.is-valid > .textarea:focus,
.input.is-valid:focus { box-shadow: 0 0 0 3px var(--c-success-soft); }

/* Textarea */
.textarea {
  height: auto;
  min-height: 96px;
  padding: var(--s-2) var(--s-3);
  resize: vertical;
}

.textarea-fixed { resize: none; }

/* Native select with themed chevron */
.select {
  appearance: none;
  padding-right: 36px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.select option {
  background: var(--c-surface);
  color: var(--c-text);
}

input[type="number"].input {
  appearance: textfield;
  -moz-appearance: textfield;
}

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

input[type="date"].input,
input[type="time"].input,
input[type="datetime-local"].input { min-width: 0; }

input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="time"].input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

[data-theme="dark"] input[type="date"].input::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"].input::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"].input::-webkit-calendar-picker-indicator { filter: invert(1); }

input[type="search"].input::-webkit-search-cancel-button { cursor: pointer; }

/* Character counter under a textarea */
.field-counter {
  align-self: flex-end;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.field-counter.is-over { color: var(--c-danger); }

/* ---------- Input group (prefix, suffix, buttons) ---------- */
.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.input-group:hover { border-color: var(--c-text-3); }

.input-group:focus-within {
  border-color: var(--c-focus);
  box-shadow: 0 0 0 3px var(--c-ring);
}

.input-group > .input,
.input-group > .select {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.input-group > .input:focus,
.input-group > .select:focus { box-shadow: none; }

.input-group > :first-child {
  border-top-left-radius: calc(var(--r-md) - 1px);
  border-bottom-left-radius: calc(var(--r-md) - 1px);
}

.input-group > :last-child {
  border-top-right-radius: calc(var(--r-md) - 1px);
  border-bottom-right-radius: calc(var(--r-md) - 1px);
}

.input-addon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  background: var(--c-surface-2);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.input-addon:first-child { border-right: 1px solid var(--c-border); }
.input-addon:last-child { border-left: 1px solid var(--c-border); }

/* Icon inside the field (leading) */
.input-icon { position: relative; }

.input-icon > .icon {
  position: absolute;
  top: 50%;
  left: var(--s-3);
  margin-top: -9px;
  color: var(--c-text-3);
  pointer-events: none;
}

.input-icon > .input { padding-left: 38px; }

.input-icon > .input-trailing {
  position: absolute;
  top: 50%;
  right: var(--s-3);
  margin-top: -9px;
  color: var(--c-text-3);
}

/* Buttons inside a group sit flush */
.input-group > .btn {
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--c-surface-2);
  background-image: none;
  box-shadow: none;
  color: var(--c-text-2);
}

.input-group > .btn:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
}

.input-group > .btn:first-child {
  border-right: 1px solid var(--c-border);
  border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);
}

.input-group > .btn:last-child {
  border-left: 1px solid var(--c-border);
  border-radius: 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0;
}

.input-group > .btn-icon { width: var(--h-md); }

.input-group > .btn-primary {
  background: var(--c-primary);
  background-image: var(--btn-sheen);
  color: var(--c-on-primary);
}

.input-group > .btn-primary:hover { background-color: var(--c-primary-hover); }

.input-group-sm { border-radius: var(--r-sm); }
.input-group-sm > .input { height: calc(var(--h-sm) - 2px); font-size: var(--fs-sm); }
.input-group-lg > .input { height: calc(var(--h-lg) - 2px); font-size: var(--fs-md); }

/* Number stepper */
.stepper > .input { text-align: center; }

.stepper > .btn {
  width: var(--h-md);
  padding: 0;
}

/* Copy field: read-only value plus Copy */
.copy-field > .input {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
}

/* Search field with a trailing Go button */
.search-field { display: flex; width: 100%; }

/* ---------- Checkbox and radio ---------- */
.check {
  --check-size: 18px;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-2);
  cursor: pointer;
  font-size: var(--fs-base);
}

.check input {
  appearance: none;
  flex: none;
  width: var(--check-size);
  height: var(--check-size);
  margin: 1px 0 0;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface) center / calc(var(--check-size) - 6px) no-repeat;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.check input[type="radio"] { border-radius: 50%; }

.check input:hover:not(:disabled) { border-color: var(--c-text-3); }

.check input:focus-visible {
  outline: none;
  border-color: var(--c-focus);
  box-shadow: 0 0 0 3px var(--c-ring);
}

.check input:checked,
.check input:indeterminate {
  border-color: var(--c-primary);
  background-color: var(--c-primary);
}

.check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.check input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.check input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='white'/%3E%3C/svg%3E");
  background-size: var(--check-size);
}

.check input:disabled {
  background-color: var(--c-surface-3);
  cursor: not-allowed;
}

.check input:disabled:checked {
  border-color: var(--c-text-3);
  background-color: var(--c-text-3);
}

.check:has(input:disabled) {
  color: var(--c-text-3);
  cursor: not-allowed;
}

.check.is-invalid input { border-color: var(--c-danger); }

/* Sizes */
.check-sm { --check-size: 16px; font-size: var(--fs-sm); }
.check-lg { --check-size: 22px; font-size: var(--fs-md); }

.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
}

.check-group-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.check-desc {
  display: block;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* ---------- Switch ---------- */
.switch {
  --switch-w: 38px;
  --switch-h: 22px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
}

.switch input {
  appearance: none;
  position: relative;
  flex: none;
  width: var(--switch-w);
  height: var(--switch-h);
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--c-border-strong);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.switch input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--switch-h) - 6px);
  height: calc(var(--switch-h) - 6px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform var(--t-base) var(--ease);
}

.switch input:checked { background: var(--c-primary); }
.switch input:checked::before { transform: translateX(calc(var(--switch-w) - var(--switch-h))); }

.switch input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-ring);
}

.switch input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch-sm { --switch-w: 30px; --switch-h: 18px; font-size: var(--fs-sm); }
.switch-lg { --switch-w: 48px; --switch-h: 28px; font-size: var(--fs-md); }

/* ---------- Range slider ---------- */
.range {
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  cursor: pointer;
}

.range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--c-primary);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease);
}

.range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-primary);
  border-radius: 50%;
  background: #fff;
}

.range:hover::-webkit-slider-thumb { transform: scale(1.1); }

.range:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-ring);
}

/* ---------- File input (native, restyled button) ---------- */
.input[type="file"] {
  height: auto;
  padding: 5px;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.input[type="file"]::file-selector-button {
  height: 28px;
  margin-right: var(--s-3);
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  color: var(--c-text);
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.input[type="file"]:hover::file-selector-button { background: var(--c-border); }

.file-meta {
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  font-size: var(--fs-sm);
}

.file-meta.is-visible { display: flex; }

.file-meta-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-medium);
}

.file-meta-size {
  color: var(--c-text-3);
  white-space: nowrap;
}

.file-meta.is-invalid {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

/* Drag and drop zone */
.dropzone {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  padding: var(--s-6) var(--s-4);
  border: 1.5px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  text-align: center;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}

.dropzone-icon {
  margin-bottom: var(--s-1);
  color: var(--c-primary-text);
}

.dropzone-title { font-weight: var(--fw-medium); color: var(--c-text); }
.dropzone-hint { color: var(--c-text-3); font-size: var(--fs-sm); }
.dropzone a,
.dropzone .dropzone-link { color: var(--c-primary-text); text-decoration: underline; text-underline-offset: 2px; }

.dropzone.is-invalid {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
  color: var(--c-danger-text);
}

.dropzone.is-invalid .dropzone-icon { color: var(--c-danger); }

/* Uploaded file row */
.file-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.file-item-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
}

.file-item-main { flex: 1; min-width: 0; }
.file-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.file-item-meta { color: var(--c-text-3); font-size: var(--fs-xs); }

/* ---------- Tag input and code field ---------- */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--h-md);
  padding: 4px var(--s-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.tag-input:focus-within {
  border-color: var(--c-focus);
  box-shadow: 0 0 0 3px var(--c-ring);
}

.tag-input > input {
  flex: 1;
  min-width: 80px;
  height: 28px;
  border: 0;
  background: transparent;
  outline: none;
}

.code-field {
  display: flex;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  overflow: hidden;
}

.code-field-lines {
  flex: none;
  min-width: 36px;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border-right: 1px solid var(--c-border);
  color: var(--c-text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: right;
  user-select: none;
}

.code-field > .textarea {
  flex: 1;
  min-height: 72px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.code-field > .textarea:focus { box-shadow: none; }

/* OTP / PIN cells */
.otp {
  display: flex;
  gap: var(--s-2);
}

.otp > .input {
  width: 44px;
  height: 48px;
  padding: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
}

/* =====================================================================
   10  CARDS
   Zenthroic | PrimeTriple4
   ===================================================================== */
.card {
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-border);
}

.card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.card-subtitle {
  margin-top: 2px;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.card-body { padding: var(--s-5); }

.card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.card-flush > .card-body { padding: 0; }
.card-flat { box-shadow: none; }
.card-raised { box-shadow: var(--sh-md); }

.card-interactive {
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.card-interactive:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}

.card-accent { border-top: 3px solid var(--c-primary); }
.card-compact > .card-body { padding: var(--s-4); }

/* Form card: single form, readable line length */
.form-card { max-width: 760px; }

/* Media card */
.card-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--c-surface-3);
}

/* ---------- Stat card ---------- */
.stat-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.stat-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-surface-3);
  color: var(--c-text-2);
}

.stat-icon--primary { background: var(--c-primary-soft); color: var(--c-primary-soft-text); }
.stat-icon--success { background: var(--c-success-soft); color: var(--c-success-text); }
.stat-icon--danger { background: var(--c-danger-soft); color: var(--c-danger-text); }
.stat-icon--warning { background: var(--c-warning-soft); color: var(--c-warning-text); }
.stat-icon--info { background: var(--c-info-soft); color: var(--c-info-text); }

.stat-body { min-width: 0; flex: 1; }

.stat-label {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.stat-value {
  margin-top: 2px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat-hint {
  margin-top: 2px;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-3);
}

.stat-trend.is-up { color: var(--c-success); }
.stat-trend.is-down { color: var(--c-danger); }

.stat-spark {
  flex: none;
  align-self: flex-end;
  width: 64px;
  height: 28px;
  fill: none;
  stroke: var(--c-primary-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Welcome card ---------- */
.welcome-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--hero-wash), var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.welcome-main {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}

.welcome-text p {
  margin-top: var(--s-1);
  color: var(--c-text-3);
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* ---------- Info card ---------- */
.info-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.info-card--primary {
  border-color: var(--c-primary-border);
  background: var(--c-primary-soft);
}

a.info-card {
  color: inherit;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

a.info-card:hover {
  border-color: var(--c-primary-border);
  box-shadow: var(--sh-md);
  text-decoration: none;
}

/* ---------- Product card ---------- */
.product-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.product-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-md);
}

.product-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.product-media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--c-surface-3);
  overflow: hidden;
}

.product-media img { width: 100%; height: 100%; object-fit: cover; }

.product-price {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.product-old-price {
  margin-left: var(--s-2);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  text-decoration: line-through;
}

.product-desc {
  flex: 1;
  color: var(--c-text-3);
}

.product-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.product-rating .icon { color: var(--c-warning-solid); fill: currentColor; }
.product-card .btn { margin-top: auto; }

/* Dashboard layout */
.dash {
  display: grid;
  gap: var(--s-6);
}

.dash-columns {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 992px) { .dash-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Empty state */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-10) var(--s-6);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-2);
  border-radius: 50%;
  background: var(--c-surface-3);
  color: var(--c-text-3);
}

.empty-state h2,
.empty-state h3 { font-size: var(--fs-md); }

.empty-state p {
  max-width: 42ch;
  color: var(--c-text-3);
}

.empty-state .btn { margin-top: var(--s-3); }
.empty-state[hidden] { display: none; }

/* =====================================================================
   11  ALERTS, BANNERS AND TOASTS
   Zenthroic | PrimeTriple4
   ===================================================================== */
.alert {
  --alert-bg: var(--c-info-soft);
  --alert-fg: var(--c-info-text);
  --alert-border: var(--c-info-border);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--alert-border);
  border-radius: var(--r-md);
  background: var(--alert-bg);
  color: var(--alert-fg);
}

.alert-info { --alert-bg: var(--c-info-soft); --alert-fg: var(--c-info-text); --alert-border: var(--c-info-border); }
.alert-success { --alert-bg: var(--c-success-soft); --alert-fg: var(--c-success-text); --alert-border: var(--c-success-border); }
.alert-danger { --alert-bg: var(--c-danger-soft); --alert-fg: var(--c-danger-text); --alert-border: var(--c-danger-border); }
.alert-warning { --alert-bg: var(--c-warning-soft); --alert-fg: var(--c-warning-text); --alert-border: var(--c-warning-border); }
.alert-primary { --alert-bg: var(--c-primary-soft); --alert-fg: var(--c-primary-soft-text); --alert-border: var(--c-primary-border); }

.alert > .icon { margin-top: 1px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: var(--fw-semibold); }
.alert-body p + p { margin-top: var(--s-1); }

.alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.alert-dismiss {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin: -2px -4px -2px 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.alert-dismiss:hover {
  background: rgba(127, 127, 127, 0.16);
  opacity: 1;
}

/* Left accent variant */
.alert-accent {
  border-width: 1px 1px 1px 4px;
  border-left-color: var(--alert-fg);
}

/* ---------- Banner (request failed, session expired, maintenance) ---------- */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}

.banner > .icon { color: var(--c-text-3); }

.banner-text {
  flex: 1;
  min-width: 200px;
}

.banner-text strong { display: block; }
.banner-text span { color: var(--c-text-3); }

.banner-danger { border-color: var(--c-danger-border); background: var(--c-danger-soft); }
.banner-danger > .icon,
.banner-danger .banner-text strong { color: var(--c-danger-text); }

.banner-warning { border-color: var(--c-warning-border); background: var(--c-warning-soft); }
.banner-warning > .icon,
.banner-warning .banner-text strong { color: var(--c-warning-text); }

.banner-info { border-color: var(--c-info-border); background: var(--c-info-soft); }
.banner-info > .icon,
.banner-info .banner-text strong { color: var(--c-info-text); }

.banner-success { border-color: var(--c-success-border); background: var(--c-success-soft); }
.banner-success > .icon,
.banner-success .banner-text strong { color: var(--c-success-text); }

/* Full-bleed announcement strip */
.banner-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: center;
}

.banner-strip a { color: inherit; text-decoration: underline; }

/* ---------- Toast ---------- */
.toast-region {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  left: var(--s-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  pointer-events: none;
}

@media (min-width: 576px) {
  .toast-region {
    left: auto;
    width: 360px;
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-lg);
  pointer-events: auto;
  animation: toast-in var(--t-slow) var(--ease);
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.toast > .icon { flex: none; }
.toast-success > .icon { color: var(--c-success); }
.toast-danger > .icon { color: var(--c-danger); }
.toast-warning > .icon { color: var(--c-warning); }
.toast-info > .icon { color: var(--c-info); }

.toast-success { border-color: var(--c-success-border); }
.toast-danger { border-color: var(--c-danger-border); }
.toast-warning { border-color: var(--c-warning-border); }
.toast-info { border-color: var(--c-info-border); }

.toast-text {
  flex: 1;
  min-width: 0;
}

.toast-title { font-weight: var(--fw-semibold); }

.toast-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--c-text-3);
}

.toast-close:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* =====================================================================
   12  DIALOG, DROPDOWN, TOOLTIP AND POPOVER
   Zenthroic | PrimeTriple4
   ===================================================================== */
.dialog {
  width: calc(100% - var(--s-8));
  max-width: 440px;
  max-height: calc(100dvh - var(--s-8));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--sh-lg);
}

.dialog[open] { animation: dialog-in var(--t-slow) var(--ease); }
.dialog::backdrop { background: var(--c-overlay); }
.dialog-sm { max-width: 360px; }
.dialog-wide { max-width: 600px; }
.dialog-xl { max-width: 820px; }

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--c-border);
}

.dialog-body {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-6);
}

.dialog-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
}

.dialog-icon--danger { background: var(--c-danger-soft); color: var(--c-danger-text); }
.dialog-icon--warning { background: var(--c-warning-soft); color: var(--c-warning-text); }
.dialog-icon--success { background: var(--c-success-soft); color: var(--c-success-text); }
.dialog-icon--info { background: var(--c-info-soft); color: var(--c-info-text); }

.dialog-content { min-width: 0; flex: 1; }

.dialog-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.dialog-text {
  margin-top: var(--s-1);
  color: var(--c-text-2);
}

.dialog-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--c-text-3);
}

.dialog-close:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
}

.dialog-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
}

@media (max-width: 575.98px) {
  .dialog-footer { flex-direction: column-reverse; }
  .dialog-footer .btn { width: 100%; }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* Static preview of a dialog inside a page (styleguide) */
.dialog-static {
  position: relative;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
}

/* ---------- Dropdown ---------- */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  z-index: var(--z-dropdown);
  display: none;
  min-width: 200px;
  max-width: calc(100vw - var(--s-8));
  padding: var(--s-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-lg);
}

.dropdown-menu.is-left { right: auto; left: 0; }
.dropdown-menu.is-up { top: auto; bottom: calc(100% + var(--s-2)); }

.dropdown.is-open > .dropdown-menu {
  display: block;
  animation: dropdown-in var(--t-base) var(--ease);
}

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
}

.dropdown-header { padding: var(--s-2) var(--s-3); }

.dropdown-label {
  padding: var(--s-2) var(--s-3) var(--s-1);
  color: var(--c-text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 36px;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--c-text);
  font-size: var(--fs-base);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}

.dropdown-item .icon { color: var(--c-text-3); }

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background: var(--c-surface-3);
  text-decoration: none;
  outline: none;
}

.dropdown-item.is-active { background: var(--c-primary-soft); color: var(--c-primary-soft-text); }
.dropdown-item.is-active .icon { color: inherit; }
.dropdown-item.is-danger,
.dropdown-item.is-danger .icon { color: var(--c-danger); }
.dropdown-item.is-danger:hover { background: var(--c-danger-soft); }
.dropdown-item:disabled,
.dropdown-item.is-disabled { opacity: 0.5; pointer-events: none; }
.dropdown-item .count { margin-left: auto; }

.dropdown-divider {
  height: 1px;
  margin: var(--s-1) calc(var(--s-1) * -1);
  background: var(--c-border);
}

/* Notification dropdown */
.dropdown-menu--panel {
  width: 340px;
  padding: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  font-weight: var(--fw-semibold);
}

.panel-body {
  max-height: 320px;
  overflow-y: auto;
}

.panel-foot {
  padding: var(--s-2);
  border-top: 1px solid var(--c-border);
  text-align: center;
}

.notif-item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
}

.notif-item:last-child { border-bottom: 0; }
.notif-item p { font-size: var(--fs-sm); }

.notif-item time {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.notif-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

.notif-dot.is-read { background: transparent; }

/* Checkbox rows inside a dropdown (column chooser) */
.dropdown-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.dropdown-check:hover { background: var(--c-surface-2); }

.dropdown-menu--scroll {
  max-height: 320px;
  overflow-y: auto;
}

/* ---------- Tooltip (CSS only, label stays on the element) ---------- */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: var(--z-dropdown);
  padding: 5px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 2px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

[data-tooltip][data-tooltip-pos="bottom"]::after {
  top: calc(100% + 6px);
  bottom: auto;
  transform: translate(-50%, -2px);
}

[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after { transform: translate(-50%, 0); }

[data-tooltip][data-tooltip-pos="left"]::after {
  top: 50%;
  right: calc(100% + 6px);
  bottom: auto;
  left: auto;
  transform: translate(2px, -50%);
}

[data-tooltip][data-tooltip-pos="left"]:hover::after,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::after { transform: translate(0, -50%); }

[data-tooltip][data-tooltip-pos="right"]::after {
  top: 50%;
  bottom: auto;
  left: calc(100% + 6px);
  transform: translate(-2px, -50%);
}

[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after { transform: translate(0, -50%); }

/* ---------- Popover ---------- */
.popover {
  position: absolute;
  z-index: var(--z-dropdown);
  width: max-content;
  max-width: 280px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-lg);
}

.popover-title {
  margin-bottom: var(--s-1);
  font-weight: var(--fw-semibold);
}

.popover-text {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* =====================================================================
   13  AVATARS
   Zenthroic | PrimeTriple4
   ===================================================================== */
.avatar {
  --avatar-size: 36px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
  font-size: calc(var(--avatar-size) * 0.38);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.avatar-xs { --avatar-size: 24px; }
.avatar-sm { --avatar-size: 32px; }
.avatar-lg { --avatar-size: 48px; }
.avatar-xl { --avatar-size: 72px; }
.avatar-2xl { --avatar-size: 96px; }

.avatar-square { border-radius: var(--r-md); }
.avatar-solid { background: var(--c-primary); color: var(--c-on-primary); }
.avatar-neutral { background: var(--c-surface-3); color: var(--c-text-2); }
.avatar-success { background: var(--c-success-soft); color: var(--c-success-text); }
.avatar-danger { background: var(--c-danger-soft); color: var(--c-danger-text); }
.avatar-warning { background: var(--c-warning-soft); color: var(--c-warning-text); }

/* Status dot */
.avatar-dot::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: max(8px, calc(var(--avatar-size) * 0.26));
  height: max(8px, calc(var(--avatar-size) * 0.26));
  border-radius: 50%;
  background: var(--c-text-3);
  box-shadow: 0 0 0 2px var(--c-surface);
}

.avatar-dot.is-online::after { background: var(--c-success-solid); }
.avatar-dot.is-busy::after { background: var(--c-danger-solid); }
.avatar-dot.is-away::after { background: var(--c-warning-solid); }

/* Group with overlap and +N */
.avatar-group { display: inline-flex; }

.avatar-group .avatar { box-shadow: 0 0 0 2px var(--c-surface); }
.avatar-group .avatar + .avatar { margin-left: -8px; }

.avatar-more {
  background: var(--c-surface-3);
  color: var(--c-text-2);
  font-size: calc(var(--avatar-size) * 0.34);
}

/* Avatar with name and meta */
.avatar-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.avatar-row-name { font-weight: var(--fw-medium); }
.avatar-row-meta { color: var(--c-text-3); font-size: var(--fs-sm); }

.avatar-upload {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* =====================================================================
   14  LISTS, KEY/VALUE, CODE AND TIMELINE
   Zenthroic | PrimeTriple4
   ===================================================================== */
.kv-list {
  display: grid;
  margin: 0;
}

.kv-row {
  display: grid;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.kv-row:first-child { padding-top: 0; }

.kv-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.kv-key {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.kv-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}

@media (min-width: 576px) {
  .kv-row {
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
  }
}

/* ---------- List group ---------- */
.list-group {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--c-border);
}

.list-item:last-child { border-bottom: 0; }
.list-item-main { flex: 1; min-width: 0; }

.list-item-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-medium);
}

.list-item-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.list-item-end {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

a.list-item {
  color: inherit;
  transition: background-color var(--t-fast) var(--ease);
}

a.list-item:hover {
  background: var(--c-surface-2);
  text-decoration: none;
}

.list-item.is-active { background: var(--c-primary-soft); }

/* Bulleted list with violet markers */
.list-bullets {
  padding-left: var(--s-5);
  color: var(--c-text-2);
}

.list-bullets li { padding-left: var(--s-1); }
.list-bullets li + li { margin-top: var(--s-2); }
.list-bullets li::marker { color: var(--c-primary-text); }

/* Check list */
.list-checks {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--c-text-2);
}

.list-checks .icon { margin-top: 2px; color: var(--c-success); }

/* ---------- Code block with copy ---------- */
.code-block {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}

.code-block pre {
  margin: 0;
  padding: var(--s-4);
  padding-right: 96px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-block .btn {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
}

.code-block-title {
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--c-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  line-height: 1.3;
  text-align: center;
}

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  display: grid;
  gap: var(--s-5);
  margin: 0;
  padding: 0 0 0 var(--s-6);
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 7px;
  width: 2px;
  background: var(--c-border);
}

.timeline-item { position: relative; }

.timeline-item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: calc(var(--s-6) * -1);
  width: 16px;
  height: 16px;
  border: 3px solid var(--c-primary);
  border-radius: 50%;
  background: var(--c-surface);
}

.timeline-item.is-done::before {
  border-color: var(--c-primary);
  background: var(--c-primary);
}

.timeline-item.is-danger::before { border-color: var(--c-danger-solid); }
.timeline-title { font-weight: var(--fw-medium); }

.timeline-time {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* =====================================================================
   15  NAVIGATION
   Zenthroic | PrimeTriple4
   ===================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin: 0 0 var(--s-2);
  padding: 0;
  list-style: none;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.breadcrumb li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.breadcrumb a { color: var(--c-text-3); }
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb [aria-current="page"] { color: var(--c-text-2); }

/* ---------- Tabs (underline) ---------- */
.tabs {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--c-border);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  flex: none;
  height: 40px;
  padding: 0 var(--s-4);
  border: 0;
  background: none;
  color: var(--c-text-3);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.tab::after {
  content: "";
  position: absolute;
  right: var(--s-2);
  bottom: -1px;
  left: var(--s-2);
  height: 2px;
  border-radius: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transition: transform var(--t-base) var(--ease);
}

.tab:hover { color: var(--c-text); }
.tab[aria-selected="true"] { color: var(--c-primary-text); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab:disabled { opacity: 0.5; pointer-events: none; }
.tab-panel { padding-top: var(--s-5); }

/* Pill tabs */
.tabs-pills {
  gap: var(--s-1);
  padding: 3px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-surface-3);
}

.tabs-pills .tab {
  height: 32px;
  border-radius: var(--r-sm);
}

.tabs-pills .tab::after { display: none; }

.tabs-pills .tab[aria-selected="true"] {
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  color: var(--c-text);
}

/* ---------- Segmented control ---------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-3);
}

.segmented > button,
.segmented > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 30px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.segmented > button:hover { color: var(--c-text); }

.segmented > button[aria-pressed="true"],
.segmented > button.is-active,
.segmented > label:has(input:checked) {
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--sh-sm);
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-link {
  display: inline-grid;
  place-items: center;
  min-width: var(--h-sm);
  height: var(--h-sm);
  padding: 0 var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-link:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
  text-decoration: none;
}

.page-link[aria-current="page"] {
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--sh-primary);
}

.page-link[aria-disabled="true"],
.page-link:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.page-gap {
  display: inline-grid;
  place-items: center;
  min-width: var(--h-sm);
  color: var(--c-text-3);
}

/* Boxed pagination (outlined buttons) */
.pagination-boxed .page-link { border-color: var(--c-border); background: var(--c-surface); }
.pagination-boxed .page-link:hover { border-color: var(--c-border-strong); }
.pagination-boxed .page-link[aria-current="page"] { border-color: var(--c-primary); }
.pagination-round .page-link { border-radius: 50%; }

/* ---------- Steps ---------- */
.steps {
  display: flex;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  text-align: center;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--c-border-strong);
  border-radius: 50%;
  background: var(--c-surface);
  font-weight: var(--fw-semibold);
}

.step + .step::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--c-border-strong);
}

.step.is-done,
.step.is-active { color: var(--c-text); }

.step.is-done::before,
.step.is-active::before {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.step.is-active::before { box-shadow: 0 0 0 4px var(--c-ring); }
.step.is-done + .step::after,
.step.is-active + .step::after { background: var(--c-primary); }

/* =====================================================================
   16  TABLES
   Zenthroic | PrimeTriple4
   ===================================================================== */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}

.table-toolbar-start,
.table-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.table-toolbar-end { margin-left: auto; }
.table-toolbar.is-hidden { display: none; }

.table-search {
  position: relative;
  width: 100%;
  max-width: 280px;
}

.table-search .icon {
  position: absolute;
  top: 50%;
  left: var(--s-3);
  margin-top: -9px;
  color: var(--c-text-3);
  pointer-events: none;
}

.table-search .input { padding-left: 38px; }

@media (max-width: 575.98px) {
  .table-search { max-width: none; }
  .table-toolbar-start { width: 100%; }
}

.page-length {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.page-length .select {
  width: auto;
  height: var(--h-sm);
  padding-right: 32px;
  font-size: var(--fs-sm);
}

.table-toolbar .select-sm {
  width: auto;
  padding-right: 32px;
}

.table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* Bulk bar: replaces toolbar content while rows are selected */
.bulkbar {
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--c-primary-soft);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-primary-soft-text);
  font-weight: var(--fw-medium);
}

.bulkbar.is-visible {
  display: flex;
  flex-wrap: wrap;
}

.bulkbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-left: auto;
}

/* ---------- Table ---------- */
.table-wrap {
  position: relative;
  overflow: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.table-wrap.is-sticky-head { max-height: 70vh; }

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-base);
}

.table th,
.table td {
  padding: 12px var(--s-4);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.table thead th {
  background: var(--c-surface-2);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.table tbody tr { transition: background-color var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--c-surface-2); }
.table tbody tr.is-selected { background: var(--c-primary-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[hidden] { display: none; }

.table-compact th,
.table-compact td {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: var(--fs-sm);
}

.table-comfortable th,
.table-comfortable td {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Zebra and bordered variants */
.table-striped tbody tr:nth-child(even) { background: var(--c-surface-2); }
.table-striped tbody tr:nth-child(even):hover { background: var(--c-surface-3); }
.table-bordered th,
.table-bordered td { border-right: 1px solid var(--c-border); }
.table-bordered th:last-child,
.table-bordered td:last-child { border-right: 0; }

.is-sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--c-border);
}

.table-sticky-first th:first-child,
.table-sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-surface);
  box-shadow: 1px 0 0 var(--c-border);
}

.table-sticky-first thead th:first-child {
  z-index: 3;
  background: var(--c-surface-2);
}

.table-sticky-first tbody tr:hover td:first-child { background: var(--c-surface-2); }
.table-sticky-first tbody tr.is-selected td:first-child { background: var(--c-primary-soft); }

.table .col-check {
  width: 40px;
  padding-right: 0;
}

.table .col-actions { text-align: right; }
.table .col-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sort header */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.th-sort:hover { color: var(--c-text); }

.th-sort .icon {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

th[aria-sort="ascending"] .th-sort,
th[aria-sort="descending"] .th-sort { color: var(--c-text); }

th[aria-sort="ascending"] .th-sort .icon,
th[aria-sort="descending"] .th-sort .icon {
  opacity: 1;
  color: var(--c-primary-text);
}

th[aria-sort="descending"] .th-sort .icon { transform: scaleY(-1); }

/* Long values */
.cell-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.cell-truncate {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-wide {
  display: block;
  min-width: 260px;
  max-width: 520px;
  white-space: normal;
}

.cell-user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.cell-user strong {
  display: block;
  line-height: 1.3;
}

.cell-user small {
  display: block;
  color: var(--c-text-3);
}

/* Secret cell: hidden by default, reveal and copy */
.secret {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.secret-value {
  min-width: 9ch;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.secret.is-hidden .secret-value { letter-spacing: 0.15em; }

/* Row actions */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

/* Column visibility */
.col-hidden { display: none; }

/* ---------- Mobile: rows become stacked cards ---------- */
@media (max-width: 767.98px) {
  .table-stack { display: block; }

  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .table-stack tbody {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-3);
  }

  .table-stack tr {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
  }

  .table-stack tbody tr:hover { background: var(--c-surface); }
  .table-stack tbody tr.is-selected { background: var(--c-primary-soft); }

  .table-stack td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 6px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }

  .table-stack td::before {
    content: attr(data-label);
    flex: none;
    color: var(--c-text-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    text-align: left;
  }

  .table-stack td.col-check::before { content: none; }

  .table-stack td.col-actions {
    justify-content: flex-end;
    margin-top: var(--s-1);
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-border);
  }

  .table-stack td.col-actions::before { content: none; }
  .table-stack .cell-truncate { max-width: 55vw; }
  .table-stack.table-sticky-first th:first-child,
  .table-stack.table-sticky-first td:first-child { position: static; box-shadow: none; background: none; }
  .cell-wide { min-width: 0; max-width: none; text-align: right; }
}

/* =====================================================================
   17  FEEDBACK
   Zenthroic | PrimeTriple4
   ===================================================================== */
.loadbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-loadbar);
  height: 3px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}

.loadbar.is-active {
  opacity: 1;
  transform: scaleX(0.7);
  transition: transform 8s cubic-bezier(0.1, 0.6, 0.2, 1);
}

.loadbar.is-done {
  opacity: 0;
  transform: scaleX(1);
  transition: transform var(--t-base) var(--ease), opacity var(--t-slow) var(--ease) var(--t-base);
}

/* ---------- Spinner ---------- */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-border-strong);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.spinner-xl { width: 48px; height: 48px; border-width: 4px; }
.spinner-on-primary { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }

/* Three-dot loader */
.dots {
  display: inline-flex;
  gap: 4px;
}

.dots > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  animation: dot-bounce 1s ease-in-out infinite;
}

.dots > span:nth-child(2) { animation-delay: 0.15s; }
.dots > span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ---------- Skeleton ---------- */
.skeleton {
  display: block;
  height: 14px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.skeleton-circle { width: 36px; height: 36px; border-radius: 50%; }
.skeleton-title { height: 20px; width: 40%; }
.skeleton-short { flex: none; width: 80px; }
.skeleton-block { height: 96px; }
.skeleton-text { height: 12px; }
.skeleton-text + .skeleton-text { margin-top: var(--s-2); }

@keyframes shimmer {
  to { background-position: -200% 0; }
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
}

.skeleton-row .skeleton:nth-child(2) { flex: 1; }

/* ---------- Progress ---------- */
.progress {
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
}

.progress-sm { height: 4px; }
.progress-lg { height: 12px; }

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--c-primary);
  transition: width var(--t-base) var(--ease);
}

.progress-bar.is-success { background: var(--c-success-solid); }
.progress-bar.is-danger { background: var(--c-danger-solid); }
.progress-bar.is-warning { background: var(--c-warning-solid); }
.progress-bar.is-info { background: var(--c-info-solid); }

.progress-bar.is-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%);
  background-size: 16px 16px;
}

.progress-bar.is-indeterminate {
  width: 40%;
  animation: indeterminate 1.4s var(--ease) infinite;
}

@keyframes indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--s-1);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* Ring progress: set --value (0-100) on the element */
.ring {
  --value: 0;
  --ring-size: 56px;
  display: grid;
  place-items: center;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: conic-gradient(var(--c-primary) calc(var(--value) * 1%), var(--c-surface-3) 0);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}

/* =====================================================================
   18  MISC
   Zenthroic | PrimeTriple4
   ===================================================================== */
.divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.divider-plain::before { display: none; }
.divider-plain::after { display: none; }
.divider-vertical { width: 1px; height: 24px; margin: 0 var(--s-2); background: var(--c-border); }

/* Accordion on native <details> */
.accordion {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
}

.accordion details + details { border-top: 1px solid var(--c-border); }

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  font-weight: var(--fw-medium);
  list-style: none;
  transition: background-color var(--t-fast) var(--ease);
}

.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--c-surface-2); }

.accordion summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 2px solid var(--c-text-3);
  border-bottom: 2px solid var(--c-text-3);
  transform: rotate(45deg);
  transition: transform var(--t-base) var(--ease);
}

.accordion details[open] summary::after { transform: rotate(-135deg); }

.accordion-body {
  padding: 0 var(--s-5) var(--s-4);
  color: var(--c-text-2);
}

/* Rating stars */
.rating {
  display: inline-flex;
  gap: 2px;
  color: var(--c-border-strong);
}

.rating .icon { fill: currentColor; stroke: none; }
.rating .is-on { color: var(--c-warning-solid); }

/* Highlight box for callouts */
.callout {
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
}

/* Sticky summary footer on long forms */
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}

/* =====================================================================
   19  PAGE COMPOSITIONS AND STYLEGUIDE HELPERS
   Zenthroic | PrimeTriple4
   ===================================================================== */
.page-narrow { max-width: 760px; }

.section-title {
  margin-bottom: var(--s-3);
  font-size: var(--fs-lg);
}

.section + .section { margin-top: var(--s-6); }

/* Shop payment method chooser */
.method-grid {
  display: grid;
  gap: var(--s-3);
}

@media (min-width: 576px) { .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.method {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.method:hover { border-color: var(--c-text-3); }

.method:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}

.method:has(input:focus-visible) {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.method-meta {
  flex: 1;
  min-width: 0;
}

.method-meta strong { display: block; }

.method-meta span {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* Profile */
.profile-grid {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 992px) {
  .profile-grid {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
  }
}

/* Small helpers used by generated pages */
.field-spaced { margin-top: var(--s-5); }
.fieldset-plain { min-width: 0; margin: 0; border: 0; }

/* Styleguide */
.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.sg-grid {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 768px) {
  .sg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sg-label {
  margin-bottom: var(--s-2);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.sg-swatches {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.sg-swatch {
  display: grid;
  gap: var(--s-1);
  font-size: var(--fs-sm);
}

.sg-swatch i {
  display: block;
  height: 48px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.sg-swatch code {
  padding: 0;
  background: none;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.sg-bg-primary { background: var(--c-primary); }
.sg-bg-primary-soft { background: var(--c-primary-soft); }
.sg-bg-surface { background: var(--c-surface); }
.sg-bg-surface-2 { background: var(--c-surface-2); }
.sg-bg-surface-3 { background: var(--c-surface-3); }
.sg-bg-border { background: var(--c-border-strong); }
.sg-bg-success { background: var(--c-success-solid); }
.sg-bg-danger { background: var(--c-danger-solid); }
.sg-bg-warning { background: var(--c-warning-solid); }
.sg-bg-info { background: var(--c-info-solid); }

.sg-type > * + * { margin-top: var(--s-2); }

.sg-space {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
}

.sg-space i {
  display: block;
  border: 1px solid var(--c-primary);
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
}

.sg-s1 { width: 4px; height: 4px; }
.sg-s2 { width: 8px; height: 8px; }
.sg-s3 { width: 12px; height: 12px; }
.sg-s4 { width: 16px; height: 16px; }
.sg-s6 { width: 24px; height: 24px; }
.sg-s8 { width: 32px; height: 32px; }
.sg-s12 { width: 48px; height: 48px; }
.sg-state { display: grid; gap: var(--s-1); }

.sg-h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.sg-h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

/* =====================================================================
   20  DARK THEME REFINEMENTS
   Components that need more than a token swap.
   Zenthroic | PrimeTriple4
   ===================================================================== */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .welcome-card {
  box-shadow: none;
}

[data-theme="dark"] .navbar {
  background: var(--c-sidebar);
}

[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea,
[data-theme="dark"] .input-group,
[data-theme="dark"] .tag-input {
  background-color: var(--c-surface-2);
  box-shadow: none;
}

[data-theme="dark"] .input:disabled,
[data-theme="dark"] .select:disabled,
[data-theme="dark"] .textarea:disabled { background-color: var(--c-surface-3); }

[data-theme="dark"] .input-addon,
[data-theme="dark"] .input-group > .btn { background: var(--c-surface-3); }

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn { --btn-bg-hover: var(--c-border-strong); --btn-bg-active: var(--c-border-strong); }

[data-theme="dark"] .btn-primary { --btn-bg-hover: var(--c-primary-hover); --btn-bg-active: var(--c-primary-active); }
[data-theme="dark"] .btn-outline { --btn-fg: var(--c-primary-soft-text); }
[data-theme="dark"] .btn-ghost:hover { background: var(--c-surface-3); }
[data-theme="dark"] .btn-outline-danger { --btn-bg-hover: var(--c-danger-soft); }

[data-theme="dark"] .check input,
[data-theme="dark"] .check input[type="radio"] { background-color: var(--c-surface-2); }
[data-theme="dark"] .check input:checked,
[data-theme="dark"] .check input:indeterminate { background-color: var(--c-primary); }

[data-theme="dark"] .switch input { background: var(--c-border-strong); }
[data-theme="dark"] .switch input:checked { background: var(--c-primary); }

[data-theme="dark"] .dropzone { background: var(--c-surface-2); }
[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone.is-dragover { background: var(--c-primary-soft); }

[data-theme="dark"] .dialog,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .popover,
[data-theme="dark"] .toast {
  border-color: var(--c-border-strong);
}

[data-theme="dark"] [data-tooltip]::after {
  background: var(--c-surface-3);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text);
}

[data-theme="dark"] .table thead th { background: var(--c-surface-2); }
[data-theme="dark"] .table tbody tr:hover { background: var(--c-surface-2); }
[data-theme="dark"] .table-sticky-first td:first-child { background: var(--c-surface); }

[data-theme="dark"] .tabs-pills .tab[aria-selected="true"] {
  background: var(--c-surface-3);
  box-shadow: none;
}

[data-theme="dark"] .segmented > button[aria-pressed="true"],
[data-theme="dark"] .segmented > button.is-active { box-shadow: none; }

[data-theme="dark"] .code-block,
[data-theme="dark"] .code-field { background: var(--c-surface-2); }

[data-theme="dark"] code { background: var(--c-surface-3); color: var(--c-primary-soft-text); }
[data-theme="dark"] kbd { background: var(--c-surface-3); border-color: var(--c-border-strong); }

[data-theme="dark"] .alert,
[data-theme="dark"] .banner { backdrop-filter: none; }

[data-theme="dark"] .badge-solid { --badge-fg: #fff; }
[data-theme="dark"] .avatar-group .avatar,
[data-theme="dark"] .avatar-dot::after { box-shadow: 0 0 0 2px var(--c-surface); }

[data-theme="dark"] .range::-webkit-slider-thumb { background: var(--c-surface); }
[data-theme="dark"] .range::-moz-range-thumb { background: var(--c-surface); }

[data-theme="dark"] .step::before { background: var(--c-surface); }
[data-theme="dark"] .step.is-done::before,
[data-theme="dark"] .step.is-active::before { background: var(--c-primary); }

/* =====================================================================
   21  PRINT, MOTION AND CONTRAST
   Zenthroic | PrimeTriple4
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton { animation: none; background: var(--skeleton-a); }
  .spinner,
  .btn.is-loading::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

@media (prefers-contrast: more) {
  :root {
    --c-border: #a8a3c4;
    --c-border-strong: #6f6a89;
  }

  [data-theme="dark"] {
    --c-border: #6f6a90;
    --c-border-strong: #9a94b8;
  }

  .btn,
  .input,
  .select,
  .textarea,
  .card { border-width: 2px; }
}

@media (forced-colors: active) {
  .btn,
  .input,
  .select,
  .textarea,
  .card,
  .badge,
  .alert { border: 1px solid CanvasText; }

  .btn-primary,
  .page-link[aria-current="page"],
  .tab[aria-selected="true"]::after { forced-color-adjust: none; background: Highlight; color: HighlightText; }

  .check input:checked,
  .switch input:checked { forced-color-adjust: none; background-color: Highlight; border-color: Highlight; }

  :focus-visible { outline: 2px solid Highlight; }
}

@media print {
  .sidebar,
  .sidebar-backdrop,
  .navbar,
  .footer,
  .toast-region,
  .loadbar,
  .btn-fab,
  .page-actions,
  .table-toolbar,
  .table-footer,
  .bulkbar,
  .row-actions,
  .skip-link { display: none !important; }

  .app-main { padding-left: 0 !important; }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .content { max-width: none; padding: 0; }

  .card,
  .stat-card,
  .info-card {
    border-color: #bbb;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .table-wrap { overflow: visible; max-height: none; }
  .table th,
  .table td { white-space: normal; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* =====================================================================
   END OF FILE
   Zenthroic UI  |  Developer: PrimeTriple4  |  Organization: Zenthroic
   ===================================================================== */