/* ============================================================
   GameKeysBuy v2.1 共享样式（cart / checkout / order / member 页面）
   完全沿用 index.html 的视觉变量，不引入新配色
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Steam 主色系 */
  --sd:#1b2838;--sm:#2a475e;--sl:#c7d5e0;--sg:#4c6b22;--slm:#a4d007;
  /* 页面背景 */
  --bg:#f0f4f8;--bg2:#ffffff;--bg3:#e8eef4;--bg4:#dde5ed;
  /* 文字 */
  --text:#162230;--text2:#4a6070;--text3:#8ba3b0;
  /* 边框 */
  --border:#c8d6e0;--border2:#b0c2cf;
  /* 语义 */
  --ok:#3b8c4e;--ok-bg:#eaf4ec;
  --warn:#9a6f0e;--warn-bg:#fdf5e0;
  --err:#b33030;--err-bg:#fdf0f0;
  --info:#1e5a9a;--info-bg:#eaf0fb;
  /* 圆角 */
  --r:6px;--rl:10px;--rxl:16px;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans JP',sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;
}
a{color:var(--info);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== 顶部导航（与 index.html 一致 + 购物车徽章） ===== */
.nav{background:var(--sd);padding:0 24px;height:54px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.3)}
.nav .logo{display:flex;align-items:center;cursor:pointer;color:#fff;font-size:18px;font-weight:700;letter-spacing:.3px}
.nav .logo span.lime{color:var(--slm)}
.nav-spacer{flex:1}
.nav-cart{position:relative;cursor:pointer;padding:6px 10px;border-radius:var(--r);transition:.15s;display:flex;align-items:center;gap:6px;color:#c7d5e0;font-size:13px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.nav-cart:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-cart svg{width:18px;height:18px;stroke-width:1.8}
.nav-cart-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--slm);color:#1b2838;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--sd)}
.nav-cart-badge.zero{display:none}
.nav-auth{display:flex;align-items:center;gap:8px}
.nav-btn{padding:5px 14px;border-radius:var(--r);font-size:12px;cursor:pointer;border:none;transition:.15s;font-family:inherit}
.nav-btn.ghost{background:rgba(255,255,255,.1);color:#c7d5e0;border:0.5px solid rgba(255,255,255,.2)}
.nav-btn.ghost:hover{background:rgba(255,255,255,.18);color:#fff}
.nav-btn.solid{background:var(--sg);color:var(--slm);font-weight:600}
.nav-btn.solid:hover{background:#3d5a1c}
.nav-avatar{width:30px;height:30px;border-radius:50%;background:var(--sg);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--slm);cursor:pointer;flex-shrink:0;text-transform:uppercase}
.nav-username{font-size:13px;color:#c7d5e0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.nav-dropdown{position:relative}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:200;overflow:hidden}
.nav-dropdown-menu.open{display:block}
.dditem{padding:11px 16px;font-size:13px;color:var(--text);cursor:pointer;border-bottom:0.5px solid var(--border);display:flex;align-items:center;gap:9px;text-decoration:none}
.dditem:last-child{border-bottom:none}
.dditem:hover{background:var(--bg3);text-decoration:none}
.dditem.danger{color:var(--err)}

/* ===== 容器 / 面包屑 ===== */
.page-wrap{max-width:1100px;margin:0 auto;padding:24px 20px}
.page-wrap.narrow{max-width:780px}
.crumbs{font-size:12px;color:var(--text2);margin-bottom:12px}
.crumbs a{color:var(--text2)}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{margin:0 6px;color:var(--text3)}
.page-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:18px;letter-spacing:.2px}
.page-title small{font-size:13px;font-weight:500;color:var(--text2);margin-left:8px}

/* ===== 通用面板 / 卡片 ===== */
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:18px;margin-bottom:14px}
.panel-h{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.section-h{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}

/* ===== 按钮 ===== */
.btn{padding:9px 18px;border-radius:var(--r);font-size:13px;cursor:pointer;border:none;font-weight:600;font-family:inherit;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--sg);color:var(--slm)}
.btn-primary:hover:not(:disabled){background:#3d5a1c}
.btn-confirm{background:#cb6e08;color:#fff;font-size:14px;padding:11px 22px;letter-spacing:.4px}
.btn-confirm:hover:not(:disabled){background:#a85907}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--bg3);color:var(--text)}
.btn-info{background:var(--info-bg);color:var(--info);border:1px solid #93c5fd}
.btn-info:hover:not(:disabled){background:#dbe8fa}
.btn-warn{background:var(--warn-bg);color:var(--warn);border:1px solid #f0c36d}
.btn-warn:hover:not(:disabled){background:#fbe9b8}
.btn-danger{background:var(--err-bg);color:var(--err);border:1px solid #fca5a5}
.btn-danger:hover:not(:disabled){background:#fadcdc}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-lg{padding:12px 26px;font-size:14px;letter-spacing:.4px}
.btn-block{width:100%}
.btn-icon{padding:6px 8px;border-radius:var(--r);background:transparent;color:var(--text2);border:1px solid var(--border);cursor:pointer;display:inline-flex;align-items:center}
.btn-icon:hover{background:var(--bg3);color:var(--text)}
.btn-icon.danger{color:var(--err);border-color:#f5b9b9}
.btn-icon.danger:hover{background:var(--err-bg)}
.btn-icon svg{width:14px;height:14px;stroke-width:1.8}

/* ===== 表单 ===== */
.fg{margin-bottom:13px}
.fg label{display:block;font-size:12px;color:var(--text2);margin-bottom:5px;font-weight:600;letter-spacing:.2px}
.fg label .req{color:var(--err);margin-left:3px}
.fg input,.fg select,.fg textarea{width:100%;padding:9px 12px;border-radius:var(--r);border:1px solid var(--border);font-size:13px;background:var(--bg3);color:var(--text);outline:none;transition:.15s;font-family:inherit}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--sg);background:#fff;box-shadow:0 0 0 3px rgba(76,107,34,.1)}
.fg textarea{resize:vertical;min-height:80px;line-height:1.6}
.fg .hint{font-size:11px;color:var(--text3);margin-top:4px}
.fg .err{font-size:11px;color:var(--err);margin-top:4px;display:none}
.fg.has-err input,.fg.has-err select,.fg.has-err textarea{border-color:var(--err);background:#fff}
.fg.has-err .err{display:block}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkbox-row{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text2);cursor:pointer;line-height:1.5}
.checkbox-row input[type=checkbox]{width:auto;margin-top:2px;accent-color:var(--sg)}

/* ===== 卡片 / 在庫徽章 ===== */
.gcard-stock-badge{position:absolute;top:8px;right:8px;font-size:10px;padding:3px 8px;border-radius:20px;font-weight:700;letter-spacing:.3px;backdrop-filter:blur(4px)}
.gcard-stock-badge.in{background:rgba(59,140,78,.92);color:#fff}
.gcard-stock-badge.delay{background:rgba(154,111,14,.92);color:#fff}
.gcard-stock-badge.out{background:rgba(179,48,48,.92);color:#fff}

/* ===== Toast ===== */
.toast-wrap{position:fixed;top:74px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg2);border:1px solid var(--border);border-left:4px solid var(--sg);border-radius:var(--r);padding:11px 16px;font-size:13px;color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:240px;max-width:380px;display:flex;align-items:center;gap:10px;animation:toastIn .25s ease-out;pointer-events:auto}
.toast.error{border-left-color:var(--err)}
.toast.warn{border-left-color:var(--warn)}
.toast.info{border-left-color:var(--info)}
.toast.fadeout{animation:toastOut .3s ease-out forwards}
.toast .toast-icon{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--sg)}
.toast.error .toast-icon{color:var(--err)}
.toast.warn .toast-icon{color:var(--warn)}
.toast.info .toast-icon{color:var(--info)}
@keyframes toastIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(40px);opacity:0}}

/* ===== Modal ===== */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(14,22,32,.7);z-index:300;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.modal-bg.open{display:flex}
.modal-card{background:var(--bg2);border-radius:var(--rl);width:560px;max-width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.35);border:1px solid var(--border)}
.modal-card.sm{width:420px}
.modal-card.lg{width:700px}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;color:var(--text)}
.modal-h .modal-x{background:transparent;border:none;font-size:20px;color:var(--text2);cursor:pointer;line-height:1;padding:4px 8px;border-radius:var(--r)}
.modal-h .modal-x:hover{background:var(--bg3);color:var(--text)}
.modal-b{padding:18px 20px}
.modal-f{padding:14px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:8px;background:var(--bg3)}

/* ===== 表格（购物车 / 订单详情） ===== */
.cart-tbl{width:100%;font-size:13px;border-collapse:collapse}
.cart-tbl th{text-align:left;padding:10px 12px;font-weight:600;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;background:var(--bg3);border-bottom:1px solid var(--border)}
.cart-tbl td{padding:14px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.cart-tbl tr:last-child td{border-bottom:none}
.cart-row-img{width:64px;height:30px;object-fit:cover;border-radius:4px;background:var(--sm);flex-shrink:0}
.cart-row-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.cart-row-meta{font-size:11px;color:var(--text3)}
.cart-row-product{display:flex;gap:12px;align-items:center}
.qty-input{width:64px;padding:6px 8px;border-radius:var(--r);border:1px solid var(--border);font-size:13px;background:var(--bg3);color:var(--text);text-align:center;outline:none}
.qty-input:focus{border-color:var(--sg);background:#fff}

/* ===== 订单汇总卡 ===== */
.summary-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:18px;position:sticky;top:74px}
.summary-card h3{font-size:14px;font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.summary-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--text2)}
.summary-row.total{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;font-size:15px;font-weight:700;color:var(--text)}
.summary-row .price{font-family:monospace;letter-spacing:.5px}
.summary-row.total .price{color:var(--sg);font-size:18px}

/* ===== 状态条（订单详情） ===== */
.status-bar{padding:14px 18px;border-radius:var(--rl);margin-bottom:18px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;border:1px solid transparent}
.status-bar.processing{background:var(--warn-bg);color:var(--warn);border-color:#f0c36d}
.status-bar.completed{background:var(--ok-bg);color:var(--ok);border-color:#a3d4ac}
.status-bar.cancelled{background:var(--bg3);color:var(--text2);border-color:var(--border)}
.status-bar.refunded{background:#fdecdc;color:#c25e0a;border-color:#f0bd8c}
.status-bar .status-icon{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.status-bar .status-icon.spin{animation:spin .9s linear infinite}
.status-bar .status-msg{flex:1}
.status-bar .status-sub{font-size:12px;font-weight:500;opacity:.8;display:block;margin-top:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 时间线（Coduna 风格：图标 + 双行） ===== */
.timeline{position:relative;padding-left:34px;margin-top:14px}
.timeline::before{content:'';position:absolute;left:14px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:8px 0;font-size:13px;color:var(--text2);display:flex;gap:10px;align-items:flex-start}
.tl-item .tl-icon{position:absolute;left:-32px;top:4px;width:28px;height:28px;border-radius:50%;background:var(--bg2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.tl-item.ok .tl-icon{background:var(--ok-bg);border-color:var(--ok)}
.tl-item.warn .tl-icon{background:var(--warn-bg);border-color:var(--warn)}
.tl-item.err .tl-icon{background:var(--err-bg);border-color:var(--err)}
.tl-item.created .tl-icon{background:var(--info-bg);border-color:var(--info)}
.tl-body{flex:1;min-width:0}
.tl-time{font-size:11px;color:var(--text3);font-family:monospace}
.tl-msg{color:var(--text);font-weight:500;margin-bottom:2px}

/* ===== Pill / 状态徽章 ===== */
.pill{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px;letter-spacing:.2px}
.pill.green{background:var(--ok-bg);color:var(--ok)}
.pill.gray{background:var(--bg3);color:var(--text2)}
.pill.blue{background:var(--info-bg);color:var(--info)}
.pill.red{background:var(--err-bg);color:var(--err)}
.pill.yellow{background:var(--warn-bg);color:var(--warn)}
.pill.orange{background:#fdecdc;color:#c25e0a}

/* ===== 信任徽章 ===== */
.trust-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.trust-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r);background:var(--bg3);border:1px solid var(--border);font-size:11px;color:var(--text2);font-weight:600;letter-spacing:.2px}
.trust-badge svg{width:14px;height:14px;color:var(--sg)}

/* ===== 错误条 / 提示条 ===== */
.alert{padding:11px 14px;border-radius:var(--r);font-size:13px;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px;border:1px solid transparent}
.alert.error{background:var(--err-bg);color:var(--err);border-color:#f5b9b9}
.alert.warn{background:var(--warn-bg);color:var(--warn);border-color:#f0c36d}
.alert.info{background:var(--info-bg);color:var(--info);border-color:#bdd2f0}
.alert.ok{background:var(--ok-bg);color:var(--ok);border-color:#a3d4ac}
.alert.hidden{display:none}

/* ===== Empty State ===== */
.empty{text-align:center;padding:48px 20px;color:var(--text2)}
.empty .empty-icon{font-size:48px;margin-bottom:12px;opacity:.4}
.empty .empty-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
.empty .empty-msg{font-size:13px;color:var(--text2);margin-bottom:18px}

/* ===== Footer（与 index.html 保持一致简化版） ===== */
.site-footer{background:var(--sd);color:#c7d5e0;margin-top:48px;border-radius:var(--rxl) var(--rxl) 0 0;overflow:hidden}
.footer-bottom{background:rgba(0,0,0,.25);border-top:.5px solid rgba(255,255,255,.07);padding:16px 24px}
.footer-bottom-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-copy{font-size:12px;color:#8ba3b0}
.footer-contact{font-size:13px;color:#8ba3b0}
.footer-contact a{color:var(--slm)}
.footer-links{display:flex;gap:16px}
.footer-links a{font-size:12px;color:#8ba3b0}
.footer-links a:hover{color:var(--slm)}

/* ===== Layout helpers ===== */
.row{display:flex;gap:16px}
.row.tablet-stack{flex-wrap:wrap}
.col{flex:1;min-width:0}
.col-2{flex:2;min-width:0}
.mt-0{margin-top:0!important}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0!important}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.text-mute{color:var(--text2)}.text-mono{font-family:'Courier New',monospace}.text-right{text-align:right}.text-center{text-align:center}
.flex-row{display:flex;align-items:center;gap:8px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* ===== Spinner ===== */
.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--sg);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
.spinner.lg{width:32px;height:32px;border-width:3px}

/* ===== CDK Modal（Coduna 风格：每 key 一行 + 单独 Copy） ===== */
.cdk-list{display:flex;flex-direction:column;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px}
.cdk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);transition:.15s}
.cdk-row:hover{border-color:var(--sg);box-shadow:0 1px 4px rgba(76,107,34,.1)}
.cdk-row-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--sg);color:var(--slm);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:monospace}
.cdk-row-code{flex:1;font-family:'Courier New',monospace;font-size:13px;font-weight:700;letter-spacing:1px;color:var(--sd);background:transparent;border:none;padding:0;word-break:break-all;min-width:0}
.cdk-row-copy{flex-shrink:0;width:28px;height:28px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.cdk-row-copy:hover{border-color:var(--info);color:var(--info);background:var(--info-bg)}
.cdk-row-copy.copied{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.cdk-row-copy.copied::after{content:'✓';font-size:13px;font-weight:700;margin-left:2px}
.cdk-row-copy.copied svg{display:none}
.cdk-display{font-family:'Courier New',monospace;font-size:14px;font-weight:700;letter-spacing:1.2px;background:var(--sd);color:var(--slm);padding:12px 14px;border-radius:var(--r);word-break:break-all;border:1px solid rgba(164,208,7,.2);line-height:1.7;min-height:42px;white-space:pre-wrap}
.cdk-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.cdk-modal-meta{display:flex;gap:18px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.cdk-modal-meta>div{display:flex;flex-direction:column;gap:2px}
.cdk-meta-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.cdk-meta-val{font-size:13px;color:var(--text);font-weight:600}
.cdk-hint-box{margin-top:14px;padding:10px 12px;background:var(--info-bg);border:1px solid rgba(30,90,154,.2);border-radius:var(--r);font-size:12px;color:var(--info);line-height:1.6}

/* ===== 订单详情：底部动作按钮组（領収書 / 再注文 / サポート） ===== */
.order-actions{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl)}
.order-actions:empty{display:none}
.order-actions .btn{justify-content:center;width:100%}

/* ===== 订单详情：左右两栏对齐优化 ===== */
.order-detail-row .col,
.order-detail-row .col-2{display:flex;flex-direction:column;gap:14px;margin-bottom:0}
.order-detail-row .col > .panel,
.order-detail-row .col-2 > .panel,
.order-detail-row .col > .order-actions,
.order-detail-row .col-2 > .order-actions{margin:0}
/* status-bar 跟两栏间距统一 */
#status-bar{margin-bottom:14px}

/* ===== 状态徽章升级（processing 脉动） ===== */
.status-bar.processing .status-icon{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ===== /account 账户中心 hub ===== */
.account-hero{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,var(--sd) 0%,var(--sm) 100%);color:#fff;padding:22px 26px;border-radius:var(--rl);margin-bottom:18px;flex-wrap:wrap}
.account-hero-avatar{width:56px;height:56px;border-radius:50%;background:var(--sg);color:var(--slm);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;text-transform:uppercase;flex-shrink:0;border:2px solid rgba(164,208,7,.4)}
.account-hero-info{flex:1;min-width:200px}
.account-hero-name{font-size:18px;font-weight:700;margin-bottom:3px}
.account-hero-email{font-size:13px;color:#c7d5e0;margin-bottom:3px}
.account-hero-meta{font-size:11px;color:#8ba3b0;font-family:monospace}
.account-hero-stats{display:flex;gap:14px}
.hero-stat{padding:10px 18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);text-align:center;text-decoration:none;color:#fff;transition:.15s;min-width:80px}
.hero-stat:hover{background:rgba(164,208,7,.18);border-color:rgba(164,208,7,.4);text-decoration:none;color:#fff}
.hero-stat-num{font-size:22px;font-weight:700;color:var(--slm);line-height:1.1}
.hero-stat-label{font-size:11px;color:#c7d5e0;margin-top:2px;text-transform:uppercase;letter-spacing:.4px}

/* Quick links 4 个卡片 */
.account-quicklinks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.qlink{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);text-decoration:none;color:var(--text);transition:.15s}
.qlink:hover{border-color:var(--sg);box-shadow:0 2px 8px rgba(76,107,34,.12);text-decoration:none}
.qlink-icon{font-size:22px;flex-shrink:0;width:42px;height:42px;background:var(--bg3);border-radius:50%;display:flex;align-items:center;justify-content:center}
.qlink-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.qlink-sub{font-size:11px;color:var(--text2);line-height:1.4}

/* 最近订单 */
.acc-recent-orders{display:flex;flex-direction:column}
.acc-recent-row{display:block;padding:12px 14px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text);transition:.15s}
.acc-recent-row:hover{background:var(--bg3);text-decoration:none}
.acc-recent-row:last-child{border-bottom:none}
.acc-recent-id{font-size:12px;color:var(--text2);font-family:monospace;margin-bottom:3px;display:flex;align-items:center;gap:8px}
.acc-recent-product{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px}
.acc-recent-meta{font-size:11px;color:var(--text3)}

/* ===== /cart 游客提示框 + 会员欢迎横幅 ===== */
.cart-guest-prompt{display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(135deg,var(--info-bg),#fff);border:1px solid rgba(30,90,154,.25);border-radius:var(--rl);margin-bottom:14px;flex-wrap:wrap}
.cgp-icon{font-size:24px;flex-shrink:0}
.cgp-body{flex:1;min-width:200px}
.cgp-title{font-size:13px;font-weight:700;color:var(--info);margin-bottom:2px}
.cgp-sub{font-size:12px;color:var(--text2);line-height:1.5}
.cgp-actions{display:flex;gap:6px;flex-shrink:0}

.cart-member-banner{display:flex;align-items:center;gap:14px;padding:12px 18px;background:linear-gradient(135deg,var(--ok-bg),#fff);border:1px solid rgba(59,140,78,.25);border-radius:var(--rl);margin-bottom:14px}
.cmb-avatar{width:36px;height:36px;border-radius:50%;background:var(--sg);color:var(--slm);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;text-transform:uppercase;flex-shrink:0}
.cmb-body{flex:1}
.cmb-title{font-size:13px;font-weight:700;color:var(--ok);margin-bottom:2px}
.cmb-sub{font-size:12px;color:var(--text2);line-height:1.5}

/* ===== /checkout 会员只读卡片 ===== */
.cu-card{padding:14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r)}
.cu-card-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px dashed var(--border)}
.cu-card-row:last-of-type{border-bottom:none}
.cu-card-label{color:var(--text2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;align-self:center}
.cu-card-val{color:var(--text);font-weight:600;text-align:right;word-break:break-all}
.cu-card-hint{font-size:11px;color:var(--text3);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}

/* 响应式 */
/* account hub / cgp 响应式已合并到下面统一的 @media 块 */

/* ===== Auth pages ===== */
.auth-wrap{max-width:420px;margin:48px auto;padding:0 20px}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.auth-head{padding:22px 24px 14px;text-align:center}
.auth-head h1{font-size:20px;font-weight:700;margin-bottom:6px}
.auth-head p{font-size:13px;color:var(--text2)}
.auth-body{padding:8px 24px 22px}
.auth-foot{padding:14px 24px;background:var(--bg3);border-top:1px solid var(--border);font-size:12px;text-align:center;color:var(--text2)}

/* ===== /cart summary col + 两栏宽度对齐 ===== */
/* 右栏固定 340px，左栏 col-2 接管所有剩余宽度（防止 max-width 留缝隙） */
.cart-summary-col{flex:0 0 340px;max-width:340px;width:100%}
#cart-content > .col-2{flex:1 1 auto;min-width:0}

/* ===== 响应式 ===== */
@media (max-width:768px){
  .nav{padding:0 12px;gap:8px}
  .nav-username{display:none}
  .page-wrap{padding:16px 12px}
  /* SPA 视图边缘内边距收紧（默认 24px 20px 在手机太宽）*/
  .v2-view{padding:14px 12px}
  .row{flex-direction:column}
  .summary-card{position:static}
  .fr2{grid-template-columns:1fr}
  /* 手机上 summary col 取消 340px 限制 + col-2 也撑满 */
  .cart-summary-col{flex:0 0 auto;max-width:100%;width:100%}
  #cart-content > .col-2{width:100%}
  /* 手机版必须 stretch（覆盖 cart-content inline 的 align-items:flex-start，让两栏占满父宽） */
  #cart-content{align-items:stretch !important}

  /* cart 表格手机重排 */
  .cart-tbl thead{display:none}
  .cart-tbl tr{display:flex;flex-direction:column;border-bottom:1px solid var(--border);padding:12px 0;gap:6px}
  .cart-tbl td{display:flex;justify-content:space-between;align-items:center;border:none;padding:4px 8px;flex-wrap:wrap;gap:8px}
  .cart-tbl td::before{content:attr(data-label);font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;flex-shrink:0}
  .cart-tbl tr:last-child{border-bottom:none}
  /* 「商品」单元格：去 label + 内部横排（缩略图 + 文字）占满整行 */
  .cart-tbl td[data-label="商品"]{flex-direction:column;align-items:stretch;background:var(--bg3);border-radius:6px;padding:8px;margin-bottom:4px}
  .cart-tbl td[data-label="商品"]::before{display:none}
  .cart-row-product{width:100%;align-items:flex-start;gap:10px}
  .cart-row-img{width:78px;height:42px;flex-shrink:0}
  .cart-row-name{font-size:14px;line-height:1.4}
  .cart-row-meta{font-size:11px}
  /* 数量输入框不要撑爆 */
  .qty-input{max-width:80px;padding:4px 8px;text-align:center}
  /* 删除按钮列变小 */
  .cart-tbl td:last-child{justify-content:flex-end}
  .btn-icon.danger{padding:6px}

  /* checkout 表格同样的重排 */
  .confirm-row{flex-direction:column}

  /* account hub 响应式 */
  .account-quicklinks{grid-template-columns:repeat(2,1fr)}
  .account-hero{flex-direction:column;align-items:flex-start;text-align:left}
  .account-hero-stats{width:100%;justify-content:space-between}
  .hero-stat{flex:1}
  .cgp-actions{width:100%;justify-content:stretch}
  .cgp-actions .btn{flex:1}

  .footer-bottom-inner{flex-direction:column;text-align:center}
}

/* 极窄屏（iPhone SE 等 ~320-375px）进一步收紧 */
@media (max-width:380px){
  .v2-view{padding:12px 8px}
  .cart-row-img{width:64px;height:36px}
  .cart-tbl td{padding:4px 6px}
  .page-title{font-size:18px}
}