/* 朵澜商城页样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  padding: 20px 20px 128px;
  background:
    radial-gradient(900px 280px at 50% -40px, rgba(15, 107, 74, 0.1), transparent 70%),
    #f4f6f5;
  color: #1c2430;
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
}
button, input, select { font: inherit; }
a { text-decoration: none; }
.sheet { width: min(1040px, 100%); margin: 0 auto; }
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 12px 0 14px;
  background: rgba(244, 246, 245, 0.94);
  backdrop-filter: blur(12px);
}
.eyebrow {
  color: #0f6b4a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
}
h1 {
  font-family: "Songti SC", "Noto Serif SC", "SimSun", serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.15;
}
h2 { margin: 28px 0 10px; font-size: 15px; letter-spacing: 0.14em; color: #0f6b4a; }
#list h2 { display: flex; align-items: center; gap: 12px; }
#list h2::after { content: ""; flex: 1; height: 1px; background: #e3ebe6; }
.top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.tier { display: flex; align-items: center; gap: 8px; color: #5c6770; font-size: 13px; }
.tier select, .level-name, #reviewLink, #accountLink, .top a, #logout, #recharge {
  height: 36px;
}
.tier select {
  min-width: 108px;
  border: 1px solid #d5e3dc;
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #0f6b4a;
  font-size: 14px;
  font-weight: 700;
}
#logout, #clear, #orderBack, #rechargeBack, .qty button, .packs button, #gate button, #memberGate button, #registerForm button, #verifyForm button, #addressForm button, .find button, #order, #orderOk, #recharge, #rechargeOk, #openRecharge, #openCash, #savePayCode, #cashOk, #cashBack, #realBack, #earnBack, #payOk, #payCancel {
  border: 0;
  border-radius: 999px;
  background: #0f6b4a;
  color: #fff;
  cursor: pointer;
}
#logout, #clear, #orderBack, #rechargeBack, #cashBack, #realBack, #earnBack, #payCancel { padding: 0 14px; background: #fff; color: #1c2430; border: 1px solid #d7e2dc; }
#order, #orderOk, #recharge, #rechargeOk, #openRecharge, #openCash, #savePayCode, #cashOk, #payOk { padding: 0 16px; }
#recharge { padding: 0 16px; }
#order:disabled { opacity: 0.45; cursor: default; }
#gate, #memberGate, #registerForm, #verifyForm, .row, .sum, .profile article, .desk article {
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(21, 32, 51, 0.04);
}
#gate, #memberGate, #registerForm, #verifyForm {
  width: min(440px, 100%);
  margin: 36px auto 0;
  padding: 28px 24px 22px;
}
#gate p, #memberGate p, #registerForm p, #verifyForm p { color: #5c6770; font-size: 14px; margin-bottom: 12px; }
#gate input, #memberGate input, #registerForm input, #verifyForm input, #rechargeAmount, .find input, .qty input {
  width: 100%;
  border: 1px solid #d7e0db;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  background: #fff;
}
#gate input:focus, #memberGate input:focus, #registerForm input:focus, #verifyForm input:focus, #rechargeAmount:focus, .find input:focus, .qty input:focus, .tier select:focus {
  outline: 2px solid rgba(15, 107, 74, 0.28);
  border-color: #0f6b4a;
}
#memberGate input, #registerForm input, #verifyForm input, #rechargeAmount { margin-top: 8px; }
#gate button, #memberGate button, #registerForm button, #verifyForm button { width: 100%; margin-top: 12px; padding: 12px 16px; font-size: 16px; }
.form-actions { display: flex; gap: 8px; }
#memberGate .form-actions button, #registerForm .form-actions button { width: auto; flex: 1; }
#memberGate .form-actions button + button, #registerForm .form-actions button + button { background: #fff; color: #1c2430; border: 1px solid #d7e2dc; }
.level-name {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #d5e3dc;
  border-radius: 999px;
  background: #fff;
  color: #1c2430;
  font-size: 13px;
  font-weight: 600;
}
.error { min-height: 1.2em; margin-top: 10px; color: #a33b32; }
#addressError.ok { color: #0f6b4a; }
.hint { color: #5c6770; font-size: 13px; margin-bottom: 12px; }
#boardHint {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e4ebe7;
}
.packs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.packs.pack-board {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}
.pack-card {
  padding: 14px;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(21, 32, 51, 0.04);
}
.pack-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pack-head h3 {
  flex: 1;
  margin: 0;
  color: #1c2430;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}
.pack-join {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #118057;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.pack-scene,
.pack-story,
.pack-meta {
  margin: 6px 0 0;
  color: #5c6770;
  font-size: 12px;
  line-height: 1.5;
}
.pack-price {
  margin: 8px 0 0;
  color: #0f6b4a;
  font-size: 16px;
  font-weight: 700;
}
.pack-items {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pack-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5c6770;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.pack-item img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: #f3f6f4;
}
.pack-line { display: inline-flex; align-items: center; gap: 6px; }
.packs:not(.pack-board) button { padding: 8px 14px; background: #fff; color: #0f6b4a; font-size: 13px; border: 1px solid #cfe0d6; }
.share-chip {
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #cfe0d7;
  border-radius: 999px;
  background: #fff;
  color: #118057;
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
}
.sku-detail-panel .share-chip { margin-top: 10px; }
.share-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 24, 20, 0.45);
}
.share-mask[hidden] { display: none; }
.share-panel {
  width: min(360px, 100%);
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: #fff;
}
.share-actions { display: flex; gap: 8px; margin-top: 14px; }
.share-actions button {
  flex: 1;
  height: 40px;
  border: 1px solid #cfe0d7;
  border-radius: 999px;
  background: #f3faf6;
  color: #0f6b4a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  gap: 8px 16px;
  align-items: center;
  margin-top: 10px;
  padding: 14px 16px;
}
.row img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: #f3f6f4;
}
.row b { display: block; font-size: 16px; font-weight: 600; }
.row small { display: block; margin-top: 4px; color: #5c6770; }
.sku-filing { margin: 6px 0 0; color: #5c6770; font-size: 12px; line-height: 1.5; }
.sku-inci { margin-top: 4px; }
.sku-inci summary { cursor: pointer; color: #0f6b4a; font-size: 13px; }
.sku-inci p { margin: 6px 0 0; color: #5c6770; font-size: 12px; line-height: 1.6; }
.deal { color: #0f6b4a; font-size: 18px; font-weight: 700; text-align: right; white-space: nowrap; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { width: 32px; height: 32px; font-size: 18px; line-height: 1; }
.qty input { width: 52px; height: 32px; padding: 0; text-align: center; }
.sum {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(1040px, calc(100% - 24px));
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: 14px 16px;
}
.sum-note { grid-column: 1 / -1; margin: 0; color: #0f6b4a; font-size: 14px; }
.sum-actions { display: flex; gap: 8px; }
.sum-actions button { height: 40px; padding: 0 18px; }
.mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 24, 20, 0.45);
}
.sku-thumb { cursor: zoom-in; }
.sku-detail { z-index: 55; }
.sku-detail-panel { width: min(480px, 100%); }
.sku-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.sku-detail-head h2 { margin: 0; font-size: 18px; }
#skuDetailClose {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #eef3f1;
  color: #1c2430;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
#skuDetailPhoto {
  display: block;
  width: min(280px, 100%);
  height: auto;
  margin: 0 auto 12px;
  background: #fff;
}
#skuDetailFacts { margin-top: 8px; }
.sku-inci-title {
  margin: 10px 0 4px;
  color: #1c2430;
  font-size: 14px;
  font-weight: 700;
}
.sku-inci-text {
  margin: 0;
  color: #5c6770;
  font-size: 12px;
  line-height: 1.6;
}
.panel {
  width: min(440px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 24px 60px rgba(21, 32, 51, 0.16);
}
.panel h2 { margin: 0 0 8px; letter-spacing: 0.08em; }
.order-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e4ebe7; }
#orderAddress { margin-top: 12px; }
#orderAddress input,
#orderAddress select {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #d7e0db;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  background: #fff;
}
#orderAddress .addr-row, #orderAddress .addr-who { margin-top: 8px; }
#orderAddress .addr-row input, #orderAddress .addr-who input,
#orderAddress .addr-row select, #orderAddress .addr-who select { margin-top: 0; }
.pay-amount { margin-top: 12px; color: #0f6b4a; font-size: 22px; font-weight: 700; }
.order-no { margin-top: 8px; font-size: 18px; font-weight: 700; letter-spacing: 0.04em; }
.find { display: flex; gap: 8px; margin: 12px 0; }
.find button { height: 44px; padding: 0 18px; flex: 0 0 auto; white-space: nowrap; }
#reviewFind input { flex: 1; min-width: 0; }
.find-result { color: #1c2430; font-size: 14px; line-height: 1.6; min-height: 1.2em; }
#reviewLink, #accountLink, .top a {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d5e3dc;
  color: #0f6b4a;
  font-size: 14px;
}
.profile { display: block; }
.member-card h2 { margin: 0; color: #1c2430; font-size: 22px; letter-spacing: 0; }
.member-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.member-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.member-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.member-side .form-actions { margin: 0; }
.real-open {
  height: 28px;
  padding: 0 12px;
  border: 1px solid #d5e3dc;
  border-radius: 999px;
  background: #fff;
  color: #0f6b4a;
  cursor: pointer;
  font-size: 13px;
}
.member-side #openRecharge, .member-side #openCash { height: 32px; padding: 0 14px; font-size: 14px; }
#realBox #verifyForm {
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
#realBox #payCodeBox { display: grid; gap: 8px; justify-items: start; }
#realBox #realDone { margin-bottom: 12px; color: #0f6b4a; }
#changePayCode, #cancelPayCode {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #d7e2dc;
  border-radius: 999px;
  background: #fff;
  color: #1c2430;
  cursor: pointer;
}
.member-wallet { display: flex; align-items: flex-start; gap: 56px; margin-top: 14px; }
.member-wallet > div { min-width: 72px; }
.member-wallet span { color: #8b9690; font-size: 12px; }
.member-wallet strong { display: block; margin-top: 2px; color: #0f6b4a; font-size: 22px; }
.earn-open {
  display: block;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f6b4a;
  font: 700 22px/1.2 inherit;
  text-align: left;
  cursor: pointer;
}
.earn-line { margin: 0 0 8px; }
.member-card > p { margin-top: 12px; color: #5c6770; font-size: 13px; }
.member-card > .member-di { margin: 8px 0 0; color: #0f6b4a; font-size: 13px; letter-spacing: 0.06em; }
.desk .user-di { margin-top: 4px; color: #0f6b4a; font-size: 13px; letter-spacing: 0.06em; }
.user-balance { margin-top: 8px; }
.member-toggle { cursor: pointer; }
#users article.member-open { border-color: #0f6b4a; }
.point-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.point-row span { color: #5c6770; font-size: 12px; }
.point-row input {
  width: 96px;
  height: 36px;
  border: 1px solid #d7e0db;
  border-radius: 10px;
  padding: 0 8px;
  background: #fff;
}
.point-row button { height: 36px; }
.desk .point-error { flex: 1 0 100%; margin: 0; color: #a33b32; font-size: 12px; }
.manage { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.manage select, .manage input {
  height: 44px;
  border: 1px solid #d7e0db;
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
}
.manage select { flex: 1; min-width: 140px; }
.manage input { width: 120px; }
.manage button {
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #0f6b4a;
  color: #fff;
  padding: 0 16px;
  cursor: pointer;
}
.manage .error { flex: 1 0 100%; margin: 0; }
.addr-who-line { display: flex; align-items: center; gap: 8px; }
.addr-who-line b { font-size: 16px; }
.addr-who-line > .addr-phone { margin-left: auto; color: #1c2430; font-size: 15px; }
.addr-place { margin-top: 8px; color: #5c6770; font-size: 14px; line-height: 1.6; }
.addr-ops { display: flex; justify-content: flex-end; gap: 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef2f0; }
.desk .addr-ops button { background: transparent; color: #5c6770; padding: 0; border-radius: 0; }
.desk .addr-ops button.ship { background: transparent; color: #0f6b4a; }
.desk article.addr-on { border-color: #b7d7c8; }
.detail {
  margin-top: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
}
.detail p { margin-top: 8px; color: #5c6770; font-size: 14px; line-height: 1.7; }
.detail p:first-child { margin-top: 0; }
.profile article, .desk article { padding: 16px; }
.profile span { display: block; color: #5c6770; font-size: 12px; letter-spacing: 0.06em; }
.profile strong { display: block; margin-top: 6px; font-size: 18px; }
.desk { display: grid; gap: 10px; }
.review-sheet { width: min(1120px, 100%); }
.review-split {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.review-split h2 { margin: 16px 0 8px; }
.review-split > aside h2 { margin-top: 0; }
.tier-floors {
  margin: 0 0 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
}
.tier-floors p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 4px 0; font-size: 14px; }
.tier-floors p:first-child { display: block; margin-bottom: 6px; color: #5c6770; font-size: 12px; }
.tier-floors strong { color: #0f6b4a; font-weight: 700; }
.review-split .find { margin: 0 0 4px; }
.review-split #desk:has(article),
.review-split #cashouts:has(article) {
  gap: 0;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
  overflow: hidden;
}
.review-split #desk article,
.review-split #cashouts article {
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #eef2f0;
}
.review-split #desk article:last-child,
.review-split #cashouts article:last-child { border-bottom: 0; }
.review-split .order-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
.review-split .order-sum { margin-left: 0; flex: 1; }
.desk .actions { flex-wrap: wrap; }
.center-sheet { width: min(1040px, 100%); }
.center-sheet h2 { margin: 20px 0 8px; letter-spacing: 0.04em; }
#ledgerTitle { cursor: pointer; }
#ledgerTitle.open { color: #0f6b4a; }
.center-sheet #orders { gap: 8px; }
.center-sheet #orders article { padding: 12px 14px; }
.center-sheet .order-tabs { margin: 0 0 10px; }
.order-sum { margin-left: auto; color: #5c6770; font-size: 13px; white-space: nowrap; }
.desk article.ledger-sheet { padding: 4px 0; }
.ledger-line {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f0;
}
.ledger-line:last-child { border-bottom: 0; }
.ledger-line time { color: #8b9690; font-size: 12px; }
.ledger-line b.out { color: #1c2430; }
.ledger-line b.in { color: #0f6b4a; }
.income-total span { color: #8b9690; font-size: 13px; }
.income-total strong { display: block; margin-top: 4px; color: #0f6b4a; font-size: 26px; }
.pay-shot { display: block; width: 160px; max-width: 100%; height: auto; margin-top: 8px; border-radius: 12px; }
#payCodeFile { font-size: 13px; }
#payCodeBox article { display: grid; gap: 8px; justify-items: start; }
.center-sheet .order-empty,
.review-split .order-empty {
  padding: 18px 16px;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
  color: #8b9690;
}
.center-split {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.buddy {
  position: sticky;
  top: 72px;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
  overflow: hidden;
}
.buddy h2 { margin: 0; padding: 14px 14px 0; letter-spacing: 0.08em; }
.buddy-code { padding: 8px 14px 12px; color: #0f6b4a; font-size: 14px; font-weight: 700; }
.buddy-head {
  width: 100%;
  border: 0;
  background: #0f6b4a;
  color: #fff;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.buddy-list { background: #f7faf8; }
.buddy-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #e7eeea;
}
.buddy-face {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #d7efe4;
  color: #0f6b4a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: 0 0 auto;
}
.buddy-row b { display: block; font-size: 14px; }
.buddy-row small { color: #5c6770; font-size: 12px; }
.buddy-list p { padding: 10px 12px; color: #5c6770; font-size: 13px; }
.desk h3 { font-size: 15px; }
.order-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 4px 0 12px; }
.order-tab {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #d7e2dc;
  border-radius: 999px;
  background: #fff;
  color: #5c6770;
  cursor: pointer;
}
.order-tab.on { border-color: #0f6b4a; background: #0f6b4a; color: #fff; }
.bill {
  display: grid;
  grid-template-columns: 148px repeat(4, minmax(0, 1fr));
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
}
.bill-total { padding: 16px; background: #f3faf6; color: #8b9690; font-size: 13px; }
.bill-total strong { display: block; margin-top: 4px; color: #0f6b4a; font-size: 26px; }
.bill-grid { display: contents; }
.bill-grid > div { padding: 16px; border-left: 1px solid #eef2f0; }
.bill-grid span { display: block; color: #8b9690; font-size: 12px; }
.bill-grid b { display: block; margin-top: 4px; font-size: 16px; }
.bill > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid #eef2f0;
  color: #8b9690;
  font-size: 12px;
}
.desk .ledger-money { margin-top: 8px; color: #1c2430; font-size: 14px; }
.desk .ledger-when { margin-top: 6px; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-head h3 { margin: 0; letter-spacing: 0.02em; }
h3.order-toggle { cursor: pointer; }
h3.order-toggle.open { color: #0f6b4a; }
.badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef3f1;
  color: #3d4a44;
  font-size: 12px;
  font-weight: 700;
}
.badge.tone-wait { background: #fdecec; color: #c62828; }
.badge.tone-done { background: #e7f6ee; color: #118057; }
.desk article.tone-wait { border-color: #e7b4b4; }
.desk article.tone-done { border-color: #b7d7c8; }
.desk article.tone-wait h3 { color: #c62828; }
.desk article.tone-done h3 { color: #118057; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: #f4f7f6;
  color: #5c6770;
  font-size: 12px;
}
.desk .goods { margin-top: 8px; color: #1c2430; }
.desk p { color: #5c6770; font-size: 13px; margin-top: 4px; }
.desk .actions { display: flex; gap: 8px; margin-top: 10px; }
.desk button { border: 0; border-radius: 999px; padding: 2px 8px; min-height: 22px; font-size: 12px; line-height: 18px; cursor: pointer; }
.desk button.fold-mark { min-height: 20px; padding: 0 6px; font-size: 11px; background: #fff; color: #118057; border: 1px solid #cfe0d7; }
.top-chip {
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #cfe0d7;
  border-radius: 999px;
  background: #fff;
  color: #118057;
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
}
.desk button.ship { background: #0f6b4a; color: #fff; }
.level-pick {
  display: block;
  width: 100%;
  margin-top: 10px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d7e0db;
  border-radius: 12px;
  background: #fff;
  color: #1c2430;
  font-size: 13px;
}
.desk button.reject { background: #e7eeea; color: #1c2430; }
.pay { text-align: center; }
.pay img { width: min(260px, 100%); height: auto; margin: 12px auto; border-radius: 12px; }
.panel-actions { display: flex; gap: 8px; margin-top: 14px; }
.record-title { margin: 16px 0 8px; color: #1c2430; font-size: 15px; font-weight: 700; }
.panel .desk article { padding: 12px; box-shadow: none; }
.panel-actions button, #payOk, #payCancel { width: 100%; height: 44px; }
#addressForm {
  margin-top: 12px;
  padding: 4px 16px 16px;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
}
#addressForm .addr-note { padding-top: 12px; color: #8b9690; font-size: 13px; }
.addr-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid #eef2f0;
}
.addr-line > span { color: #1c2430; font-size: 14px; }
#addressForm .addr-line input,
#addressForm .addr-line select {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
  font-size: 15px;
}
#addressForm .addr-row select { padding-right: 8px; }
#addressForm button.map-pick {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f6b4a;
  font-size: 15px;
  text-align: left;
}
#addressForm button.addr-save {
  width: 100%;
  height: 44px;
  margin-top: 16px;
}
#addAddress {
  width: auto;
  height: auto;
  margin: 0 auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f6b4a;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
#orderAddress select:disabled,
#addressForm select:disabled {
  color: #8b9690;
  background: #f7faf8;
}
.addr-row, .addr-who, .addr-split, .addr-house { display: grid; gap: 8px; }
.addr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.addr-who, .addr-split { grid-template-columns: 1fr 1fr; }
.addr-house { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#centerActions { margin-top: 16px; }
#openRecharge { height: 40px; }
.sum span { display: block; color: #5c6770; font-size: 12px; }
.sum strong { font-size: 20px; }
#sumDeal { color: #0f6b4a; }
#needLogin {
  margin-top: 24px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e4ebe7;
  color: #5c6770;
}
.map-pick {
  display: block;
  width: 100%;
  margin-top: 8px;
  height: 40px;
  border: 1px dashed #0f6b4a;
  border-radius: 12px;
  background: #f4faf7;
  color: #0f6b4a;
  font-size: 14px;
  cursor: pointer;
}
#mapPick { z-index: 60; }
.map-panel { width: min(640px, 100%); }
#mapCanvas {
  height: 320px;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  background: #e7eeea;
}
.leaflet-container img { max-width: none; }
.status-pick {
  display: block;
  width: 100%;
  margin-top: 10px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d7e0db;
  border-radius: 12px;
  background: #fff;
  color: #1c2430;
  font-size: 13px;
}
.desk .wait { margin-top: 8px; color: #8b9690; font-size: 13px; }
.map-pin {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0f6b4a;
  box-shadow: 0 0 0 2px #0f6b4a;
}
.pay-admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pay-admin-row .top-chip {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 34px;
}
.pay-ways {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.pay-way {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border: 1px solid #d5e3dc;
  border-radius: 12px;
  background: #fff;
  color: #1c2430;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pay-way:has(input:checked) {
  border-color: #118057;
  background: #f3faf6;
  color: #0f6b4a;
}
.pay-way input { accent-color: #118057; }
.agree-open { margin: 12px 0 0; }
.agree-open a { color: #0f6b4a; font-size: 14px; font-weight: 700; }
.agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  color: #1c2430;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
}
#registerForm .agree input,
#rechargeBox .agree input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 4px;
}
.terms-panel { width: min(640px, 100%); }
.terms-panel iframe {
  width: 100%;
  height: min(58vh, 520px);
  margin-top: 10px;
  border: 1px solid #e4ebe7;
  border-radius: 12px;
  background: #fff;
}
#termsBack {
  height: 40px;
  padding: 0 16px;
  border: 1px solid #d7e2dc;
  border-radius: 999px;
  background: #fff;
  color: #1c2430;
  cursor: pointer;
}
.review-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 32px;
  margin-top: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: #0f6b4a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
#realBox .panel-actions { justify-content: flex-start; }
#realBox #realBack { width: auto; height: 32px; padding: 0 14px; }
@media (max-width: 860px) {
  .top { align-items: flex-start; }
  .top-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .review-split, .center-split, .profile { grid-template-columns: 1fr; }
  .bill { grid-template-columns: 1fr 1fr; }
  .bill-total, .bill > p { grid-column: 1 / -1; }
  .buddy { position: static; }
}
@media (max-width: 640px) {
  body { padding: 8px 12px 120px; }
  body:has(#sum:not([hidden])) { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
  h1 { font-size: 28px; }
  .mall-top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 6px;
    align-items: center;
    margin: 0 0 8px;
    padding: 0 0 4px;
  }
  .mall-top > div:first-child,
  .mall-top .top-actions { display: contents; }
  .mall-top .eyebrow { display: none; }
  .mall-top h1 {
    grid-column: 1 / 3;
    grid-row: 1;
    font-size: 18px;
    letter-spacing: 0.04em;
  }
  .center-sheet .top,
  .review-sheet .top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
  }
  .center-sheet .eyebrow,
  .review-sheet .eyebrow { display: none; }
  .center-sheet h1,
  .review-sheet h1 { font-size: 18px; white-space: nowrap; }
  .center-sheet .top-actions,
  .review-sheet .top-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    margin-left: auto;
  }
  .center-sheet .top a,
  .review-sheet .top a,
  .center-sheet #logout {
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
    white-space: nowrap;
  }
  .review-sheet .top-chip {
    height: 28px;
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 26px;
    white-space: nowrap;
  }
  .mall-top .top-actions > a[href="/dl/"], #levelName, #walletText {
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .mall-top .top-actions > a[href="/dl/"] {
    grid-column: 12 / 13;
    grid-row: 1;
    justify-self: end;
    color: #5c6770;
  }
  #levelName {
    grid-column: 3 / 9;
    grid-row: 1;
    color: #1c2430;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #walletText {
    grid-column: 9 / 12;
    grid-row: 1;
    justify-self: end;
    color: #0f6b4a;
  }
  #recharge { grid-column: 1 / 4; grid-row: 2; }
  #accountLink { grid-column: 4 / 7; grid-row: 2; }
  .mall-top #logout { grid-column: 7 / 10; grid-row: 2; }
  .mall-top #reviewLink { grid-column: 1 / -1; grid-row: 3; height: 32px; justify-content: center; }
  .mall-top #recharge, .mall-top #accountLink, .mall-top #logout {
    width: 100%;
    height: 32px;
    justify-content: center;
    padding: 0 4px;
    font-size: 13px;
  }
  .tier { grid-column: 10 / 13; grid-row: 2; gap: 0; font-size: 0; }
  .tier select { width: 100%; min-width: 0; height: 32px; padding: 0 8px; font-size: 13px; }
  .row { grid-template-columns: 64px minmax(0, 1fr) max-content; }
  .row img { width: 64px; height: 64px; grid-column: 1; grid-row: 1 / span 2; align-self: start; object-fit: cover; }
  .row > div:not(.deal):not(.qty) { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
  .deal { grid-column: 2; grid-row: 2; text-align: left; align-self: center; }
  .qty { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
  .sum {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 8px;
    bottom: 8px;
    padding: 8px 10px;
    border-radius: 14px;
  }
  .sum > div:not(.sum-actions) {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
  }
  .sum span { display: inline; font-size: 11px; white-space: nowrap; }
  .sum strong { font-size: 15px; white-space: nowrap; }
  .sum-actions { grid-column: 1 / -1; }
  .sum-note { font-size: 12px; line-height: 1.3; }
  .review-split .order-head { display: flex; flex-wrap: wrap; }
  .review-split .order-sum { flex: 1 0 100%; white-space: normal; }
  .profile, .addr-row, .addr-who, .addr-split, .addr-house { grid-template-columns: 1fr; }
  .addr-line { grid-template-columns: 72px minmax(0, 1fr); }
  .sum-actions button { flex: 1; }
}