body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink)}

.top{background:#fff;border-bottom:1px solid var(--line);padding:14px 22px;display:flex;align-items:center;gap:10px}
.top img{height:24px;width:auto;display:block}
.top a{margin-left:auto;color:var(--navy);font-weight:700;font-size:14px;text-decoration:none}
.top a:hover{text-decoration:underline}

.page{min-height:calc(100vh - 53px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;gap:14px}
.page > *{width:100%;max-width:560px}

.card{background:#fff;border:1px solid rgba(8,11,66,.07);border-radius:18px;box-shadow:0 2px 4px rgba(8,11,66,.04),0 14px 40px rgba(8,11,66,.09);padding:28px 32px;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}

.card-hd{margin-bottom:20px}
.card-hd h2{font-size:22px;font-weight:800;color:var(--navy);margin:0 0 4px;letter-spacing:-.02em}
.card-hd p{color:var(--muted);font-size:14px;margin:0}

.steps{display:flex;gap:8px;margin-bottom:22px}
.step{flex:1;height:4px;border-radius:4px;background:var(--line)}
.step.on{background:#7714FD}

h1{font-size:22px;font-weight:800;color:var(--navy);margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 22px;font-size:14px}
label{display:block;font-weight:700;color:var(--navy);margin:14px 0 6px;font-size:13px}
input,select,textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px;font:inherit;background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
textarea{min-height:72px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:#7714FD;box-shadow:0 0 0 3px rgba(119,20,253,.10)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.btn{display:block;width:100%;background:var(--grad);color:#fff;border:0;border-radius:10px;padding:13px 22px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(119,20,253,.20);margin-top:20px;transition:transform var(--t-fast),box-shadow var(--t-fast);text-align:center}
.btn:disabled{opacity:.6;cursor:default}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 24px rgba(119,20,253,.30)}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover:not(:disabled){background:#f9f9fb;transform:none;box-shadow:none}

.nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;max-height:300px;overflow:auto}
.num{border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;cursor:pointer;font-weight:700;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.num:hover{border-color:#c4b5fd}
.num.sel{border-color:#7714FD;background:rgba(119,20,253,.05)}
.num small{color:var(--muted);font-weight:600}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.plan{border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;cursor:pointer;position:relative}
.plan:hover{border-color:#c4b5fd}
.plan.sel{border-color:#7714FD;background:rgba(119,20,253,.05)}
.plan .pn{font-weight:800;color:var(--navy);font-size:15px}
.plan .pp{color:var(--accent-ink);font-weight:800;font-size:15px;margin:3px 0 1px}
.plan .pp span{color:var(--muted);font-weight:600;font-size:12px}
.plan .pc{color:var(--muted);font-weight:600;font-size:12px}
.plan .tag{position:absolute;top:10px;right:12px;font-size:10px;font-weight:700;color:#7714FD;border:1px solid #7714FD;border-radius:999px;padding:1px 7px}

.err{background:#fdeaed;border:1px solid #f3c2ca;color:#a23341;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;margin-top:14px}
.muted{color:var(--muted);font-size:12px;margin:4px 0 0}
.legal{color:var(--muted);font-size:12px;text-align:center;margin:0}
.legal a{color:inherit;text-decoration:underline}