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

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(210 25% 7.8431%);
  --card: hsl(180 6.6667% 97.0588%);
  --card-foreground: hsl(210 25% 7.8431%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(210 25% 7.8431%);
  --primary: hsl(14.2 86.9% 55.3%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(14.2 66.7% 71.0%);
  --secondary-foreground: hsl(0 0% 100%);
  --muted: hsl(240 1.9608% 90%);
  --muted-foreground: hsl(0 0% 46.1%);
  --accent: hsl(25.7 100% 95.3%);
  --accent-foreground: hsl(14.2 86.9% 55.3%);
  --destructive: hsl(356.3033 90.5579% 54.3137%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(201.4286 30.4348% 90.9804%);
  --input: hsl(200 23.0769% 97.4510%);
  --ring: hsl(14.2 86.9% 55.3%);
  --chart-1: hsl(203.8863 88.2845% 53.1373%);
  --chart-2: hsl(159.7826 100% 36.0784%);
  --chart-3: hsl(42.0290 92.8251% 56.2745%);
  --chart-4: hsl(147.1429 78.5047% 41.9608%);
  --chart-5: hsl(341.4894 75.2000% 50.9804%);
  --sidebar: hsl(180 6.6667% 97.0588%);
  --sidebar-foreground: hsl(210 25% 7.8431%);
  --sidebar-primary: hsl(14.2 86.9% 55.3%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(25.7 100% 95.3%);
  --sidebar-accent-foreground: hsl(14.2 86.9% 55.3%);
  --sidebar-border: hsl(205.0000 25.0000% 90.5882%);
  --sidebar-ring: hsl(14.2 86.9% 55.3%);
  --font-sans: 'Inter', sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 1.3rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 1px 2px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 1px 2px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 2px 4px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 4px 6px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 8px 10px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  --background: hsl(0 0% 0%);
  --foreground: hsl(200 6.6667% 91.1765%);
  --card: hsl(228 9.8039% 10%);
  --card-foreground: hsl(0 0% 85.0980%);
  --popover: hsl(0 0% 0%);
  --popover-foreground: hsl(200 6.6667% 91.1765%);
  --primary: hsl(14.2 86.9% 55.3%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(195.0000 15.3846% 94.9020%);
  --secondary-foreground: hsl(210 25% 7.8431%);
  --muted: hsl(0 0% 9.4118%);
  --muted-foreground: hsl(210 3.3898% 46.2745%);
  --accent: hsl(25.7 100% 7.8%);
  --accent-foreground: hsl(14.2 86.9% 55.3%);
  --destructive: hsl(356.3033 90.5579% 54.3137%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(210 5.2632% 14.9020%);
  --input: hsl(207.6923 27.6596% 18.4314%);
  --ring: hsl(14.2 86.9% 55.3%);
  --chart-1: hsl(203.8863 88.2845% 53.1373%);
  --chart-2: hsl(159.7826 100% 36.0784%);
  --chart-3: hsl(42.0290 92.8251% 56.2745%);
  --chart-4: hsl(147.1429 78.5047% 41.9608%);
  --chart-5: hsl(341.4894 75.2000% 50.9804%);
  --sidebar: hsl(228 9.8039% 10%);
  --sidebar-foreground: hsl(0 0% 85.0980%);
  --sidebar-primary: hsl(14.2 86.9% 55.3%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(25.7 100% 7.8%);
  --sidebar-accent-foreground: hsl(14.2 86.9% 55.3%);
  --sidebar-border: hsl(205.7143 15.7895% 26.0784%);
  --sidebar-ring: hsl(14.2 86.9% 55.3%);
  --font-sans: 'Inter', sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 1.3rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 1px 2px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 1px 2px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 2px 4px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 4px 6px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00), 0px 8px 10px -1px hsl(14.2 86.9% 55.3% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(14.2 86.9% 55.3% / 0.00);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}
.site-brand { display:flex; align-items:center; text-decoration:none; margin:0; padding:0 }

.brand { font-size:1.5625rem; }
.brand img { width:50px; height:50px; }
.foot{padding:28px;text-align:center;color:var(--muted)}
.tools-directory{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--ring);text-align:left}
.tools-directory h2{margin:0 0 1rem;color:var(--primary)}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.tools-grid details{border:0;padding:0}
.tools-grid summary{cursor:pointer;list-style:none}
.tools-grid summary::-webkit-details-marker{display:none}
.tools-grid summary h3{margin:0;font-size:1rem;color:var(--primary)}
.tools-grid ul{list-style:none;padding:0;margin:0.5rem 0 0}
.tools-grid li{margin-bottom:0.25rem}
.tools-grid a:hover,.tools-grid a:focus{color:var(--primary)}
@media (max-width:600px){.tools-grid{grid-template-columns:1fr}.tools-grid details{border-bottom:1px solid var(--ring);padding-bottom:0.5rem;margin-bottom:0.5rem}}