:root { --bg:#f5f5f4; --card:#fff; --ink:#1c1917; --muted:#78716c; --line:#e7e5e4; --accent:#0f766e; }
* { box-sizing:border-box }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink); line-height:1.5 }
a { color:var(--accent) }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5 }
.brand { font-weight:700; text-decoration:none; color:var(--ink); font-size:18px }
.brand span { font-weight:400; color:var(--muted); font-size:13px; margin-left:8px }
.cart-link { text-decoration:none; color:var(--accent); font-weight:600; white-space:nowrap }
.cart-link b { background:var(--accent); color:#fff; border-radius:999px; padding:2px 8px; margin-left:4px; font-size:12px }
.wrap { max-width:960px; margin:0 auto; padding:20px 16px 60px }
h1 { font-size:26px; margin:8px 0 12px } h2 { font-size:18px; margin:0 0 12px }
.hero p { margin:0 0 20px; color:var(--muted) }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px }
.tile { aspect-ratio:1; border-radius:10px; background:linear-gradient(145deg, var(--tone) 0%, var(--tone) 60%, rgba(255,255,255,.35) 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-size:56px; font-weight:700 }
.card h3 { margin:0; font-size:16px }
.desc { margin:0; color:var(--muted); font-size:13px; flex:1 }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px }
.price { font-weight:700 }
.btn { border:1px solid var(--accent); background:#fff; color:var(--accent); border-radius:8px; padding:8px 14px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; font-size:14px; line-height:1.3 }
.btn.primary { background:var(--accent); color:#fff }
.btn.small { padding:4px 10px; font-size:13px }
.cart, .panel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px }
.cart { margin-top:32px }
table { width:100%; border-collapse:collapse }
td, th { padding:8px 6px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; vertical-align:top }
th { color:var(--muted); font-weight:600 }
td.num, th.num { text-align:right; white-space:nowrap }
tfoot th { color:var(--ink) }
.qty { display:inline-flex; align-items:center; gap:8px }
.qty form, .row form { display:inline; margin:0 }
.total { font-size:18px; font-weight:700 }
.muted { color:var(--muted) }
.flash { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; padding:10px 14px; border-radius:8px; margin-bottom:16px }
.err { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:10px 14px; border-radius:8px; margin-bottom:16px }
form.checkout label { display:block; margin:12px 0 4px; font-weight:600; font-size:14px }
form.checkout input { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; font-size:15px }
.pay { display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media (max-width:720px) { .pay { grid-template-columns:1fr } }
.qrbox { display:flex; justify-content:center; padding:12px; background:#fff; border:1px dashed var(--line); border-radius:10px }
#qr img, #qr canvas { max-width:100%; height:auto }
.timer { font-variant-numeric:tabular-nums; font-weight:700 }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; vertical-align:middle }
.pill.PENDING { background:#fef3c7; color:#92400e }
.pill.PAID { background:#dcfce7; color:#166534 }
.pill.EXPIRED, .pill.FAILED, .pill.CANCELLED { background:#fee2e2; color:#991b1b }
.pill.NEW, .pill.REFUNDED { background:#e5e7eb; color:#374151 }
.big { font-size:28px; font-weight:800; margin:4px 0 8px }
.kv { display:grid; grid-template-columns:110px 1fr; gap:4px 10px; font-size:14px; margin:0 }
.kv dt { color:var(--muted) } .kv dd { margin:0; word-break:break-all }
.foot { max-width:960px; margin:0 auto; padding:0 16px 30px; color:var(--muted); font-size:12px }
.success-icon { font-size:48px }
.methods { display:flex; flex-direction:column; gap:8px }
.method { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer }
.method input { margin-top:4px }
.method small { color:var(--muted) }
.banks { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 4px 28px }
.bank { border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:14px; cursor:pointer }
.vabox { display:flex; align-items:center; gap:12px; background:#f0fdfa; border:1px dashed var(--accent); border-radius:10px; padding:14px 16px; margin:8px 0 12px }
.vabox span { font-size:26px; font-weight:800; letter-spacing:1px; font-variant-numeric:tabular-nums; word-break:break-all }
.pill.HELD { background:#fef3c7; color:#92400e }
details summary { cursor:pointer; color:var(--accent); font-weight:600 }
details ol { padding-left:20px; margin:8px 0 0 }