/* YEKF 选款顾问 · 门店前台。配色参考 Loro Piana：象牙白底、深浓缩咖啡色字、驼色/烟草色点缀。
   不用外部字体（国内门店网络加载 Google Fonts 不稳），衬线标题走系统宋体 / Didot。 */
:root {
  --bg: #F6F2EC;
  --paper: #FFFDF9;
  --sand: #EDE5D9;
  --sand-2: #E3DACD;
  --line: #E3DACD;
  --line-2: #CDBFAE;
  --ink: #2B2420;
  --ink-2: #6F6157;
  --ink-3: #A39587;
  --accent: #8A6A4F;
  --accent-2: #B59777;
  --accent-soft: #F1E9DE;
  --ok: #4F6B4A;
  --warn: #9A3F22;
  --serif-latin: "Didot", "Bodoni 72", "Bodoni MT", "Times New Roman", serif;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 2px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#app { flex: 1; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.muted { color: var(--ink-2); }
.loading { padding: 30vh 0; text-align: center; color: var(--ink-3); letter-spacing: .2em; }

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 14px var(--gutter); background: rgba(246, 242, 236, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.mark { background: none; border: 0; padding: 0; font: 500 22px/1 var(--serif-latin); letter-spacing: .34em; }
.steps { display: flex; gap: 4px; list-style: none; margin: 0 auto; padding: 0; overflow-x: auto; scrollbar-width: none; }
.steps li { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); padding: 4px 10px; white-space: nowrap; }
.steps li b { font: 400 11px var(--serif-latin); margin-right: 6px; }
.steps li.on { color: var(--ink); border-bottom: 1px solid var(--ink); }
.steps li.done { color: var(--ink-2); }
.link { background: none; border: 0; font-size: 13px; color: var(--ink-2); letter-spacing: .1em; padding: 6px 0; white-space: nowrap; }
.link:hover { color: var(--ink); }
.progress { height: 2px; background: var(--sand); }
.progress span { display: block; height: 100%; background: var(--accent); width: 0; transition: width .4s ease; }

/* ---------- 底部操作栏 ---------- */
.actionbar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: rgba(255, 253, 249, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.actionbar .hint { flex: 1; font-size: 13px; color: var(--ink-2); text-align: center; }
.btn { appearance: none; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 13px 34px; border-radius: var(--radius); letter-spacing: .2em; font-size: 15px; transition: background .2s, color .2s, opacity .2s; }
.btn:hover { background: #45392F; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.light { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- 首页 ---------- */
.welcome { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); }
.welcome .photo { position: relative; overflow: hidden; }
.welcome .photo img { width: 100%; height: 100%; object-fit: cover; }
.welcome .intro { display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(28px, 6vw, 88px); gap: 22px; }
.welcome .wordmark { font: 400 clamp(46px, 6vw, 72px)/1 var(--serif-latin); letter-spacing: .32em; margin: 0; }
.welcome .kicker { font: 400 12px var(--sans); letter-spacing: .42em; color: var(--ink-3); text-transform: uppercase; margin: 0; }
.welcome h1 { font: 400 clamp(26px, 3vw, 34px)/1.35 var(--serif); letter-spacing: .12em; margin: 8px 0 0; text-wrap: balance; }
.welcome .lede { color: var(--ink-2); max-width: 30em; margin: 0; }
.welcome .flow { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 18px; margin: 6px 0 8px; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); justify-content: start; }
.welcome .flow li { white-space: nowrap; }
.welcome .flow li b { font: 400 11px var(--serif-latin); color: var(--accent); margin-right: 6px; }
.welcome .staff { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.welcome .staff input { width: 9em; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; font: inherit; color: var(--ink); }
.welcome .staff input:focus { outline: none; border-color: var(--ink); }
.welcome .start { align-self: flex-start; margin-top: 6px; }
.welcome .foot { margin-top: auto; padding-top: 24px; font-size: 12px; color: var(--ink-3); display: flex; gap: 18px; }
.welcome .foot a { color: inherit; }

/* ---------- 每一步 ---------- */
.stage { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter) 40px; }
.stage.enter { animation: rise .45s ease both; }
@media (prefers-reduced-motion: reduce) { .stage.enter { animation: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stage-head { margin-bottom: clamp(22px, 4vw, 36px); }
.stage-head .en { font: 400 12px var(--sans); letter-spacing: .42em; color: var(--accent); margin: 0 0 10px; }
.stage-head h2 { font: 400 clamp(26px, 3.4vw, 36px)/1.3 var(--serif); letter-spacing: .1em; margin: 0; text-wrap: balance; }
.stage-head p { color: var(--ink-2); margin: 10px 0 0; }
.sub-head { scroll-margin-top: 84px; font: 400 18px var(--serif); letter-spacing: .1em; margin: 36px 0 16px; display: flex; align-items: baseline; gap: 12px; }
.sub-head small { font: 400 12px var(--sans); color: var(--ink-3); letter-spacing: .1em; }

/* 表单 */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; max-width: 760px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; letter-spacing: .12em; color: var(--ink-2); }
.field .control { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; }
.field .control:focus-within { border-color: var(--ink); }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 30px/1.2 var(--serif); color: var(--ink); padding: 4px 0; letter-spacing: .04em; }
.field input::placeholder { color: var(--sand-2); }
.field input:focus { outline: none; }
.field .unit { font-size: 14px; color: var(--ink-3); }
.field .help { font-size: 12px; color: var(--ink-3); min-height: 1.2em; }
.field .help.warn { color: var(--warn); }

/* 选项卡片 */
.cards { display: grid; gap: 16px; }
.cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards.scenes { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { position: relative; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.card:hover { border-color: var(--line-2); }
.card[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.card[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 13px; display: grid; place-items: center; }
.card .pic { aspect-ratio: 3 / 4; overflow: hidden; background: var(--sand); }
.card .pic.wide { aspect-ratio: 21 / 9; }
.card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .pic img { transform: scale(1.03); }
.card .body { padding: 14px 16px 16px; }
.card .t { font: 400 19px/1.3 var(--serif); letter-spacing: .1em; }
.card .s { font-size: 12px; color: var(--ink-3); letter-spacing: .06em; margin-top: 4px; }
.card .q { font: 400 13px/1.6 var(--serif); color: var(--ink-2); margin-top: 8px; }

/* 色块 */
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 40px; font-size: 14px; letter-spacing: .08em; }
.swatch i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08); }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.swatch.auto i { background: conic-gradient(#1F2A44, #6E6E6E, #7A4E2D, #1A1A1A, #233A2C, #C2A87E, #1F2A44); }

/* 肤色 */
.skin .disc { aspect-ratio: 1; display: grid; place-items: center; background: var(--sand); }
.skin .disc i { width: 46%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 -10px 24px rgba(0, 0, 0, .08), 0 10px 30px rgba(60, 40, 20, .12); }

/* 使用时间 */
.timeline { display: grid; gap: 10px; max-width: 820px; }
.tl { display: grid; grid-template-columns: 9em 1fr auto; align-items: center; gap: 18px; padding: 18px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }
.tl .t { font: 400 20px var(--serif); letter-spacing: .1em; }
.tl .n { font-size: 13px; color: var(--ink-2); }
.tl[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tag { display: inline-block; font-size: 12px; letter-spacing: .12em; padding: 4px 10px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; border-radius: var(--radius); }
.tag.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag.camel { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent); }
.tag.warn { color: var(--warn); border-color: rgba(154, 63, 34, .35); }

/* 拍照识别框 */
.ai-box { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 18px; margin-bottom: 26px; background: var(--paper); border: 1px dashed var(--line-2); }
.ai-box.done { border-style: solid; border-color: var(--accent-2); background: var(--accent-soft); }
.ai-box.error { border-color: rgba(154, 63, 34, .45); }
.ai-pic { width: 76px; height: 76px; display: grid; place-items: center; background: var(--sand); color: var(--accent); overflow: hidden; }
.ai-pic img { width: 100%; height: 100%; object-fit: cover; }
.ai-text { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.ai-text .ai-title { font: 400 17px var(--serif); letter-spacing: .1em; color: var(--ink); }
.ai-text b:not(.ai-title) { color: var(--ink); font-weight: 600; }
.ai-text em { display: block; font-style: normal; font-size: 12px; color: var(--accent); }
.ai-box.error .ai-text span { color: var(--warn); }
.ai-box.loading .ai-pic { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.small-btn { padding: 10px 20px; font-size: 14px; letter-spacing: .12em; }
/* 婚纱「还没定」、面料色卡 */
.skin .disc i.unknown { display: grid; place-items: center; background: var(--paper); border: 1px dashed var(--line-2); box-shadow: none; font: 400 28px var(--serif-latin); color: var(--ink-3); }
.cards.dresses { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.card .pic .swatch-dot { position: absolute; left: 12px; bottom: 12px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.card .pic { position: relative; }
.skin .disc.tall { aspect-ratio: 3 / 4; }
.cards.suits { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.card .pic.square { aspect-ratio: 1; position: relative; }
.card .pic .fill { position: absolute; inset: 0; display: block; }
.card .pic .fill.auto { background: conic-gradient(#1F2A44, #6E6E6E, #7A4E2D, #1A1A1A, #233A2C, #C2A87E, #1F2A44); opacity: .85; }
.card .pic .rank { position: absolute; top: 10px; left: 10px; font-size: 12px; letter-spacing: .14em; background: var(--ink); color: var(--paper); padding: 4px 10px; }

/* ---------- 方案页 ---------- */
.plan-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.eyebrow { font: 400 12px var(--sans); letter-spacing: .42em; color: var(--accent); margin: 0 0 10px; }
.plan-hero h2 { font: 400 clamp(28px, 3.6vw, 40px)/1.25 var(--serif); letter-spacing: .1em; margin: 0; }
.plan-hero .arch { font: 400 15px var(--serif); color: var(--accent); letter-spacing: .2em; margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips span { font-size: 12px; padding: 5px 12px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); letter-spacing: .06em; }
.plan-hero .size-badge { text-align: right; }
.plan-hero .size-badge b { display: block; font: 400 56px/1 var(--serif-latin); letter-spacing: .04em; }
.plan-hero .size-badge small { font-size: 12px; color: var(--ink-3); letter-spacing: .14em; }

.section { padding: 40px 0 8px; }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.section-head .no { font: 400 14px var(--serif-latin); color: var(--accent); letter-spacing: .1em; }
.section-head h3 { font: 400 22px var(--serif); letter-spacing: .12em; margin: 0; }
.section-head p { margin: 0 0 0 auto; font-size: 13px; color: var(--ink-2); }
.notice { display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: var(--accent-soft); border-left: 2px solid var(--accent); font-size: 14px; color: var(--ink); margin-bottom: 22px; }

.recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rec { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.rec.chosen { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.rec .pic { position: relative; aspect-ratio: 3 / 4; background: var(--sand); overflow: hidden; }
.rec .pic img { width: 100%; height: 100%; object-fit: cover; }
.rec .rank { position: absolute; top: 12px; left: 12px; font: 400 12px var(--serif-latin); letter-spacing: .2em; background: rgba(255, 253, 249, .92); padding: 5px 10px; }
.rec .zone-pin { position: absolute; bottom: 12px; left: 12px; font-size: 12px; letter-spacing: .1em; background: rgba(43, 36, 32, .82); color: var(--paper); padding: 5px 10px; }
.rec .body { padding: 18px 18px 6px; display: grid; gap: 8px; }
.rec .sku { font: 400 12px var(--serif-latin); letter-spacing: .24em; color: var(--ink-3); }
.rec .name { font: 400 19px/1.35 var(--serif); letter-spacing: .06em; }
.rec .why { display: flex; flex-wrap: wrap; gap: 6px; }
.rec .why span { font-size: 11px; padding: 3px 8px; background: var(--accent-soft); color: var(--accent); letter-spacing: .04em; }
.rec .meta { font-size: 13px; color: var(--ink-2); display: grid; gap: 2px; }
.rec .meta b { font-weight: 400; color: var(--ink-3); margin-right: 6px; }
.rec .meta .fab { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; background-size: cover; background-position: center; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.prices { margin-top: auto; padding: 10px 18px 18px; display: grid; gap: 6px; }
.price { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); background: transparent; text-align: left; border-radius: var(--radius); }
.price .l { font: 400 15px var(--serif); letter-spacing: .12em; }
.price .v { font: 400 18px var(--serif-latin); letter-spacing: .02em; text-align: right; }
.price .badge { font-size: 11px; color: var(--accent); letter-spacing: .06em; }
.price.rec-mode { border-color: var(--accent-2); background: var(--accent-soft); }
.price[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.price:disabled { opacity: .45; cursor: not-allowed; }
.price:disabled .v { text-decoration: line-through; }

.zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.zone { display: grid; grid-template-columns: 44% 1fr; background: var(--paper); border: 1px solid var(--line); min-height: 210px; }
.zone .pic { background: var(--sand); overflow: hidden; }
.zone .pic img { width: 100%; height: 100%; object-fit: cover; }
.zone .body { padding: 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.zone .big { font: 400 40px/1 var(--serif-latin); letter-spacing: .1em; }
.zone .t { font: 400 18px var(--serif); letter-spacing: .1em; }
.zone .n { font-size: 13px; color: var(--ink-2); }
.zone .skus { margin-top: auto; font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.zone.dim { opacity: .45; }

.fit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--paper); border: 1px solid var(--line); }
.fit .pic { background: var(--sand); min-height: 260px; overflow: hidden; }
.fit .pic img { width: 100%; height: 100%; object-fit: cover; }
.fit .body { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.fit .where { font: 400 28px/1.3 var(--serif); letter-spacing: .1em; }
.fit-notes { margin: 0; padding: 12px 14px 12px 30px; background: var(--accent-soft); font-size: 13px; color: var(--ink); display: grid; gap: 4px; }
.fit table { border-collapse: collapse; width: 100%; font-size: 14px; }
.fit th, .fit td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.fit th { color: var(--ink-3); width: 5.5em; letter-spacing: .1em; font-size: 13px; }
.fit td { font-family: var(--serif-latin); letter-spacing: .04em; }

.save-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 44px; padding: 26px 28px; background: var(--ink); color: var(--paper); }
.save-bar .t { font: 400 18px var(--serif); letter-spacing: .1em; }
.save-bar .s { font-size: 13px; color: var(--sand-2); }
.save-bar .ref { font: 400 26px var(--serif-latin); letter-spacing: .14em; }
.price-note { font-size: 12px; color: var(--ink-3); margin-top: 14px; }

/* 保存弹窗 */
.sheet { border: 0; padding: 0; width: min(460px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(43, 36, 32, .25); }
.sheet::backdrop { background: rgba(43, 36, 32, .35); }
.sheet form { padding: 28px; display: grid; gap: 14px; }
.sheet h3 { font: 400 22px var(--serif); letter-spacing: .12em; margin: 0; }
.sheet p { margin: 0; font-size: 13px; }
.sheet label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.sheet input, .sheet textarea { font: inherit; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line-2); background: #fff; border-radius: var(--radius); }
.sheet .row { display: flex; justify-content: flex-end; gap: 12px; margin-top: 6px; }
.error { color: var(--warn); }
.sheet label.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink); line-height: 1.5; }
.sheet label.consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--ink); flex: none; }
.closed { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.closed .wordmark { font: 400 48px/1 var(--serif-latin); letter-spacing: .32em; margin: 0 0 24px; }
.closed p { color: var(--ink-2); max-width: 26em; margin: 0 auto; }

/* ---------- 平板竖屏 / 手机 ---------- */
@media (max-width: 1000px) {
  .cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zones { grid-template-columns: 1fr; }
  .steps li:not(.on) span { display: none; }
}
@media (max-width: 760px) {
  .welcome { grid-template-columns: 1fr; }
  .welcome .photo { height: 42vh; }
  .welcome .intro { padding: 32px 20px 28px; }
  .welcome .flow { grid-template-columns: repeat(2, auto); }
  .fields { grid-template-columns: 1fr; gap: 22px; }
  .cards.c3, .cards.c2 { grid-template-columns: 1fr; }
  .cards.scenes, .cards.suits, .cards.dresses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ai-box { grid-template-columns: 60px minmax(0, 1fr); padding: 12px; gap: 12px; }
  .ai-pic { width: 60px; height: 60px; }
  .ai-box .small-btn { grid-column: 1 / -1; }
  .cards.c2 .pic.wide { aspect-ratio: 16 / 9; }
  .recs { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr auto; padding: 16px; }
  .tl .n { grid-column: 1 / -1; grid-row: 2; }
  .plan-hero { grid-template-columns: 1fr; }
  .plan-hero .size-badge { text-align: left; }
  .zone { grid-template-columns: 1fr; }
  .zone .pic { aspect-ratio: 16 / 9; }
  .fit { grid-template-columns: 1fr; }
  .fit .pic { min-height: 0; aspect-ratio: 16 / 9; }
  .section-head { flex-wrap: wrap; }
  .section-head p { margin: 0; width: 100%; }
  .topbar { gap: 10px; padding: 12px 16px; }
  .steps li:not(.on) { display: none; }
  .steps li.on span { display: inline; }
  .mark { font-size: 18px; }
  .btn { padding: 12px 22px; }
  .actionbar .hint { display: none; }
  .actionbar { justify-content: space-between; }
}