@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --ink: #f8fafc;
  --muted: #94a3b8;
  --line: rgba(148, 163, 184, 0.2);
  --panel: rgba(15, 23, 42, 0.86);
  --panel-strong: rgba(2, 6, 23, 0.92);
  --gold: #f59e0b;
  --gold-soft: #fbbf24;
  --violet: #8b5cf6;
  --sky: #38bdf8;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: "Fira Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 18% 8%, rgba(245, 158, 11, 0.18), transparent 30rem),
    radial-gradient(circle at 82% 12%, rgba(139, 92, 246, 0.16), transparent 34rem),
    linear-gradient(135deg, #020617 0%, #0f172a 46%, #111827 100%);
  background-size: 36px 36px, 36px 36px, auto, auto, auto;
}

body.admin-surface {
  background:
    linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, #020617 0%, #0b1120 52%, #111827 100%);
  background-size: 32px 32px, 32px 32px, auto;
}

.font-mono {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.shell {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.36);
  backdrop-filter: blur(18px);
}

.shell-strong {
  background: var(--panel-strong);
  border: 1px solid rgba(245, 158, 11, 0.24);
  box-shadow: 0 28px 90px rgba(2, 6, 23, 0.48);
}

.metric-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.focus-field {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: #f8fafc;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.focus-field::placeholder {
  color: #64748b;
}

.focus-field:focus {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(245, 158, 11, 0.88);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}

.btn-primary {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #111827;
  font-weight: 800;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 18px 36px rgba(245, 158, 11, 0.18);
}

.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.36);
  color: #ddd6fe;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.btn-secondary:hover {
  background: rgba(139, 92, 246, 0.24);
  border-color: rgba(167, 139, 250, 0.7);
}

.chip {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #fcd34d;
}

.badge-paid { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.28); }
.badge-late { background: rgba(245, 158, 11, 0.14); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.28); }
.badge-unpaid { background: rgba(244, 63, 94, 0.14); color: #fda4af; border: 1px solid rgba(244, 63, 94, 0.28); }

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