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

    :root {
      --background: 0 0% 100%;
      --foreground: 0 0% 3.9%;
      --card: 0 0% 100%;
      --card-foreground: 0 0% 3.9%;
      --primary: 0 0% 9%;
      --primary-foreground: 0 0% 98%;
      --secondary: 0 0% 96.1%;
      --secondary-foreground: 0 0% 9%;
      --muted: 0 0% 96.1%;
      --muted-foreground: 0 0% 45.1%;
      --accent: 0 0% 96.1%;
      --accent-foreground: 0 0% 9%;
      --border: 0 0% 89.8%;
      --input: 0 0% 89.8%;
      --ring: 0 0% 3.9%;
      --radius: 0.5rem;
    }
    .dark {
      --background: 0 0% 3.9%;
      --foreground: 0 0% 98%;
      --card: 0 0% 3.9%;
      --card-foreground: 0 0% 98%;
      --primary: 0 0% 98%;
      --primary-foreground: 0 0% 9%;
      --secondary: 0 0% 14.9%;
      --secondary-foreground: 0 0% 98%;
      --muted: 0 0% 14.9%;
      --muted-foreground: 0 0% 63.9%;
      --accent: 0 0% 14.9%;
      --accent-foreground: 0 0% 98%;
      --border: 0 0% 14.9%;
      --input: 0 0% 14.9%;
      --ring: 0 0% 83.1%;
    }

    * { border-color: hsl(var(--border)); }
    body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: 'Inter', system-ui, sans-serif; }

    /* shadcn-style focus ring */
    .focus-ring:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

    /* Custom scrollbar */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 99px; }

    /* Mobile nav open state — CSS only via checkbox hack */
    #nav-toggle { display: none; }
    #nav-toggle:checked ~ .mobile-nav { display: flex; }
    #nav-toggle:checked ~ label .bar-top    { transform: rotate(45deg) translate(5px, 5px); }
    #nav-toggle:checked ~ label .bar-mid    { opacity: 0; }
    #nav-toggle:checked ~ label .bar-bot    { transform: rotate(-45deg) translate(5px, -5px); }

    /* Modal CSS-only via :target */
    .modal-overlay { display: none; }
    .modal-overlay:target { display: flex; }

    /* Smooth card hover */
    .tool-card { transition: box-shadow 0.2s, transform 0.2s; }
    .tool-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
    .dark .tool-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.4); }

    /* btn transitions */
    .btn-transition { transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; }