:root {
  --background: 252 80% 98%;
  --foreground: 258 34% 12%;
  --primary: 264 90% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 326 86% 58%;
  --secondary-foreground: 0 0% 100%;
  --muted: 254 35% 92%;
  --muted-foreground: 257 16% 43%;
  --destructive: 0 82% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 256 28% 84%;
  --card: 0 0% 100%;
  --success: 148 68% 38%;
  --shadow-sm: 0 8px 24px hsl(260 65% 18% / 0.08);
  --shadow-md: 0 18px 50px hsl(260 65% 18% / 0.14);
  --shadow-lg: 0 30px 90px hsl(260 65% 18% / 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.6rem;
}

.dark {
  --background: 256 36% 9%;
  --foreground: 250 50% 96%;
  --primary: 267 95% 70%;
  --primary-foreground: 258 34% 12%;
  --secondary: 326 92% 68%;
  --secondary-foreground: 258 34% 12%;
  --muted: 255 24% 18%;
  --muted-foreground: 252 22% 74%;
  --destructive: 0 78% 64%;
  --destructive-foreground: 0 0% 100%;
  --border: 255 20% 27%;
  --card: 255 28% 14%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .7; cursor: not-allowed; }

.app-bg {
  background:
    radial-gradient(circle at top left, hsl(var(--secondary) / .28), transparent 32rem),
    radial-gradient(circle at 85% 10%, hsl(var(--primary) / .24), transparent 28rem),
    linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted) / .7));
}

.glass {
  background: hsl(var(--card) / .78);
  backdrop-filter: blur(18px);
}

.logo-burst {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  box-shadow: var(--shadow-sm);
}

.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .95rem;
  border-radius: 999px;
  color: hsl(var(--muted-foreground));
  font-weight: 800;
  transition: var(--transition-fast);
}
.nav-link:hover, .nav-active {
  color: hsl(var(--foreground));
  background: hsl(var(--primary) / .12);
}

.card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--card) / .92);
  box-shadow: var(--shadow-md);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  width: fit-content;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
  font-weight: 900;
  font-size: .88rem;
}

.field-label {
  display: grid;
  gap: .45rem;
  color: hsl(var(--foreground));
  font-weight: 850;
}
.field-input {
  min-height: 50px;
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  padding: .8rem .95rem;
  font-size: max(16px, 1rem);
  outline: none;
  transition: var(--transition-fast);
}
.field-input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / .14);
}

.btn-primary, .btn-secondary, .small-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding: .78rem 1rem;
  font-size: 1rem;
  font-weight: 950;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  text-align: center;
}
.btn-primary {
  border: 0;
  color: white;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  box-shadow: var(--shadow-sm);
}
.btn-secondary {
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / .72);
}
.btn-primary:hover, .btn-secondary:hover, .small-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.small-action {
  min-height: 44px;
  padding: .55rem .85rem;
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / .22);
}

.error-box {
  border: 1px solid hsl(var(--destructive) / .35);
  background: hsl(var(--destructive) / .1);
  color: hsl(var(--destructive));
  border-radius: var(--radius-md);
  padding: .9rem 1rem;
  font-weight: 800;
}
.ok-text {
  color: hsl(var(--success));
  font-weight: 850;
}

.status-card, .success-box {
  border-radius: var(--radius-lg);
  padding: 1rem;
  border: 1px solid hsl(var(--primary) / .25);
  background: linear-gradient(135deg, hsl(var(--primary) / .11), hsl(var(--secondary) / .10));
}
.success-box {
  border-color: hsl(var(--success) / .32);
  background: linear-gradient(135deg, hsl(var(--success) / .12), hsl(var(--primary) / .08));
}

.mini-card {
  min-height: 92px;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: hsl(var(--muted) / .72);
  border: 1px solid hsl(var(--border));
  display: grid;
  gap: .55rem;
}
.mini-card span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: hsl(var(--secondary) / .15);
  color: hsl(var(--secondary));
  font-weight: 950;
}
.mini-card p { font-weight: 850; }

.record-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--card) / .92);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: hsl(var(--success) / .12);
  color: hsl(var(--success));
  font-size: .85rem;
  font-weight: 950;
}
.empty-illustration {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, hsl(var(--primary) / .14), hsl(var(--secondary) / .16));
  font-size: 2rem;
}

@media (max-width: 420px) {
  .record-card { grid-template-columns: 1fr; }
  .record-card .text-right { text-align: left; }
}