:root { color-scheme: light; --ink:#172a48; --muted:#718099; --blue:#2466e8; --line:#e5eaf2; }
* { box-sizing:border-box; }
body { margin:0; font-family:"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:#f1f4f9; }
[hidden] { display:none !important; }
button,input { font:inherit; }
button { touch-action:manipulation; }
button { border:0; border-radius:9px; padding:12px 22px; background:var(--blue); color:white; font-weight:600; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible,input:focus-visible { outline:3px solid #8cb6ff; outline-offset:3px; }
.page { max-width:920px; margin:auto; padding:24px; }
.hero { position:relative; overflow:hidden; padding:20px 28px; border-radius:18px; color:#fff; background:linear-gradient(115deg,#112744,#214f83); margin-bottom:16px; }
.hero::after { content:"✦"; position:absolute; right:45px; top:55px; font-size:150px; color:#69afff26; transform:rotate(-18deg); pointer-events:none; }
.brand { font-size:14px; font-weight:700; letter-spacing:1px; }
.brand span { display:inline-block; margin-left:14px; padding:4px 8px; color:#a6c8f7; border:1px solid #6c9cce66; border-radius:4px; font-size:11px; }
.eyebrow { display:none; }
h1 { font-size:36px; margin:12px 0; letter-spacing:1px; }
h1 em { font-style:normal; color:#8cc8ff; }
.hero>p:not(.eyebrow) { color:#bbcee5; font-size:13px; }
.steps { display:none; }
.shop-tabs { display:flex; gap:6px; padding:5px; margin:16px 0; background:#e5ebf5; border-radius:12px; }
.shop-tabs button { flex:1; min-width:0; min-height:44px; padding:10px 8px; color:var(--muted); background:transparent; font-size:14px; }
.shop-tabs button[aria-selected="true"] { background:white; color:var(--blue); box-shadow:0 2px 6px #172a4810; }
#orders-panel { margin-top:0; }
.role-panel { padding:14px 18px; }
.panel { background:white; border:1px solid var(--line); border-radius:12px; padding:24px; margin:18px 0; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h2 { font-size:18px; margin:0; }
.section-title>span { font-size:12px; color:var(--muted); }
label[for] { display:block; font-size:13px; margin:22px 0 10px; }
.login-row { display:flex; gap:12px; }
.login-row input { border:1px solid #d8e1ef; border-radius:8px; min-width:0; padding:13px; flex:1; }
.muted { color:var(--muted); font-size:13px; line-height:1.7; }
.text-button { color:var(--blue); background:transparent; padding:6px 0; font-size:13px; white-space:nowrap; }
.role-panel { display:flex; align-items:center; gap:14px; }
.avatar { flex-shrink:0; width:44px; height:44px; line-height:44px; text-align:center; background:#edf3ff; color:var(--blue); border-radius:10px; font-weight:700; }
.role-copy { flex:1; min-width:0; overflow-wrap:anywhere; }
.role-copy p { margin:6px 0 0; }
.products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; align-items:start; }
.product { color:var(--ink); background:white; text-align:left; border:1px solid var(--line); border-radius:12px; padding:0; overflow:hidden; }
.product:hover { border-color:#8cb6ff; }
.product img { display:block; width:100%; height:auto; background:#edf3fb; }
.product-copy { padding:16px; }
.product .symbol { display:block; color:#5276a8; font-size:11px; letter-spacing:2px; margin-bottom:10px; }
.product-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.buy-label { padding:10px 16px; border-radius:8px; background:var(--blue); color:white; font-size:14px; }
.product h3 { margin:0 0 9px; font-size:16px; overflow-wrap:anywhere; }
.product p { font-weight:400; font-size:12px; color:var(--muted); line-height:1.6; min-height:38px; margin:0 0 14px; overflow-wrap:anywhere; }
.price { font-size:22px; font-weight:700; color:#ed7137; }
.payment-methods { display:flex; gap:14px; border:0; margin:20px 0; padding:0; }
.payment-methods label { display:flex; align-items:center; gap:8px; flex:1; padding:14px; border:1px solid var(--line); border-radius:8px; font-size:14px; cursor:pointer; }
.payment-methods input { accent-color:var(--blue); }
.payment-methods legend { margin-bottom:12px; font-size:14px; font-weight:600; }
.payment-methods label:has(input:checked) { border-color:var(--blue); background:#f5f8ff; }
.purchase-image { display:block; width:100%; height:auto; max-height:260px; object-fit:contain; margin-top:14px; border-radius:9px; background:#f1f4f9; }
#pay-confirm { max-width:480px; }
body:has(dialog[open]) { overflow:hidden; }
.pay-icon { display:inline-grid; place-items:center; width:24px; height:24px; color:white; border-radius:5px; }
.wechat { background:#21b773; }.alipay { background:#2698ed; }
.checkout-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:20px; gap:10px; }
.checkout-bottom>div { min-width:0; overflow-wrap:anywhere; }
.checkout-bottom>button { flex-shrink:0; }
.checkout-bottom strong { display:block; color:#ed7137; font-size:26px; margin-top:5px; }
.order { padding:18px 0; border-top:1px solid var(--line); }
.order-heading { display:flex; justify-content:space-between; gap:10px; font-size:14px; }
.order-heading strong { min-width:0; overflow-wrap:anywhere; }
.order>.muted { overflow-wrap:anywhere; }
.badge { flex-shrink:0; align-self:flex-start; }
.badge { border-radius:4px; color:#456185; background:#edf2f8; font-size:12px; padding:4px 7px; white-space:nowrap; }
.cdk-line { display:flex; align-items:center; gap:12px; padding:10px 12px; background:#f5f8fd; border-radius:7px; }
.cdk-line code { flex:1; min-width:0; overflow-wrap:anywhere; font-size:13px; }
.empty { padding:24px 8px; text-align:center; color:var(--muted); font-size:14px; grid-column:1/-1; }
.notice { font-size:13px; line-height:1.6; padding:12px 16px; background:#fff4e3; color:#94652a; border-radius:8px; }
footer { text-align:center; color:var(--muted); font-size:12px; line-height:1.8; padding:18px 0; }
.toast { position:fixed; z-index:100; bottom:30px; left:50%; transform:translateX(-50%); max-width:90%; width:max-content; background:#152641ed; color:white; padding:14px 20px; border-radius:9px; font-size:14px; }
dialog { border:0; border-radius:14px; padding:26px; max-width:420px; width:calc(100% - 40px); max-height:calc(100% - 40px); overflow-y:auto; overflow-wrap:anywhere; color:var(--ink); }
dialog::backdrop { background:#0e1e3d80; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.secondary { background:#edf1f7; color:#47607e; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media(max-width:600px) {
    .page { padding:12px; padding-top:max(12px,env(safe-area-inset-top)); padding-right:max(12px,env(safe-area-inset-right)); padding-bottom:max(12px,env(safe-area-inset-bottom)); padding-left:max(12px,env(safe-area-inset-left)); }
    .hero { padding:16px 18px; margin-bottom:12px; }
    h1 { font-size:29px; }
    .hero::after { right:8px; font-size:120px; }
    .eyebrow { margin-top:24px; }
    .steps { gap:12px; font-size:11px; flex-wrap:wrap; }
    .panel { padding:18px; }
    .products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .product-copy { padding:12px; }
    .product h3 { font-size:15px; }
    .product-bottom { align-items:stretch; flex-direction:column; gap:10px; }
    .price { font-size:20px; overflow-wrap:anywhere; }
    .buy-label { display:grid; place-items:center; min-height:44px; padding:10px 8px; }
    .section-title { flex-wrap:wrap; }
    .section-title>span { font-size:11px; }
    .login-row { gap:8px; }
    /* iOS输入时保持16px字号，避免自动放大页面。 */
    .login-row input { font-size:16px; }
    .login-row button { padding:12px; flex-shrink:0; }
    button,.text-button,.payment-methods label { min-height:44px; }
    .text-button { min-width:44px; }
    .payment-methods { gap:8px; }
    .payment-methods label { padding:12px 8px; gap:5px; }
    .role-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:12px 14px; margin:12px 0; }
    .role-panel .avatar { display:none; }
    .role-panel>.text-button { grid-column:2; }
    .role-copy p { margin-bottom:0; }
    dialog { padding:22px; max-height:calc(100dvh - 32px); }
    #pay-confirm { width:100%; max-width:none; max-height:90dvh; margin:auto 0 0; border-radius:18px 18px 0 0; padding:18px 18px max(18px,env(safe-area-inset-bottom)); }
    .dialog-actions button { flex:1; padding:12px 8px; }
    .toast { bottom:calc(18px + env(safe-area-inset-bottom)); overflow-wrap:anywhere; }
}
@media(max-width:359px) {
    .hero { padding:20px 16px; }
    h1 { font-size:26px; }
    .brand span { margin-left:0; margin-top:8px; display:table; }
    .panel { padding:16px; }
    .login-row { flex-direction:column; }
    .checkout-bottom { align-items:stretch; flex-direction:column; }
    .checkout-bottom>button { width:100%; }
}