:root{
  --bg:#0e0f12; --panel:#15171c; --text:#e8ecf1; --muted:#a7b0bd; --accent:#5eead4; --accent2:#60a5fa; --danger:#f87171;
  --border:#252833;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background:var(--bg);color:var(--text);}
.wrap{max-width:900px;margin:0 auto;padding:24px;}
header{margin:8px 0 24px 0;}
h1{font-size:28px;margin:0 0 8px}
h3{margin:0 0 8px}
.sub{color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:flex;flex-direction:column;font-size:14px;color:var(--muted)}
input,select,textarea{margin-top:6px;background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:12px;color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent2)}
.span-2{grid-column:span 2}
.summary{display:flex;gap:24px;align-items:center;padding:12px 16px;border:1px dashed var(--border);border-radius:12px}
.primary{grid-column:span 2;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b1220;
  border:none;border-radius:14px;padding:14px 18px;font-weight:700;cursor:pointer}
.btn{display:inline-block;background:var(--panel);border:1px solid var(--border);padding:10px 14px;border-radius:10px;color:var(--text);text-decoration:none}
.card{background:var(--panel);border:1px solid var(--border);padding:16px;border-radius:14px}
footer{margin-top:36px;color:var(--muted);font-size:12px}
@media (max-width:720px){.grid{grid-template-columns:1fr} .span-2{grid-column:span 1}}