:root{ --fuchsia:#E2017A; --green:#A3C442; --bg:#1A1A24; --bg2:#242433; --card:#121423; --text:#ffffff; --muted:#f1f5f9cc; --line:#2a2a3a; }
*{box-sizing:border-box}
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1600px 800px at 10% 0%, var(--fuchsia) 0%, transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}
.container{max-width:1000px;margin:0 auto;padding:24px}
.hero{display:grid;place-items:center;min-height:70vh}
.card{ background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); backdrop-filter: blur(10px); border:1px solid var(--line); border-radius:28px; padding:40px; text-align:center; box-shadow: 0 15px 40px rgba(0,0,0,0.40);}
.logo{width:140px;height:auto; margin:0 auto 12px; display:block}
h1{font-size: clamp(28px, 4vw, 40px); margin: 6px 0 8px}
.tagline{font-size: clamp(16px,2.4vw,22px); color:#fff; margin: 0 0 18px}
.lead{color:var(--muted); margin:0 0 20px}
.actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; background: var(--green); color:#0f172a; font-weight:800; border:0; transition: transform .08s ease, box-shadow .2s; box-shadow: 0 10px 30px rgba(0,0,0,0.35);}
.btn:hover{transform: translateY(-1px)}
.btn.outline{ background: transparent; color: #fff; border:2px solid var(--green); }
.footer{opacity:.9;text-align:center;margin-top:40px}
.footer a{color:#fff}
form{max-width:820px; margin: 24px auto; background:#0f1120; border:1px solid var(--line); padding:24px; border-radius:16px}
fieldset{border:1px solid var(--line); padding:16px; margin-bottom:16px; border-radius:12px}
legend{padding:0 8px; color:#fce7f3}
label{display:block; margin:10px 0 6px}
input, select, textarea{ width:100%; padding:12px; border-radius:10px; border:1px solid #303040; background:#0a0d18; color:#fff; }
.row{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.row-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.hint{color:#e2e8f0a6; font-size:14px}
.slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px}
.slot{ padding:10px; text-align:center; cursor:pointer; background:#0f1422; border:1px solid #334155; border-radius:10px; color:#ffffff; line-height:1.2; }
.slot:hover{filter:brightness(1.1)}
.slot.selected{outline:2px solid var(--green); outline-offset:2px; background:#111827; color:#ffffff;}
.slot:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
.badge{display:inline-block; border:1px solid var(--line); padding:4px 8px; border-radius:999px; font-size:12px; color:#cbd5e1}
.topbar{display:flex; justify-content:space-between; align-items:center; margin:20px 0}
a.link{color:#fce7f3}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:8px 6px; text-align:left}
.small{font-size:12px;color:#e2e8f0cc}
.content{max-width:900px;margin:20px auto;text-align:left}
.content h2{margin:16px 0 6px;font-size:22px}
.content p{color:#e5e7ebcc}
.content ul{margin:8px 0 16px 18px}