:root { --bg: #050915; --card:#0b1226; --text:#eaf0ff; --muted:#9fb3ff; --accent:#7aa2ff; --ok:#3ecf8e; --warn:#ffbf69; --err:#ff6b6b; --glass: rgba(255,255,255,0.06); }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  background:
    radial-gradient(1200px 500px at 80% -10%, #1a3780 0%, transparent 55%),
    radial-gradient(900px 400px at -10% 10%, #12204f 0%, transparent 60%),
    var(--bg);
  color:var(--text);
}
.container { max-width: 1000px; margin: 0 auto; padding: 0 1rem; }
.card { background:var(--card); border-radius:18px; padding:1.25rem; box-shadow: 0 10px 40px rgba(0,0,0,0.35); border:1px solid #1a2441; }
h1,h2,h3 { margin-top:0; letter-spacing:.2px }
p { line-height:1.55 }
input, select, textarea, button { width:100%; padding:.85rem 1rem; margin:.25rem 0 .85rem; border-radius:12px; border:1px solid #26304d; background:#0f1526; color:var(--text); transition: transform .05s ease; }
input:focus, select:focus, textarea:focus { outline:none; border-color:#3952a3; box-shadow: 0 0 0 4px #1b2d67; }
button, .btn { cursor:pointer; border:none; background:linear-gradient(180deg, #8ab3ff, #678bdf); color:#071126; font-weight:800; letter-spacing:.2px; }
button:hover, .btn:hover { transform: translateY(-1px); }
.btn-inline { display:inline-block; width:auto; padding:.6rem 1rem; border-radius:10px; margin-right:.5rem; }
table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding:.6rem; border-bottom: 1px solid #25304b; vertical-align: top; }
.badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.8rem; border:1px solid #2a3557; background:#0e1531; color: var(--muted); }
.badge.ok { background: #102921; color: var(--ok); border-color:#1b5a42; }
.badge.err { background: #2b1717; color: var(--err); border-color:#6a2929; }
.badge.neu { background: #0e1531; color: var(--muted); }
.flex { display:flex; gap:1rem; align-items:center; flex-wrap: wrap; }
.grid { display:grid; gap:1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.small { font-size:.9rem; color:var(--muted); }

a { color: var(--muted); text-decoration: none; }
a:hover { text-decoration: underline; }

header { position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(12,20,43,.9), rgba(12,16,32,.6)); border-bottom:1px solid #1a2441; }
header .container { display:flex; align-items:center; justify-content:space-between; padding:1rem; }
.logo { font-weight:900; letter-spacing:.6px; font-size:1.05rem; }
nav a { margin-left:1rem; }

.hero { padding: 4rem 0 2rem; text-align:center; }
.hero .title { font-size: clamp(1.8rem, 2.8vw, 3rem); font-weight:900; }
.hero .sub { color:var(--muted); max-width:680px; margin: .5rem auto 0; }

.glass { background: var(--glass); border:1px solid #243055; border-radius:20px; }

.stepper { display:flex; justify-content:center; gap:.75rem; margin: .5rem 0 1rem; }
.dot { width:10px; height:10px; border-radius:50%; background:#2a3a6a; border:1px solid #3c4d86; box-shadow: inset 0 0 0 2px #0b1226; }
.dot.active { background:#89acff; box-shadow:none; }
.panel { padding:1.25rem; border-radius:16px; background: #0f1526; border:1px solid #23335c; }
.panel h3 { margin-bottom:.25rem; }
.form-actions { display:flex; gap:.75rem; justify-content:flex-end; }
.kicker { font-size:.8rem; text-transform: uppercase; letter-spacing: .18em; color:#8aa2ff; }
.list-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.gift { background:#0f1526; border:1px solid #20315b; border-radius:16px; padding:1rem; }
.gift img { width:100%; height:150px; object-fit: cover; border-radius:12px; border:1px solid #1a2441; background:#0b1226; }
footer { color:#7f93d8; text-align:center; padding:2rem 0; font-size:.9rem; }