*{box-sizing:border-box}
:root{
 --bg:#28262c;--top:#35323a;--bottom:#242229;--line:rgba(255,255,255,.09);
 --text:#fff;--muted:rgba(255,255,255,.58);--gold:#f4cb50;--silver:#e3e5e9;--bronze:#d48746;
 --success:#f4cb50;--danger:#e0a0a0;
}
html,body{margin:0;padding:0;background:transparent}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);overflow-x:hidden}
.wrap{width:100%;margin:0;padding:0}
.panel{
 width:100%;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:20px;
 background:radial-gradient(circle at 8% 0%,rgba(255,255,255,.07),transparent 28%),
 linear-gradient(145deg,var(--top),var(--bg) 58%,var(--bottom));
 box-shadow:0 12px 30px rgba(0,0,0,.25)
}
.accent{height:4px;background:linear-gradient(90deg,var(--gold),#dddfe4,var(--bronze))}
header{text-align:center;padding:12px 12px 10px}
.eyebrow{font-size:9px;font-weight:800;letter-spacing:.25em;color:rgba(255,255,255,.42);margin-bottom:4px}
h1{margin:0;line-height:1.05;letter-spacing:-.035em;font-size:clamp(23px,4vw,31px)}
.subtitle{margin-top:5px;color:var(--muted);font-size:12px}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 9px 9px}
.field{display:block;min-width:0;padding:9px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}
.field>span{display:block;margin-bottom:5px;color:rgba(255,255,255,.43);font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
select,input{
 width:100%;border:1px solid rgba(255,255,255,.10);border-radius:10px;outline:none;
 background:rgba(0,0,0,.17);color:#fff;font:inherit;font-size:13px;font-weight:700;
 transition:border-color .18s ease,background .18s ease,box-shadow .18s ease
}
select{height:38px;padding:0 30px 0 10px;appearance:auto;color-scheme:dark}
input{height:40px;padding:0 64px 0 11px;font-size:15px}
select:focus,input:focus{border-color:rgba(244,203,80,.72);box-shadow:0 0 0 3px rgba(244,203,80,.10);background:rgba(0,0,0,.23)}
.event-field,.result-field{grid-column:1/-1}
.input-wrap{position:relative}
.input-wrap b{position:absolute;right:7px;top:50%;transform:translateY(-50%);padding:4px 7px;border-radius:7px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.52);font-size:8px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.field small{display:block;margin-top:5px;color:rgba(255,255,255,.38);font-size:9px;line-height:1.35}

.result-card{
 margin:0 9px 9px;padding:13px 12px 12px;text-align:center;border:1px solid var(--line);border-radius:14px;
 background:radial-gradient(circle at 50% 0%,rgba(244,203,80,.09),transparent 58%),rgba(0,0,0,.14)
}
.result-kicker{font-size:8px;font-weight:800;letter-spacing:.18em;color:rgba(255,255,255,.37)}
.result-card strong{display:block;margin-top:5px;font-size:clamp(24px,4vw,34px);line-height:1.05;letter-spacing:-.035em;color:var(--silver)}
.result-card.is-class strong{color:var(--success)}
.result-card.is-none strong{color:var(--danger);font-size:clamp(20px,3.6vw,29px)}
.result-detail{margin-top:6px;color:var(--muted);font-size:10px;line-height:1.4}

.footer-note{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 9px 9px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.34);font-size:8px}
.footer-note b{color:rgba(255,255,255,.58);letter-spacing:.07em}

@media(max-width:520px){
 .panel{border-radius:17px}
 header{padding:10px 8px 8px}
 .form-grid{gap:5px;padding:0 7px 7px}
 .field{padding:8px 7px;border-radius:12px}
 select{font-size:12px}
 .result-card{margin:0 7px 7px}
 .footer-note{margin:0 7px 7px}
}
@media(max-width:360px){
 .form-grid{grid-template-columns:1fr}
 .event-field,.result-field{grid-column:auto}
}