:root{
  --bg:#FAFAFC; --surface:rgba(255,255,255,.72); --surface-solid:#FFFFFF;
  --border:#E7E7EE; --ink:#12131A; --ink-muted:#6B6E79; --accent-soft:#EEF0FE;
}
html.dark{
  --bg:#0B0E14; --surface:rgba(19,23,32,.6); --surface-solid:#131720;
  --border:#232732; --ink:#EDEEF2; --ink-muted:#8A8D99; --accent-soft:rgba(91,95,239,.14);
}

[x-cloak]{ display: none !important; }

*{ scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 8px; }

body{ background: var(--bg); color: var(--ink); font-family:'Inter',sans-serif; transition: background .25s ease, color .25s ease; }
.glass{ background: var(--surface); backdrop-filter: blur(16px) saturate(150%); border:1px solid var(--border); }
.surface{ background: var(--surface-solid); border:1px solid var(--border); }
.txt-muted{ color: var(--ink-muted); }
.brd{ border-color: var(--border); }

h1,h2,h3,.font-display{ font-family:'Space Grotesk', sans-serif; }
.font-mono{ font-family:'JetBrains Mono', monospace; }

.card-hover{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(20,20,40,.18); border-color: #5B5FEF55; }

.fade-in{ animation: fadeIn .35s ease both; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }

.nav-item{ transition: background .15s ease, color .15s ease; }
.nav-item.active{ background: var(--accent-soft); color:#5B5FEF; }

.field-row{ transition: background .15s ease; }
.field-row:hover{ background: var(--accent-soft); }

.btn-icon{ opacity:0; transition: opacity .15s ease; }
.field-row:hover .btn-icon{ opacity:1; }

input:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2px solid #5B5FEF; outline-offset:2px; }

.dropzone{ transition: border-color .15s ease, background .15s ease; }
.dropzone.drag{ border-color:#5B5FEF; background: var(--accent-soft); }

.skeleton-shimmer{ background: linear-gradient(90deg, transparent, rgba(91,95,239,.08), transparent); background-size: 200% 100%; animation: shimmer 1.8s infinite; }
@keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }