:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  --purple-950: #16051f;
  --purple-900: #241033;
  --purple-850: #301346;
  --purple-800: #3f1d5f;
  --purple-700: #5b2a86;
  --gold-500: #f5c84c;
  --gold-400: #ffd970;
  --gold-300: #ffe8a3;
  --cream: #fff7dd;
  --text: #f8edff;
  --muted: #d9c5e8;
  background: var(--purple-950);
  color: var(--text);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(245, 200, 76, .22), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(132, 71, 180, .36), transparent 34rem),
    linear-gradient(135deg, var(--purple-950), #21092f 48%, #12041b);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(90deg, rgba(36,16,51,.96), rgba(63,29,95,.94));
  border-bottom: 1px solid rgba(245, 200, 76, .45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .32);
}

header strong {
  color: var(--gold-400);
  letter-spacing: .03em;
  text-shadow: 0 0 18px rgba(245, 200, 76, .28);
}

a {
  color: var(--gold-300);
  text-decoration: none;
  margin-left: 1rem;
  font-weight: 600;
}

a:hover {
  color: var(--cream);
  text-shadow: 0 0 12px rgba(245, 200, 76, .45);
}

main { max-width: 1050px; margin: 2rem auto; padding: 0 1rem; }

.card {
  background: linear-gradient(180deg, rgba(48,19,70,.94), rgba(28,8,40,.96));
  border: 1px solid rgba(245, 200, 76, .35);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.06);
}

.card h1, .card h2 { color: var(--gold-400); }
.narrow { max-width: 520px; margin: 0 auto; }
label { display: block; margin: .8rem 0; color: var(--gold-300); }

input, textarea, select {
  width: 100%;
  box-sizing: border-box;
  padding: .75rem;
  border-radius: 11px;
  border: 1px solid rgba(245, 200, 76, .38);
  background: rgba(22, 5, 31, .9);
  color: var(--text);
  outline: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(245, 200, 76, .18);
}

button {
  padding: .7rem 1rem;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--gold-500), #b7791f);
  color: #1b0b24;
  cursor: pointer;
  margin: .25rem;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(245, 200, 76, .18);
}

button:hover { background: linear-gradient(135deg, var(--gold-400), #d69e2e); }
button.danger { background: linear-gradient(135deg, #ef4444, #991b1b); color: white; }

.flashes { margin-bottom: 1rem; }
.flash { padding: .75rem; border-radius: 10px; margin: .5rem 0; border: 1px solid rgba(255,255,255,.12); }
.flash.success { background: rgba(80, 62, 10, .9); color: var(--gold-300); }
.flash.error { background: rgba(127, 29, 29, .92); color: #ffe4e6; }

.answer {
  white-space: pre-wrap;
  background: rgba(16, 3, 24, .92);
  border: 1px solid rgba(245, 200, 76, .28);
  border-radius: 14px;
  min-height: 12rem;
  padding: 1rem;
  overflow: auto;
  box-shadow: inset 0 0 28px rgba(0,0,0,.25);
}

.user-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr auto auto;
  gap: .5rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid rgba(245, 200, 76, .22);
}

.grid-form { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: .75rem; align-items: end; }
.wrap { white-space: normal; overflow-wrap: anywhere; display: block; background: rgba(16, 3, 24, .92); padding: .75rem; border-radius: 10px; color: var(--gold-300); }

@media (max-width: 800px) {
  .user-row { grid-template-columns: 1fr; }
  header { align-items: flex-start; flex-direction: column; gap: .75rem; }
  a { margin: 0 .75rem 0 0; }
}