:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --card: #ffffff;
  --card-soft: #f3f6fa;
  --input-bg: #ffffff;
  --text: #182230;
  --muted: #667085;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #edf4ff;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #d97706;
  --border: #e4e9f0;
  --border-soft: #eef1f5;
  --notice-bg: #fffdf5;
  --notice-border: #f2df9e;
  --notice-text: #854d0e;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --success-text: #065f46;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --shadow: rgba(16, 24, 40, .07);
  --nav-bg: rgba(247, 249, 252, .86);
  --radius: 12px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --card: #131d2e;
  --card-soft: #192438;
  --input-bg: #0f1929;
  --text: #e7edf7;
  --muted: #99a6b9;
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --primary-soft: #172d4d;
  --green: #4ade80;
  --red: #fb7185;
  --amber: #fbbf24;
  --border: #2b3950;
  --border-soft: #233149;
  --notice-bg: #2b2413;
  --notice-border: #624b17;
  --notice-text: #f8d98c;
  --success-bg: #112c26;
  --success-border: #245c4d;
  --success-text: #86efca;
  --danger-bg: #321a22;
  --danger-border: #6c2c3d;
  --shadow: rgba(0, 0, 0, .3);
  --nav-bg: rgba(11, 18, 32, .86);
}

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

.skip-link { position: fixed; z-index: 2000; top: 8px; left: 8px; padding: 9px 13px; border-radius: 8px; background: var(--primary); color: #fff; text-decoration: none; transform: translateY(-150%); transition: transform .15s ease; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px; }

body {
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  z-index: 50;
  top: 0;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 max(24px, calc((100vw - 1080px) / 2));
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.user-topbar { padding-left: 24px; padding-right: 24px; }
.topbar .brand { font-size: 18px; font-weight: 750; color: var(--text); text-decoration: none; letter-spacing: -.02em; }
.topbar nav { display: flex; align-items: center; }
.topbar nav a,
.topbar .nav-logout-button {
  color: var(--muted);
  text-decoration: none;
  margin-left: 24px;
  font-size: 14px;
  font-weight: 600;
}
.topbar .nav-logout-form { display: inline-flex; margin: 0; }
.topbar .nav-logout-button { padding: 0; border: 0; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
.topbar nav a:hover,
.topbar .nav-logout-button:hover { color: var(--primary); }
.storefront-preferences { display: flex; align-items: center; gap: 6px; }
.storefront-preferences form { margin: 0; }
.storefront-preferences select { height: 34px; max-width: 112px; padding: 0 26px 0 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.storefront-preferences select:hover { border-color: var(--primary); }
.theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.theme-toggle:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.theme-light-icon, .theme-dark-icon { grid-area: 1 / 1; }
.theme-light-icon { display: none; }
html[data-theme="dark"] .theme-light-icon { display: inline; }
html[data-theme="dark"] .theme-dark-icon { display: none; }
.auth-toolbar { position: fixed; z-index: 10; top: 18px; right: 18px; display: flex; align-items: center; gap: 8px; }
.auth-toolbar form { margin: 0; }
.auth-toolbar select { min-height: 38px; padding: 7px 30px 7px 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--card); }
.auth-theme-toggle { position: static; }
.auth-error-code { margin: -5px 0 14px; color: var(--muted); font-size: 12px; text-align: center; }

/* 登录 / 注册全屏对话框 */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 20%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, color-mix(in srgb, #818cf8 12%, transparent) 0%, transparent 45%),
    var(--bg);
}
.auth-page {
  width: 100%;
  padding: 24px 16px;
  display: flex;
  justify-content: center;
}
.auth-dialog {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 28px;
  box-shadow: 0 12px 40px var(--shadow);
}
.auth-dialog-wide {
  max-width: 640px;
}
.auth-brand {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.auth-title {
  text-align: center;
  font-size: 22px;
  margin: 0 0 22px;
}
.auth-dialog .field { margin-bottom: 14px; }
.auth-dialog .btn.block { margin-top: 8px; padding: 11px 20px; }
.auth-dialog a { color: var(--primary); text-decoration: none; }
.auth-dialog a:hover { text-decoration: underline; }
.auth-dialog a.btn {
  color: #fff;
  text-decoration: none;
}
.auth-dialog a.btn:hover {
  color: #fff;
  text-decoration: none;
}
.auth-dialog a.btn.ghost {
  color: var(--primary);
}
.copy-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.copy-row input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.dock-key-text {
  word-break: break-all;
  margin-right: 8px;
}
.dock-help {
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.dock-help-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.dock-help ul {
  margin: 0;
  padding-left: 1.2em;
}
.dock-help li { margin: 4px 0; }
.dock-help code {
  font-size: 12px;
  word-break: break-all;
}
.dock-credentials-panel { padding: 24px; }
.dock-credentials-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.dock-credentials-head h2 { margin:0 0 5px; }
.dock-credentials-head p { margin:0; }
.dock-credentials-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.dock-toggle-form { margin:0; }
.dock-security-tip { padding:10px 12px; margin-bottom:14px; border:1px solid var(--border); border-radius:9px; background:var(--card-soft); color:var(--muted); font-size:13px; }
.dock-empty-key { display:flex; flex-direction:column; gap:4px; padding:18px; margin-bottom:14px; border:1px dashed var(--border); border-radius:10px; background:var(--card-soft); }
.dock-empty-key span { color:var(--muted); font-size:13px; }
.dock-protocol-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.dock-agent-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.dock-agent-stats>div{display:grid;gap:4px;padding:12px 13px;border:1px solid var(--border);border-radius:10px;background:var(--card-soft)}.dock-agent-stats span,.dock-agent-stats small{color:var(--muted);font-size:12px}.dock-agent-stats strong{font-size:17px}.dock-agent-settlements{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card)}.dock-agent-settlement-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.dock-agent-settlement-head span{color:var(--muted);font-size:12px}.dock-agent-settlement-list{display:grid}.dock-agent-settlement-list>div{display:grid;grid-template-columns:110px 70px 1fr 1fr 1fr;gap:8px;padding:9px 0;border-top:1px solid var(--border);font-size:13px}.dock-agent-settlement-list strong{text-align:right;color:var(--success)}
.dock-connect-card { min-width:0; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.dock-connect-card.is-disabled { background:var(--card-soft); border-style:dashed; }
.dock-connect-title { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.dock-connect-title > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.dock-connect-title strong { font-size:15px; }
.dock-connect-title span { color:var(--muted); font-size:12px; }
.dock-connect-title em { margin-left:auto; flex:none; padding:3px 7px; border-radius:999px; background:var(--success-bg); color:var(--green); font-size:11px; font-style:normal; }
.dock-connect-title .dock-toggle-form { margin-left:auto; flex:none; }
.dock-protocol-toggle { display:flex; align-items:center; gap:6px; min-height:30px; padding:4px 9px; border:1px solid var(--border); border-radius:999px; background:var(--card); cursor:pointer; color:var(--muted); font-size:12px; font-weight:650; }
.dock-protocol-toggle input { width:15px; height:15px; margin:0; accent-color:var(--primary); }
.dock-protocol-toggle:has(input:checked) { border-color:var(--success-border); background:var(--success-bg); color:var(--success-text); }
.dock-protocol-closed { margin:0; padding:12px; border-radius:8px; background:var(--card); color:var(--muted); font-size:12px; line-height:1.55; }
.dock-connect-icon { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--primary-soft); color:var(--primary); font-weight:800; }
.dock-connect-icon.kky { background:var(--notice-bg); color:var(--amber); }
.dock-connect-icon.mcy { background:#fff1f2; color:#e11d48; }
.dock-connect-icon.xgj { background:var(--success-bg); color:var(--green); }
.dock-connect-fields { display:flex; flex-direction:column; gap:8px; }
.dock-connect-fields > div { display:grid; grid-template-columns:112px minmax(0, 1fr) auto; align-items:center; gap:8px; min-width:0; }
.dock-connect-fields > div > span { color:var(--muted); font-size:12px; }
.dock-connect-fields code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.dock-connect-fields .dock-secret { filter:blur(4px); transition:filter .18s ease; }
.dock-connect-fields > div:hover .dock-secret { filter:none; }
.dock-connect-note, .dock-connect-pending { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; line-height:1.55; }
.dock-connect-pending { color:var(--amber); }
.dock-key-action { display:flex; justify-content:flex-end; margin:12px 0 0; padding-top:10px; border-top:1px solid var(--border); }
.dock-xgj-config { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:10px; margin:0 0 12px; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--card-soft); }
.dock-xgj-config-title { grid-column:1 / -1; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.dock-xgj-config-title span { color:var(--muted); font-size:11px; }
.dock-xgj-config label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:11px; }
.dock-xgj-config input { width:100%; min-height:34px; padding:7px 9px; border:1px solid var(--border); border-radius:7px; background:var(--card); color:var(--text); }
@media (max-width: 760px) {
  .dock-agent-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dock-agent-settlement-head{align-items:flex-start;flex-direction:column}.dock-agent-settlement-list>div{grid-template-columns:1fr 1fr}.dock-agent-settlement-list>div strong{text-align:left;grid-column:1/-1}
  .dock-credentials-panel { padding:16px; }
  .dock-credentials-head { align-items:stretch; flex-direction:column; }
  .dock-credentials-actions { align-items:stretch; flex-direction:column; }
  .dock-credentials-actions form .btn { width:100%; justify-content:center; }
  .dock-protocol-list { grid-template-columns:1fr; }
  .dock-connect-fields > div { grid-template-columns:1fr auto; }
  .dock-connect-fields > div > span { grid-column:1 / -1; }
  .dock-connect-fields code { white-space:normal; word-break:break-all; }
  .dock-xgj-config { grid-template-columns:1fr; }
  .dock-xgj-config-title { align-items:flex-start; flex-direction:column; }
}
html[data-theme="dark"] .dock-connect-icon.mcy { background:#3a1823; color:#fb7185; }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.auth-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--red);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 14px;
  text-align: center;
}
.auth-account-types { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.auth-account-types label { cursor:pointer; }
.auth-account-types input {
  position:absolute;
  width:1px !important;
  height:1px;
  min-height:0 !important;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.auth-account-types span { display:block; padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--muted); font-size:13px; font-weight:700; text-align:center; }
.auth-account-types input:checked + span { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); }
.auth-account-types input:focus-visible + span { outline:2px solid var(--primary); outline-offset:2px; }
.auth-account-lock { color:var(--amber); }
.auth-code-row { display:flex; gap:8px; }
.auth-code-success { color:var(--green); }
.auth-security-note { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.55; text-align:center; }
.auth-lock-notice { display:grid; gap:7px; margin:4px 0 16px; padding:14px 16px; border:1px solid var(--notice-border); border-radius:10px; background:var(--notice-bg); color:var(--notice-text); text-align:center; }
.auth-lock-notice strong { font-size:14px; }
.auth-lock-notice span { font-size:13px; }
.auth-lock-notice b { font-variant-numeric:tabular-nums; }
@media (max-width: 520px) {
  .auth-page { align-items:flex-start; padding:76px 12px 20px; }
  .auth-dialog { padding:24px 18px 22px; }
  .auth-lock-notice { padding:13px 12px; }
}

.container { max-width: 1080px; width: 100%; margin: 0 auto; padding: 30px 16px; flex: 1; }
.container.narrow { max-width: 520px; }

/* 商城首页：有图使用商品图，无图使用品牌渐变封面 */
.shop-home { padding-bottom: 12px; }
.shop-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 270px;
  margin-bottom: 38px;
  padding: 42px 44px;
  border: 1px solid #dbe7f7;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 8%, rgba(96, 165, 250, .18), transparent 28%),
    radial-gradient(circle at 68% 112%, rgba(129, 140, 248, .12), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 50%, #edf5ff 100%);
  box-shadow: 0 18px 48px rgba(37, 99, 235, .08);
  color: var(--text);
}
.shop-hero::before,
.shop-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(37, 99, 235, .1);
  border-radius: 50%;
}
.shop-hero::before { width: 310px; height: 310px; right: -80px; top: -135px; }
.shop-hero::after { width: 190px; height: 190px; right: 95px; bottom: -130px; }
.shop-hero-copy { max-width: 560px; }
.shop-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}
.shop-hero-eyebrow span { width: 20px; height: 2px; border-radius: 99px; background: #60a5fa; }
.shop-hero h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.2; letter-spacing: -.03em; }
.shop-hero-copy > p { max-width: 520px; margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.shop-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.shop-hero .btn { padding: 10px 22px; border-radius: 10px; font-weight: 600; }
.shop-hero .hero-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.18); }
.shop-hero .hero-primary:hover { background: var(--primary-dark); }
.shop-hero .hero-secondary { border: 1px solid var(--border); background: rgba(255,255,255,.72); color: var(--text); }
.shop-hero .hero-secondary:hover { border-color: #bfd1ec; background: #fff; }
.shop-hero-trust {
  position: absolute;
  right: 38px;
  bottom: 34px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1px;
  overflow: hidden;
  border: 1px solid #dbe5f1;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
}
.hero-trust-item { display: flex; flex-direction: column; min-width: 92px; padding: 12px 14px; background: transparent; }
.hero-trust-item strong { font-size: 15px; }
.hero-trust-item + .hero-trust-item { border-left: 1px solid #e3eaf3; }
.hero-trust-item span { color: var(--muted); font-size: 11px; }
.products-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-kicker { color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.products-heading h2 { margin-top: 2px; font-size: 24px; line-height: 1.3; }
.products-count { color: var(--muted); font-size: 13px; margin-left: auto; padding: 6px 0; white-space: nowrap; }

.notice {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(133, 77, 14, .04);
}

.flash {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.cattabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cattab {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}
.cattab:hover { color: var(--primary); border-color: var(--primary); }
.cattab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 { font-size: 16px; margin-bottom: 6px; }
.card .desc { color: var(--muted); font-size: 13px; margin-bottom: 12px; white-space: pre-line; }
.card .meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card .meta .btn { flex-shrink: 0; white-space: nowrap; }
.price { color: var(--red); font-size: 20px; font-weight: 700; }
.price small { font-size: 12px; font-weight: 400; }
.refprice { color: var(--muted); font-size: 13px; font-weight: 400; text-decoration: line-through; margin-top: 2px; }
.card .refprice { margin-top: 2px; margin-left: 0; }
.kv .refprice { margin-left: 6px; margin-top: 0; display: inline; }
.stock { color: var(--muted); font-size: 13px; }

.product-grid { gap: 14px; }
.product-grid-compact { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); }
.product-grid-cover { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.product-card.card {
  overflow: hidden;
  padding: 0;
  border-color: var(--border);
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(16, 24, 40, .04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); box-shadow: 0 12px 30px rgba(37, 99, 235, .09); }
.product-cover { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--card-soft); color: var(--text); text-decoration: none; }
.product-cover > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-cover > img { transform: scale(1.035); }
.product-card-body { display: flex; flex-direction: column; min-height: 210px; padding: 16px; }
.product-card-cover .product-card-body { min-height: 222px; }
.product-card-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.product-thumb { width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--card-soft); }
.product-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-card-copy { min-width: 0; flex: 1; }
.product-card-flags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 22px; margin-bottom: 8px; }
.product-delivery-badge,
.product-discount-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; line-height: 1.35; }
.product-delivery-badge { border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--card)); color: var(--primary); }
.product-discount-badge { border: 1px solid color-mix(in srgb, var(--amber) 22%, var(--border)); background: color-mix(in srgb, var(--amber) 10%, var(--card)); color: color-mix(in srgb, var(--amber) 72%, var(--text)); }
.product-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-title-row h3 { margin: 0; min-width: 0; font-size: 17px; }
.product-title-row h3 a { color: var(--text); text-decoration: none; }
.product-title-row h3 a:hover { color: var(--primary); }
.product-variant-summary { margin-top: 7px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.product-variant-summary span { margin-right: 5px; color: var(--text-soft); font-weight: 700; }
.stock-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px var(--card-soft); }
.stock-dot.available { background: var(--green); }
.stock-dot.paused { background: var(--amber); }
.stock-dot.soldout { background: #94a3b8; }
.product-card .desc { display: -webkit-box; min-height: 40px; margin: 7px 0 0; overflow: hidden; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border-soft); }
.product-card .price { color: var(--primary); font-size: 21px; line-height: 1.15; }
.product-card .price small { margin-right: 1px; font-size: 13px; font-weight: 700; }
.product-action-block { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.product-card .stock { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.product-buy-btn { padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 650; }
.product-buy-btn span { margin-left: 3px; }
.product-card-compact .product-card-footer { align-items: stretch; flex-direction: column; gap: 10px; }
.product-card-compact .product-action-block { align-items: stretch; gap: 6px; }
.product-card-compact .product-discount-badge { margin-left: auto; }
.product-card-compact .product-card-actions { width: 100%; }
.product-card-compact .product-card-actions .btn { min-width: 0; flex: 1 1 0; justify-content: center; padding-right: 8px; padding-left: 8px; text-align: center; }
.product-card-compact .stock { max-width: 100%; text-align: right; }
.product-state-tag { padding: 6px 13px; border-radius: 9px; }
.purchase-quantity-stepper { display: grid; grid-template-columns: 36px 52px 36px; width: max-content; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--card-soft); }
.purchase-quantity-stepper button { min-height: 38px; border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 18px; font-weight: 650; line-height: 1; transition: background .18s ease, color .18s ease; }
.purchase-quantity-stepper button:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.purchase-quantity-stepper button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--primary); outline-offset: -2px; }
.purchase-quantity-stepper button:disabled { cursor: not-allowed; color: var(--muted); opacity: .45; }
.purchase-quantity-stepper output { display: flex; align-items: center; justify-content: center; min-width: 0; border-right: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 750; }
.products-empty { grid-column: 1 / -1; padding: 54px 24px; border: 1px dashed var(--border); border-radius: 16px; background: var(--card); text-align: center; }
.products-empty-icon { color: #93c5fd; font-size: 34px; }
.products-empty h3 { margin-top: 4px; font-size: 16px; }
.products-empty p { margin-top: 5px; color: var(--muted); font-size: 13px; }

html[data-theme="dark"] .shop-hero {
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 82% 18%, rgba(147,197,253,.28), transparent 28%),
    radial-gradient(circle at 66% 104%, rgba(129,140,248,.22), transparent 36%),
    linear-gradient(135deg, #172033 0%, #243b62 58%, #315d9c 100%);
  box-shadow: 0 22px 54px rgba(0,0,0,.22);
  color: #fff;
}
html[data-theme="dark"] .shop-hero::before,
html[data-theme="dark"] .shop-hero::after { border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .shop-hero-eyebrow { color: #bfdbfe; }
html[data-theme="dark"] .shop-hero-copy > p { color: #dbeafe; }
html[data-theme="dark"] .shop-hero .hero-primary { background: #fff; color: #1d4ed8; box-shadow: none; }
html[data-theme="dark"] .shop-hero .hero-primary:hover { background: #eff6ff; }
html[data-theme="dark"] .shop-hero .hero-secondary { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; }
html[data-theme="dark"] .shop-hero .hero-secondary:hover { background: rgba(255,255,255,.16); }
html[data-theme="dark"] .shop-hero-trust { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.12); }
html[data-theme="dark"] .hero-trust-item { background: rgba(8,34,86,.22); }
html[data-theme="dark"] .hero-trust-item + .hero-trust-item { border-left-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .hero-trust-item span { color: #bfdbfe; }
html[data-theme="dark"] .product-cover { background: var(--card-soft); color: #fff; }

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:hover { background: var(--primary-dark); }
.btn.block { display: block; width: 100%; }
.btn.ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn.ghost:hover { background: var(--primary-soft); }
.btn.danger { background: var(--red); }
.btn.sm { padding: 5px 12px; font-size: 13px; }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.panel h2 { font-size: 20px; margin-bottom: 18px; }

.checkout-panel { width: 100%; padding: 32px 36px; overflow: hidden; }
.variant-options { display:flex; flex-wrap:wrap; gap:10px; }
.checkout-single-variant { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card-soft); }
.checkout-single-variant span { color:var(--muted); font-size:13px; }
.checkout-single-variant strong { color:var(--text); font-size:15px; }
.variant-option { position:relative; width:auto; min-height:48px; padding:10px 42px 10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card-soft); color:var(--text); font-weight:650; line-height:1.45; text-align:left; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease; }
.variant-option:hover { border-color:var(--primary); background:var(--primary-soft); color:var(--text); }
.variant-option:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent); outline-offset:2px; }
.variant-option.active { border:2px solid var(--primary); padding:9px 41px 9px 13px; background:var(--primary-soft); color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent),0 5px 16px rgba(15,23,42,.08); transform:translateY(-1px); }
.variant-option.active::after { content:""; position:absolute; top:50%; right:13px; width:22px; height:22px; border-radius:50%; background:var(--primary); transform:translateY(-50%); }
.variant-option.active::before { content:""; position:absolute; z-index:1; top:50%; right:20px; width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-62%) rotate(45deg); }
.variant-option.active:hover { background:var(--primary-soft); color:var(--primary); }
.checkout-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.checkout-back { display: inline-flex; flex: none; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.checkout-back:hover { color: var(--primary); }
.checkout-steps { display: flex; align-items: center; justify-content: flex-end; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--card-soft); color: var(--muted); font-size: 14px; font-weight: 650; }
.checkout-steps span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.checkout-steps b { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--card); font-size: 13px; }
.checkout-steps span.active { color: var(--primary); font-weight: 600; }
.checkout-steps span.active b { border-color: var(--primary); background: var(--primary); color: #fff; }
.checkout-steps i { width: 54px; height: 2px; margin: 0 12px; background: var(--border); }
.checkout-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.checkout-heading h2 { margin: 2px 0 0; font-size: 24px; }
.checkout-product-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; margin: 18px 0; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--card-soft); }
.checkout-product-meta > .kv { min-width: 0; padding: 5px 0; border: 0; }
.checkout-product-meta > .stock-subscription-callout { grid-column: 1 / -1; }
.checkout-panel .price { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 750; }
.checkout-description { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 10px; background: color-mix(in srgb, var(--card-soft) 72%, transparent); }
.checkout-description > label { color: var(--text); font-weight: 700; }
.checkout-description > p { color: var(--muted); line-height: 1.75; }
.checkout-form { margin-top: 20px; padding-top: 0; border-top: 0; }
.checkout-purchase-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin-bottom: 20px; }
.checkout-purchase-row > .checkout-quantity-field { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding: 15px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-soft); }
.checkout-purchase-row > .checkout-quantity-field > label { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.checkout-total { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding: 15px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-soft); }
.checkout-total span { display: flex; flex-direction: column; }
.checkout-total small { color: var(--text); font-size: 16px; font-weight: 750; }
.checkout-total em { color: var(--muted); font-size: 13px; font-style: normal; }
.checkout-total strong { color: var(--text); font-size: 25px; font-variant-numeric: tabular-nums; font-weight: 800; }
.checkout-submit { min-width: 188px; min-height: 42px; font-weight: 700; }
.checkout-submit:disabled { cursor: wait; opacity: .68; }
.checkout-safe { margin-top: 9px; color: var(--muted); font-size: 12px; text-align: center; }
html[data-theme="dark"] .checkout-steps span.active { color: #a9cff5; }
html[data-theme="dark"] .checkout-steps span.active b { border-color: #477dac; background: #315f8a; }
html[data-theme="dark"] .checkout-submit { border: 1px solid #4779a8; background: #315f8a; color: #f8fbff; box-shadow: none; }
html[data-theme="dark"] .checkout-submit:hover { background: #3b719f; }
html[data-theme="light"] .product-buy-btn { border-color: #456d96; background: #456d96; color: #fff; box-shadow: none; }
html[data-theme="light"] .product-buy-btn:hover { border-color: #3b5f84; background: #3b5f84; color: #fff; }
html[data-theme="dark"] .product-buy-btn { border-color: #4779a8; background: #315f8a; color: #f8fbff; box-shadow: none; }
html[data-theme="dark"] .product-buy-btn:hover { border-color: #5688b7; background: #3b719f; color: #fff; }
html[data-theme="dark"] .checkout-cart-submit { border-color: #4b6384; background: rgba(255,255,255,.02); color: #c5d1df; }
html[data-theme="dark"] .checkout-cart-submit:hover { border-color: #617b9e; background: #1c2d43; color: #e1e9f2; }
.order-state-panel { max-width: 620px; margin: 0 auto; }
.order-state-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 26px; font-weight: 750; }
.order-state-panel > h2 { text-align: center; }
.order-state-success .order-state-icon { background: var(--success-bg); color: var(--green); }
.order-state-success > h2 { color: var(--green); }
.order-state-pending .order-state-icon { background: var(--notice-bg); color: var(--amber); }
.order-state-pending > h2 { color: var(--amber); }
.order-state-closed .order-state-icon { background: var(--danger-bg); color: var(--red); }
.order-actions { display: flex; gap: 10px; margin-top: 16px; }
.order-actions > * { flex: 1; }
.order-cancel-entry { margin-top: 14px; text-align: center; }
.order-cancel-entry .btn { width: min(320px, 100%); }
.delivery-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.code-copy { flex: 0 0 auto; padding: 5px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 6px; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
.copy-toast { position: fixed; z-index: 2100; left: 50%; bottom: 24px; padding: 9px 14px; border-radius: 8px; background: #172033; color: #fff; font-size: 13px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .18s, transform .18s; }
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }

.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

.paychoice { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.field .paychoice > label {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 16px 8px 10px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: var(--card-soft);
  box-sizing: border-box;
  transition: border-color .15s, color .15s;
  line-height: 1;
  min-height: 40px;
}
.paychoice input { display: none; }
.field .paychoice .pay-icon {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  margin: 0;
}
.field .paychoice .pay-name {
  white-space: nowrap;
  text-align: left;
  font-weight: 800;
  font-size: 14px;
  line-height: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.paychoice input:checked ~ .pay-name { color: var(--primary); }
.field .paychoice > label:has(input:checked) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap; }
tr:last-child td { border-bottom: none; }

.tag { display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 12px; }
.tag.green { background: var(--success-bg); color: var(--green); }
.tag.amber { background: var(--notice-bg); color: var(--amber); }
.tag.gray { background: var(--card-soft); color: var(--muted); }
.tag.red { background: var(--danger-bg); color: var(--red); }

.codebox {
  background: #0f172a;
  color: #7dfca3;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: Consolas, monospace;
  font-size: 15px;
  word-break: break-all;
  margin: 8px 0;
}

/* 加密货币付款：方案 A 左码右金额（与公告同宽，不额外限宽） */
.crypto-pay-panel { width: 100%; margin: 0; }
.crypto-pay-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.crypto-pay-title { font-size: 20px; margin: 0 0 8px; text-align: left; }
.crypto-net-tag {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}
.crypto-pay-ttl {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--muted);
  padding-top: 4px;
}
.crypto-pay-ttl .countdown { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }

.crypto-pay-hero {
  display: grid;
  grid-template-columns: 224px 1fr;
  gap: 20px 24px;
  align-items: start;
  margin-bottom: 16px;
}
.crypto-pay-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.crypto-qr-img {
  width: 200px;
  height: 200px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-sizing: content-box;
}
.crypto-qr-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.crypto-pay-side { min-width: 0; }
.crypto-amt-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.crypto-amt-warn {
  color: var(--red);
  font-weight: 600;
  margin-left: 4px;
}
.crypto-amt-box {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  padding: 16px 18px;
}
.crypto-copy-btn {
  min-width: 110px;
  padding: 8px 16px;
}
.crypto-cny { margin-top: 10px; margin-bottom: 4px; }
.crypto-addr-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.crypto-pay-side .crypto-addr-label { margin-top: 16px; }
.crypto-pay-side .crypto-addr-box {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}

.crypto-pay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  color: var(--muted);
  padding: 10px 0 4px;
  border-top: 1px dashed var(--border);
}
.crypto-pay-tips {
  margin-top: 12px;
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--notice-text);
}
.crypto-pay-tips-title {
  font-weight: 600;
  margin-bottom: 8px;
}
.crypto-pay-tips ul {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .crypto-pay-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .crypto-pay-side { width: 100%; text-align: left; }
  .crypto-amt-label { text-align: left; }
  .crypto-pay-head {
    flex-direction: column;
  }
}

.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }
.user-kv .kv { justify-content: flex-start; gap: 20px; }
.user-kv .kv .k { width: 132px; flex-shrink: 0; }
.user-kv .kv .kv-val { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.level-guide-btn { padding: 4px 10px; font-size: 12px; vertical-align: middle; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}
.modal-overlay[hidden] { display: none !important; }
.modal-panel {
  width: 100%;
  max-width: 720px;
  max-height: min(80vh, 640px);
  overflow: auto;
  margin: 0;
}
.dock-confirm-panel { position:relative; max-width:430px; padding:24px; overflow:visible; }
.dock-confirm-close { position:absolute; top:12px; right:13px; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:23px; line-height:1; }
.dock-confirm-close:hover { background:var(--card-soft); color:var(--text); }
.dock-confirm-head { display:flex; align-items:flex-start; gap:13px; padding-right:28px; }
.dock-confirm-head h2 { margin:0 0 5px; font-size:18px; }
.dock-confirm-head p { margin:0; color:var(--muted); font-size:13px; }
.dock-confirm-icon { width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:50%; background:var(--notice-bg); color:var(--amber); font-size:20px; font-weight:800; }
.dock-confirm-desc { margin:18px 0 0; padding:12px 13px; border-radius:9px; background:var(--card-soft); color:var(--muted); font-size:13px; line-height:1.65; }
.dock-confirm-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }
.btn.danger { border-color:var(--red); background:var(--red); color:#fff; }
.btn.danger:hover { filter:brightness(.95); }
@media (max-width: 520px) {
  .dock-confirm-panel { max-width:none; padding:22px 18px 18px; }
  .dock-confirm-actions { display:grid; grid-template-columns:1fr 1fr; }
  .dock-confirm-actions .btn { width:100%; }
}
.level-current-row { background: var(--card-soft); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stats .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.stats .stat .num { font-size: 24px; font-weight: 700; }
.stats .stat .label { font-size: 13px; color: var(--muted); }

.center { text-align: center; }
.mt { margin-top: 16px; }
.muted { color: var(--muted); font-size: 13px; }

.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 18px; }
.footer .brand-credit { color: inherit; text-decoration: none; text-underline-offset: 3px; }
.footer .brand-credit:hover { color: var(--primary); text-decoration: underline; }
.footer .brand-credit:focus-visible { border-radius: 3px; outline: 2px solid var(--primary); outline-offset: 3px; }
.footer .beian { margin-top: 6px; }
.footer .beian a { color: var(--muted); text-decoration: none; }
.footer .beian a:hover { color: var(--primary); }
.footer-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 14px; margin-top: 8px; }
.footer-contacts a, .footer-contact-text { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; }
.footer-contacts a span, .footer-contact-text span { color: var(--text); font-weight: 600; }
.footer-contacts a:hover { color: var(--primary); }
.footer-contacts a:focus-visible { border-radius: 3px; outline: 2px solid var(--primary); outline-offset: 3px; }
.auth-beian { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px; background: transparent; }

.pager { display: flex; gap: 10px; margin-top: 16px; }
.record-loader { display: flex; justify-content: center; min-height: 28px; margin-top: 14px; }
.record-load-btn { min-width: 150px; }
.record-load-done { color: var(--muted); font-size: 12px; }
.catalog-loader { display: flex; justify-content: center; min-height: 40px; margin-top: 22px; }
.catalog-load-btn { min-width: 180px; }
.catalog-load-done { align-self: center; color: var(--muted); font-size: 13px; }

/* 用户中心通栏布局（与管理后台一致：侧栏贴左全高） */
.userlayout { display: flex; min-height: calc(100vh - 60px); }
.usermenu {
  width: 220px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
}
.usermenu .uhead { padding: 18px 16px; border-bottom: 1px solid var(--border); }
.usermenu .uemail { font-size: 13px; font-weight: 600; word-break: break-all; }
.usermenu .ubalance { font-size: 13px; color: var(--muted); margin-top: 4px; }
.user-menu-links { display: block; }
.userlayout .price { color: var(--green); }
.usermenu a {
  display: block;
  padding: 12px 18px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.usermenu a:hover { color: var(--primary); background: var(--card-soft); }
.usermenu a.active { color: var(--primary); background: var(--primary-soft); border-left-color: var(--primary); font-weight: 600; }
.usermain { flex: 1; min-width: 0; padding: 20px 24px; }
.quickamounts { display: flex; gap: 8px; margin-bottom: 8px; }
.tablewrap { overflow-x: auto; }
.tablewrap table { min-width: 640px; }

@media (max-width: 768px) {
  /* 手机端：侧栏变为完整可见的 3×2 菜单，不需要横向滑动查找。 */
  .userlayout { flex-direction: column; min-height: auto; }
  .usermenu {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 3px;
    overflow: visible;
    padding: 6px 8px 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .usermenu .uhead {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1px 10px;
    border-bottom: none;
    border-right: none;
    padding: 2px 3px 5px;
  }
  .usermenu .uemail { max-width: 100%; }
  .usermenu .ubalance { margin-top: 0; text-align: right; }
  .usermenu .uhead > .muted { grid-column: 1 / -1; margin-top: 0 !important; font-size: 11px !important; }
  .user-menu-links { display: contents; }
  .usermenu a {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 36px;
    padding: 6px 4px;
    border-left: none;
    border-bottom: none;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
  }
  .usermenu a.active { border-bottom-color: transparent; background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent); }
  .usermain { padding: 14px; }
  .usermenu .uemail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.countdown { font-weight: 700; color: var(--amber); }

@media (max-width: 640px) {
  .topbar {
    height: auto;
    min-height: 64px;
    padding: 10px 14px 8px;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .topbar .brand { max-width: calc(100% - 50px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { width: 100%; min-width: 0; gap: 8px; }
  .topbar nav { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a,
  .topbar .nav-logout-form { flex: 0 0 auto; }
  .topbar nav a,
  .topbar .nav-logout-button { margin: 0 18px 0 0; padding: 5px 0; font-size: 13px; }
  .storefront-preferences { flex: 0 0 auto; gap: 4px; padding-right: 42px; }
  .storefront-preferences select { width: 76px; max-width: 76px; height: 32px; padding-left: 7px; font-size: 11px; }
  .topbar .theme-toggle { position: absolute; top: 10px; right: 14px; }
  .theme-toggle { width: 34px; height: 34px; }
  .container { padding: 20px 12px; }
  .container.narrow { max-width: 100%; }
  .panel { padding: 18px 16px; }
  .panel h2 { font-size: 18px; }
  .checkout-panel { max-width: 100%; padding: 20px 16px; }
  .checkout-toolbar { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 20px; }
  .checkout-steps { width: 100%; align-items: flex-start; justify-content: space-between; padding: 9px 8px; font-size: 11px; line-height: 1.25; }
  .checkout-steps span { min-width: 0; flex: 1 1 0; flex-direction: column; gap: 3px; white-space: normal; text-align: center; }
  .checkout-steps b { width: 24px; height: 24px; font-size: 11px; }
  .checkout-steps i { min-width: 10px; max-width: 26px; height: 1px; flex: 0 1 26px; margin: 12px 2px 0; }
  .checkout-product-meta { grid-template-columns: 1fr; gap: 2px; margin: 14px 0; padding: 12px 14px; }
  .checkout-description { padding: 12px 14px; }
  .checkout-purchase-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
  .checkout-purchase-row > .checkout-quantity-field { order: 1; align-items: stretch; flex-direction: column; gap: 10px; padding: 12px 14px; }
  .checkout-total { order: 2; padding: 13px 14px; }
  .btn { min-height: 42px; padding: 10px 16px; }
  .btn.sm { min-height: 36px; padding: 7px 12px; }
  .field input, .field select, .field textarea { min-height: 44px; font-size: 16px; }
  .paychoice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .field .paychoice > label { width: 100%; min-width: 0; min-height: 46px; padding-right: 10px; }
  .field .paychoice .pay-name { overflow: hidden; text-overflow: ellipsis; }
  .kv { align-items: flex-start; gap: 16px; }
  .kv > :last-child { min-width: 0; overflow-wrap: anywhere; text-align: right; }
  .quickamounts { flex-wrap: wrap; }
  .quickamounts .btn { flex: 1 1 72px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats .stat { padding: 13px 14px; }
  .stats .stat .num { font-size: 20px; }
  .pager { flex-wrap: wrap; }
  .pager .btn { flex: 1; }
  .responsive-records { overflow: visible; }
  .responsive-records table,
  .responsive-records tbody { display: block; width: 100%; min-width: 0; }
  .responsive-records tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin-bottom: 10px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--card-soft); }
  .responsive-records tr:first-child { display: none; }
  .responsive-records td { display: grid; grid-template-columns: 82px minmax(0, 1fr); grid-column: 1 / -1; gap: 8px; align-items: baseline; padding: 2px 0; border: 0; overflow-wrap: anywhere; }
  .responsive-records td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 500; }
  .responsive-records .record-primary { margin-bottom: 3px; padding-bottom: 9px; border-bottom: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 650; }
  .responsive-records .record-amount { display: flex; grid-column: 1; flex-direction: column; gap: 1px; margin-top: 3px; color: var(--text); font-size: 18px; font-weight: 700; }
  .responsive-records .record-amount::before { font-size: 11px; }
  .responsive-records .record-status { display: flex; grid-column: 2; align-items: flex-end; justify-content: flex-end; margin-top: 3px; }
  .responsive-records .record-status::before { display: none; }
  .responsive-records .record-action { display: block; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); text-align: right; }
  .responsive-records .record-action::before { display: none; }
  .responsive-records .record-action .btn { width: 100%; }
  .responsive-records .record-note { margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--border); }
  .responsive-records .record-empty-row { display: block; }
  .responsive-records .record-empty { display: block; padding: 22px 8px; text-align: center; }
  .responsive-records .record-empty::before { display: none; }
  .record-loader { margin-top: 12px; }
  .record-load-btn { width: 100%; }
  .catalog-loader { margin-top: 16px; }
  .catalog-load-btn { width: 100%; }
  .checkout-steps i { width: 18px; margin: 0 6px; }
  .checkout-steps span { gap: 4px; font-size: 11px; }
  .checkout-steps b { width: 21px; height: 21px; }
  .order-actions { flex-direction: column-reverse; }
  .shop-hero,
  html[data-theme="dark"] .shop-hero {
    min-height: auto;
    margin-bottom: 22px;
    padding: 12px 2px 22px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
  }
  .shop-hero::before, .shop-hero::after { display: none; }
  .shop-hero-eyebrow { margin-bottom: 8px; font-size: 11px; letter-spacing: .05em; }
  .shop-hero-eyebrow span { display: none; }
  .shop-hero h1 { font-size: 27px; }
  .shop-hero-copy > p,
  html[data-theme="dark"] .shop-hero-copy > p { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.65; }
  .shop-hero-actions { margin-top: 16px; }
  .shop-hero-trust { display: none; }
  .products-heading h2 { font-size: 21px; }
  .product-grid { grid-template-columns: 1fr; gap: 12px; }
  .product-cover { aspect-ratio: 16 / 8; }
  .product-card-body, .product-card-cover .product-card-body { min-height: 0; padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 售后工单与协商对话 */
.record-action-stack { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.after-sale-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.after-sale-heading h2 { margin-bottom: 4px; }
.after-sale-heading p { margin: 0; }
.after-sale-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.after-sale-heading-actions form { margin: 0; }
.after-sale-cancel-panel { max-width: 470px; }
.after-sale-create-card { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.after-sale-order-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.after-sale-order-summary > span:first-child { color: var(--muted); }
.after-sale-create-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; }
.after-sale-policy { margin: 12px 0 0; font-size: 13px; }
.after-sale-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.after-sale-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.after-sale-filters a { padding: 7px 13px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.after-sale-filters a:hover { background: var(--surface-soft); color: var(--text); }
.after-sale-filters a.active { background: var(--primary-soft); color: var(--primary); }
.after-sale-new-reply { color: var(--primary); font-size: 11px; font-weight: 700; white-space: nowrap; }
.after-sale-detail-head { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 16px 96px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.after-sale-detail-head > div { min-width: 0; }
.after-sale-detail-head > div span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.after-sale-detail-head > div strong { display: block; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.after-sale-detail-head > .tag { position: absolute; top: 16px; right: 16px; }
.after-sale-chat { min-height: 320px; max-height: 560px; overflow-y: auto; margin-top: 16px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.after-sale-message { display: flex; align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
.after-sale-message.user { align-items: flex-end; }
.after-sale-message.system { align-items: center; }
.after-sale-message-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.after-sale-message.user .after-sale-message-meta { flex-direction: row-reverse; }
.after-sale-message-meta > span { font-weight: 700; }
.after-sale-bubble { max-width: min(74%, 680px); padding: 10px 13px; border: 1px solid var(--border); border-radius: 4px 12px 12px; background: var(--surface); color: var(--text); line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.after-sale-message.user .after-sale-bubble { border-color: color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: 12px 4px 12px 12px; background: var(--primary-soft); }
.after-sale-message.system .after-sale-bubble { max-width: 88%; border: 0; border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 12px; text-align: center; }
.after-sale-attachments { display: flex; flex-wrap: wrap; gap: 6px; max-width: 74%; margin-top: 6px; }
.after-sale-attachments a { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--primary); font-size: 12px; }
.after-sale-reply { margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 5%, transparent); }
.after-sale-reply-label { display: block; margin-bottom: 8px; color: var(--text); font-size: 14px; font-weight: 700; }
.after-sale-reply textarea { display: block; width: 100%; min-height: 128px; padding: 12px 14px; resize: vertical; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--text); font: inherit; line-height: 1.65; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.after-sale-reply textarea::placeholder { color: var(--muted); }
.after-sale-reply textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.after-sale-reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.after-sale-reply-actions > span { color: var(--muted); font-size: 12px; }
.after-sale-reply-actions .btn { flex: 0 0 auto; min-width: 112px; }
.after-sale-attachment-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-soft); }
.after-sale-attachment-form label { color: var(--text); font-size: 13px; font-weight: 700; }
.after-sale-attachment-form input[type="file"] { min-width: 0; color: var(--muted); font-size: 12px; }
.after-sale-attachment-form > span { grid-column: 2; color: var(--muted); font-size: 11px; }
.after-sale-attachment-form .btn { grid-column: 3; grid-row: 1 / span 2; }
.after-sale-ended { margin-top: 14px; padding: 11px 14px; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 768px) {
  .record-action-stack { width: 100%; }
  .record-action-stack .btn { flex: 1 1 auto; text-align: center; }
  .after-sale-heading { align-items: stretch; flex-direction: column; }
  .after-sale-heading-actions { justify-content: stretch; }
  .after-sale-heading-actions > a, .after-sale-heading-actions > form { flex: 1 1 140px; }
  .after-sale-heading-actions .btn { width: 100%; text-align: center; }
  .after-sale-create-card { padding: 14px; }
  .after-sale-create-grid { grid-template-columns: 1fr; gap: 0; }
  .after-sale-detail-head { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; padding-top: 48px; }
  .after-sale-detail-head > .tag { top: 14px; left: 14px; right: auto; }
  .after-sale-chat { min-height: 260px; max-height: none; padding: 14px 10px; }
  .after-sale-bubble { max-width: 88%; }
  .after-sale-attachments { max-width: 88%; }
  .after-sale-message.system .after-sale-bubble { max-width: 96%; border-radius: 10px; }
  .after-sale-reply { padding: 14px; }
  .after-sale-reply textarea { min-height: 136px; font-size: 16px; }
  .after-sale-reply-actions { align-items: stretch; flex-direction: column; gap: 9px; }
  .after-sale-reply-actions .btn { width: 100%; }
  .after-sale-attachment-form { grid-template-columns: 1fr; }
  .after-sale-attachment-form > span, .after-sale-attachment-form .btn { grid-column: auto; grid-row: auto; }
  .after-sale-attachment-form .btn { width: 100%; }
}

@media (max-width: 420px) {
  .shop-hero { padding: 10px 2px 20px; }
  .products-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .product-card-footer { align-items: stretch; flex-direction: column; }
  .product-action-block { align-items: stretch; }
  .product-card .stock { max-width: 100%; }
  .product-buy-btn { width: 100%; }
  .paychoice { grid-template-columns: 1fr; }
  .user-kv .kv { gap: 4px; flex-direction: column; }
  .user-kv .kv .k { width: auto; }
  .user-kv .kv > :last-child { text-align: left; }
  .stats { grid-template-columns: 1fr; }
}
.user-account-email{margin-top:3px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-name-btn{padding:4px 10px;font-size:12px}
.profile-name-modal-field{margin-top:20px}
.contact-bind-panel{max-width:480px}
.account-security-panel form{max-width:480px}
.account-security-divider{height:1px;background:var(--border);margin:28px 0}
.account-security-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.account-security-head h2{margin:0 0 6px}.account-security-head p{margin:0;line-height:1.6}
.totp-panel{max-width:520px}.totp-qr{display:block;width:220px;max-width:100%;margin:14px auto;padding:8px;border-radius:14px;background:#fff}
.totp-key-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.totp-key-row input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em}
.totp-recovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}
.totp-recovery-grid code{padding:11px;text-align:center;border:1px solid var(--border);border-radius:9px;background:var(--input);font-size:15px;letter-spacing:.08em}
.session-security-head{align-items:center}.user-session-list{display:grid;gap:10px}.user-session-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 16px;align-items:center;padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--input)}
.user-session-card.current{border-color:color-mix(in srgb,var(--primary) 42%,var(--border))}.user-session-main{display:flex;align-items:center;gap:9px;min-width:0}.user-session-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-session-meta{display:flex;flex-wrap:wrap;gap:5px 14px;color:var(--muted);font-size:12px}.user-session-card>.btn{grid-column:2;grid-row:1 / span 2}.session-notice{margin:0 0 12px}
@media(max-width:560px){.account-security-head{align-items:flex-start}.totp-recovery-grid{grid-template-columns:1fr}.totp-key-row{grid-template-columns:1fr}.totp-key-row .btn{justify-self:start}}
@media(max-width:560px){.session-security-head{display:grid}.session-security-head>.btn{justify-self:start}.user-session-card{grid-template-columns:1fr}.user-session-card>.btn{grid-column:1;grid-row:auto;justify-self:start}.user-session-meta{display:grid;gap:4px}}
.contact-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}
.contact-code-row .btn{white-space:nowrap}
.contact-bind-status{min-height:20px;margin:7px 0 0;font-size:13px}
.contact-bind-success{color:var(--green)}
.cart-nav-link{display:inline-flex!important;align-items:center;gap:5px}
.cart-nav-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--primary);color:#fff;font-size:11px;line-height:18px;text-align:center}
.product-card-actions{display:flex;align-items:center;gap:8px}
.product-cart-btn,.product-buy-btn{padding-left:12px;padding-right:12px;white-space:nowrap}
.checkout-submit-actions{display:flex;justify-content:flex-end;gap:10px}
.checkout-submit-actions .btn{width:auto;min-width:138px}
.cart-page{padding:8px 0 24px}
.cart-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.cart-page-heading h1{font-size:28px;margin:2px 0 0}
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.cart-lines-panel{padding:4px 22px}
.cart-line{display:grid;grid-template-columns:76px minmax(180px,1fr) 116px 110px auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border)}
.cart-line:last-child{border-bottom:0}
.cart-line-cover{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--primary);text-align:center}
.cart-line-icon-text{font-size:26px;font-weight:800;line-height:1;text-transform:uppercase}
.cart-line-cover img{position:absolute;inset:0;width:100%;height:100%;background:var(--card-soft)}
.cart-line-icon-image{object-fit:contain;padding:7px}
.cart-line-cover-image{object-fit:cover}
.cart-line-info h2{font-size:16px;margin:0 0 7px}.cart-line-info h2 a{color:var(--text);text-decoration:none}.cart-line-info p{margin:0 0 5px;font-size:13px}
.cart-quantity-label{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.cart-quantity-stepper{display:grid;grid-template-columns:34px 46px 34px;border:1px solid var(--border);border-radius:9px;overflow:hidden;width:max-content}.cart-quantity-stepper button{min-height:38px;border:0;background:var(--card-soft);color:var(--text);cursor:pointer;font-size:19px;line-height:1}.cart-quantity-stepper button:hover:not(:disabled){background:var(--primary-soft);color:var(--primary)}.cart-quantity-stepper button:focus-visible{position:relative;z-index:1;outline:2px solid var(--primary);outline-offset:-2px}.cart-quantity-stepper button:disabled{cursor:not-allowed;color:var(--muted);opacity:.45}.cart-quantity-stepper output{display:flex;align-items:center;justify-content:center;width:46px;border-left:1px solid var(--border);border-right:1px solid var(--border);background:var(--card);color:var(--text);font-size:14px;font-variant-numeric:tabular-nums;font-weight:750}
.cart-line-subtotal{font-size:17px;color:var(--green);text-align:right;white-space:nowrap}
.cart-line-remove{border:0;background:none;color:var(--muted);cursor:pointer;padding:8px 0}.cart-line-remove:hover{color:var(--red)}
.cart-summary{position:sticky;top:18px}.cart-summary h2{font-size:20px;margin-bottom:10px}.cart-summary-total strong{font-size:24px;color:var(--green)}
.cart-summary .field{margin-top:16px}.cart-paychoice{grid-template-columns:1fr}.cart-empty{text-align:center;padding:52px 24px}.cart-empty h2{margin:10px 0 6px}.cart-empty .btn{margin-top:20px}
.order-item-summary{margin:10px 0 14px;border:1px solid var(--border);border-radius:12px;padding:10px 14px;background:var(--card-soft)}
.order-item-summary-title{font-size:12px;color:var(--muted);margin-bottom:5px}.order-item-summary-line{display:flex;justify-content:space-between;gap:16px;padding:6px 0}.order-item-summary-line strong{white-space:nowrap}.delivered-item-group+ .delivered-item-group{border-top:1px solid var(--border);padding-top:18px}
.user-order-detail{display:grid;gap:18px}.user-order-detail-toolbar{display:grid;gap:14px;padding-bottom:17px;border-bottom:1px solid var(--border)}.user-order-detail-back{justify-self:start}.user-order-detail-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.user-order-detail-heading h2{margin:3px 0 0;font-size:24px;line-height:1.25;overflow-wrap:anywhere}.user-order-detail-heading .tag{flex:0 0 auto}.user-order-detail-content{display:grid;gap:10px;min-width:0}.user-order-detail-content>.notice{margin:2px 0 6px}.user-order-detail-content .field>label{display:block;margin-bottom:8px;font-weight:650}.user-order-detail-actions{justify-content:flex-end}.user-order-detail-actions>*{flex:0 1 180px}.user-order-detail .order-item-summary{margin:2px 0}.user-order-detail .delivery-code span{min-width:0;white-space:pre-wrap}
@media(max-width:640px){.user-order-detail{gap:14px}.user-order-detail-toolbar{gap:12px;padding-bottom:14px}.user-order-detail-heading{align-items:flex-start;flex-direction:column;gap:9px}.user-order-detail-heading h2{font-size:19px}.user-order-detail-back{min-height:40px}.user-order-detail-actions>*{flex:1 1 auto}.user-order-detail .order-item-summary-line{align-items:flex-start}.user-order-detail .delivery-code{align-items:flex-start}.user-order-detail .delivery-code .code-copy{flex:0 0 auto}}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr}.cart-summary{position:static}.cart-line{grid-template-columns:64px minmax(0,1fr) 116px auto}.cart-line-cover{width:64px;height:64px}.cart-line-subtotal{grid-column:3;text-align:left}.cart-line-remove{grid-column:4;grid-row:1 / span 2}}
@media(max-width:620px){.product-card-actions{width:100%}.product-card-actions .btn{flex:1}.checkout-submit-actions{display:grid;grid-template-columns:1fr}.checkout-submit-actions .btn{width:100%}.cart-page-heading{align-items:flex-start}.cart-line{grid-template-columns:58px minmax(0,1fr) auto;gap:10px;padding:15px 0}.cart-line-cover{width:58px;height:58px}.cart-line-quantity{grid-column:2}.cart-quantity-stepper{grid-template-columns:44px 54px 44px}.cart-quantity-stepper button{min-height:44px;font-size:22px}.cart-quantity-stepper output{width:54px;font-size:16px}.cart-line-subtotal{grid-column:2;grid-row:auto}.cart-line-remove{grid-column:3;grid-row:1 / span 3}.cart-lines-panel{padding:2px 16px}}
@media(max-width:620px){.purchase-quantity-stepper{grid-template-columns:50px minmax(0,1fr) 50px;width:100%}.purchase-quantity-stepper button{min-height:50px;font-size:24px}.purchase-quantity-stepper output{font-size:18px}}
@media(max-width:520px){.contact-code-row{grid-template-columns:1fr}.contact-code-row .btn{width:100%}}
.license-page-head,.user-license-head,.license-device-title,.license-device-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.license-page-head{align-items:flex-start;margin-bottom:16px}.license-page-head h2{margin-bottom:5px}.user-license-list{display:grid;gap:14px}.user-license-card{padding:16px;border:1px solid var(--border);border-radius:13px;background:var(--card-soft)}.user-license-head>div{min-width:0;display:grid;gap:3px}.user-license-head>div strong{font-size:16px}.user-license-head>div span{overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.license-key-row{display:flex;align-items:center;gap:9px;margin-top:13px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}.license-key-row code{min-width:0;flex:1;overflow-wrap:anywhere;color:var(--green);font-size:14px}.license-key-row .btn{flex:none}.license-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.license-metrics>div{min-width:0;display:grid;gap:4px;padding:9px 10px;border-radius:8px;background:var(--surface)}.license-metrics span{color:var(--muted);font-size:11px}.license-metrics strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.license-reason{margin-top:10px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--red) 9%,var(--surface));color:var(--red);font-size:12px}.license-device-list{margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}.license-device-title{margin-bottom:5px}.license-device-title>span{font-size:11px}.license-device-row{padding:9px 0;border-bottom:1px solid var(--border)}.license-device-row:last-child{border-bottom:0}.license-device-row>div{min-width:0;display:grid;gap:3px}.license-device-row>div strong{font-size:13px}.license-device-row>div span{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.license-device-empty{padding:12px 0 4px;font-size:12px}.license-public-key{margin-top:16px;padding:12px 14px;border:1px solid var(--border);border-radius:10px}.license-public-key summary{cursor:pointer;font-weight:700}.license-public-key p{margin-top:8px;font-size:12px;line-height:1.6}
@media(max-width:768px){.license-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.user-license-card{padding:13px}.license-page-head{align-items:flex-start}.license-device-row{align-items:flex-start}.license-device-row form{flex:none}}

.notice.success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}.empty.compact{padding:28px 16px;text-align:center;color:var(--muted)}.empty.compact strong{display:block;color:var(--text);margin-bottom:4px}.notification-intro{margin:6px 0 16px;line-height:1.7}.notification-preference-form{display:grid;gap:12px}.notification-preference-option{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 16px;border:1px solid var(--border);border-radius:12px;background:var(--card-soft)}.notification-preference-option>span:first-child{display:grid;gap:5px}.notification-preference-option small{color:var(--muted);font-size:12px;line-height:1.5}.notification-check{display:flex;align-items:center;gap:7px;white-space:nowrap}.notification-check input{width:17px;height:17px;accent-color:var(--primary)}.notification-actions{display:flex;justify-content:flex-end}.notification-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.notification-section-head h2{margin-bottom:4px}.notification-subscription-list{display:grid;gap:10px}.notification-subscription-list article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card-soft)}.notification-subscription-list article>div:first-child{display:grid;gap:5px;min-width:0}.notification-subscription-list article small{color:var(--muted)}.notification-subscription-state{display:flex;align-items:center;gap:8px}.notification-subscription-state form{margin:0}
@media(max-width:640px){.notification-preference-option,.notification-section-head,.notification-subscription-list article{align-items:flex-start;flex-direction:column}.notification-check,.notification-actions,.notification-actions .btn{width:100%}.notification-actions .btn{justify-content:center}.notification-subscription-state{width:100%;justify-content:space-between}}
.stock-subscription-callout{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0;padding:13px 15px;border:1px solid var(--notice-border);border-radius:12px;background:var(--notice-bg);color:var(--notice-text)}.stock-subscription-callout[hidden]{display:none}.stock-subscription-callout>div{display:grid;gap:3px}.stock-subscription-callout span{font-size:12px}.stock-subscription-callout form{margin:0;flex:none}@media(max-width:640px){.stock-subscription-callout{align-items:stretch;flex-direction:column}.stock-subscription-callout .btn{width:100%;justify-content:center}}
.user-review-list,.product-review-list{display:grid;gap:12px}.user-review-card,.product-review-list article{padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--card-soft)}.user-review-head,.product-review-heading,.product-review-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.user-review-head>div{display:grid;gap:4px}.user-review-head small,.product-review-meta small{color:var(--muted)}.review-stars{color:#f59e0b;font-size:17px;letter-spacing:1px}.user-review-form{display:grid;gap:11px;margin-top:13px}.user-review-form label{display:grid;gap:5px;font-size:13px;font-weight:600}.user-review-form select,.user-review-form textarea{width:100%}.user-review-form .btn{justify-self:end}.product-review-panel{margin-top:16px}.product-review-heading{align-items:center;margin-bottom:16px}.product-review-score{display:flex;align-items:center;gap:9px}.product-review-score>strong{font-size:28px}.product-review-score>span{display:grid;color:#f59e0b;line-height:1.2}.product-review-score small{color:var(--muted);font-size:11px}.product-review-meta{align-items:center;justify-content:flex-start}.product-review-meta small{margin-left:auto}.product-review-list article p{margin-top:9px;white-space:pre-wrap;line-height:1.65}@media(max-width:640px){.user-review-head,.product-review-heading{align-items:flex-start;flex-direction:column}.user-review-form .btn{width:100%;justify-self:stretch;justify-content:center}.product-review-score{width:100%;justify-content:flex-start}.product-review-meta{display:grid;grid-template-columns:1fr auto}.product-review-meta small{grid-column:1/-1;margin:0}}
@media(max-width:440px){.user-license-head{align-items:flex-start}.license-key-row{align-items:stretch;flex-direction:column}.license-key-row .btn{width:100%}.license-device-row{align-items:stretch;flex-direction:column}.license-device-row .btn{width:100%}}
.license-delivery-label{margin:10px 0 6px;color:var(--muted);font-size:12px;font-weight:700}

/* 订阅与许可证生命周期 */
.usermenu-count { min-width: 20px; height: 20px; display: inline-grid; place-items: center; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 750; }
.subscription-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.subscription-page-head h2 { margin-bottom: 4px; }
.subscription-page-head p { max-width: 720px; margin: 0; font-size: 13px; }
.subscription-feedback { margin-bottom: 12px; padding: 10px 13px; border: 1px solid; border-radius: 9px; font-size: 13px; }
.subscription-feedback.success { border-color: var(--success-border); background: var(--success-bg); color: var(--success-text); }
.subscription-feedback.error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--red); }
.subscription-list { display: grid; gap: 14px; }
.subscription-card { padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--card-soft); }
.subscription-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.subscription-card-head > div { min-width: 0; display: grid; gap: 3px; }
.subscription-card-head strong { font-size: 17px; }
.subscription-card-head div > span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.subscription-metrics { display: grid; grid-template-columns: 1.45fr .85fr .8fr .65fr; gap: 8px; margin-top: 14px; }
.subscription-metrics > div { min-width: 0; display: grid; gap: 4px; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--card); }
.subscription-metrics span { color: var(--muted); font-size: 11px; }
.subscription-metrics strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.subscription-price { color: var(--green); }
.subscription-state-note { margin-top: 10px; padding: 8px 11px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 12px; }
.subscription-state-note.warning { background: var(--notice-bg); color: var(--notice-text); }
.subscription-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.subscription-actions form { margin: 0; }
.subscription-renew-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 10px; margin-top: 13px; }
.subscription-renew-box, .subscription-auto-renew-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.subscription-renew-box { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(230px, 1.3fr); }
.subscription-renew-box > div:first-of-type, .subscription-auto-renew-box > div { min-width: 0; display: grid; gap: 2px; }
.subscription-renew-box strong, .subscription-auto-renew-box strong { font-size: 13px; }
.subscription-renew-box span, .subscription-auto-renew-box span { color: var(--muted); font-size: 11px; }
.subscription-renew-box small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.subscription-renew-controls { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 8px; }
.subscription-renew-controls select { min-width: 0; height: 34px; padding: 0 30px 0 10px; }
.subscription-auto-renew-box .btn { flex: none; }
.subscription-plan-details, .subscription-history-details { margin-top: 12px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.subscription-plan-details summary, .subscription-history-details summary { padding: 10px 0; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 700; }
.subscription-plan-list { display: grid; gap: 7px; padding: 0 0 12px; }
.subscription-plan-list form { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px; background: var(--card-soft); }
.subscription-plan-list form > div { min-width: 0; display: grid; gap: 2px; }
.subscription-plan-list strong { font-size: 13px; }
.subscription-plan-list span { color: var(--muted); font-size: 11px; }
.subscription-history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 0 13px; }
.subscription-history-grid h3 { margin-bottom: 7px; font-size: 13px; }
.subscription-history-grid p { display: grid; gap: 1px; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.subscription-history-grid p strong { font-size: 12px; font-weight: 650; }
.subscription-history-grid p span { color: var(--muted); font-size: 11px; }
.subscription-confirm-panel { max-width: 500px; }
.subscription-buy-notice { display: grid; gap: 5px; margin-top: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 10px; background: var(--primary-soft); }
.subscription-buy-notice[hidden], .subscription-trial-form[hidden], .subscription-login-action[hidden] { display: none !important; }
.checkout-cart-submit[hidden] { display: none !important; }
.subscription-buy-notice > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.subscription-buy-notice strong { color: var(--primary); font-size: 13px; }
.subscription-buy-notice span, .subscription-buy-notice p { color: var(--muted); font-size: 12px; }
.subscription-buy-notice p { margin: 0; }
.subscription-trial-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; padding: 10px 12px; border: 1px dashed var(--success-border); border-radius: 9px; background: var(--success-bg); color: var(--success-text); font-size: 12px; }
.subscription-trial-form .btn { flex: none; }
.subscription-login-action { display: block; margin-top: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card-soft); color: var(--primary); font-size: 13px; font-weight: 700; text-align: center; }

@media (max-width: 900px) {
  .subscription-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-renew-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .subscription-page-head { align-items: stretch; flex-direction: column; }
  .subscription-page-head > .tag { align-self: flex-start; }
  .subscription-card { padding: 13px; }
  .subscription-card-head strong { font-size: 16px; }
  .subscription-metrics { grid-template-columns: 1fr 1fr; }
  .subscription-metrics > div:first-child { grid-column: 1 / -1; }
  .subscription-renew-box { grid-template-columns: 1fr; }
  .subscription-renew-controls { grid-template-columns: 1fr; }
  .subscription-renew-controls .btn { width: 100%; }
  .subscription-renew-box small { grid-column: auto; }
  .subscription-auto-renew-box { align-items: stretch; flex-direction: column; }
  .subscription-auto-renew-box .btn { width: 100%; }
  .subscription-plan-list form { align-items: stretch; flex-direction: column; }
  .subscription-plan-list .btn { width: 100%; }
  .subscription-history-grid { grid-template-columns: 1fr; gap: 10px; }
  .subscription-buy-notice > div, .subscription-trial-form { align-items: stretch; flex-direction: column; }
  .subscription-trial-form .btn { width: 100%; }
}

/* 邀请与联盟推广 */
.affiliate-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.affiliate-head h2 { margin-bottom:4px; }
.affiliate-head p { max-width:720px; margin:0; font-size:13px; }
.affiliate-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:9px; margin-bottom:16px; }
.affiliate-metrics > div { display:grid; gap:5px; padding:13px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card-soft); }
.affiliate-metrics span { color:var(--muted); font-size:12px; }
.affiliate-metrics strong { font-size:18px; }
.balance-positive { color:var(--green) !important; }
.amount-warning { color:var(--notice-text) !important; }
.affiliate-link-box { margin-bottom:15px; padding:14px; border:1px solid var(--border); border-radius:11px; background:var(--card-soft); }
.affiliate-link-box > label { font-size:13px; font-weight:750; }
.affiliate-link-box .license-key-row { margin-top:8px; }
.affiliate-link-box p { margin:8px 0 0; font-size:12px; }
.affiliate-settlement-action { display:flex; align-items:center; gap:12px; margin:0 0 20px; }
.affiliate-settlement-action span { font-size:12px; }
.affiliate-empty { display:grid; justify-items:start; gap:14px; padding:18px; border:1px dashed var(--border); border-radius:11px; background:var(--card-soft); }
.affiliate-empty p { margin:0; color:var(--muted); line-height:1.7; }
.affiliate-panel h3 { margin:20px 0 10px; font-size:15px; }
@media (max-width:620px) {
  .affiliate-head,.affiliate-settlement-action { align-items:stretch; flex-direction:column; }
  .affiliate-head > .tag { align-self:flex-start; }
  .affiliate-metrics { grid-template-columns:1fr 1fr; }
  .affiliate-settlement-action .btn { width:100%; }
}
.upgrade-version-details{display:grid;gap:10px;margin:22px 0 0;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--card-soft)}
.upgrade-version-details>div{display:flex;align-items:center;justify-content:space-between;gap:18px}
.upgrade-version-details dt{color:var(--text-muted)}
.upgrade-version-details dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}