:root {
  --bg: #f7f9ff;
  --card: #ffffffcc;
  --primary: #596bff;
  --primary-dark: #4254eb;
  --text: #17203a;
  --muted: #667085;
  --ring: rgba(89, 107, 255, 0.25);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top right, #d7e3ff 0, transparent 35%), var(--bg);
  min-height: 100vh;
}
.wrap { max-width: 980px; margin: 0 auto; padding: 28px 16px 56px; }
.hero { text-align: center; margin-bottom: 20px; animation: fadeIn .7s ease; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.hero p { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 14px; }
.card {
  backdrop-filter: blur(8px);
  background: var(--card);
  border-radius: 18px;
  border: 1px solid #e4e9ff;
  padding: 18px;
  box-shadow: 0 20px 30px -25px rgba(66, 84, 235, .45);
  animation: rise .45s ease;
}
label { font-size: .9rem; font-weight: 600; margin-top: 8px; display: block; }
input, select, textarea, button {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #d0d7f3;
  padding: 12px;
  margin-top: 8px;
  margin-bottom: 8px;
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}
textarea { min-height: 140px; resize: vertical; }
.counter { text-align: right; color: var(--muted); font-size: .86rem; margin-bottom: 8px; }
button { cursor: pointer; font-weight: 700; transition: transform .2s ease, background .2s ease; }
button:hover { transform: translateY(-2px); }
.primary { background: linear-gradient(135deg, var(--primary), #7f8dff); color: white; border: none; }
.primary:hover { background: linear-gradient(135deg, var(--primary-dark), #6b79ff); }
.secondary { background: #eff2ff; color: var(--primary-dark); border: 1px solid #c8d2ff; }
.ghost { background: white; color: #334155; }
.inline { display: inline-block; text-decoration: none; text-align: center; }
#msg { min-height: 22px; font-weight: 600; }
.modal { border: none; border-radius: 16px; max-width: 420px; width: calc(100% - 32px); padding: 18px; }
.modal::backdrop { background: rgba(10, 20, 40, .45); backdrop-filter: blur(3px); }
ul { padding-left: 18px; }
li { margin: 10px 0; }
.admin h1 { text-align:center; }
@keyframes fadeIn { from { opacity:0; transform: translateY(-8px);} to {opacity:1; transform: translateY(0);} }
@keyframes rise { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform: translateY(0);} }