/* All Converter App — shadcn-inspired design system */

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 214 95% 96%;
  --accent-foreground: 221 83% 40%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 45%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 221 83% 53%;
  --radius: 0.75rem;
  color-scheme: light;
}

.dark {
  --background: 224 47% 5%;
  --foreground: 210 40% 98%;
  --card: 222 44% 7%;
  --card-foreground: 210 40% 98%;
  --popover: 222 44% 7%;
  --popover-foreground: 210 40% 98%;
  --primary: 217 91% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 217 33% 14%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217 33% 13%;
  --muted-foreground: 215 20% 65%;
  --accent: 217 50% 16%;
  --accent-foreground: 213 94% 78%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 69% 50%;
  --border: 217 33% 17%;
  --input: 217 33% 18%;
  --ring: 217 91% 60%;
  color-scheme: dark;
}

* { border-color: hsl(var(--border)); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; height: auto; }
pre { max-width: 100%; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.011em;
}
code, pre { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* ---------- Decorative ---------- */
.hero-grid {
  background-image:
    linear-gradient(to right, hsl(var(--border) / .5) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--border) / .5) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 50%, transparent 100%);
}
.hero-glow {
  background:
    radial-gradient(640px 320px at 50% -8%, hsl(var(--primary) / .18), transparent 70%),
    radial-gradient(420px 280px at 15% 0%, hsl(262 83% 58% / .10), transparent 70%);
}

/* ---------- Surfaces ---------- */
.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.surface { background: hsl(var(--muted) / .5); border: 1px solid hsl(var(--border)); }
.glass {
  background: hsl(var(--background) / .7);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 500; font-size: .875rem; line-height: 1.25rem;
  border-radius: calc(var(--radius) - 2px);
  padding: .5rem 1rem; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  border: 1px solid transparent; user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-lg { padding: .7rem 1.4rem; font-size: .95rem; border-radius: var(--radius); }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 1px 2px hsl(var(--primary) / .25); }
.btn-primary:hover { background: hsl(var(--primary) / .9); box-shadow: 0 8px 20px -8px hsl(var(--primary) / .6); }

.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.btn-secondary:hover { background: hsl(var(--secondary) / .8); }

.btn-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-color: hsl(var(--accent-foreground) / .3); }

.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* ---------- Inputs ---------- */
.input, .select, .textarea {
  width: 100%; background: hsl(var(--background)); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px);
  padding: .55rem .75rem; font-size: .875rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .18); }
.select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; padding-right: 2rem;
}

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 500;
  padding: .2rem .6rem; border-radius: 9999px; border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / .6); color: hsl(var(--muted-foreground));
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .825rem; font-weight: 500;
  padding: .4rem .8rem; border-radius: 9999px; border: 1px solid hsl(var(--border));
  background: hsl(var(--card)); color: hsl(var(--foreground)); cursor: pointer; transition: all .15s ease;
}
.chip:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); background: hsl(var(--accent)); }
.chip-active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.chip-active:hover { background: hsl(var(--primary) / .9); color: hsl(var(--primary-foreground)); }

/* ---------- Dropzone ---------- */
.dropzone {
  border: 2px dashed hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--muted) / .35); transition: all .18s ease;
}
.dropzone:hover { border-color: hsl(var(--primary) / .55); background: hsl(var(--accent) / .5); }
.dropzone.drag { border-color: hsl(var(--primary)); background: hsl(var(--accent)); transform: translateY(-2px); box-shadow: 0 16px 40px -20px hsl(var(--primary) / .6); }

/* ---------- Tool cards ---------- */
.tool-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tool-card:hover { transform: translateY(-3px); border-color: hsl(var(--primary) / .5); box-shadow: 0 18px 40px -24px hsl(var(--primary) / .5); }

/* ---------- Misc ---------- */
.progress-track { background: hsl(var(--muted)); border-radius: 9999px; overflow: hidden; }
.progress-bar { background: hsl(var(--primary)); transition: width .35s ease; }
.divider { border-top: 1px solid hsl(var(--border)); }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: fade .35s cubic-bezier(.16,1,.3,1); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.link { color: hsl(var(--primary)); text-decoration: none; }
.link:hover { text-decoration: underline; }

.muted { color: hsl(var(--muted-foreground)); }

/* prose for legal pages */
.prose-block p { margin: .7rem 0; line-height: 1.75; color: hsl(var(--muted-foreground)); }
.prose-block h2 { font-size: 1.2rem; font-weight: 600; margin: 1.6rem 0 .5rem; color: hsl(var(--foreground)); letter-spacing: -.02em; }
.prose-block ul { margin: .5rem 0 .5rem 1.2rem; list-style: disc; color: hsl(var(--muted-foreground)); }
.prose-block li { margin: .3rem 0; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chevron { transform: rotate(180deg); }
.chevron { transition: transform .2s ease; }