/**
 * design-system.css — Hotel Wood Stone ERP
 * ─────────────────────────────────────────
 * Phase 17 | Premium UX Redesign
 *
 * EXTENDS main.css with:
 *   1.  Light Mode Token Override  [data-theme="light"]
 *   2.  Refined Dark Mode Tokens   (overrides select main.css values)
 *   3.  Component Tokens           (button, card, input, badge, table)
 *   4.  Motion Tokens              (entrance, micro, page)
 *   5.  Context Menu               (.ctx-menu)
 *   6.  Notification Panel         (.notif-panel)
 *   7.  Language Selector          (.lang-selector)
 *   8.  Command Palette            (#cmdPalette)
 *   9.  Theme Toggle               (.theme-toggle)
 *  10.  Premium Scrollbar
 *  11.  Focus Visible Ring
 *  12.  Skeleton / Shimmer
 *  13.  Selection Colour
 *
 * LOAD ORDER: main.css → design-system.css → dashboard.css
 *
 * VERSION: Phase 17.0
 */

'use strict'; /* suppressed — this is CSS, marker only */

/* ═══════════════════════════════════════════════════════════════════════════
   0. FONT IMPORT ADDITION
   Add variable fonts for crisper rendering
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,300..400&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   1. DARK MODE REFINEMENTS
   Applied on :root (default). Small corrections over main.css values.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Refined dark backgrounds — slightly less red, more neutral-warm */
  --bg-page          : #0D0B08;   /* true page canvas              */
  --bg-surface       : #141210;   /* primary surfaces              */
  --bg-elevated      : #1C1916;   /* elevated cards, dropdowns     */
  --bg-overlay       : #252119;   /* modals, overlays              */
  --bg-input         : rgba(255,255,255,0.05);
  --bg-input-hover   : rgba(255,255,255,0.07);
  --bg-input-focus   : rgba(255,255,255,0.08);
  --bg-hover         : rgba(255,255,255,0.04);
  --bg-active        : rgba(255,255,255,0.07);
  --bg-selected      : rgba(200,151,58,0.10);

  /* Text — refined warm neutrals */
  --text-primary     : #F0EAE2;
  --text-secondary   : #B8A898;
  --text-muted       : #7A6A5E;
  --text-disabled    : #4A3E36;
  --text-inverse     : #0D0B08;

  /* Borders */
  --border-subtle    : rgba(255,255,255,0.06);
  --border-soft      : rgba(255,255,255,0.10);
  --border-medium    : rgba(255,255,255,0.15);
  --border-strong    : rgba(200,151,58,0.40);
  --border-focus     : rgba(200,151,58,0.65);

  /* Gold accent — refined */
  --gold             : #C8973A;
  --gold-bright      : #DBA84A;
  --gold-muted       : #9A7229;
  --gold-subtle      : rgba(200,151,58,0.10);
  --gold-hover       : rgba(200,151,58,0.18);
  --gold-active      : rgba(200,151,58,0.25);
  --gold-border      : rgba(200,151,58,0.30);

  /* Status colours */
  --color-success    : #4ADE80;
  --color-success-bg : rgba(74,222,128,0.10);
  --color-success-border: rgba(74,222,128,0.25);
  --color-warning    : #FB923C;
  --color-warning-bg : rgba(251,146,60,0.10);
  --color-warning-border: rgba(251,146,60,0.25);
  --color-danger     : #F87171;
  --color-danger-bg  : rgba(248,113,113,0.10);
  --color-danger-border: rgba(248,113,113,0.25);
  --color-info       : #60A5FA;
  --color-info-bg    : rgba(96,165,250,0.10);
  --color-info-border: rgba(96,165,250,0.25);

  /* Component tokens */
  --btn-radius       : 7px;
  --card-radius      : 10px;
  --modal-radius     : 14px;
  --input-radius     : 7px;
  --badge-radius     : 5px;
  --menu-radius      : 10px;

  --btn-height-sm    : 30px;
  --btn-height-md    : 36px;
  --btn-height-lg    : 42px;

  --input-height-sm  : 30px;
  --input-height-md  : 36px;
  --input-height-lg  : 42px;

  /* Shadows — refined */
  --shadow-xs        : 0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm        : 0 2px 8px rgba(0,0,0,0.45);
  --shadow-md        : 0 4px 16px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-lg        : 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  --shadow-xl        : 0 16px 48px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.40);
  --shadow-dropdown  : 0 4px 24px rgba(0,0,0,0.60), 0 1px 4px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-modal     : 0 24px 64px rgba(0,0,0,0.70), 0 8px 24px rgba(0,0,0,0.50);
  --shadow-gold      : 0 0 0 1px var(--gold-border), 0 4px 20px rgba(200,151,58,0.15);

  /* Sidebar */
  --sidebar-bg       : #0F0D0A;
  --sidebar-border   : rgba(255,255,255,0.06);
  --sidebar-item-hover: rgba(255,255,255,0.05);
  --sidebar-item-active: rgba(200,151,58,0.12);
  --sidebar-item-active-border: var(--gold);

  /* Header */
  --header-bg        : rgba(13,11,8,0.92);
  --header-blur      : blur(16px);
  --header-border    : rgba(255,255,255,0.07);

  /* Motion */
  --ease-spring      : cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-out         : cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in          : cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-inout       : cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --dur-instant      : 60ms;
  --dur-fast         : 120ms;
  --dur-normal       : 200ms;
  --dur-slow         : 350ms;
  --dur-slower       : 500ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. LIGHT MODE OVERRIDES
   Applied via <html data-theme="light">
   All tokens override :root values.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-page          : #FAF8F5;
  --bg-surface       : #FFFFFF;
  --bg-elevated      : #FFFFFF;
  --bg-overlay       : #FFFFFF;
  --bg-input         : #F5F2EE;
  --bg-input-hover   : #EDE9E3;
  --bg-input-focus   : #F5F2EE;
  --bg-hover         : rgba(0,0,0,0.04);
  --bg-active        : rgba(0,0,0,0.07);
  --bg-selected      : rgba(200,151,58,0.09);

  --text-primary     : #1A1410;
  --text-secondary   : #5A4E46;
  --text-muted       : #8A7A70;
  --text-disabled    : #C0B0A8;
  --text-inverse     : #FAF8F5;

  --border-subtle    : rgba(0,0,0,0.07);
  --border-soft      : rgba(0,0,0,0.11);
  --border-medium    : rgba(0,0,0,0.17);
  --border-strong    : rgba(200,151,58,0.45);
  --border-focus     : rgba(200,151,58,0.70);

  --gold             : #B07A1E;
  --gold-bright      : #C8973A;
  --gold-muted       : #8A6018;
  --gold-subtle      : rgba(200,151,58,0.08);
  --gold-hover       : rgba(200,151,58,0.14);
  --gold-active      : rgba(200,151,58,0.20);
  --gold-border      : rgba(200,151,58,0.30);

  --color-success    : #16A34A;
  --color-success-bg : rgba(22,163,74,0.09);
  --color-success-border: rgba(22,163,74,0.22);
  --color-warning    : #EA580C;
  --color-warning-bg : rgba(234,88,12,0.09);
  --color-warning-border: rgba(234,88,12,0.22);
  --color-danger     : #DC2626;
  --color-danger-bg  : rgba(220,38,38,0.09);
  --color-danger-border: rgba(220,38,38,0.22);
  --color-info       : #2563EB;
  --color-info-bg    : rgba(37,99,235,0.09);
  --color-info-border: rgba(37,99,235,0.22);

  --shadow-xs        : 0 1px 2px rgba(0,0,0,0.08);
  --shadow-sm        : 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md        : 0 4px 16px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg        : 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);
  --shadow-xl        : 0 16px 48px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-dropdown  : 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.60);
  --shadow-modal     : 0 24px 64px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-gold      : 0 0 0 1px rgba(200,151,58,0.25), 0 4px 20px rgba(200,151,58,0.10);

  --sidebar-bg       : #F5F1EB;
  --sidebar-border   : rgba(0,0,0,0.08);
  --sidebar-item-hover: rgba(0,0,0,0.05);
  --sidebar-item-active: rgba(200,151,58,0.11);
  --sidebar-item-active-border: #B07A1E;

  --header-bg        : rgba(250,248,245,0.92);
  --header-border    : rgba(0,0,0,0.08);

  /* Override main.css dark values for surfaces */
  --hws-black        : #FAF8F5;
  --hws-espresso     : #FFFFFF;
  --hws-wine         : #F0EBE4;
  --hws-smoky        : #E8E1D8;
  --surface-0        : var(--bg-page);
  --surface-1        : var(--bg-surface);
  --surface-2        : var(--bg-elevated);
  --surface-hover    : var(--bg-hover);
  --surface-input    : var(--bg-input);
  --hws-ivory        : var(--text-primary);
  --hws-beige        : var(--text-secondary);
  --hws-sand         : var(--text-muted);
  --hws-stone        : var(--text-disabled);
  --text-gold        : var(--gold);
  --border-subtle    : rgba(0,0,0,0.07);
  --border-soft      : rgba(0,0,0,0.11);
  --border-input     : rgba(0,0,0,0.15);
  --border-focus     : rgba(176,122,30,0.65);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. GLOBAL BASE OVERRIDES (Phase 17 refinements)
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering         : optimizeLegibility;
}

body {
  background : var(--bg-page);
  color      : var(--text-primary);
  transition : background-color var(--dur-slow) var(--ease-inout),
               color var(--dur-slow) var(--ease-inout);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-toggle {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 34px;
  height         : 34px;
  border-radius  : var(--btn-radius);
  border         : 1px solid var(--border-soft);
  background     : transparent;
  color          : var(--text-secondary);
  cursor         : pointer;
  transition     : background var(--dur-fast) var(--ease-out),
                   border-color var(--dur-fast) var(--ease-out),
                   color var(--dur-fast) var(--ease-out);
  flex-shrink    : 0;
}
.theme-toggle:hover {
  background   : var(--bg-hover);
  border-color : var(--border-medium);
  color        : var(--text-primary);
}
.theme-toggle svg {
  width : 16px;
  height: 16px;
  stroke: currentColor;
  fill  : none;
  stroke-width    : 1.6;
  stroke-linecap  : round;
  stroke-linejoin : round;
  flex-shrink: 0;
}
/* Show moon in dark mode, sun in light mode */
.theme-toggle .icon-moon  { display: block; }
.theme-toggle .icon-sun   { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. LANGUAGE SELECTOR
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-selector {
  position  : relative;
  flex-shrink: 0;
}
.lang-selector-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  height         : 34px;
  padding        : 0 10px;
  border-radius  : var(--btn-radius);
  border         : 1px solid var(--border-soft);
  background     : transparent;
  color          : var(--text-secondary);
  font-family    : var(--font-sans);
  font-size      : 12px;
  font-weight    : 500;
  letter-spacing : 0.02em;
  cursor         : pointer;
  transition     : all var(--dur-fast) var(--ease-out);
}
.lang-selector-btn:hover {
  background  : var(--bg-hover);
  border-color: var(--border-medium);
  color       : var(--text-primary);
}
.lang-selector-btn svg {
  width : 14px;
  height: 14px;
  stroke: currentColor;
  fill  : none;
  stroke-width: 1.5;
}
.lang-dropdown {
  position     : absolute;
  top          : calc(100% + 6px);
  right        : 0;
  min-width    : 140px;
  background   : var(--bg-elevated);
  border       : 1px solid var(--border-soft);
  border-radius: var(--menu-radius);
  box-shadow   : var(--shadow-dropdown);
  padding      : 4px;
  z-index      : var(--z-dropdown);
  opacity      : 0;
  transform    : translateY(-6px) scale(0.97);
  pointer-events: none;
  transition   : opacity var(--dur-normal) var(--ease-out),
                 transform var(--dur-normal) var(--ease-spring);
}
.lang-selector.open .lang-dropdown {
  opacity       : 1;
  transform     : translateY(0) scale(1);
  pointer-events: auto;
}
.lang-option {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  padding       : 8px 10px;
  border-radius : 6px;
  font-size     : 13px;
  color         : var(--text-secondary);
  cursor        : pointer;
  transition    : background var(--dur-fast);
}
.lang-option:hover  { background: var(--bg-hover); color: var(--text-primary); }
.lang-option.active { color: var(--gold); font-weight: 500; }
.lang-option-flag   { font-size: 15px; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. NOTIFICATION PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.notif-panel {
  position     : absolute;
  top          : calc(100% + 8px);
  right        : 0;
  width        : 340px;
  max-height   : 480px;
  background   : var(--bg-elevated);
  border       : 1px solid var(--border-soft);
  border-radius: var(--menu-radius);
  box-shadow   : var(--shadow-dropdown);
  z-index      : var(--z-dropdown);
  display      : flex;
  flex-direction: column;
  opacity      : 0;
  transform    : translateY(-8px) scale(0.97);
  pointer-events: none;
  transition   : opacity var(--dur-normal) var(--ease-out),
                 transform var(--dur-normal) var(--ease-spring);
  overflow     : hidden;
}
.notif-panel.open {
  opacity       : 1;
  transform     : translateY(0) scale(1);
  pointer-events: auto;
}
.notif-panel-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 14px 16px 12px;
  border-bottom  : 1px solid var(--border-subtle);
  flex-shrink    : 0;
}
.notif-panel-title {
  font-size  : 13px;
  font-weight: 600;
  color      : var(--text-primary);
  letter-spacing: -0.01em;
}
.notif-mark-all {
  font-size  : 11px;
  color      : var(--gold);
  cursor     : pointer;
  background : none;
  border     : none;
  padding    : 0;
  font-family: var(--font-sans);
  transition : opacity var(--dur-fast);
}
.notif-mark-all:hover { opacity: 0.75; }
.notif-list {
  overflow-y : auto;
  flex       : 1;
  padding    : 6px;
}
.notif-item {
  display      : flex;
  gap          : 10px;
  align-items  : flex-start;
  padding      : 10px;
  border-radius: 7px;
  cursor       : pointer;
  transition   : background var(--dur-fast);
}
.notif-item:hover         { background: var(--bg-hover); }
.notif-item.unread        { background: var(--gold-subtle); }
.notif-item.unread:hover  { background: var(--gold-hover); }
.notif-dot {
  width      : 7px;
  height     : 7px;
  border-radius: 50%;
  background : var(--gold);
  margin-top : 5px;
  flex-shrink: 0;
}
.notif-item:not(.unread) .notif-dot { background: transparent; }
.notif-body      { flex: 1; min-width: 0; }
.notif-text      { font-size: 12.5px; color: var(--text-primary); line-height: 1.45; }
.notif-time      { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.notif-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 36px 16px;
  color          : var(--text-muted);
  font-size      : 12.5px;
  gap            : 8px;
}
.notif-empty svg { opacity: 0.35; width: 32px; height: 32px; }
.notif-panel-footer {
  padding      : 10px 16px;
  border-top   : 1px solid var(--border-subtle);
  text-align   : center;
  flex-shrink  : 0;
}
.notif-view-all {
  font-size  : 12px;
  color      : var(--gold);
  cursor     : pointer;
  background : none;
  border     : none;
  font-family: var(--font-sans);
  transition : opacity var(--dur-fast);
}
.notif-view-all:hover { opacity: 0.75; }

/* Badge */
.notif-badge {
  position      : absolute;
  top           : 5px;
  right         : 5px;
  min-width     : 16px;
  height        : 16px;
  padding       : 0 4px;
  background    : var(--gold);
  color         : #0D0B08;
  font-size     : 9px;
  font-weight   : 700;
  border-radius : 8px;
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  line-height   : 1;
  pointer-events: none;
  box-shadow    : 0 0 0 2px var(--bg-page);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. CONTEXT MENU (.ctx-menu)
   Modern three-dot / right-click popup
   ═══════════════════════════════════════════════════════════════════════════ */
.ctx-menu {
  position     : fixed;
  min-width    : 180px;
  max-width    : 240px;
  background   : var(--bg-elevated);
  border       : 1px solid var(--border-soft);
  border-radius: var(--menu-radius);
  box-shadow   : var(--shadow-dropdown);
  padding      : 4px;
  z-index      : 9000;
  opacity      : 0;
  transform    : scale(0.95) translateY(-4px);
  transform-origin: top left;
  pointer-events: none;
  transition   : opacity var(--dur-fast) var(--ease-out),
                 transform var(--dur-fast) var(--ease-spring);
}
.ctx-menu.open {
  opacity       : 1;
  transform     : scale(1) translateY(0);
  pointer-events: auto;
}
.ctx-menu-item {
  display      : flex;
  align-items  : center;
  gap          : 9px;
  padding      : 8px 10px;
  border-radius: 6px;
  font-size    : 13px;
  color        : var(--text-secondary);
  cursor       : pointer;
  user-select  : none;
  transition   : background var(--dur-fast), color var(--dur-fast);
  border       : none;
  background   : none;
  width        : 100%;
  text-align   : left;
  font-family  : var(--font-sans);
}
.ctx-menu-item svg {
  width       : 15px;
  height      : 15px;
  stroke      : currentColor;
  fill        : none;
  stroke-width: 1.5;
  flex-shrink : 0;
}
.ctx-menu-item:hover {
  background: var(--bg-hover);
  color     : var(--text-primary);
}
.ctx-menu-item.danger:hover {
  background: var(--color-danger-bg);
  color     : var(--color-danger);
}
.ctx-menu-item.disabled {
  opacity       : 0.4;
  pointer-events: none;
}
.ctx-menu-sep {
  height       : 1px;
  background   : var(--border-subtle);
  margin       : 4px 6px;
}
/* Three-dot trigger */
.ctx-trigger {
  display     : inline-flex;
  align-items : center;
  justify-content: center;
  width       : 28px;
  height      : 28px;
  border-radius: 6px;
  border      : none;
  background  : transparent;
  color       : var(--text-muted);
  cursor      : pointer;
  transition  : background var(--dur-fast), color var(--dur-fast);
}
.ctx-trigger:hover {
  background: var(--bg-hover);
  color     : var(--text-primary);
}
.ctx-trigger svg {
  width : 16px;
  height: 16px;
  stroke: currentColor;
  fill  : currentColor;
  stroke-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. COMMAND PALETTE
   ⌘K global search overlay
   ═══════════════════════════════════════════════════════════════════════════ */
#cmdPalette {
  position        : fixed;
  inset           : 0;
  z-index         : 9999;
  background      : rgba(0,0,0,0.65);
  backdrop-filter : blur(6px);
  display         : flex;
  align-items     : flex-start;
  justify-content : center;
  padding-top     : 15vh;
  opacity         : 0;
  pointer-events  : none;
  transition      : opacity var(--dur-normal) var(--ease-out);
}
#cmdPalette.open {
  opacity        : 1;
  pointer-events : auto;
}
.cmd-palette-box {
  width         : min(560px, calc(100vw - 32px));
  background    : var(--bg-elevated);
  border        : 1px solid var(--border-medium);
  border-radius : 14px;
  box-shadow    : var(--shadow-modal);
  overflow      : hidden;
  transform     : translateY(-16px) scale(0.98);
  transition    : transform var(--dur-normal) var(--ease-spring);
}
#cmdPalette.open .cmd-palette-box {
  transform: translateY(0) scale(1);
}
.cmd-palette-input-wrap {
  display     : flex;
  align-items : center;
  gap         : 10px;
  padding     : 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.cmd-palette-input-wrap svg {
  width       : 18px;
  height      : 18px;
  stroke      : var(--text-muted);
  fill        : none;
  stroke-width: 1.75;
  flex-shrink : 0;
}
.cmd-palette-input {
  flex        : 1;
  background  : transparent;
  border      : none;
  outline     : none;
  font-family : var(--font-sans);
  font-size   : 15px;
  color       : var(--text-primary);
  caret-color : var(--gold);
}
.cmd-palette-input::placeholder { color: var(--text-muted); }
.cmd-shortcut-hint {
  font-size   : 11px;
  color       : var(--text-muted);
  background  : var(--bg-hover);
  border      : 1px solid var(--border-subtle);
  border-radius: 4px;
  padding     : 1px 5px;
  white-space : nowrap;
  font-family : var(--font-sans);
}
.cmd-results {
  max-height : 360px;
  overflow-y : auto;
  padding    : 6px;
}
.cmd-section-label {
  padding     : 6px 10px 3px;
  font-size   : 11px;
  font-weight : 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color       : var(--text-muted);
}
.cmd-result-item {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 9px 10px;
  border-radius : 7px;
  cursor        : pointer;
  transition    : background var(--dur-fast);
}
.cmd-result-item:hover,
.cmd-result-item.focused {
  background: var(--gold-subtle);
}
.cmd-result-icon {
  width        : 30px;
  height       : 30px;
  border-radius: 7px;
  background   : var(--bg-hover);
  display      : flex;
  align-items  : center;
  justify-content: center;
  flex-shrink  : 0;
}
.cmd-result-icon svg {
  width : 16px;
  height: 16px;
  stroke: var(--text-secondary);
  fill  : none;
  stroke-width: 1.5;
}
.cmd-result-label { font-size: 13.5px; color: var(--text-primary); }
.cmd-result-sub   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.cmd-result-kbd   {
  margin-left : auto;
  font-size   : 11px;
  color       : var(--text-muted);
  background  : var(--bg-hover);
  border      : 1px solid var(--border-subtle);
  border-radius: 4px;
  padding     : 1px 5px;
  font-family : var(--font-sans);
  white-space : nowrap;
}
.cmd-empty {
  text-align  : center;
  padding     : 32px 16px;
  color       : var(--text-muted);
  font-size   : 13px;
}
.cmd-palette-footer {
  display       : flex;
  gap           : 12px;
  align-items   : center;
  padding       : 8px 14px;
  border-top    : 1px solid var(--border-subtle);
  font-size     : 11px;
  color         : var(--text-muted);
}
.cmd-footer-key {
  background   : var(--bg-hover);
  border       : 1px solid var(--border-subtle);
  border-radius: 4px;
  padding      : 1px 5px;
  font-family  : var(--font-sans);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. PREMIUM BUTTONS (Phase 17 refinement)
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 7px;
  height         : var(--btn-height-md);
  padding        : 0 16px;
  border-radius  : var(--btn-radius);
  border         : 1px solid transparent;
  font-family    : var(--font-sans);
  font-size      : 13px;
  font-weight    : 500;
  line-height    : 1;
  white-space    : nowrap;
  cursor         : pointer;
  transition     : all var(--dur-fast) var(--ease-out);
  text-decoration: none;
  letter-spacing : -0.01em;
  flex-shrink    : 0;
}
.btn svg {
  width       : 15px;
  height      : 15px;
  stroke      : currentColor;
  fill        : none;
  stroke-width: 1.75;
  flex-shrink : 0;
}
.btn:disabled { opacity: 0.45; pointer-events: none; }

/* Primary — gold filled */
.btn-primary {
  background  : var(--gold);
  border-color: var(--gold);
  color       : #0D0B08;
}
.btn-primary:hover  { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn-primary:active { opacity: 0.88; }

/* Secondary — subtle surface */
.btn-secondary {
  background  : var(--bg-elevated);
  border-color: var(--border-medium);
  color       : var(--text-primary);
}
.btn-secondary:hover  { background: var(--bg-hover); border-color: var(--border-strong); }
.btn-secondary:active { background: var(--bg-active); }

/* Ghost — no background */
.btn-ghost {
  background  : transparent;
  border-color: transparent;
  color       : var(--text-secondary);
}
.btn-ghost:hover  { background: var(--bg-hover); color: var(--text-primary); }
.btn-ghost:active { background: var(--bg-active); }

/* Danger */
.btn-danger {
  background  : var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color       : var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }

/* Icon only */
.btn-icon {
  width  : var(--btn-height-md);
  padding: 0;
}
.btn-sm { height: var(--btn-height-sm); padding: 0 12px; font-size: 12px; }
.btn-lg { height: var(--btn-height-lg); padding: 0 20px; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   10. PREMIUM CARDS (Phase 17)
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
  background    : var(--bg-surface);
  border        : 1px solid var(--border-subtle);
  border-radius : var(--card-radius);
  transition    : border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.card:hover { border-color: var(--border-soft); }
.card-elevated {
  box-shadow : var(--shadow-sm);
}
.card-interactive {
  cursor: pointer;
}
.card-interactive:hover {
  border-color: var(--border-medium);
  box-shadow  : var(--shadow-md);
  transform   : translateY(-1px);
}
.card-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 16px 20px 0;
}
.card-title {
  font-size   : 13.5px;
  font-weight : 600;
  color       : var(--text-primary);
  letter-spacing: -0.01em;
}
.card-body   { padding: 16px 20px; }
.card-footer {
  padding     : 12px 20px;
  border-top  : 1px solid var(--border-subtle);
}

/* KPI card */
.kpi-card {
  background    : var(--bg-surface);
  border        : 1px solid var(--border-subtle);
  border-radius : var(--card-radius);
  padding       : 20px;
  transition    : all var(--dur-fast) var(--ease-out);
}
.kpi-card:hover {
  border-color: var(--gold-border);
  box-shadow  : var(--shadow-gold);
}
.kpi-card-value {
  font-family : var(--font-serif, var(--font-sans));
  font-size   : 28px;
  font-weight : 600;
  color       : var(--text-primary);
  letter-spacing: -0.03em;
  line-height : 1;
}
.kpi-card-label {
  font-size   : 11.5px;
  font-weight : 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color       : var(--text-muted);
  margin-top  : 4px;
}
.kpi-card-change {
  display     : inline-flex;
  align-items : center;
  gap         : 3px;
  font-size   : 11.5px;
  font-weight : 500;
  margin-top  : 8px;
}
.kpi-card-change.up   { color: var(--color-success); }
.kpi-card-change.down { color: var(--color-danger);  }

/* ═══════════════════════════════════════════════════════════════════════════
   11. PREMIUM TABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.data-table {
  width          : 100%;
  border-collapse: separate;
  border-spacing : 0;
  font-size      : 13px;
}
.data-table th {
  padding        : 9px 14px;
  text-align     : left;
  font-size      : 11px;
  font-weight    : 600;
  text-transform : uppercase;
  letter-spacing : 0.06em;
  color          : var(--text-muted);
  border-bottom  : 1px solid var(--border-subtle);
  white-space    : nowrap;
}
.data-table td {
  padding        : 12px 14px;
  color          : var(--text-secondary);
  border-bottom  : 1px solid var(--border-subtle);
  vertical-align : middle;
  transition     : background var(--dur-fast);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--bg-hover); }
.data-table td.text-primary    { color: var(--text-primary); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   12. PREMIUM FORM INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */
.form-input,
.form-select,
.form-textarea {
  width          : 100%;
  height         : var(--input-height-md);
  padding        : 0 12px;
  background     : var(--bg-input);
  border         : 1px solid var(--border-input, var(--border-soft));
  border-radius  : var(--input-radius);
  font-family    : var(--font-sans);
  font-size      : 13.5px;
  color          : var(--text-primary);
  transition     : border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
  outline        : none;
  -webkit-appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }
.form-input:hover,
.form-select:hover { border-color: var(--border-medium); background: var(--bg-input-hover); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--border-focus);
  background  : var(--bg-input-focus);
  box-shadow  : 0 0 0 3px rgba(200,151,58,0.12);
}
.form-textarea { height: auto; padding: 10px 12px; resize: vertical; }
.form-label {
  display      : block;
  font-size    : 12px;
  font-weight  : 500;
  color        : var(--text-secondary);
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 11.5px; color: var(--color-danger); margin-top: 4px; }
.form-group { margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   13. BADGES & STATUS PILLS
   ═══════════════════════════════════════════════════════════════════════════ */
.badge {
  display        : inline-flex;
  align-items    : center;
  gap            : 4px;
  padding        : 2px 8px;
  border-radius  : var(--badge-radius);
  font-size      : 11px;
  font-weight    : 500;
  line-height    : 18px;
  white-space    : nowrap;
  letter-spacing : 0.01em;
}
.badge-success {
  background  : var(--color-success-bg);
  color       : var(--color-success);
  border      : 1px solid var(--color-success-border);
}
.badge-warning {
  background  : var(--color-warning-bg);
  color       : var(--color-warning);
  border      : 1px solid var(--color-warning-border);
}
.badge-danger {
  background  : var(--color-danger-bg);
  color       : var(--color-danger);
  border      : 1px solid var(--color-danger-border);
}
.badge-info {
  background  : var(--color-info-bg);
  color       : var(--color-info);
  border      : 1px solid var(--color-info-border);
}
.badge-gold {
  background  : var(--gold-subtle);
  color       : var(--gold);
  border      : 1px solid var(--gold-border);
}
.badge-neutral {
  background  : var(--bg-elevated);
  color       : var(--text-secondary);
  border      : 1px solid var(--border-soft);
}
/* Dot indicator */
.badge::before {
  content      : '';
  width        : 5px;
  height       : 5px;
  border-radius: 50%;
  background   : currentColor;
  flex-shrink  : 0;
}
.badge-no-dot::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. MODALS — Premium (Phase 17)
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position        : fixed;
  inset           : 0;
  background      : rgba(0,0,0,0.60);
  backdrop-filter : blur(4px);
  z-index         : 800;
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding         : 20px;
  opacity         : 0;
  pointer-events  : none;
  transition      : opacity var(--dur-normal) var(--ease-out);
}
.modal-overlay.open {
  opacity       : 1;
  pointer-events: auto;
}
.modal {
  background    : var(--bg-elevated);
  border        : 1px solid var(--border-soft);
  border-radius : var(--modal-radius);
  box-shadow    : var(--shadow-modal);
  width         : min(480px, calc(100vw - 40px));
  max-height    : min(600px, calc(100vh - 80px));
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
  transform     : translateY(16px) scale(0.98);
  transition    : transform var(--dur-normal) var(--ease-spring);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 18px 20px 16px;
  border-bottom  : 1px solid var(--border-subtle);
  flex-shrink    : 0;
}
.modal-title {
  font-size      : 15px;
  font-weight    : 600;
  color          : var(--text-primary);
  letter-spacing : -0.01em;
}
.modal-close {
  width        : 28px;
  height       : 28px;
  border-radius: 6px;
  border       : none;
  background   : transparent;
  color        : var(--text-muted);
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  justify-content: center;
  transition   : background var(--dur-fast), color var(--dur-fast);
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-close svg   { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.modal-body   { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  display     : flex;
  gap         : 8px;
  justify-content: flex-end;
  padding     : 14px 20px;
  border-top  : 1px solid var(--border-subtle);
  flex-shrink : 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
.toast-container {
  position   : fixed;
  bottom     : 20px;
  right      : 20px;
  z-index    : 9998;
  display    : flex;
  flex-direction: column;
  gap        : 8px;
  pointer-events: none;
}
.toast {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 10px 14px;
  background    : var(--bg-elevated);
  border        : 1px solid var(--border-soft);
  border-radius : var(--menu-radius);
  box-shadow    : var(--shadow-lg);
  font-size     : 13px;
  color         : var(--text-primary);
  pointer-events: auto;
  max-width     : 320px;
  animation     : toastIn var(--dur-normal) var(--ease-spring) forwards;
}
.toast.closing { animation: toastOut var(--dur-normal) var(--ease-in) forwards; }
.toast-icon { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; }
.toast-success .toast-icon { stroke: var(--color-success); }
.toast-warning .toast-icon { stroke: var(--color-warning); }
.toast-error   .toast-icon { stroke: var(--color-danger);  }
.toast-info    .toast-icon { stroke: var(--color-info);    }
.toast-msg  { flex: 1; line-height: 1.4; }
.toast-dismiss {
  width      : 20px;
  height     : 20px;
  border-radius: 4px;
  border     : none;
  background : transparent;
  color      : var(--text-muted);
  cursor     : pointer;
  display    : flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast-dismiss:hover { color: var(--text-primary); }
.toast-dismiss svg   { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(20px) scale(0.95); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. FOCUS VISIBLE RING — accessibility
   ═══════════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline       : 2px solid var(--gold);
  outline-offset: 2px;
  border-radius : 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   17. SKELETON / SHIMMER
   ═══════════════════════════════════════════════════════════════════════════ */
.skeleton {
  background       : var(--bg-elevated);
  border-radius    : var(--radius-sm, 4px);
  overflow         : hidden;
  position         : relative;
}
.skeleton::after {
  content         : '';
  position        : absolute;
  inset           : 0;
  background      : linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 60%,
    transparent 100%
  );
  background-size  : 200% 100%;
  animation        : shimmer 1.6s ease-in-out infinite;
}
[data-theme="light"] .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0.03) 40%,
    rgba(0,0,0,0.06) 50%,
    rgba(0,0,0,0.03) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. PREMIUM SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar            { width: 5px; height: 5px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: var(--border-soft); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--border-medium); }
* { scrollbar-width: thin; scrollbar-color: var(--border-soft) transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   19. TEXT SELECTION
   ═══════════════════════════════════════════════════════════════════════════ */
::selection {
  background : var(--gold-subtle);
  color      : var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. ANIMATION UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Entrance animations */
@keyframes fadeIn      { from{opacity:0}         to{opacity:1} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes slideInRight{ from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }

/* Page transition */
@keyframes pageIn {
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}

.anim-fade-in     { animation: fadeIn     var(--dur-normal) var(--ease-out) both; }
.anim-fade-up     { animation: fadeInUp   var(--dur-normal) var(--ease-spring) both; }
.anim-scale-in    { animation: scaleIn    var(--dur-normal) var(--ease-spring) both; }
.anim-page-in     { animation: pageIn     var(--dur-slow)   var(--ease-out) both; }

/* Stagger children */
.anim-stagger > * { animation: fadeInUp var(--dur-normal) var(--ease-spring) both; }
.anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 40ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 80ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 120ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 160ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 200ms; }

/* Spin */
@keyframes spin { to { transform: rotate(360deg); } }
.anim-spin      { animation: spin 0.7s linear infinite; }

/* Pulse */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.anim-pulse { animation: pulse 1.8s ease-in-out infinite; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. SIDEBAR REFINEMENTS (Phase 17)
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar {
  background    : var(--sidebar-bg) !important;
  border-right  : 1px solid var(--sidebar-border) !important;
  transition    : width var(--dur-slow) var(--ease-inout),
                  background var(--dur-slow) var(--ease-inout) !important;
}
.nav-item {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  height        : 36px;
  padding       : 0 12px;
  border-radius : 7px;
  font-size     : 13px;
  font-weight   : 400;
  color         : var(--text-secondary);
  text-decoration: none;
  cursor        : pointer;
  transition    : background var(--dur-fast) var(--ease-out),
                  color var(--dur-fast) var(--ease-out);
  margin        : 1px 0;
  white-space   : nowrap;
  overflow      : hidden;
}
.nav-item:hover {
  background : var(--sidebar-item-hover);
  color      : var(--text-primary);
}
.nav-item.active,
.nav-item[aria-current="page"] {
  background : var(--sidebar-item-active);
  color      : var(--gold);
  font-weight: 500;
  border-left: 2px solid var(--sidebar-item-active-border);
  padding-left: 10px;
}
.nav-item svg {
  width       : 16px;
  height      : 16px;
  stroke      : currentColor;
  fill        : none;
  stroke-width: 1.6;
  flex-shrink : 0;
}
.nav-text { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   22. HEADER REFINEMENTS (Phase 17)
   ═══════════════════════════════════════════════════════════════════════════ */
.app-header {
  background     : var(--header-bg) !important;
  backdrop-filter: var(--header-blur) !important;
  border-bottom  : 1px solid var(--header-border) !important;
  transition     : background var(--dur-slow), border-color var(--dur-slow) !important;
}
.header-icon-btn {
  width        : 34px;
  height       : 34px;
  border-radius: var(--btn-radius);
  border       : 1px solid transparent;
  background   : transparent;
  color        : var(--text-secondary);
  display      : flex;
  align-items  : center;
  justify-content: center;
  cursor       : pointer;
  position     : relative;
  flex-shrink  : 0;
  transition   : background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.header-icon-btn:hover {
  background   : var(--bg-hover);
  border-color : var(--border-soft);
  color        : var(--text-primary);
}
.header-icon-btn svg {
  width       : 17px;
  height      : 17px;
  stroke      : currentColor;
  fill        : none;
  stroke-width: 1.65;
}

/* Search bar — Phase 17 */
.header-search {
  position    : relative;
  display     : flex;
  align-items : center;
}
.header-search-input {
  height      : 34px;
  width       : 280px;
  padding     : 0 12px 0 36px;
  background  : var(--bg-input);
  border      : 1px solid var(--border-soft);
  border-radius: var(--btn-radius);
  font-family : var(--font-sans);
  font-size   : 13px;
  color       : var(--text-primary);
  transition  : all var(--dur-fast);
  outline     : none;
  cursor      : pointer;
}
.header-search-input:focus {
  width        : 320px;
  border-color : var(--border-focus);
  box-shadow   : 0 0 0 3px rgba(200,151,58,0.10);
  cursor       : text;
}
.header-search-input::placeholder { color: var(--text-muted); font-size: 12.5px; }
.header-search-icon {
  position  : absolute;
  left      : 10px;
  color     : var(--text-muted);
  pointer-events: none;
}
.header-search-icon svg {
  width : 14px;
  height: 14px;
  stroke: currentColor;
  fill  : none;
  stroke-width: 1.75;
}
.header-search-shortcut {
  position    : absolute;
  right       : 9px;
  font-size   : 10px;
  color       : var(--text-muted);
  background  : var(--bg-elevated);
  border      : 1px solid var(--border-subtle);
  border-radius: 4px;
  padding     : 1px 4px;
  font-family : var(--font-sans);
  pointer-events: none;
  transition  : opacity var(--dur-fast);
}
.header-search-input:focus ~ .header-search-shortcut { opacity: 0; }

/* Profile dropdown Phase 17 */
.profile-dropdown {
  position     : absolute;
  top          : calc(100% + 8px);
  right        : 0;
  min-width    : 200px;
  background   : var(--bg-elevated) !important;
  border       : 1px solid var(--border-soft) !important;
  border-radius: var(--menu-radius) !important;
  box-shadow   : var(--shadow-dropdown) !important;
  padding      : 4px !important;
  z-index      : var(--z-dropdown);
  opacity      : 0;
  transform    : translateY(-6px) scale(0.97);
  pointer-events: none;
  transition   : opacity var(--dur-normal) var(--ease-out),
                 transform var(--dur-normal) var(--ease-spring);
}
.header-profile.open .profile-dropdown {
  opacity       : 1;
  transform     : translateY(0) scale(1);
  pointer-events: auto;
}
.dropdown-item {
  display      : flex;
  align-items  : center;
  gap          : 9px;
  padding      : 8px 10px;
  border-radius: 6px;
  font-size    : 13px;
  color        : var(--text-secondary);
  text-decoration: none;
  cursor       : pointer;
  transition   : background var(--dur-fast), color var(--dur-fast);
}
.dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.dropdown-item.danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.dropdown-item svg {
  width : 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0;
}
.dropdown-header {
  padding     : 10px 12px 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}
.dropdown-user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.dropdown-user-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.dropdown-divider   { height: 1px; background: var(--border-subtle); margin: 4px 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   23. EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.empty-state {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  justify-content: center;
  padding       : 48px 24px;
  text-align    : center;
  gap           : 8px;
}
.empty-state-icon {
  width        : 48px;
  height       : 48px;
  border-radius: 12px;
  background   : var(--bg-elevated);
  display      : flex;
  align-items  : center;
  justify-content: center;
  margin-bottom: 4px;
}
.empty-state-icon svg {
  width : 22px; height: 22px;
  stroke: var(--text-muted); fill: none; stroke-width: 1.5; opacity: 0.6;
}
.empty-state-title   { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.empty-state-sub     { font-size: 12.5px; color: var(--text-muted); max-width: 260px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   24. RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .header-search-input { width: 180px; }
  .header-search-input:focus { width: 200px; }
  .notif-panel { width: calc(100vw - 32px); right: -60px; }
  .cmd-palette-box { width: calc(100vw - 32px); }
  .modal { width: calc(100vw - 32px); }
}

@media (max-width: 480px) {
  .header-search      { display: none; }
  .lang-selector-btn span { display: none; }
  .lang-selector-btn  { padding: 0 8px; }
}