:root {
  --paper: #ead7bf;
  --paper-soft: #f3e5d2;
  --paper-deep: #dfc3a2;
  --ink: #173d31;
  --ink-soft: #53675f;
  --green: #173a2e;
  --green-2: #24483a;
  --green-3: #315546;
  --cream: #f0ddc0;
  --gold: #c49a67;
  --gold-soft: rgba(157, 103, 50, 0.34);
  --burgundy: #5c211f;
  --line: rgba(150, 96, 45, 0.42);
  --line-soft: rgba(150, 96, 45, 0.20);
  --shadow: 0 14px 30px rgba(87, 58, 26, 0.10);
  --shadow-green: 0 16px 34px rgba(23, 58, 46, 0.18);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #fff; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100dvh; margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(23,61,49,.25); outline-offset: 3px; }
img { display: block; max-width: 100%; }

.app-shell {
  position: relative;
  width: min(100%, 448px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.52), transparent 24%),
    radial-gradient(circle at 86% 76%, rgba(157,109,65,.10), transparent 30%),
    linear-gradient(rgba(244,230,211,.55), rgba(234,215,191,.40)),
    url('data:image/jpeg;base64,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'),
    var(--paper);
  background-size: auto, auto, auto, 256px 256px, auto;
  box-shadow: 0 0 28px rgba(37, 46, 41, 0.13);
}

.screen { min-height: 100dvh; padding: 20px 16px 24px; }
.screen.has-sticky { padding-bottom: 28px; }

.top-nav {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  min-height: 54px;
  padding: 0 8px;
  border: 1px solid rgba(150, 96, 45, .18);
  border-radius: 28px;
  background: rgba(245, 232, 214, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px rgba(83,57,28,.06);
  backdrop-filter: blur(8px);
}
.top-nav button {
  position: relative;
  border: 0;
  background: transparent;
  padding: 16px 0 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .05em;
  cursor: pointer;
}
.top-nav button.is-active::after {
  position: absolute;
  right: 16px;
  bottom: 8px;
  left: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--ink);
  content: "";
}

.page-head { margin: 42px 18px 24px; }
.page-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .01em;
}
.page-head p { margin: 12px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; letter-spacing: .035em; }
.section-title { margin: 22px 2px 12px; font-family: var(--serif); font-size: 20px; font-weight: 700; }

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.primary-button {
  border: 0;
  color: var(--cream);
  background: linear-gradient(110deg, #17392d, #294a3b 58%, #17392d);
  box-shadow: var(--shadow-green);
}
.secondary-button { border: 1px solid var(--gold-soft); color: var(--ink); background: rgba(248,235,218,.38); }
.primary-button:active, .secondary-button:active { transform: scale(.985); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.primary-button .arrow { margin-left: auto; font-size: 26px; font-weight: 300; }

.sticky-action {
  position: static;
  width: auto;
  margin: 24px 18px 0;
  padding: 0;
  background: transparent;
}
.sticky-action .primary-button { width: 100%; padding: 0 28px; font-size: 18px; }
.sticky-action.is-split { display: grid; grid-template-columns: .42fr 1fr; gap: 10px; }
.sticky-action.is-split .secondary-button, .sticky-action.is-split .primary-button { min-height: 54px; padding: 0 18px; }

/* 首页 */
.home-screen { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: 28px; }
.home-stage { display: grid; min-height: 490px; margin: 32px 8px 0; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 8px; }
.home-copy { align-self: center; padding-left: 12px; }
.home-logo { width: 154px; }
.home-slogan { margin-top: 44px; font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--ink); }
.home-cn { margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: .20em; }
.home-product { align-self: center; overflow: visible; }
.home-product img { width: 255px; max-width: 155%; margin-left: -22px; border-radius: 18px; }
.home-steps { display: grid; margin: 16px 30px 0; grid-template-columns: 1fr 30px 1fr 30px 1fr; align-items: center; gap: 4px; }
.step-item { text-align: center; }
.step-icon { display: grid; width: 56px; height: 56px; margin: 0 auto; place-items: center; border: 1px solid var(--line-soft); border-radius: 50%; background: rgba(248,235,218,.28); }
.step-icon svg { width: 30px; height: 30px; stroke: var(--ink); }
.step-item b { display: block; margin-top: 9px; font-size: 12px; letter-spacing: .06em; }
.step-arrow { color: var(--ink-soft); font-size: 23px; text-align: center; }
.home-action { margin: auto 26px 0; padding-top: 30px; }
.home-action .primary-button { width: 100%; padding: 0 28px; font-size: 18px; }

/* 选品 */
.mode-stack { margin: 0 18px; }
.mode-main {
  position: relative;
  display: grid;
  min-height: 254px;
  padding: 28px 22px;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid var(--gold);
  border-radius: 26px;
  background: rgba(248,235,218,.36);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.mode-main.is-selected { color: var(--cream); background: linear-gradient(135deg, #284a3b, #17392d); box-shadow: var(--shadow-green); }
.mode-main .check-badge { position: absolute; top: 16px; right: 16px; }
.mode-radar { width: 145px; color: currentColor; }
.mode-main h2 { margin: 0; font-family: var(--serif); font-size: 31px; font-weight: 700; }
.mode-main p { margin: 24px 0 0; font-size: 14px; line-height: 1.75; }
.recommend-pill { display: inline-block; margin-left: 8px; padding: 5px 10px; border-radius: 999px; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 11px; font-weight: 700; vertical-align: middle; }
.mode-divider { width: 22px; height: 1px; margin-top: 16px; background: currentColor; opacity: .7; }
.mode-grid { display: grid; margin-top: 14px; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mode-card {
  position: relative;
  min-height: 278px;
  padding: 30px 18px;
  border: 1px solid var(--gold-soft);
  border-radius: 22px;
  background: rgba(248,235,218,.32);
  box-shadow: var(--shadow);
  text-align: center;
  cursor: pointer;
}
.mode-card.is-selected { color: var(--cream); border-color: var(--gold); background: linear-gradient(135deg, #284a3b, #17392d); box-shadow: var(--shadow-green); }
.mode-card .check-badge { position: absolute; top: 14px; right: 14px; }
.mode-card svg { width: 68px; height: 68px; stroke: currentColor; }
.mode-card h3 { margin: 18px 0 12px; font-family: var(--serif); font-size: 24px; }
.mode-card p { margin: 0; font-size: 13px; line-height: 1.75; }
.mode-card .mini-divider { width: 20px; height: 1px; margin: 12px auto 16px; background: currentColor; opacity: .7; }

/* 包装 */
.size-grid { display: grid; margin: 0 18px; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.size-card {
  position: relative;
  display: grid;
  min-height: 104px;
  padding: 14px 16px;
  grid-template-columns: 66px 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(248,235,218,.32);
  box-shadow: 0 7px 14px rgba(83,57,28,.05);
  cursor: pointer;
}
.size-card.is-selected { color: var(--cream); border-color: var(--gold); background: linear-gradient(135deg, #284a3b, #17392d); box-shadow: var(--shadow-green); }
.bag-outline { width: 48px; height: 62px; justify-self: center; color: currentColor; }
.size-card strong { display: block; font-family: var(--serif); font-size: 17px; line-height: 1.25; }
.size-card b { display: block; margin-top: 2px; font-family: var(--serif); font-size: 18px; }
.size-card span { display: block; margin-top: 4px; font-size: 14px; }
.check-badge { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--cream); font-size: 18px; }
.size-card .check-badge { position: absolute; top: 14px; right: 14px; }
.color-grid { display: grid; margin: 0 18px; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.color-option {
  position: relative;
  display: flex;
  min-height: 60px;
  padding: 8px 12px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(248,235,218,.32);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.color-option.is-selected { border: 2px solid var(--ink); }
.color-swatch { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 8px rgba(0,0,0,.12); }
.product-preview { display: grid; min-height: 410px; margin: 12px 10px 0; place-items: end center; overflow: hidden; }
.product-preview img { width: 420px; max-width: 110%; border-radius: 18px; }
.selection-strip {
  display: flex;
  min-height: 50px;
  margin: -4px 36px 0;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(248,235,218,.35);
  font-size: 13px;
}
.selection-strip b { white-space: nowrap; }
.selection-strip .tag-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; }

/* 拼配通用 */
.dark-panel { margin: 0 10px; border: 1px solid var(--gold); border-radius: 24px; color: var(--cream); background: linear-gradient(135deg, #284a3b, #17392d); box-shadow: var(--shadow-green); }
.blend-panel { display: grid; min-height: 346px; padding: 18px; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.blend-left { padding-right: 14px; border-right: 1px solid rgba(240,221,192,.30); }
.radar-chart { width: 100%; color: currentColor; }
.radar-grid polygon, .radar-grid line { fill: none; stroke: currentColor; stroke-width: 1; opacity: .42; }
.radar-data { fill: rgba(211,162,103,.55); stroke: #f0d9b5; stroke-width: 2; }
.radar-active-data { fill: rgba(126,30,48,.72); stroke: #ffe0a8; stroke-width: 2.6; stroke-dasharray: 6 4; }
.radar-center-disc { fill: rgba(23,58,46,.84); stroke: rgba(240,221,192,.75); stroke-width: 1; }
.radar-center-label { fill: var(--cream); font-family: var(--sans); font-size: 14px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.radar-labels text { fill: currentColor; font-family: var(--sans); font-size: 10px; text-anchor: middle; dominant-baseline: middle; }
.blend-caption { margin: 10px 0 8px; text-align: center; font-size: 12px; }
.radar-key { display: flex; justify-content: center; gap: 8px; margin: -2px 0 7px; color: rgba(243,223,194,.82); font-size: 9px; }
.radar-key span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.radar-key i { display: inline-block; width: 10px; height: 7px; border-radius: 3px; }
.radar-key-total { background: rgba(211,162,103,.72); border: 1px solid #f0d9b5; }
.radar-key-active { background: rgba(126,30,48,.8); border: 1px dashed #ffe0a8; }
.legend-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 9px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; background: var(--dot); }
.ratio-bar { display: flex; height: 24px; margin-top: 12px; overflow: hidden; border: 1px solid rgba(240,221,192,.65); border-radius: 999px; }
.ratio-segment { min-width: 0; background: var(--segment); }
.ratio-values { display: flex; margin-top: 8px; justify-content: space-around; font-size: 12px; }
.bean-detail h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 18px; line-height: 1.25; }
.current-pill { display: inline-block; margin-left: 6px; padding: 4px 8px; border-radius: 999px; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 9px; vertical-align: middle; }
.bean-detail p { margin: 7px 0; font-size: 12px; line-height: 1.55; }
.roast-box { margin-top: 14px; padding: 12px; border: 1px solid rgba(240,221,192,.24); border-radius: 14px; background: rgba(255,255,255,.04); }
.roast-head { display: flex; justify-content: space-between; font-size: 12px; }
.roast-bars { display: grid; margin-top: 10px; grid-template-columns: repeat(5,1fr); gap: 5px; }
.roast-bars span { height: 8px; border-radius: 999px; background: rgba(240,221,192,.16); }
.roast-bars span.is-on { background: linear-gradient(90deg,#d9a46a,#a4683e); }
.roast-scale { display: flex; margin-top: 7px; justify-content: space-between; font-size: 9px; opacity: .8; }
.bean-grid { display: grid; margin: 10px; grid-template-columns: repeat(2,1fr); gap: 8px 10px; }
.bean-row { display: grid; min-height: 58px; padding: 0 10px; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 16px; background: rgba(248,235,218,.30); }
.bean-row.is-active { border: 2px solid var(--ink); }
.bean-dot { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: var(--bean); }
.bean-name { font-family: var(--serif); font-size: 13px; font-weight: 700; line-height: 1.25; }
.ratio-control { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ratio-control button { display: grid; width: 26px; height: 26px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.12); cursor: pointer; }
.ratio-control strong { min-width: 34px; text-align: center; }
.status-strip { display: flex; min-height: 48px; margin: 12px 44px 0; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(248,235,218,.35); font-size: 13px; }

/* 手风琴 */
.accordion { margin: 0 10px; }
.acc-item { margin-bottom: 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(248,235,218,.32); box-shadow: 0 6px 14px rgba(83,57,28,.05); }
.acc-head { display: grid; min-height: 76px; padding: 8px 14px; grid-template-columns: 64px 1fr auto 22px; align-items: center; gap: 10px; cursor: pointer; }
.acc-icon { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.acc-icon svg { width: 40px; height: 40px; stroke: var(--ink); }
.acc-title strong { display: block; font-family: var(--serif); font-size: 20px; }
.acc-title span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
.radio { width: 27px; height: 27px; border: 2px solid var(--gold); border-radius: 50%; }
.radio.is-on { box-shadow: inset 0 0 0 5px var(--paper-soft); background: var(--green); }
.chev { font-size: 23px; }
.acc-body { padding: 0 16px 16px; }
.detail-box { padding: 14px 14px 12px; border: 1px solid var(--line-soft); border-radius: 15px; background: rgba(255,255,255,.14); }
.detail-title { margin-bottom: 8px; font-family: var(--serif); font-size: 15px; font-weight: 700; }
.detail-grid { display: grid; grid-template-columns: 108px 1fr; font-size: 12px; }
.detail-grid div { display: contents; }
.detail-grid span, .detail-grid b { padding: 7px 0; border-bottom: 1px dashed var(--line-soft); }
.detail-grid span { color: var(--ink-soft); }

/* 标签 */
.label-work { position: relative; display: grid; margin: 0 10px; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.editor-panel { min-height: 570px; padding: 20px 14px; border-radius: 22px; color: var(--cream); background: linear-gradient(145deg,#24483a,#17392d); box-shadow: var(--shadow-green); }
.field { position: relative; margin-bottom: 32px; }
.field label { display: block; margin-bottom: 9px; font-family: var(--serif); font-size: 15px; }
.field .example { float: right; font-family: var(--sans); font-size: 9px; opacity: .7; }
.field input, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(240,221,192,.50); border-radius: 13px; color: var(--cream); background: rgba(255,255,255,.04); }
.field textarea { height: 142px; resize: none; line-height: 1.65; }
.date-field { display: flex; padding: 11px 12px; align-items: center; justify-content: space-between; border: 1px solid rgba(240,221,192,.50); border-radius: 13px; font-size: 13px; }
.editor-panel .secondary-button { width: 100%; min-height: 54px; margin-top: 22px; color: var(--cream); border-color: rgba(240,221,192,.55); background: transparent; }
.preview-title { margin: 8px 0 14px; text-align: center; font-family: var(--serif); font-size: 17px; letter-spacing: .10em; }
.print-label { position: relative; min-height: 392px; padding: 18px 18px 16px; overflow: hidden; border: 1px solid rgba(240,221,192,.45); border-radius: 14px; color: var(--cream); background: linear-gradient(145deg,#234739,#18372d); box-shadow: var(--shadow-green); }
.print-label::before { position: absolute; inset: 10px; border: 1px solid rgba(240,221,192,.65); content:""; clip-path: polygon(0 0,94% 0,100% 8%,100% 100%,6% 100%,0 92%); }
.print-label > * { position: relative; z-index: 1; }
.label-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(240,221,192,.28); }
.label-brand { font-size: 18px; font-weight: 800; }
.label-brand small { margin-left: 6px; font-family: var(--serif); font-size: 8px; font-weight: 400; }
.label-main { display: grid; padding: 12px 0; grid-template-columns: .95fr 1.05fr; gap: 10px; border-bottom: 1px solid rgba(240,221,192,.28); }
.private-title { margin: 0 0 10px; font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.label-radar { width: 128px; }
.label-side p { display: flex; margin: 7px 0; padding-bottom: 6px; justify-content: space-between; border-bottom: 1px solid rgba(240,221,192,.16); font-size: 10px; }
.label-message { display: grid; padding-top: 12px; grid-template-columns: 1fr 74px; align-items: center; gap: 8px; font-size: 10px; line-height: 1.6; }
.packed { padding-left: 8px; border-left: 1px solid rgba(240,221,192,.28); text-align: center; }
.packed b { display: block; margin-bottom: 6px; font-size: 8px; }
.field-link { position: absolute; z-index: 8; pointer-events: none; border-top: 1.5px dashed rgba(240,221,192,.88); }
.field-link::after { position: absolute; top: -4px; right: -1px; width: 7px; height: 7px; border-top: 1.5px solid rgba(240,221,192,.88); border-right: 1.5px solid rgba(240,221,192,.88); content:""; transform: rotate(45deg); }

/* 支付 */
.payment-product { display: grid; margin: 0 10px; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.payment-bag { display: grid; min-height: 360px; place-items: end center; overflow: hidden; border-radius: 22px; }
.payment-bag img { width: 360px; max-width: 170%; margin-left: -34px; border-radius: 16px; }
.order-card { padding: 18px 14px; border-radius: 22px; color: var(--cream); background: linear-gradient(145deg,#24483a,#17392d); box-shadow: var(--shadow-green); }
.order-card h2 { margin: 0 0 14px; font-family: var(--serif); font-size: 21px; }
.order-line { display: flex; padding: 9px 0; justify-content: space-between; gap: 8px; border-bottom: 1px dashed rgba(240,221,192,.22); font-size: 11px; }
.order-line span { opacity: .72; }
.order-line b { text-align: right; }
.order-total { display: flex; margin-top: 16px; align-items: end; justify-content: space-between; }
.order-total strong { font-size: 30px; line-height: 1; }
.payment-methods { display: grid; margin: 16px 10px 0; grid-template-columns: repeat(2,1fr); gap: 10px; }
.pay-option { display: flex; min-height: 68px; padding: 10px 14px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(248,235,218,.32); cursor: pointer; }
.pay-option.is-selected { border: 2px solid var(--ink); }
.pay-logo { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #08b85d; font-weight: 800; }
.pay-logo.other { background: var(--green); }
.pay-option b { display: block; font-size: 13px; }
.pay-option span { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 9px; }
.pay-option .radio { margin-left: auto; }

.toast { position: fixed; bottom: 94px; left: 50%; z-index: 100; max-width: calc(100vw - 36px); padding: 12px 18px; border-radius: 999px; color: var(--cream); background: rgba(23,58,46,.95); box-shadow: var(--shadow-green); opacity: 0; pointer-events: none; transform: translate(-50%,12px); transition: .18s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 390px) {
  .screen { padding-right: 12px; padding-left: 12px; }
  .top-nav button { font-size: 12px; }
  .page-head { margin-right: 14px; margin-left: 14px; }
  .page-head h1 { font-size: 29px; }
  .home-stage { margin-right: 0; margin-left: 0; }
  .home-logo { width: 142px; }
  .home-slogan { font-size: 20px; }
  .mode-main { padding: 22px 16px; }
  .mode-main h2 { font-size: 27px; }
  .mode-card { min-height: 258px; padding: 26px 12px; }
  .mode-card h3 { font-size: 22px; }
  .size-grid, .color-grid { margin-right: 14px; margin-left: 14px; }
  .size-card { grid-template-columns: 56px 1fr; padding: 12px 10px; }
  .color-option { padding: 8px; font-size: 14px; }
  .color-swatch { width: 32px; height: 32px; }
  .blend-panel { padding: 14px 12px; gap: 11px; }
  .bean-detail h2 { font-size: 16px; }
  .bean-detail p { font-size: 11px; }
  .bean-grid { gap: 7px; }
  .bean-row { grid-template-columns: 28px 1fr auto; padding: 0 7px; }
  .bean-dot { width: 27px; height: 27px; }
  .bean-name { font-size: 12px; }
  .label-work { grid-template-columns: 138px 1fr; gap: 10px; }
  .editor-panel { padding: 18px 10px; }
  .private-title { font-size: 19px; }
  .print-label { padding: 15px 14px; }
  .payment-product { grid-template-columns: .95fr 1.05fr; }
}

.label-links{position:absolute;inset:0;z-index:7;width:100%;height:100%;pointer-events:none;overflow:visible;}

/* ===== NNUA UI polish v2 ===== */
:root {
  --paper: #ead5bb;
  --paper-soft: #f7ead9;
  --ink: #183c31;
  --ink-soft: #4f675d;
  --green: #173b2f;
  --green-2: #264a3b;
  --cream: #f3dfc2;
  --line: rgba(150,96,45,.34);
  --line-soft: rgba(150,96,45,.16);
  --shadow: 0 12px 28px rgba(74,48,23,.09);
  --shadow-green: 0 14px 30px rgba(23,58,46,.16);
}
body { background:#fff; }
.app-shell {
  width:min(100%, 540px);
  box-shadow:0 0 34px rgba(34,43,38,.11);
}
.screen { padding:22px 22px 30px; }
.top-nav {
  top:14px;
  min-height:58px;
  padding:0 10px;
  border-radius:30px;
  background:rgba(248,235,219,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 7px 22px rgba(88,60,30,.06);
}
.top-nav button { padding:17px 0 15px; font-size:14px; letter-spacing:.04em; }
.top-nav button.is-active::after { right:20px; left:20px; bottom:8px; height:2px; }
.page-head { margin:44px 16px 28px; }
.page-head h1 { font-size:34px; line-height:1.12; }
.page-head p { margin-top:11px; font-size:15px; line-height:1.7; }
.section-title { margin:25px 8px 13px; font-size:21px; }
.primary-button { box-shadow:0 12px 26px rgba(23,58,46,.16); }
.sticky-action { margin:26px 22px 0; }
.sticky-action .primary-button { min-height:60px; font-size:18px; }

/* Home */
.home-stage { min-height:500px; margin:30px 14px 0; grid-template-columns:.82fr 1.18fr; gap:18px; }
.home-copy { padding-left:8px; }
.home-logo { width:168px; }
.home-slogan { margin-top:36px; font-size:23px; }
.home-cn { margin-top:10px; font-size:13px; line-height:1.65; letter-spacing:.12em; }
.home-product { display:grid; place-items:center; min-width:0; }
.home-product img {
  width:318px;
  max-width:145%;
  margin:0 0 -4px -26px;
  border-radius:0;
  object-fit:contain;
  filter:drop-shadow(0 18px 18px rgba(67,43,22,.14));
}
.home-steps { margin:20px 42px 0; }

/* Selection cards */
.mode-stack { margin:0 22px; }
.mode-main { min-height:240px; padding:28px 28px; border-radius:24px; gap:24px; }
.mode-grid { gap:14px; margin-top:15px; }
.mode-card { min-height:250px; padding:28px 20px; border-radius:22px; }

/* Package */
.size-grid { margin:0 22px; gap:12px; }
.size-card { min-height:110px; padding:15px 18px; grid-template-columns:68px minmax(0,1fr); border-radius:18px; }
.color-grid { margin:0 22px; gap:12px; }
.color-option { min-height:64px; padding:9px 14px; font-size:17px; }
.product-preview {
  min-height:390px;
  margin:14px 24px 0;
  place-items:center;
  overflow:visible;
}
.product-preview img {
  width:320px;
  max-width:78%;
  max-height:390px;
  border-radius:0;
  object-fit:contain;
  filter:drop-shadow(0 18px 18px rgba(67,43,22,.16));
}
.selection-strip { margin:2px 46px 0; min-height:52px; font-size:13px; }

/* Custom blend */
.dark-panel { margin:0 18px; border-radius:24px; }
.blend-panel { height:330px; min-height:0; padding:20px; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:18px; overflow:hidden; }
.blend-left { min-width:0; padding-right:18px; }
.bean-detail { min-width:0; overflow:hidden; }
.blend-panel .bean-detail h2 { min-height:34px; max-height:34px; margin:0 0 6px; overflow:hidden; font-size:16px; line-height:1.1; }
.blend-panel .bean-detail p { margin:3px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; line-height:1.35; }
.blend-panel .roast-box { margin-top:8px; padding:8px; }
.blend-panel .roast-bars { margin-top:6px; gap:4px; }
.blend-panel .roast-scale { margin-top:4px; }
.blend-panel .blend-adjuster { margin-top:8px; padding:8px; gap:6px; }
.blend-panel .blend-adjuster .adjuster-label { font-size:10px; }
.blend-panel .blend-adjuster .adjuster-main { gap:6px; }
.blend-panel .blend-adjuster .adjuster-btn { width:34px; height:34px; flex-basis:34px; font-size:20px; }
.blend-panel .blend-adjuster .adjuster-value { min-width:48px; font-size:14px; }
.legend-line { display:grid; min-height:16px; height:16px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; overflow:hidden; }
.legend-line > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.legend-more { color:rgba(243,223,194,.78); }
.legend-empty { grid-column:1 / -1; color:rgba(243,223,194,.66); text-align:center; }
.ratio-values { min-height:18px; align-items:center; justify-content:space-between; gap:6px; white-space:nowrap; }
.ratio-values strong { font-weight:700; }
.bean-grid { margin:14px 18px; gap:10px 12px; }
.bean-row {
  min-height:64px;
  padding:0 11px;
  grid-template-columns:28px minmax(0,1fr) auto;
  gap:7px;
  border-radius:15px;
  overflow:hidden;
}
.bean-dot { width:28px; height:28px; }
.bean-name {
  min-width:0;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ratio-control { flex:0 0 auto; gap:3px; font-size:11px; }
.ratio-control button {
  width:20px;
  height:20px;
  border-radius:7px;
  font-size:12px;
  line-height:1;
  background:rgba(255,255,255,.22);
}
.ratio-control strong { min-width:29px; font-size:11px; }
.status-strip { margin:14px 52px 0; min-height:50px; }

/* Accordion */
.accordion { margin:0 18px; }
.acc-item { margin-bottom:9px; border-radius:18px; }
.acc-head { min-height:80px; padding:10px 16px; }

/* Label */
.label-work { margin:0 18px; grid-template-columns:174px minmax(0,1fr); gap:18px; }
.editor-panel { padding:22px 16px; border-radius:22px; }
.print-label { min-height:410px; }

/* Payment */
.payment-product { margin:0 18px; grid-template-columns:.95fr 1.05fr; gap:18px; }
.payment-bag { min-height:380px; overflow:visible; border-radius:0; }
.payment-bag img {
  width:290px;
  max-width:120%;
  margin:0 0 0 -20px;
  border-radius:0;
  object-fit:contain;
  filter:drop-shadow(0 18px 18px rgba(67,43,22,.16));
}
.order-card { padding:21px 18px; }
.payment-methods { margin:18px 18px 0; gap:12px; }

@media (max-width: 448px) {
  .app-shell { width:100%; }
  .screen { padding-right:16px; padding-left:16px; }
  .top-nav button { font-size:12px; }
  .page-head { margin-right:14px; margin-left:14px; }
  .page-head h1 { font-size:30px; }
  .size-grid,.color-grid,.mode-stack { margin-right:14px; margin-left:14px; }
  .product-preview { min-height:350px; margin-right:14px; margin-left:14px; }
  .product-preview img { width:285px; max-height:350px; }
  .bean-grid { margin-right:10px; margin-left:10px; gap:8px; }
  .bean-row { padding:0 7px; grid-template-columns:25px minmax(0,1fr) auto; gap:5px; }
  .bean-name { font-size:11px; }
  .ratio-control button { width:18px; height:18px; font-size:11px; }
  .ratio-control strong { min-width:26px; font-size:10px; }
  .label-work { margin-right:10px; margin-left:10px; grid-template-columns:146px minmax(0,1fr); gap:10px; }
  .payment-product { margin-right:10px; margin-left:10px; gap:10px; }
  .payment-bag img { width:245px; }
}



/* ===== NNUA frontend refinement v3 ===== */
.app-shell { width:min(100%,448px); }
.screen { padding:14px 16px 22px; }
.top-nav { top:8px; min-height:50px; padding:0 8px; }
.top-nav button { padding:14px 0 12px; font-size:12px; }
.top-nav button.is-active::after { right:14px; left:14px; bottom:7px; }
.page-head { margin:28px 14px 19px; }
.page-head h1 { font-size:30px; }
.page-head p { margin-top:8px; font-size:13px; line-height:1.55; }
.section-title { margin-top:19px; margin-bottom:10px; font-size:19px; }
.sticky-action { margin:20px 18px 0; }
.sticky-action .primary-button { min-height:54px; font-size:17px; }

/* Homepage keeps the natural content height, but restores the v2 visual proportions. */
.app-shell:has(.home-screen) { min-height:0; }
.home-screen { min-height:0; padding-bottom:28px; }
.home-stage { min-height:500px; margin:30px 14px 0; grid-template-columns:.82fr 1.18fr; align-items:center; gap:18px; }
.home-copy { padding-left:8px; }
.home-logo { width:168px; }
.home-slogan { margin-top:36px; font-size:23px; line-height:1.2; }
.home-cn { margin-top:10px; font-size:13px; line-height:1.65; letter-spacing:.12em; }
.home-product { display:grid; place-items:center; min-width:0; }
.home-product img { width:318px; max-width:145%; margin:0 0 -4px -26px; border-radius:0; object-fit:contain; filter:drop-shadow(0 18px 18px rgba(67,43,22,.14)); }
.home-steps { margin:20px 42px 0; }
.step-icon { width:56px; height:56px; }
.step-icon svg { width:30px; height:30px; }
.step-item b { margin-top:9px; font-size:12px; }
.home-action { margin:auto 26px 0; padding-top:30px; }
.home-action .primary-button { min-height:60px; font-size:18px; }

/* Package specification cards are flatter and more compact. */
.size-grid { gap:9px 10px; }
.size-card {
  min-height:84px;
  padding:9px 12px;
  grid-template-columns:50px minmax(0,1fr);
  gap:9px;
  border-radius:16px;
}
.bag-outline { width:40px; height:52px; }
.size-card strong { font-size:15px; line-height:1.15; }
.size-card b { margin-top:1px; font-size:16px; line-height:1.15; }
.size-card span { margin-top:2px; font-size:12px; }
.size-card .check-badge { top:9px; right:9px; width:24px; height:24px; font-size:14px; }

/* Package assets: use the newly isolated transparent renders. */
.product-preview { min-height:300px; margin:8px 18px 0; }
.product-preview img { width:270px; max-width:80%; max-height:300px; }
.selection-strip { margin-top:0; }
.payment-bag { min-height:300px; }
.payment-bag img { width:238px; max-width:125%; margin-left:-10px; }

/* Every coffee bean has visible ratio controls, including 0%. */
.bean-grid { margin-top:12px; }
.bean-row { min-height:62px; grid-template-columns:25px minmax(0,1fr) auto; gap:5px; padding:0 7px; }
.bean-dot { width:25px; height:25px; }
.bean-name { font-size:11px; }
.ratio-control { gap:3px; }
.ratio-control button { width:19px; height:19px; border-radius:6px; }
.ratio-control button:disabled { opacity:.35; cursor:not-allowed; }
.ratio-control strong { min-width:27px; font-size:10px; }

/* Label preview keeps the physical 80:50 ratio; editing moves underneath. */
.label-work { display:flex; flex-direction:column; margin:0 14px; gap:18px; }
.label-preview-wrap { position:relative; z-index:2; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; padding:0 5px; }
.preview-heading > span { color:var(--ink-soft); font-size:11px; letter-spacing:.08em; }
.preview-title { margin:0 0 10px; text-align:left; font-size:16px; }
.print-label { width:100%; aspect-ratio:8 / 5; min-height:0; padding:16px 20px 13px; border-radius:14px; }
.print-label::before { inset:8px; }
.label-top { min-height:34px; padding-bottom:8px; }
.label-brand { display:flex; align-items:center; min-width:0; }
.label-logo { width:78px; max-height:24px; object-fit:contain; object-position:left center; filter:brightness(0) invert(92%) sepia(21%) saturate(424%) hue-rotate(345deg) brightness(98%); }
.label-brand small { margin-left:8px; font-size:7px; white-space:nowrap; }
.label-size { font-size:10px; white-space:nowrap; }
.label-main { height:118px; min-height:0; padding:7px 0; grid-template-columns:.86fr 1.14fr; gap:12px; }
.label-title-row { min-height:28px; padding:8px 0 5px; }
.label-feature { display:flex; min-width:0; align-items:center; }
.private-title { margin:0; overflow:hidden; font-size:19px; line-height:1.15; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.label-radar { width:116px; }
.label-side { display:flex; min-width:0; min-height:0; height:100%; flex-direction:column; }
.label-side p { display:flex; margin:4px 0; min-width:0; padding-bottom:4px; justify-content:space-between; gap:6px; border-bottom:1px solid rgba(240,221,192,.16); font-size:9px; }
.label-side p span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.label-side p b { flex:0 0 auto; }
.label-scheme { flex:0 0 auto; }
.label-ratio-list { flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px; overscroll-behavior:contain; scrollbar-color:rgba(240,221,192,.68) rgba(255,255,255,.08); scrollbar-width:thin; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.label-ratio-list::-webkit-scrollbar { width:3px; }
.label-ratio-list::-webkit-scrollbar-track { background:rgba(255,255,255,.08); border-radius:999px; }
.label-ratio-list::-webkit-scrollbar-thumb { background:rgba(240,221,192,.68); border-radius:999px; }
.label-ratio-hint { flex:0 0 auto; margin-top:3px; color:rgba(240,221,192,.75); font-size:7px; line-height:1.2; text-align:right; white-space:nowrap; }
.label-message { padding-top:8px; grid-template-columns:1fr 72px; font-size:9px; line-height:1.45; }
.label-message p { margin:0; }
.editor-panel { position:relative; z-index:2; display:grid; min-height:0; padding:18px 16px; grid-template-columns:.82fr 1.18fr; gap:14px; }
.editor-panel .field { margin:0; }
.editor-panel textarea { height:88px; }
.date-editor { align-self:end; }
.label-back { align-self:end; margin:0 !important; }
.label-links { z-index:5; }

/* Payment icons use recognizable WeChat and bank-card symbols. */
.pay-logo { width:40px; height:40px; border-radius:12px; }
.pay-logo svg { width:30px; height:30px; }
.pay-logo.wechat { color:#fff; background:#07c160; }
.pay-logo.other { color:var(--cream); background:var(--green); }
.payment-methods { margin-top:12px; }

@media (max-width:390px) {
  .screen { padding-right:12px; padding-left:12px; }
  .home-stage { margin-top:30px; margin-right:0; margin-left:0; gap:14px; }
  .home-logo { width:142px; }
  .home-slogan { margin-top:30px; font-size:20px; }
  .home-product img { width:270px; max-width:150%; margin-left:-22px; }
  .home-steps { margin-right:24px; margin-left:24px; }
  .label-work { margin-right:6px; margin-left:6px; }
  .print-label { padding:14px 15px 11px; }
  .label-radar { width:92px; }
  .label-main { height:94px; }
  .private-title { font-size:17px; }
  .label-ratio-list { padding-right:2px; }
  .label-ratio-hint { font-size:6px; }
  .editor-panel { grid-template-columns:1fr; }
  .editor-panel textarea { height:80px; }
}


/* Final blend layout fix: full bean names + one unified ratio control under roast level. */
.blend-adjuster {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  justify-content:stretch;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid rgba(240,221,192,.24);
  border-radius:14px;
  background:rgba(255,255,255,.05);
  gap:6px;
}
.blend-adjuster .adjuster-label {
  font-size:12px;
  color:rgba(248,235,218,.82);
  white-space:nowrap;
}
.blend-adjuster .adjuster-main {
  display:flex;
  align-items:center;
  width:100%;
  justify-content:space-between;
  gap:8px;
  margin-left:0;
}
.blend-adjuster .adjuster-btn {
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  padding:0;
  border:1px solid rgba(240,221,192,.30);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--cream);
  font-size:20px;
  cursor:pointer;
  touch-action:manipulation;
}
.blend-adjuster .adjuster-btn:disabled {
  opacity:.35;
  cursor:not-allowed;
}
.blend-adjuster .adjuster-value {
  min-width:48px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:var(--cream);
}
.bean-grid {
  margin-top:12px;
}
.bean-row {
  min-height:68px;
  padding:10px 10px;
  grid-template-columns:25px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.bean-name {
  min-width:0;
  font-size:12px;
  line-height:1.25;
  white-space:normal;
  word-break:break-word;
}
.bean-ratio-badge {
  min-width:42px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:var(--ink);
  text-align:center;
  font-size:11px;
  font-weight:700;
}
.bean-row.is-active .bean-ratio-badge {
  background:var(--green);
  color:var(--cream);
}
@media (max-width:390px) {
  .blend-panel {
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
    gap:14px;
    padding:18px;
  }
  .blend-left { padding-right:12px; }
  .blend-panel .blend-adjuster { padding:8px; gap:6px; }
  .blend-panel .blend-adjuster .adjuster-label { font-size:10px; }
  .blend-panel .blend-adjuster .adjuster-main { gap:4px; }
  .blend-panel .blend-adjuster .adjuster-btn { width:36px; height:36px; flex-basis:36px; font-size:22px; }
  .blend-panel .blend-adjuster .adjuster-value { min-width:40px; font-size:14px; }
  .bean-row { min-height:72px; padding:10px 8px; gap:6px; }
  .bean-name { font-size:11px; }
  .bean-ratio-badge { min-width:38px; padding:5px 6px; font-size:10px; }
}