/* ==========================================================================
   Nara Design System — Light Mode Only
   Reference: router.bynara.id / ui.bynara.id
   ========================================================================== */

:root {
  /* Surfaces */
  --bg-app: #F8FAFC;
  --bg-paper: #FFFFFF;
  --panel-bg: #FFFFFF;
  --panel-border: #E2E8F0;
  --panel-border-hover: #CBD5E1;
  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  /* Brand */
  --accent-blue: #3B82F6;
  --accent-blue-dark: #2563EB;
  --accent-blue-glow: rgba(59, 130, 246, 0.10);
  --accent-teal: #0D9488;
  --accent-red: #EF4444;
  --accent-red-glow: rgba(239, 68, 68, 0.10);
  --accent-purple: #8B5CF6;
  --accent-purple-glow: rgba(139, 92, 246, 0.10);
  /* Radius — Nara spec */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition-smooth: all 0.15s ease-in-out;
}

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

body {
  font-family: Telegraf, system-ui, sans-serif;
  background-color: #F8FAFC;
  color: #0F172A;
  min-height: 100vh;
  overflow-x: hidden;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 40px 16px;
}

/* Spinner */
.spinner-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 0; gap: 8px; }
.spinner { width: 20px; height: 20px; border: 2px solid #E2E8F0; border-top-color: #3B82F6; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-text { font-size: 11px; color: #94A3B8; font-weight: 500; }

/* Modal Overlay */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }

/* Project Drawer */
.project-drawer { display: none; background: #F8FAFC; border-top: 1px solid #E2E8F0; border-radius: 0 0 8px 8px; padding: 12px; margin-top: -2px; }
.expanded + .project-drawer { display: block; }

/* Status Indicators */
.pulse-indicator { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.status-active { background: #10B981; }
.status-paused { background: #F59E0B; }
.status-abandoned { background: #EF4444; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }