/* ============================================================
   NACOS OAU — Shared Design System
   Plain CSS, zero build step.
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Bricolage+Grotesque:wght@600;700;800&display=swap');

   :root {
     --background: 0 0% 100%;
     --foreground: 0 0% 4%;
     --card: 0 0% 100%;
     --card-foreground: 0 0% 4%;
     --primary: 134 82% 30%;
     --primary-foreground: 0 0% 100%;
     --primary-dark: 134 83% 24%;
     --secondary: 138 45% 94%;
     --muted: 138 30% 96%;
     --muted-foreground: 0 0% 36%;
     --accent: 134 83% 24%;
     --mint: 138 45% 94%;
     --border: 138 24% 88%;
     --ring: 134 82% 30%;
     --destructive: 0 74% 42%;
     --success: 142 72% 29%;
     --warning: 26 91% 37%;
     --radius: 0.75rem;
     --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
     --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
   }
   
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html { scroll-behavior: smooth; }
   
   body {
     background: hsl(var(--background));
     color: hsl(var(--foreground));
     font-family: var(--font-sans);
     font-size: 1rem;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
   
   h1, h2, h3, h4 {
     font-family: var(--font-display);
     letter-spacing: -0.02em;
     line-height: 1.15;
   }
   
   a { color: inherit; text-decoration: none; }
   img { display: block; max-width: 100%; }
   button { font-family: var(--font-sans); }
   
   :focus-visible {
     outline: 2px solid hsl(var(--ring));
     outline-offset: 2px;
     border-radius: 4px;
   }
   
   /* ── Layout ─────────────────────────────────────────────── */
   .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
   
   /* ── Nav ─────────────────────────────────────────────────── */
   .nav {
     position: sticky; top: 0; z-index: 50;
     background: hsl(var(--background) / 0.85);
     backdrop-filter: blur(14px);
     border-bottom: 1px solid hsl(var(--border));
   }
   .nav-inner {
     max-width: 1100px; margin: 0 auto;
     display: flex; align-items: center; justify-content: space-between;
     padding: 14px 24px;
   }
   .brand {
     display: flex; align-items: center; gap: 10px;
     font-family: var(--font-display); font-weight: 700; font-size: 1rem;
     color: hsl(var(--foreground));
   }
   .brand-mark {
     width: 36px; height: 36px; border-radius: 10px;
     background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-dark)));
     display: flex; align-items: center; justify-content: center;
     color: white; font-weight: 800; font-size: 0.82rem;
     flex-shrink: 0;
   }
   
   /* ── Buttons ─────────────────────────────────────────────── */
   .btn {
     display: inline-flex; align-items: center; justify-content: center; gap: 8px;
     padding: 11px 22px; border-radius: 999px;
     border: 1.5px solid transparent;
     font-weight: 600; font-size: 0.9rem; font-family: var(--font-sans);
     transition: all 0.18s ease; cursor: pointer; text-decoration: none;
     white-space: nowrap;
   }
   .btn-primary {
     background: hsl(var(--primary));
     color: white;
     border-color: hsl(var(--primary));
     box-shadow: 0 1px 3px hsl(var(--primary) / 0.25), 0 4px 12px hsl(var(--primary) / 0.12);
   }
   .btn-primary:hover:not(:disabled) {
     background: hsl(var(--primary-dark));
     border-color: hsl(var(--primary-dark));
     transform: translateY(-1px);
     box-shadow: 0 2px 6px hsl(var(--primary) / 0.3), 0 8px 20px hsl(var(--primary) / 0.16);
   }
   .btn-outline {
     background: transparent; color: hsl(var(--primary));
     border-color: hsl(var(--border));
   }
   .btn-outline:hover:not(:disabled) {
     background: hsl(var(--mint)); border-color: hsl(var(--primary) / 0.4);
   }
   .btn-ghost {
     background: transparent; border-color: transparent;
     color: hsl(var(--muted-foreground));
     padding: 8px 12px;
   }
   .btn-ghost:hover:not(:disabled) { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
   .btn-destructive {
     background: hsl(var(--destructive)); color: white; border-color: hsl(var(--destructive));
   }
   .btn-destructive:hover:not(:disabled) { filter: brightness(0.9); transform: translateY(-1px); }
   .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
   .btn-sm { padding: 7px 16px; font-size: 0.82rem; }
   
   /* ── Badges ──────────────────────────────────────────────── */
   .badge {
     display: inline-flex; align-items: center; gap: 5px;
     padding: 4px 11px; border-radius: 999px;
     font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
   }
   .badge-mint  { background: hsl(var(--mint)); color: hsl(var(--accent)); }
   .badge-green { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); }
   .badge-warn  { background: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); }
   .badge-red   { background: hsl(var(--destructive) / 0.10); color: hsl(var(--destructive)); }
   
   /* ── Cards ───────────────────────────────────────────────── */
   .card {
     background: hsl(var(--card)); border: 1px solid hsl(var(--border));
     border-radius: calc(var(--radius) + 4px); padding: 24px;
   }
   
   /* ── Footer ──────────────────────────────────────────────── */
   .footer {
     border-top: 1px solid hsl(var(--border)); padding: 24px;
     color: hsl(var(--muted-foreground)); font-size: 0.82rem; text-align: center;
   }
   
   /* ── Toast ───────────────────────────────────────────────── */
   .toast {
     position: fixed; bottom: 28px; left: 50%;
     transform: translateX(-50%) translateY(16px);
     background: hsl(var(--foreground)); color: hsl(var(--background));
     padding: 12px 24px; border-radius: 999px;
     font-size: 0.88rem; font-weight: 500;
     opacity: 0; pointer-events: none;
     transition: opacity 0.22s ease, transform 0.22s ease;
     z-index: 300; white-space: nowrap;
     box-shadow: 0 8px 24px rgba(0,0,0,0.18);
   }
   .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
   
   /* ── Modal ───────────────────────────────────────────────── */
   .modal-overlay {
     position: fixed; inset: 0;
     background: rgba(0,0,0,0.55);
     backdrop-filter: blur(4px);
     display: none; align-items: center; justify-content: center;
     padding: 20px; z-index: 200;
     animation: fade-in 0.18s ease;
   }
   .modal-overlay.open { display: flex; }
   .modal {
     background: hsl(var(--card));
     border: 1px solid hsl(var(--border));
     border-radius: calc(var(--radius) + 8px);
     padding: 32px 28px;
     max-width: 400px; width: 100%;
     text-align: center;
     box-shadow: 0 24px 64px rgba(0,0,0,0.18);
     animation: slide-up 0.22s ease;
   }
   
   @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
   @keyframes slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
   
   /* ── Form inputs ─────────────────────────────────────────── */
   input[type="text"], input[type="password"], input[type="email"], textarea, select {
     width: 100%; padding: 10px 14px;
     border: 1.5px solid hsl(var(--border));
     border-radius: var(--radius);
     font-family: var(--font-sans); font-size: 0.92rem;
     background: hsl(var(--card)); color: hsl(var(--foreground));
     transition: border-color 0.15s ease;
   }
   input:focus, textarea:focus, select:focus {
     outline: none; border-color: hsl(var(--primary));
     box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
   }
   label { font-size: 0.85rem; font-weight: 600; color: hsl(var(--muted-foreground)); display: block; margin-bottom: 6px; }
   
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
       transition-duration: 0.01ms !important;
     }
   }