:root { color-scheme: light; }
body {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
}

.panel-card {
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, .04), transparent 50%),
    linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(244, 247, 255, .92));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

.field-input {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(148, 163, 184, .22);
  color: #0f172a;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, .48);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .10);
  background: rgba(255, 255, 255, .7);
}
.field-input::placeholder { color: #94a3b8; }

.btn-save {
  background: #4f46e5;
  color: #fff;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .22);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn-save:hover {
  background: #4338ca;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(79, 70, 229, .28);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, .2);
  color: #64748b;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.btn-ghost:hover {
  background: rgba(148, 163, 184, .08);
  border-color: rgba(148, 163, 184, .3);
  color: #475569;
}

.btn-danger {
  background: rgba(244, 63, 94, .06);
  border: 1px solid rgba(244, 63, 94, .15);
  color: #e11d48;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-danger:hover {
  background: rgba(244, 63, 94, .12);
  border-color: rgba(244, 63, 94, .25);
  color: #be123c;
}

.row-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(248, 250, 252, .9));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 16px;
}

.status-badge {
  transition: opacity .3s ease;
}

.eyebrow {
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.section-header {
  border-bottom: 1px solid rgba(148, 163, 184, .2);
}

/* — dark theme — */

.dark { color-scheme: dark; }
html.dark body {
  background-color: #020617;
  color: #e2e8f0;
}

.dark .panel-card {
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, .06), transparent 50%),
    linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .98));
  border-color: rgba(148, 163, 184, .12);
  box-shadow: 0 20px 50px rgba(2, 6, 23, .3);
}

.dark .field-input {
  background: rgba(2, 6, 23, .6);
  border-color: rgba(71, 85, 105, .5);
  color: #e2e8f0;
}
.dark .field-input:focus {
  border-color: rgba(129, 140, 248, .5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
  background: rgba(2, 6, 23, .8);
}
.dark .field-input::placeholder { color: rgba(148, 163, 184, .5); }

.dark .btn-save {
  box-shadow: 0 8px 20px rgba(79, 70, 229, .3);
}
.dark .btn-save:hover {
  box-shadow: 0 12px 28px rgba(79, 70, 229, .4);
}

.dark .btn-ghost {
  background: rgba(30, 41, 59, .6);
  border-color: rgba(71, 85, 105, .4);
  color: #cbd5e1;
}
.dark .btn-ghost:hover {
  background: rgba(30, 41, 59, .8);
  border-color: rgba(99, 102, 241, .3);
  color: #e2e8f0;
}

.dark .btn-danger {
  background: rgba(244, 63, 94, .1);
  border-color: rgba(244, 63, 94, .2);
  color: #fda4af;
}
.dark .btn-danger:hover {
  background: rgba(244, 63, 94, .18);
  border-color: rgba(244, 63, 94, .35);
  color: #fecdd3;
}

.dark .row-card {
  background: rgba(15, 23, 42, .5);
  border-color: rgba(71, 85, 105, .35);
}

.dark .section-header {
  border-color: rgba(71, 85, 105, .2);
}