:root { --ink:#172033; --muted:#6c778b; --line:#dce2ec; --paper:#f6f8fb; --card:#fff; --accent:#3157d5; --accent-dark:#233ea2; --success:#1f7a53; --danger:#a33434; --shadow:0 20px 60px rgba(34,49,84,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.store-shell { max-width:1240px; margin:0 auto; padding:0 20px; }
.store-header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; }
.store-brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; }
.store-brand__mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--ink); color:#fff; }
.store-brand__logo { display:block; height:40px; width:auto; max-width:180px; }
.store-nav { display:none; gap:4px; color:var(--muted); font-size:16px; }
.store-nav a { position:relative; z-index:1; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; color:var(--muted); font-weight:600; transition:color .2s; }
.store-nav a::before { content:""; position:absolute; z-index:-1; inset:0; border-radius:999px; background:rgba(49,87,213,.10); opacity:0; transform:scale(.55); transition:opacity .25s, transform .35s cubic-bezier(.4,0,.2,1), background .25s; }
.store-nav a:hover { color:var(--accent); }
.store-nav a:hover::before { opacity:1; transform:scale(1); background:rgba(49,87,213,.06); }
.store-nav a.active { color:var(--accent-dark); font-weight:700; }
.store-nav a.active::before { opacity:1; transform:scale(1); background:rgba(49,87,213,.10); box-shadow:0 2px 12px rgba(49,87,213,.18), inset 0 0 0 1px rgba(49,87,213,.12); }
.store-footer a:hover { color:var(--accent); }
.store-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border:1px solid var(--accent); border-radius:999px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; }
.store-button:hover { background:var(--accent-dark); }
.store-button--secondary { border-color:var(--line); background:transparent; color:var(--ink); }
.store-button--wide { width:100%; border-radius:12px; }
.store-hero { display:grid; gap:30px; padding:48px 0 70px; }
.store-hero__copy { align-self:center; }
.store-badge { display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.store-badge__dot { width:8px; height:8px; border-radius:50%; background:#49b77a; box-shadow:0 0 0 5px rgba(73,183,122,.13); }
h1,h2,h3,p { margin-top:0; }
.store-hero h1 { max-width:690px; margin:18px 0; font-size:clamp(38px,8vw,76px); line-height:1.08; letter-spacing:-.055em; }
.store-hero p,.store-heading p { max-width:620px; color:var(--muted); font-size:17px; }
.store-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.store-hero__visual { padding:22px; border-radius:28px; background:linear-gradient(145deg,#1a2440,#4059b4); color:#fff; box-shadow:var(--shadow); }
.store-hero__card { min-height:240px; padding:8px 4px 22px; }
.store-hero__card .store-badge { color:#b8c7ff; }
.store-hero__card h2 { max-width:460px; margin:24px 0 12px; font-size:clamp(28px,5vw,48px); line-height:1.12; }
.store-hero__card p { max-width:430px; color:#d9e0fa; }
.store-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); }
.store-stats div { display:grid; gap:3px; }
.store-stats strong { font-size:23px; }
.store-stats span { color:#cad4f2; font-size:12px; }
.store-section { padding:64px 0; }
.store-section--muted { margin:0 -20px; padding-left:20px; padding-right:20px; background:#fff; }
.store-heading { margin-bottom:30px; }
.store-heading h1,.store-heading h2 { margin:14px 0 8px; font-size:clamp(30px,5vw,52px); line-height:1.12; letter-spacing:-.04em; }
.store-products { display:grid; gap:18px; }
.store-product { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 8px 30px rgba(34,49,84,.05); }
.store-product__cover { display:grid; place-items:center; min-height:170px; overflow:hidden; background:linear-gradient(145deg,#dbe5ff,#f3f6ff); color:var(--accent); font-size:72px; }
.store-product__photo { display:block; width:100%; height:100%; min-height:inherit; object-fit:cover; }
.store-product__body { padding:22px; }
.store-product__meta { display:flex; justify-content:space-between; gap:14px; color:var(--muted); font-size:12px; }
.store-product__meta span:last-child { color:var(--success); font-weight:700; }
.store-product__meta span.store-soldout { color:var(--danger); }
.store-product h2,.store-product h3 { margin:14px 0 8px; font-size:24px; }
.store-product p { min-height:52px; color:var(--muted); }
.store-product__price { display:block; margin:18px 0; font-size:28px; letter-spacing:-.03em; }
.store-product__price small { color:var(--muted); font-size:13px; font-weight:500; }
.store-product__soldout { padding:14px 0; color:var(--danger); font-weight:700; }
.store-order-form { display:grid; gap:12px; }
.store-order-form label { display:grid; gap:6px; color:var(--muted); font-size:13px; }
.store-order-form input { width:100%; min-height:46px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#fbfcfe; color:var(--ink); }
.store-order-form input:focus { outline:3px solid rgba(49,87,213,.16); border-color:var(--accent); }
.store-alert { padding:14px 16px; border-radius:12px; font-weight:700; }
.store-alert--success { background:#eaf8f0; color:var(--success); }
.store-alert--error { background:#fff0f0; color:var(--danger); }
.store-empty { padding:34px; border:1px dashed var(--line); border-radius:18px; background:#fff; color:var(--muted); text-align:center; }
.store-steps { display:grid; gap:14px; }
.store-steps article { display:flex; gap:14px; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.store-steps b { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; }
.store-steps h3 { margin-bottom:4px; }
.store-steps p { margin:0; color:var(--muted); }
.store-footer { display:flex; justify-content:space-between; gap:20px; padding:28px 0 42px; color:var(--muted); font-size:13px; }
.store-footer span:last-child { display:flex; gap:16px; }
@media (min-width:720px) { .store-shell { padding:0 34px; } .store-nav { display:flex; } .store-hero { grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); align-items:center; padding:72px 0 100px; } .store-products { grid-template-columns:repeat(2,minmax(0,1fr)); } .store-product__cover { min-height:190px; } .store-section--muted { margin:0 -34px; padding-left:34px; padding-right:34px; } .store-steps { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1040px) { .store-products { grid-template-columns:repeat(3,minmax(0,1fr)); } .store-header { min-height:92px; } }

/* ===== 订单查询卡片与兑换成功区（2026-09-19 UI 改进） ===== */
.store-order-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:18px 0; }
.store-order-grid > div { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 14px; min-width:0; }
.store-order-grid b { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:2px; }
.store-order-grid span { font-size:14px; font-weight:600; word-break:break-all; }
.store-order-grid .order-no-card { grid-column:1 / -1; }
.store-badge--success { background:rgba(31,122,83,.12); color:var(--success); border:1px solid rgba(31,122,83,.35); }
.store-badge--pending { background:rgba(49,87,213,.10); color:var(--accent); border:1px solid rgba(49,87,213,.30); }
.store-badge--muted { background:var(--paper); color:var(--muted); border:1px solid var(--line); }
.store-badge--danger { background:rgba(163,52,52,.10); color:var(--danger); border:1px solid rgba(163,52,52,.30); }
.store-code { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px dashed rgba(49,87,213,.45); border-radius:12px; padding:10px 14px; margin:8px 0; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; word-break:break-all; }
.store-code button { flex-shrink:0; border:1px solid var(--line); background:#fff; color:var(--accent); border-radius:999px; padding:5px 14px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.store-code button:hover { border-color:var(--accent); }
.store-code button.copied { background:var(--success); border-color:var(--success); color:#fff; }
.store-button--primary { background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; border:none; font-weight:700; box-shadow:0 10px 24px rgba(49,87,213,.28); transition:transform .12s,box-shadow .12s; }
.store-button--primary:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(49,87,213,.34); }
.store-button--ghost { background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:600; }
.store-button--ghost:hover { border-color:var(--accent); color:var(--accent); }
.store-button--success { background:#fff; border:1px solid rgba(31,122,83,.45); color:var(--success); font-weight:700; }
.store-button--success:hover { background:var(--success); color:#fff; }
.store-downloads { display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.store-downloads--inline { flex-direction:row; flex-wrap:wrap; }
.store-validity { display:inline-flex; align-items:center; gap:8px; background:rgba(49,87,213,.08); border-radius:999px; padding:6px 14px; font-size:13px; color:var(--accent); margin:8px 0 14px; }
.store-success-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.store-success-head h2 { margin:0; }
.store-note { font-size:13px; color:var(--muted); margin-top:10px; }
.store-code button.store-code__download { color:var(--success); border-color:rgba(31,122,83,.45); }
.store-code button.store-code__download:hover { background:var(--success); border-color:var(--success); color:#fff; }