/* ============================================================================
   KEYVORY DESIGN SYSTEM
   Monochrome palette · 8pt grid · Geist fonts · Keyboard-first
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. FONT-FACE (Geist Sans + Geist Mono — self-hosted)
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   1. CUSTOM PROPERTIES (Tokens)
   --------------------------------------------------------------------------- */

:root {
  /* --- Typography --- */
  --kv-font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --kv-font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;

  --kv-text-xs: 0.6875rem;    /* 11px */
  --kv-text-sm: 0.8125rem;    /* 13px */
  --kv-text-base: 0.875rem;   /* 14px */
  --kv-text-md: 1rem;         /* 16px */
  --kv-text-lg: 1.375rem;     /* 22px */
  --kv-text-xl: 1.875rem;     /* 30px */
  --kv-text-2xl: 2.5rem;      /* 40px */

  --kv-leading-tight: 1.2;
  --kv-leading-normal: 1.5;
  --kv-leading-relaxed: 1.65;

  --kv-weight-normal: 400;
  --kv-weight-medium: 500;
  --kv-weight-semibold: 600;
  --kv-weight-bold: 700;

  /* --- Spacing (8pt grid) --- */
  --kv-sp-0: 0;
  --kv-sp-px: 1px;
  --kv-sp-0\.5: 2px;
  --kv-sp-1: 4px;
  --kv-sp-1\.5: 6px;
  --kv-sp-2: 8px;
  --kv-sp-2\.5: 10px;
  --kv-sp-3: 12px;
  --kv-sp-4: 16px;
  --kv-sp-5: 20px;
  --kv-sp-6: 24px;
  --kv-sp-8: 32px;
  --kv-sp-10: 40px;
  --kv-sp-12: 48px;
  --kv-sp-16: 64px;
  --kv-sp-20: 80px;
  --kv-sp-24: 96px;

  /* --- Border Radius --- */
  --kv-radius-btn: 4px;
  --kv-radius-input: 4px;
  --kv-radius-card: 6px;
  --kv-radius-dropdown: 6px;
  --kv-radius-modal: 10px;
  --kv-radius-pill: 999px;
  --kv-radius-full: 50%;

  /* --- Motion --- */
  --kv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kv-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --kv-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --kv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --kv-duration-fast: 80ms;
  --kv-duration-normal: 120ms;
  --kv-duration-slow: 180ms;
  --kv-duration-sheet: 240ms;
  --kv-duration-page: 300ms;

  /* --- Shadows (elevation) --- */
  --kv-shadow-0: none;
  --kv-shadow-1: 0 1px 2px rgba(0,0,0,0.06);
  --kv-shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --kv-shadow-3: 0 4px 16px rgba(0,0,0,0.12);
  --kv-shadow-4: 0 8px 32px rgba(0,0,0,0.16);
  --kv-shadow-sheet: -4px 0 24px rgba(0,0,0,0.2);

  /* --- Z-index scale --- */
  --kv-z-base: 0;
  --kv-z-raised: 10;
  --kv-z-dropdown: 100;
  --kv-z-sticky: 200;
  --kv-z-overlay: 300;
  --kv-z-modal: 400;
  --kv-z-sheet: 450;
  --kv-z-command: 500;
  --kv-z-toast: 600;
  --kv-z-preloader: 9999;

  /* --- Layout --- */
  --kv-topbar-h: 48px;
  --kv-mobile-nav-h: 56px;
  --kv-sheet-w: 420px;
  --kv-content-max: 1400px;
  --kv-content-px: var(--kv-sp-6);
}

/* ---------------------------------------------------------------------------
   DARK THEME (default)
   --------------------------------------------------------------------------- */

[data-theme="dark"] {
  --kv-canvas: #090909;
  --kv-surface: #111111;
  --kv-raised: #171717;
  --kv-overlay: rgba(0, 0, 0, 0.72);
  --kv-border: #232323;
  --kv-border-strong: #343434;
  --kv-border-focus: #555555;

  --kv-text-primary: #F3F3F3;
  --kv-text-secondary: #8A8A8A;
  --kv-text-muted: #5A5A5A;
  --kv-text-inverse: #111111;

  --kv-selection-bg: #333333;
  --kv-selection-text: #FFFFFF;

  --kv-hover-bg: #1A1A1A;
  --kv-active-bg: #222222;
  --kv-skeleton-bg: #1A1A1A;
  --kv-skeleton-shine: #252525;

  --kv-shadow-1: 0 1px 2px rgba(0,0,0,0.24);
  --kv-shadow-2: 0 2px 8px rgba(0,0,0,0.32);
  --kv-shadow-3: 0 4px 16px rgba(0,0,0,0.4);
  --kv-shadow-4: 0 8px 32px rgba(0,0,0,0.48);
  --kv-shadow-sheet: -4px 0 24px rgba(0,0,0,0.56);

  --kv-scrollbar-track: #111111;
  --kv-scrollbar-thumb: #333333;
  --kv-scrollbar-thumb-hover: #444444;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   LIGHT THEME
   --------------------------------------------------------------------------- */

[data-theme="light"] {
  --kv-canvas: #FCFCFC;
  --kv-surface: #FFFFFF;
  --kv-raised: #F5F5F5;
  --kv-overlay: rgba(0, 0, 0, 0.32);
  --kv-border: #E5E5E5;
  --kv-border-strong: #CFCFCF;
  --kv-border-focus: #999999;

  --kv-text-primary: #111111;
  --kv-text-secondary: #666666;
  --kv-text-muted: #999999;
  --kv-text-inverse: #F3F3F3;

  --kv-selection-bg: #CCCCCC;
  --kv-selection-text: #111111;

  --kv-hover-bg: #F0F0F0;
  --kv-active-bg: #E8E8E8;
  --kv-skeleton-bg: #EEEEEE;
  --kv-skeleton-shine: #F5F5F5;

  --kv-scrollbar-track: #F5F5F5;
  --kv-scrollbar-thumb: #D4D4D4;
  --kv-scrollbar-thumb-hover: #BBBBBB;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------------- */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: var(--kv-font-sans);
  font-size: var(--kv-text-base);
  line-height: var(--kv-leading-normal);
  color: var(--kv-text-primary);
  background-color: var(--kv-canvas);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color var(--kv-duration-slow) var(--kv-ease),
              color var(--kv-duration-slow) var(--kv-ease);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

ul, ol {
  list-style: none;
}

::selection {
  background-color: var(--kv-selection-bg);
  color: var(--kv-selection-text);
}

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

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */

.font-sans { font-family: var(--kv-font-sans); }
.font-mono { font-family: var(--kv-font-mono); }

.text-xs   { font-size: var(--kv-text-xs); }
.text-sm   { font-size: var(--kv-text-sm); }
.text-base { font-size: var(--kv-text-base); }
.text-md   { font-size: var(--kv-text-md); }
.text-lg   { font-size: var(--kv-text-lg); }
.text-xl   { font-size: var(--kv-text-xl); }
.text-2xl  { font-size: var(--kv-text-2xl); }

.font-normal   { font-weight: var(--kv-weight-normal); }
.font-medium   { font-weight: var(--kv-weight-medium); }
.font-semibold { font-weight: var(--kv-weight-semibold); }
.font-bold     { font-weight: var(--kv-weight-bold); }

.leading-tight   { line-height: var(--kv-leading-tight); }
.leading-normal  { line-height: var(--kv-leading-normal); }
.leading-relaxed { line-height: var(--kv-leading-relaxed); }

.tracking-tight  { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.02em }
.tracking-wider  { letter-spacing: 0.06em; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.mono { font-family: var(--kv-font-mono); font-variant-numeric: tabular-nums; }

.tabular-nums { font-variant-numeric: tabular-nums; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   4. COLOR UTILITIES
   --------------------------------------------------------------------------- */

.color-primary    { color: var(--kv-text-primary); }
.color-secondary  { color: var(--kv-text-secondary); }
.color-muted      { color: var(--kv-text-muted); }
.color-inverse    { color: var(--kv-text-inverse); }

.bg-canvas  { background-color: var(--kv-canvas); }
.bg-surface { background-color: var(--kv-surface); }
.bg-raised  { background-color: var(--kv-raised); }

/* Bootstrap-compat utilities (used in templates) */
.text-muted { color: var(--kv-text-muted); }
.d-flex     { display: flex; }
.d-none     { display: none; }
.d-inline-block { display: inline-block; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-1  { gap: var(--kv-sp-1); }
.gap-2  { gap: var(--kv-sp-2); }
.gap-3  { gap: var(--kv-sp-3); }
.gap-4  { gap: var(--kv-sp-4); }
.gap-6  { gap: var(--kv-sp-6); }
.text-xs  { font-size: var(--kv-text-xs); }
.text-sm  { font-size: var(--kv-text-sm); }
.text-md  { font-size: var(--kv-text-md); }
.font-semibold { font-weight: var(--kv-weight-semibold); }
.font-bold { font-weight: var(--kv-weight-bold); }
.font-mono { font-family: var(--kv-font-mono); }
.hidden  { display: none !important; }
.w-full  { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rounded { border-radius: var(--kv-radius-sm); }
.px-1 { padding-left: var(--kv-sp-1); padding-right: var(--kv-sp-1); }
.px-2 { padding-left: var(--kv-sp-2); padding-right: var(--kv-sp-2); }
.py-1 { padding-top: var(--kv-sp-1); padding-bottom: var(--kv-sp-1); }
.py-2 { padding-top: var(--kv-sp-2); padding-bottom: var(--kv-sp-2); }
.mb-3 { margin-bottom: var(--kv-sp-3); }
.mb-4 { margin-bottom: var(--kv-sp-4); }
.mb-6 { margin-bottom: var(--kv-sp-6); }
.m-0 { margin: 0; }
.mt-2 { margin-top: var(--kv-sp-2); }
.mt-4 { margin-top: var(--kv-sp-4); }

/* Minimal Bootstrap modal compatibility (Bootstrap JS is loaded, CSS is not) */
.modal { display: none; position: fixed; inset: 0; z-index: var(--kv-z-modal); overflow: hidden; }
.modal.show { display: block; }
.modal.fade { opacity: 0; transition: opacity 150ms linear; }
.modal.fade.show { opacity: 1; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: calc(var(--kv-z-modal) - 1); }
.modal-backdrop.fade { opacity: 0; transition: opacity 150ms linear; }
.modal-backdrop.show { opacity: 1; }
.modal-dialog { position: relative; z-index: calc(var(--kv-z-modal) + 1); width: auto; max-width: 480px; margin: 0 auto; padding: var(--kv-sp-4); pointer-events: none; display: flex; justify-content: center; align-items: center; min-height: 100%; box-sizing: border-box; }
.modal.show .modal-dialog { pointer-events: auto; }

.modal-dialog-centered { display: flex; justify-content: center; align-items: center; min-height: 100%; }
.modal-dialog-centered::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.modal-open { overflow: hidden; }

/* Checkbox styling */
.kv-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--kv-text-primary);
  cursor: pointer;
}

/* Status colors — monochrome with subtle tint */
.status-active   { color: #4ADE80; }
.status-suspended { color: #FBBF24; }
.status-expired  { color: #F87171; }
.status-banned   { color: #EF4444; }

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--kv-radius-full);
  flex-shrink: 0;
}
.status-dot.active    { background-color: #4ADE80; }
.status-dot.suspended { background-color: #FBBF24; }
.status-dot.expired   { background-color: #F87171; }
.status-dot.banned    { background-color: #EF4444; }

/* ---------------------------------------------------------------------------
   5. SPACING UTILITIES
   --------------------------------------------------------------------------- */

/* Margins */
.m-0  { margin: var(--kv-sp-0); }
.m-1  { margin: var(--kv-sp-1); }
.m-2  { margin: var(--kv-sp-2); }
.m-3  { margin: var(--kv-sp-3); }
.m-4  { margin: var(--kv-sp-4); }
.m-6  { margin: var(--kv-sp-6); }
.m-8  { margin: var(--kv-sp-8); }

.mt-0  { margin-top: var(--kv-sp-0); }
.mt-1  { margin-top: var(--kv-sp-1); }
.mt-2  { margin-top: var(--kv-sp-2); }
.mt-3  { margin-top: var(--kv-sp-3); }
.mt-4  { margin-top: var(--kv-sp-4); }
.mt-6  { margin-top: var(--kv-sp-6); }
.mt-8  { margin-top: var(--kv-sp-8); }

.mb-0  { margin-bottom: var(--kv-sp-0); }
.mb-1  { margin-bottom: var(--kv-sp-1); }
.mb-2  { margin-bottom: var(--kv-sp-2); }
.mb-3  { margin-bottom: var(--kv-sp-3); }
.mb-4  { margin-bottom: var(--kv-sp-4); }
.mb-6  { margin-bottom: var(--kv-sp-6); }
.mb-8  { margin-bottom: var(--kv-sp-8); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.p-0  { padding: var(--kv-sp-0); }
.p-1  { padding: var(--kv-sp-1); }
.p-2  { padding: var(--kv-sp-2); }
.p-3  { padding: var(--kv-sp-3); }
.p-4  { padding: var(--kv-sp-4); }
.p-6  { padding: var(--kv-sp-6); }
.p-8  { padding: var(--kv-sp-8); }

.px-2  { padding-left: var(--kv-sp-2); padding-right: var(--kv-sp-2); }
.px-3  { padding-left: var(--kv-sp-3); padding-right: var(--kv-sp-3); }
.px-4  { padding-left: var(--kv-sp-4); padding-right: var(--kv-sp-4); }
.px-6  { padding-left: var(--kv-sp-6); padding-right: var(--kv-sp-6); }

.py-2  { padding-top: var(--kv-sp-2); padding-bottom: var(--kv-sp-2); }
.py-3  { padding-top: var(--kv-sp-3); padding-bottom: var(--kv-sp-3); }
.py-4  { padding-top: var(--kv-sp-4); padding-bottom: var(--kv-sp-4); }
.py-6  { padding-top: var(--kv-sp-6); padding-bottom: var(--kv-sp-6); }

/* Gap */
.gap-1  { gap: var(--kv-sp-1); }
.gap-2  { gap: var(--kv-sp-2); }
.gap-3  { gap: var(--kv-sp-3); }
.gap-4  { gap: var(--kv-sp-4); }
.gap-6  { gap: var(--kv-sp-6); }
.gap-8  { gap: var(--kv-sp-8); }

/* ---------------------------------------------------------------------------
   6. FLEXBOX / GRID UTILITIES
   --------------------------------------------------------------------------- */

.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }

.flex-row    { flex-direction: row; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.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; }

.flex-1    { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* ---------------------------------------------------------------------------
   7. LAYOUT UTILITIES
   --------------------------------------------------------------------------- */

.w-full   { width: 100%; }
.w-screen { width: 100vw; }
.w-auto   { width: auto; }
.max-w-content { max-width: var(--kv-content-max); }

.h-full   { height: 100%; }
.h-screen { height: 100vh; }
.h-auto   { height: auto; }
.min-h-screen { min-height: 100vh; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-y-auto  { overflow-y: auto; }
.overflow-x-auto  { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   8. BORDER UTILITIES
   --------------------------------------------------------------------------- */

.border        { border: 1px solid var(--kv-border); }
.border-t      { border-top: 1px solid var(--kv-border); }
.border-b      { border-bottom: 1px solid var(--kv-border); }
.border-l      { border-left: 1px solid var(--kv-border); }
.border-r      { border-right: 1px solid var(--kv-border); }
.border-strong { border-color: var(--kv-border-strong); }

.rounded-sm   { border-radius: var(--kv-radius-btn); }
.rounded      { border-radius: var(--kv-radius-card); }
.rounded-lg   { border-radius: var(--kv-radius-modal); }
.rounded-pill { border-radius: var(--kv-radius-pill); }
.rounded-full { border-radius: var(--kv-radius-full); }

/* ---------------------------------------------------------------------------
   9. DISPLAY / VISIBILITY
   --------------------------------------------------------------------------- */

.hidden     { display: none; }
.block      { display: block; }
.inline     { display: inline; }
.inline-block { display: inline-block; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ---------------------------------------------------------------------------
   10. ANIMATIONS & TRANSITIONS
   --------------------------------------------------------------------------- */

.transition-colors {
  transition: color var(--kv-duration-normal) var(--kv-ease),
              background-color var(--kv-duration-normal) var(--kv-ease),
              border-color var(--kv-duration-normal) var(--kv-ease);
}

.transition-all {
  transition: all var(--kv-duration-normal) var(--kv-ease);
}

.transition-transform {
  transition: transform var(--kv-duration-normal) var(--kv-ease);
}

/* Page reveal animation */
@keyframes kv-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kv-reveal {
  animation: kv-reveal var(--kv-duration-page) var(--kv-ease) both;
}

/* Stagger children */
.kv-stagger > * {
  animation: kv-reveal var(--kv-duration-page) var(--kv-ease) both;
}

.kv-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.kv-stagger > *:nth-child(2)  { animation-delay: 40ms; }
.kv-stagger > *:nth-child(3)  { animation-delay: 80ms; }
.kv-stagger > *:nth-child(4)  { animation-delay: 120ms; }
.kv-stagger > *:nth-child(5)  { animation-delay: 160ms; }
.kv-stagger > *:nth-child(6)  { animation-delay: 200ms; }
.kv-stagger > *:nth-child(7)  { animation-delay: 240ms; }
.kv-stagger > *:nth-child(8)  { animation-delay: 280ms; }
.kv-stagger > *:nth-child(n+9) { animation-delay: 320ms; }

/* Slide in from right (for sheet) */
@keyframes kv-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes kv-slide-out-right {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* Fade in */
@keyframes kv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes kv-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Scale in (for dropdowns/modals) */
@keyframes kv-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Toast slide in */
@keyframes kv-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes kv-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
}

/* Skeleton pulse */
@keyframes kv-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ---------------------------------------------------------------------------
   11. SKELETON LOADING
   --------------------------------------------------------------------------- */

.kv-skeleton {
  background-color: var(--kv-skeleton-bg);
  border-radius: var(--kv-radius-btn);
  animation: kv-skeleton-pulse 1.5s var(--kv-ease) infinite;
  pointer-events: none;
}

.kv-skeleton-text {
  height: 1em;
  border-radius: 2px;
}

.kv-skeleton-heading {
  height: 1.5em;
  width: 60%;
  border-radius: 2px;
}

.kv-skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--kv-radius-full);
}

.kv-skeleton-card {
  height: 120px;
  border-radius: var(--kv-radius-card);
}

.kv-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--kv-sp-3);
  padding: var(--kv-sp-3) 0;
}

/* ---------------------------------------------------------------------------
   12. CUSTOM SCROLLBAR
   --------------------------------------------------------------------------- */

.kv-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.kv-scrollbar::-webkit-scrollbar-track {
  background: var(--kv-scrollbar-track);
}

.kv-scrollbar::-webkit-scrollbar-thumb {
  background: var(--kv-scrollbar-thumb);
  border-radius: 3px;
}

.kv-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--kv-scrollbar-thumb-hover);
}

/* Firefox */
.kv-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--kv-scrollbar-thumb) var(--kv-scrollbar-track);
}

/* ---------------------------------------------------------------------------
   13. TOAST NOTIFICATIONS
   --------------------------------------------------------------------------- */

.kv-toast-container {
  position: fixed;
  bottom: var(--kv-sp-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--kv-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--kv-sp-2);
  pointer-events: none;
  max-width: 320px;
  width: 100%;
}

.kv-toast {
  display: flex;
  align-items: center;
  gap: var(--kv-sp-3);
  padding: var(--kv-sp-3) var(--kv-sp-4);
  background-color: var(--kv-raised);
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-radius-card);
  box-shadow: var(--kv-shadow-3);
  font-size: var(--kv-text-sm);
  font-weight: var(--kv-weight-medium);
  color: var(--kv-text-primary);
  pointer-events: auto;
  animation: kv-toast-in var(--kv-duration-slow) var(--kv-ease) both;
}

.kv-toast.kv-toast-exit {
  animation: kv-toast-out var(--kv-duration-fast) var(--kv-ease) both;
}

.kv-toast .kv-toast-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.kv-toast .kv-toast-message {
  flex: 1;
}

.kv-toast .kv-toast-close {
  flex-shrink: 0;
  padding: 2px;
  border-radius: var(--kv-radius-btn);
  color: var(--kv-text-muted);
  cursor: pointer;
  transition: color var(--kv-duration-fast) var(--kv-ease);
}

.kv-toast .kv-toast-close:hover {
  color: var(--kv-text-primary);
}

/* Toast variants */
.kv-toast-success .kv-toast-icon { color: #4ADE80; }
.kv-toast-error   .kv-toast-icon { color: #F87171; }
.kv-toast-warning .kv-toast-icon { color: #FBBF24; }
.kv-toast-info    .kv-toast-icon { color: #60A5FA; }

/* ---------------------------------------------------------------------------
   14. PRELOADER
   --------------------------------------------------------------------------- */

.kv-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--kv-z-preloader);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--kv-canvas);
  transition: opacity var(--kv-duration-page) var(--kv-ease);
}

.kv-preloader.kv-preloader-hidden {
  opacity: 0;
  pointer-events: none;
}

.kv-preloader-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--kv-border);
  border-top-color: var(--kv-text-primary);
  border-radius: var(--kv-radius-full);
  animation: spin 0.6s linear infinite;
}

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

/* ---------------------------------------------------------------------------
   15. FOCUS MANAGEMENT (Keyboard-first)
   --------------------------------------------------------------------------- */

/* Skip to content link */
.kv-skip-link {
  position: absolute;
  top: -100%;
  left: var(--kv-sp-4);
  z-index: calc(var(--kv-z-toast) + 1);
  padding: var(--kv-sp-2) var(--kv-sp-4);
  background-color: var(--kv-text-primary);
  color: var(--kv-text-inverse);
  font-size: var(--kv-text-sm);
  font-weight: var(--kv-weight-medium);
  border-radius: var(--kv-radius-btn);
  transition: top var(--kv-duration-fast) var(--kv-ease);
}

.kv-skip-link:focus {
  top: var(--kv-sp-4);
}

/* ---------------------------------------------------------------------------
   16. PRINT
   --------------------------------------------------------------------------- */

@media print {
  .kv-topbar,
  .kv-mobile-nav,
  .kv-toast-container,
  .kv-right-sheet,
  .kv-command-palette,
  .kv-preloader,
  .kv-skip-link {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}