.hero{ text-align:center; padding:8px 0 28px; }
.hero .mark{ width:64px; height:64px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; }
.hero .mark svg{ width:32px; height:32px; }
.hero .mark.ok{ background:var(--good-bg); color:var(--good); }
.hero .mark.wait{ background:var(--warn-bg); color:var(--warn); }
.hero .mark.no{ background:var(--bad-bg); color:var(--bad); }
.hero h1{ margin:0 0 8px; font-size:clamp(28px,4vw,38px); letter-spacing:-0.03em; line-height:1.2; }
.hero p{ margin:0; color:var(--text-2); font-size:16.5px; }
.kv{ display:grid; grid-template-columns:110px 1fr; gap:8px 14px; font-size:15px; }
.kv dt{ color:var(--text-2); } .kv dd{ margin:0; font-weight:500; }
.steps{ list-style:none; margin:0; padding:0; position:relative; }
.steps li{ position:relative; display:grid; grid-template-columns:30px 1fr; gap:14px; padding:0 0 22px; }
.steps li:last-child{ padding-bottom:0; }
.steps li::before{ content:""; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:var(--line); }
.steps li:last-child::before{ display:none; }
.steps li.done::before{ background:var(--good); }
.steps .dot{ width:30px; height:30px; border-radius:50%; border:2px solid var(--line); background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--text-2); position:relative; z-index:1; }
.steps li.done .dot{ background:var(--good); border-color:var(--good); color:#fff; }
.steps li.cur .dot{ border-color:var(--accent); color:var(--accent); }
.steps b{ display:block; font-size:15.5px; padding-top:4px; }
.steps small{ font-size:13px; color:var(--text-2); }
.acct{ background:var(--panel-2); border-radius:14px; padding:18px; }
.acct .big{ font-size:22px; font-weight:700; letter-spacing:-0.01em; margin:4px 0; font-variant-numeric:tabular-nums; }
.tl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tl li{ display:flex; gap:12px; font-size:14.5px; } .tl time{ color:var(--text-2); min-width:84px; font-size:13.5px; padding-top:1px; }
.badge{ display:inline-block; font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:980px; background:var(--panel-2); color:var(--text-2); }
.badge.PAID{ background:var(--good-bg); color:var(--good); } .badge.AWAITING_DEPOSIT,.badge.PENDING{ background:var(--warn-bg); color:var(--warn); } .badge.REFUNDED,.badge.FAILED,.badge.EXPIRED,.badge.CANCELED,.badge.PARTIAL_REFUNDED{ background:var(--bad-bg); color:var(--bad); }
