:root {
  --navy-900: #060D16;
  --navy-800: #0A1525;
  --navy-700: #0F1D32;
  --navy-600: #162A46;
  --navy-500: #1E3A5F;
  --navy-400: #2A5080;
  --steel: #3674A8;
  --accent: #0EA5E9;
  --accent-lt: #67D4FF;
  --accent-xs: #E8F8FF;
  --accent-dim: rgba(14,165,233,.10);
  --white: #FFFFFF;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-150: #E9EFF6;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  --red: #EF4444;
  --red-dark: #B91C1C;
  --red-lt: #FEF2F2;
  --red-bg: #FEE2E2;
  --blue-d: #0EA5E9;
  --green: #22C55E;
  --green-lt: #F0FDF4;
  --orange: #F97316;
  --header-h: 54px;
  --statsbar-h: 38px;
  --name-w: 178px;
  --cell-w: 48px;
  --row-h: clamp(40px, 4.5vh, 60px);
  --foot-h: 30px;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --border: 1px solid rgba(255,255,255,.08);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --glass-bg: rgba(255,255,255,.04);
  --glass-bg-hover: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.08);
  --glass-border-h: rgba(255,255,255,.14);
  --glass-blur: 16px;
  --glass-blur-lg: 24px;
  --glass-light: rgba(255,255,255,.65);
  --glass-light-hover: rgba(255,255,255,.78);
  --glass-light-border: rgba(255,255,255,.12);
  --glass-light-bg: rgba(255,255,255,.45);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.1);
  --shadow-glow: 0 0 20px rgba(14,165,233,.15), 0 0 60px rgba(14,165,233,.05);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mnav-h: calc(56px + var(--safe-bottom));
  --overlay-pad: clamp(12px, 2.4vw, 24px);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--navy-900);
  color: var(--gray-800);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(14,165,233,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(99,102,241,.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 50%, rgba(6,13,22,.9) 0%, transparent 100%),
    linear-gradient(160deg, #060D16 0%, #0A1525 40%, #0F1D32 100%);
  will-change: transform;
  pointer-events: none;
}

button, a, .td-cell, .td-name, .chip-wp, .chip-st, .chip-duty, .chip-wish {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.is-mobile * {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.2s, background-color 0.2s, box-shadow 0.2s;
}

button:active {
  transform: scale(0.95);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

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