:root {
  --void:#0B0C10; --panel:#14161D; --panel-2:#1B1E27; --line:#262A35; --line-2:#333846;
  --ink:#EDF0F5; --muted:#9199AC; --faint:#606877;
  --amber:#FFB020; --amber-2:#FFC352; --amber-soft:rgba(255,176,32,.14); --amber-line:rgba(255,176,32,.38);
  --live:#FF4438;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Bricolage Grotesque','Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'Courier New',monospace;
  /* legacy names used by markup */
  --primary-color: var(--amber); --primary-hover: var(--amber-2); --primary-light: var(--amber-soft); --primary-border: var(--amber-line);
  --text-dark: var(--ink); --text-medium: var(--muted); --text-light: var(--faint);
  --bg-light: var(--panel-2); --border-color: var(--line);
  --success-color: #3DD68C; --success-bg: rgba(61,214,140,.14);
  --danger-color: #FF6B61; --danger-bg: rgba(255,68,56,.14);
  --warning-color: var(--amber); --warning-bg: var(--amber-soft);
}
*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--sans); background: var(--void); color: var(--ink); min-height: 100vh; font-size: 14px; position: relative; -webkit-font-smoothing: antialiased; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 46% at 82% 6%, rgba(255,176,32,.11), transparent 62%), radial-gradient(48% 40% at 6% 92%, rgba(88,132,255,.05), transparent 60%); }
.floating-shapes { display: none; }
a { color: inherit; }

.container { max-width: 560px; margin: 0 auto; padding: 44px 20px 60px; position: relative; z-index: 1; }
.brand { text-align: center; margin-bottom: 26px; }
.brand-logo { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.brand h1 { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; margin-bottom: 6px; line-height: 1.1; }
.brand p { color: var(--muted); font-size: 14px; }

.card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 16px; padding: 26px; margin-bottom: 18px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--amber-soft); color: var(--amber); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; border: 1px solid var(--amber-line); font-family: var(--mono); }
.step-header h2 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #fff; }

label { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--void); color: var(--ink); font-size: 14px; font-family: inherit; transition: border-color .15s, box-shadow .15s; color-scheme: dark; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
input[readonly] { background: var(--panel); color: var(--muted); cursor: default; }

.mac-input-wrap { border: 1px solid var(--amber-line); border-radius: 12px; background: rgba(255,176,32,.06); padding: 3px; }
.mac-input-wrap input { background: transparent; border: none; text-align: center; font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: .12em; color: #fff; padding: 13px 14px; }
.mac-input-wrap input:focus { box-shadow: none; }
.mac-input-wrap input::placeholder { color: var(--faint); font-weight: 400; letter-spacing: .06em; opacity: 1; }

.captcha-row { display: flex; align-items: stretch; gap: 10px; }
.captcha-box { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 10px; flex-shrink: 0; }
.captcha-img { display: block; height: 40px; width: auto; border-radius: 6px; user-select: none; }
.captcha-refresh { cursor: pointer; color: var(--muted); transition: color .15s ease, transform .3s ease; padding: 4px; }
.captcha-refresh:hover { color: var(--amber); transform: rotate(180deg); }
#captcha-a, #bn-captcha { flex: 1; text-align: center; font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

.btn-main { width: 100%; padding: 14px; background: var(--amber); color: #221700; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; transition: background .15s, transform .15s; font-family: inherit; box-shadow: 0 8px 24px -8px rgba(255,176,32,.55); }
.btn-main:hover:not(:disabled) { background: var(--amber-2); transform: translateY(-1px); }
.btn-main:disabled { background: var(--line-2); color: var(--faint); cursor: not-allowed; box-shadow: none; }

.device-summary { background: var(--void); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.device-summary-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border: 1px solid transparent; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.st-active { background: var(--success-bg); color: var(--success-color); border-color: rgba(61,214,140,.35); }
.status-badge.st-trial { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.status-badge.st-expired { background: var(--danger-bg); color: var(--danger-color); border-color: rgba(255,68,56,.4); }
.status-badge.st-revoked { background: rgba(167,139,250,.14); color: #C4B5FD; border-color: rgba(167,139,250,.35); }
.status-badge.st-banned { background: var(--danger-bg); color: var(--danger-color); border-color: rgba(255,68,56,.4); }
.device-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 12.5px; }
.device-info-grid .lbl { color: var(--faint); }
.device-info-grid .val { color: var(--ink); font-weight: 500; font-family: var(--mono); word-break: break-all; }

.pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.pkg { border: 1px solid var(--line-2); border-radius: 14px; padding: 24px 16px 20px; text-align: center; cursor: pointer; background: var(--void); transition: all .15s; position: relative; }
.pkg:hover { border-color: var(--amber-line); transform: translateY(-2px); }
.pkg.selected { border-color: var(--amber); background: var(--amber-soft); }
.pkg .pkg-name { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-bottom: 8px; }
.pkg .pkg-price { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; margin-bottom: 4px; line-height: 1; }
.pkg.selected .pkg-price { color: var(--amber); }
.pkg .pkg-days { font-size: 12px; color: var(--faint); }
.badge-pop, .badge-best { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; padding: 3px 10px; border-radius: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.badge-pop { background: var(--amber); color: #221700; }
.badge-best { background: var(--success-color); color: #05291a; }

.summary-box { background: var(--void); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 6px; gap: 12px; }
.summary-row .lbl { color: var(--faint); }
.summary-row .val { color: var(--ink); font-weight: 600; text-align: right; }
.summary-row.total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 15px; }
.summary-row.total .val { font-family: var(--display); color: var(--amber); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }

.pm-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.pm { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 14px; cursor: pointer; background: var(--void); transition: all .15s; }
.pm:hover { border-color: var(--amber-line); }
.pm.selected { border-color: var(--amber); background: var(--amber-soft); }
.pm-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.pm-info { flex: 1; min-width: 0; }
.pm-info .pm-name { font-size: 14px; font-weight: 600; color: #fff; }
.pm-info .pm-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pm-tag { margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 3px 8px; border-radius: 20px; background: var(--success-bg); color: var(--success-color); border: 1px solid rgba(61,214,140,.3); flex-shrink: 0; }
.pm-tag.manual { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }

.error-msg { background: var(--danger-bg); border: 1px solid rgba(255,68,56,.4); color: #FFB4AE; padding: 10px 14px; border-radius: 10px; font-size: 13px; }
.success-msg { background: var(--success-bg); border: 1px solid rgba(61,214,140,.35); color: #9FF0C7; padding: 10px 14px; border-radius: 10px; font-size: 13px; }

.pay-panel { border-top: 1px solid var(--line); padding-top: 18px; }
.instr-box { background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #FFE1A6; line-height: 1.5; margin-bottom: 14px; white-space: pre-line; }
.field-help { font-size: 11px; color: var(--muted); margin-top: 6px; }
.field-help a { color: var(--amber); font-weight: 600; text-decoration: none; }
.mac-hint { font-size: 11.5px; color: var(--faint); text-align: center; margin-top: 8px; }

.crypto-btn-row { display: flex; gap: 10px; margin-bottom: 14px; }
.crypto-btn-row button { flex: 1; padding: 10px; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; color: white; font-family: inherit; }
.btc-btn { background: #f7931a; }
.usdt-btn { background: #26a17b; }
.addr-box { background: var(--void); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; font-family: var(--mono); font-size: 12px; word-break: break-all; display: flex; align-items: center; gap: 8px; }
.copy-btn { background: var(--amber); color: #221700; border: none; border-radius: 8px; padding: 7px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; font-family: inherit; }
.copy-btn:hover { background: var(--amber-2); }

.contact { text-align: center; font-size: 12px; color: var(--faint); margin-top: 22px; }
.contact a { color: var(--amber); text-decoration: none; font-weight: 500; }
.contact a:hover { text-decoration: underline; }

.form-stack > * + * { margin-top: 16px; }

/* One-card wizard: tabs on top, a single visible pane, auto-advance. */
.wz-tabs { display: flex; gap: 6px; margin: -4px 0 22px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.wz-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border: 1px solid var(--line); background: var(--void); color: var(--faint); border-radius: 10px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: default; transition: all .15s; }
.wz-tab .n { width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.wz-tab.active { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.wz-tab.active .n { background: var(--amber); border-color: var(--amber); color: #221700; }
.wz-tab.done { background: var(--void); border-color: rgba(61,214,140,.35); color: var(--success-color); cursor: pointer; }
.wz-tab.done .n { background: var(--success-bg); border-color: rgba(61,214,140,.35); color: var(--success-color); }
.wz-tab.done:hover { background: var(--success-bg); }
.wz-pane { animation: wzIn .2s ease-out; }
.wz-pane[hidden] { display: none; }
@keyframes wzIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wz-back { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; margin-top: 14px; }
.wz-back:hover { color: var(--amber); text-decoration: underline; }

input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 400; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .device-info-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .container { padding: 20px 12px 40px; }
  .brand h1 { font-size: 26px; }
  .card { padding: 20px 14px; }
  .wz-tab { font-size: 12px; padding: 9px 4px; gap: 6px; }
  .wz-tab .n { width: 20px; height: 20px; font-size: 10px; }
  .mac-input-wrap input { font-size: 16px; letter-spacing: .08em; padding: 12px 8px; }
  .captcha-box { padding: 4px 6px; gap: 4px; }
  .captcha-img { height: 36px; }
  #captcha-a, #bn-captcha { font-size: 16px; letter-spacing: .12em; }
  .summary-row.total .val { font-size: 18px; }
  .pm { gap: 10px; padding: 12px; }
  .pm-icon { width: 36px; height: 36px; font-size: 16px; }
  .pm-tag { display: none; }
  .pm-info .pm-desc { font-size: 11px; }
}