/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; }

/* ── Design tokens ───────────────────────────────────────────────────────────── */
:root {
  --navy:      #0D1B2A;
  --navy2:     #1A2E42;
  --amber:     #F5A623;
  --amber2:    #E8941A;
  --ice:       #A8D8EA;
  --white:     #F8FAFC;
  --card:      #FFFFFF;
  --muted:     #64748B;
  --border:    #E2E8F0;
  --border2:   #CBD5E1;
  --success:   #10B981;
  --danger:    #EF4444;
  --surface:   #F1F5F9;
  --text:      #0D1B2A;
  --subtext:   #475569;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

/* ── Typography ──────────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
}

/* ── Toast ───────────────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: var(--navy);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  pointer-events: none;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ── Loading skeletons ───────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  height: 14px;
  margin-bottom: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}
.empty-state svg { color: var(--border2); margin: 0 auto 12px; }
.empty-state p { font-size: 13px; color: var(--muted); }