:root {
  color-scheme: light;
  --ink: #292722;
  --muted: #797269;
  --faint: #aaa39a;
  --line: #e9e4dc;
  --line-strong: #d9d0c0;
  --paper: #fffefd;
  --canvas: #ffffff;
  --gold: #c79129;
  --gold-dark: #a8751b;
  --gold-soft: #f6ecd8;
  --green: #24745c;
  --green-soft: #e7f2ed;
  --red: #b44c42;
  --red-soft: #faeae7;
  --blue: #8eabba;
  --shadow: 0 10px 28px rgba(74, 58, 30, .045);
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid rgba(199, 145, 41, .55); outline-offset: 2px; }
.demo-app { min-height: 100vh; }
.demo-header { position: sticky; top: 0; z-index: 100; height: 76px; padding: 0 28px 0 30px; display: flex; align-items: center; gap: 28px; background: rgba(255,254,253,.97); color: var(--ink); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.global-module-toast { position: fixed; top: 64px; left: 50%; z-index: 110; transform: translateX(-50%); padding: 10px 16px; border: 1px solid #a7cdfd; border-radius: 4px; background: #ecf5ff; color: #1677ff; font-size: 13px; white-space: nowrap; box-shadow: 0 8px 24px rgba(22, 119, 255, .12); }
.global-module-toast[hidden] { display: none; }
.brand-mark { display: flex; align-items: center; gap: 13px; min-width: 190px; }
.brand-mark > span { display: grid; place-items: center; width: 56px; height: 52px; overflow: hidden; border: 0; background: white; }
.brand-logo-frame img { width: 52px; height: 43px; object-fit: contain; mix-blend-mode: multiply; }
.brand-mark div, .header-copy { display: flex; flex-direction: column; }
.brand-mark strong { font-size: 15px; letter-spacing: .08em; }
.brand-mark small { margin-top: 4px; color: var(--faint); font-size: 8px; letter-spacing: .12em; }
.header-copy { padding-left: 28px; border-left: 1px solid #514b45; }
.header-copy span { font-size: 14px; font-weight: 650; }
.header-copy small { margin-top: 3px; color: #aaa39a; font-size: 11px; }
.global-module-nav { height: 100%; display: flex; align-items: stretch; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.global-module-nav::-webkit-scrollbar { display: none; }
.global-module-nav button { position: relative; padding: 0 2px; border: 0; background: transparent; color: #746e65; font-size: 13px; white-space: nowrap; cursor: pointer; }
.global-module-nav button::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: transparent; }
.global-module-nav button:hover, .global-module-nav button.active { color: var(--gold-dark); }
.global-module-nav button.active { font-weight: 700; }.global-module-nav button.active::after { background: var(--gold); }
.header-account-switcher { margin-left: 0; display: none; align-items: center; gap: 8px; white-space: nowrap; }
.header-account-switcher > span { color: var(--muted); font-size: 10px; }
.header-account-switcher select { width: 178px; height: 32px; padding: 0 27px 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: #4e4a44; font-size: 11px; cursor: pointer; }
.header-preview-button { margin-left: -16px; padding: 8px 12px; border: 1px solid #ead6ae; border-radius: 6px; background: #fffaf0; color: var(--gold-dark); font-size: 11px; white-space: nowrap; cursor: pointer; }
.header-preview-button.active { color: white; background: var(--gold-dark); border-color: var(--gold-dark); }
.mobile-control-button { display: none; margin-left: 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--gold-dark); padding: 8px 12px; }
.view-switch { margin-left: auto; display: flex; align-self: stretch; }
.view-switch button { position: relative; padding: 0 19px; border: 0; background: transparent; color: #aaa39a; font-size: 12px; cursor: pointer; }
.view-switch button.active { color: white; }.view-switch button.active::after { content: ""; position: absolute; right: 19px; bottom: 0; left: 19px; height: 3px; background: #d2aa69; }

.demo-workspace { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 370px minmax(430px, 1fr); }
.demo-workspace[hidden] { display: none; }
.control-panel { height: calc(100vh - 76px); overflow-y: auto; padding: 28px 26px; background: var(--paper); border-right: 1px solid var(--line); }
.control-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.control-heading h1 { margin: 4px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 25px; font-weight: 600; }
.control-heading button, .modal-head button { display: none; width: 34px; height: 34px; border: 0; background: transparent; font-size: 25px; cursor: pointer; }
.eyebrow { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.control-intro { margin: 14px 0 26px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.control-section { margin: 0 0 27px; }
.section-title { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.section-title strong { font-size: 13px; }
.section-title span { color: #999189; font-size: 11px; }
.scenario-list { display: grid; gap: 7px; }
.scenario-item { width: 100%; min-height: 64px; padding: 10px 12px; display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: start; text-align: left; border: 1px solid transparent; background: #f7f4ef; cursor: pointer; transition: background .16s, border-color .16s; }
.scenario-item:hover { border-color: #d6c8b5; }
.scenario-item.active { border-color: #b89055; background: #fbf4e9; }
.scenario-index { color: #a69b90; font: 12px Georgia, serif; }
.scenario-item.active .scenario-index { color: var(--gold-dark); }
.scenario-item strong, .scenario-item small { display: block; }
.scenario-item strong { margin-bottom: 4px; font-size: 12px; line-height: 1.3; }
.scenario-item small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.lot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.test-input-panel { display: grid; gap: 10px; }
.test-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.test-field { display: grid; gap: 5px; color: #80786e; font-size: 9px; }
.test-field input { width: 100%; height: 35px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 10px; }
.test-check-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.test-check-row label { display: flex; gap: 5px; align-items: center; color: #625d56; font-size: 9px; }
.test-check-row button { margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--gold-dark); font-size: 9px; font-weight: 700; cursor: pointer; }
.test-source-note { margin: 0; padding: 9px 10px; border-left: 2px solid var(--blue); background: #f4f7f9; color: #7c858c; font-size: 8px; line-height: 1.55; }
.lot-chip { min-width: 0; padding: 9px 3px 8px; border: 1px solid var(--line); background: white; cursor: pointer; }
.lot-chip strong, .lot-chip small { display: block; }
.lot-chip strong { font-size: 11px; }
.lot-chip small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.lot-chip.active { color: var(--gold-dark); border-color: #b89055; background: var(--gold-soft); }
.evidence-note { padding: 14px; border-left: 3px solid var(--gold); background: #f5f2ed; }
.evidence-note strong { font-size: 11px; }
.evidence-note p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }

.prototype-stage { min-width: 0; padding: 24px 40px 38px; display: flex; flex-direction: column; align-items: center; background: #ffffff; }
.stage-label { width: min(390px, 100%); margin-bottom: 10px; color: #6e665d; font-size: 11px; letter-spacing: .04em; }
.stage-label small { float: right; color: #918980; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(36, 116, 92, .12); }
.phone-shell { width: 390px; height: min(844px, calc(100vh - 145px)); min-height: 630px; overflow: hidden; display: grid; grid-template-rows: 25px 55px 50px minmax(0, 1fr) 59px; background: #f7f5f1; border: 8px solid #272522; border-radius: 34px; box-shadow: var(--shadow); }
.phone-status { padding: 5px 15px 0 17px; display: flex; justify-content: space-between; background: var(--paper); font-size: 9px; font-weight: 700; }
.phone-status div { display: flex; align-items: center; gap: 3px; }
.phone-status i { width: 3px; height: 5px; background: #282522; }
.phone-status i:nth-child(2) { height: 7px; }.phone-status i:nth-child(3) { height: 9px; }
.phone-status b { margin-left: 3px; font-size: 8px; }
.app-bar { padding: 0 11px; display: grid; grid-template-columns: 45px 1fr 45px; align-items: center; background: var(--paper); border-bottom: 1px solid #eee9e2; }
.app-bar > div { text-align: center; }
.app-bar strong, .app-bar span { display: block; }
.app-bar strong { font-size: 15px; }
.app-bar span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.icon-button, .rule-button { border: 0; background: transparent; cursor: pointer; }
.icon-button { padding: 0; text-align: left; font: 30px Georgia, serif; }
.rule-button { color: var(--gold-dark); font-size: 10px; font-weight: 700; }
.step-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 16px 6px; background: var(--paper); border-bottom: 1px solid #eee9e2; }
.step { position: relative; display: grid; place-items: center; gap: 2px; color: #a8a19a; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 9px; left: 63%; width: 74%; height: 1px; background: #ded8d0; }
.step span { z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #d7d0c8; border-radius: 50%; background: var(--paper); font-size: 8px; }
.step small { font-size: 8px; }
.step.done, .step.active { color: var(--gold-dark); }
.step.done span { color: white; border-color: var(--gold); background: var(--gold); }
.step.done::after { background: var(--gold); }
.step.active span { border: 2px solid var(--gold); }
.phone-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 22px; scrollbar-width: none; }
.phone-content::-webkit-scrollbar { display: none; }
.bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #e9e4dc; background: var(--paper); }
.bottom-nav button { padding: 6px 0 4px; border: 0; background: transparent; color: #89827a; font-size: 8px; cursor: default; }
.bottom-nav button span { display: block; margin-bottom: 2px; font-size: 13px; }
.bottom-nav button.active { color: var(--gold-dark); }

.hero-card { position: relative; overflow: hidden; padding: 18px; color: white; background: #38342e; }
.hero-card::after { content: "P"; position: absolute; right: -5px; bottom: -32px; color: rgba(255,255,255,.06); font: 120px Georgia, serif; }
.hero-kicker { display: flex; justify-content: space-between; align-items: center; }
.hero-kicker span { color: #e7d1ac; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.hero-kicker button { z-index: 1; border: 0; background: transparent; color: #e7d1ac; font-size: 9px; cursor: pointer; }
.hero-card h2 { position: relative; margin: 11px 0 7px; font: 22px Georgia, "Songti SC", serif; }
.hero-card > p { position: relative; max-width: 280px; margin: 0; color: #c9c3bc; font-size: 10px; line-height: 1.6; }
.vehicle-plate { position: relative; margin-top: 19px; padding: 10px 11px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.13); }
.vehicle-plate > span { display: grid; place-items: center; width: 22px; height: 22px; color: #e7d1ac; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vehicle-plate strong { font-size: 16px; letter-spacing: .12em; }
.vehicle-plate small { color: #ccc5bd; font-size: 8px; }
.content-card, .source-card, .calculation-card, .timeline-card, .receipt-card, .alert-card { margin-top: 10px; padding: 14px; background: var(--paper); border: 1px solid #ebe5dd; }
.compact-card { padding-bottom: 9px; }
.card-heading { padding-bottom: 11px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; border-bottom: 1px solid #eee9e2; }
.line-icon { display: grid; place-items: center; width: 25px; height: 25px; color: var(--gold-dark); background: var(--gold-soft); }
.card-heading strong, .card-heading small { display: block; }
.card-heading strong { font-size: 11px; }.card-heading small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.status-pill { padding: 3px 6px; color: var(--green); background: var(--green-soft); font-size: 8px; }
.status-pill.muted { color: #766e65; background: #eeeae5; }
.detail-pair { padding: 9px 2px 0; display: flex; justify-content: space-between; font-size: 10px; }
.source-card { border-left: 3px solid var(--blue); }
.source-card > div { display: flex; justify-content: space-between; align-items: center; }
.source-card strong { font-size: 11px; }
.source-label { color: var(--blue); font-size: 9px; font-weight: 750; }
.source-card ul { margin: 11px 0 8px; padding: 0; list-style: none; }
.source-card li { padding: 5px 0; display: flex; justify-content: space-between; font-size: 10px; }
.source-card p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.primary-action-wrap { margin-top: 12px; text-align: center; }
.primary-action, .secondary-action { width: 100%; min-height: 42px; border: 0; font-size: 12px; font-weight: 700; cursor: pointer; }
.primary-action { color: white; background: var(--gold-dark); }
.primary-action:hover { background: #5f421b; }
.secondary-action { color: var(--gold-dark); border: 1px solid #b99867; background: white; }
.primary-action-wrap > small { display: block; margin-top: 7px; color: #979087; font-size: 8px; }
.text-action { margin-top: 6px; padding: 8px; border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }

.quote-header { padding: 7px 3px 2px; }
.quote-header span, .quote-header strong, .quote-header small { display: block; }
.quote-header span { color: var(--gold-dark); font-size: 9px; font-weight: 750; }
.quote-header strong { margin: 5px 0 3px; font-size: 17px; letter-spacing: .11em; }
.quote-header small { color: var(--muted); font-size: 8px; }
.amount-card { margin-top: 9px; padding: 17px 15px; background: #38342e; color: white; }
.amount-card span, .amount-card strong, .amount-card small { display: block; }
.amount-card span { color: #cfc7bd; font-size: 9px; }.amount-card strong { margin: 5px 0 9px; font: 28px Georgia, serif; }
.amount-card small { display: flex; align-items: center; gap: 5px; color: #d6bd93; font-size: 8px; }
.amount-card svg { width: 13px; height: 13px; }
.section-card-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #eee9e2; }
.section-card-title strong { font-size: 12px; }.section-card-title span { color: var(--gold-dark); font-size: 8px; }
.benefit-row { padding: 11px 0; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #f0ece6; }
.benefit-row span { min-width: 0; }.benefit-row b, .benefit-row small { display: block; }
.benefit-row b { display: flex; align-items: center; gap: 5px; font-size: 10px; }.benefit-row b svg { width: 14px; height: 14px; color: var(--gold); }
.benefit-row small { margin: 4px 0 0 19px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.benefit-row > strong { flex: 0 0 auto; color: var(--green); font-size: 11px; }
.empty-benefit { padding: 14px 0; }.empty-benefit span, .empty-benefit small { display: block; }.empty-benefit span { font-size: 10px; }.empty-benefit small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.toggle-row { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; cursor: pointer; }
.toggle-row span { grid-row: 1; }.toggle-row strong, .toggle-row small { display: block; }.toggle-row strong { font-size: 10px; }.toggle-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i { position: relative; grid-column: 2; grid-row: 1; width: 34px; height: 19px; border-radius: 10px; background: #d5d0ca; transition: .18s; }
.toggle-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: white; transition: .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle-row input:checked + i { background: var(--gold); }.toggle-row input:checked + i::after { transform: translateX(15px); }
.toggle-row input:disabled + i { opacity: .45; }
.option-note { margin-top: 10px; padding: 9px 10px; background: #f3f0eb; }.option-note span, .option-note small { display: block; }.option-note span { font-size: 9px; font-weight: 700; }.option-note small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.option-note.warning { background: var(--red-soft); }
.inline-points-field { margin-top: 10px; padding-top: 10px; display: grid; grid-template-columns: 1fr 108px; gap: 4px 10px; align-items: center; border-top: 1px solid #eee9e2; }
.inline-points-field span { font-size: 9px; font-weight: 700; }.inline-points-field input { width: 108px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 9px; }
.inline-points-field small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.calculation-card > div, .receipt-card > div { padding: 4px 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.calculation-card strong, .receipt-card strong { color: var(--ink); }
.calculation-card .total { margin-top: 7px; padding-top: 10px; align-items: end; border-top: 1px solid #e9e3db; color: var(--ink); font-size: 11px; }
.calculation-card .total strong { color: var(--red); font: 21px Georgia, serif; }
.payment-action { padding: 11px; background: var(--paper); border: 1px solid #e8e1d8; }
.payment-summary { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: end; font-size: 9px; }.payment-summary strong { color: var(--red); font: 18px Georgia, serif; }

.state-panel { padding: 25px 14px 19px; text-align: center; background: var(--paper); border: 1px solid #ebe5dd; }
.state-icon { width: 52px; height: 52px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; }
.state-icon svg { width: 27px; height: 27px; stroke-width: 1.8; }.state-icon.success { color: var(--green); background: var(--green-soft); }.state-icon.warning { color: var(--red); background: var(--red-soft); }
.state-kicker { color: var(--gold-dark); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.state-panel h2 { margin: 7px 0; font: 20px Georgia, "Songti SC", serif; }
.state-panel p { max-width: 290px; margin: 0 auto; color: var(--muted); font-size: 9px; line-height: 1.65; }
.state-panel p strong { color: var(--ink); }
.processing-panel { padding-top: 45px; padding-bottom: 40px; }
.spinner { width: 42px; height: 42px; margin: 0 auto 16px; border: 3px solid #e3ddd5; border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.timeline-card { padding: 7px 14px; }
.timeline-card > div { position: relative; min-height: 53px; display: grid; grid-template-columns: 23px 1fr; gap: 9px; align-items: start; padding-top: 9px; }
.timeline-card > div:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: 8px; bottom: -8px; width: 1px; background: #ded8d0; }
.timeline-card i { z-index: 1; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #ddd7d0; color: white; font-size: 8px; font-style: normal; }
.timeline-card .complete i { background: var(--green); }.timeline-card .error i { background: var(--red); }.timeline-card .current i { border: 4px solid var(--gold-soft); background: var(--gold); }
.timeline-card strong, .timeline-card small { display: block; }.timeline-card strong { font-size: 10px; }.timeline-card small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.receipt-card > small { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee9e2; color: #9a938a; font-size: 8px; }
.alert-card { border-left: 3px solid var(--red); background: #fff9f8; }.alert-card strong { font-size: 10px; }.alert-card p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.summary-line { padding: 7px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #eee9e2; font-size: 9px; }.summary-line:last-child { border: 0; }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(28, 25, 22, .58); }
.modal-backdrop[hidden] { display: none; }
.rule-modal { width: min(470px, 100%); max-height: 88vh; overflow-y: auto; padding: 24px; background: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.modal-head { display: flex; justify-content: space-between; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 4px 0 0; font: 24px Georgia, "Songti SC", serif; }.modal-head button { display: block; cursor: pointer; }
.rule-status { padding: 13px 0; display: flex; justify-content: space-between; font-size: 10px; }.rule-status span { color: var(--green); font-weight: 700; }.rule-status small { color: var(--muted); }
.rule-table { border-top: 1px solid var(--line); }.rule-table > div { padding: 11px 2px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 11px; }
.rule-table span { color: var(--muted); }.modal-boundary { margin-top: 17px; padding: 13px; background: #f3f0eb; }.modal-boundary strong { font-size: 10px; }.modal-boundary p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
body.modal-open { overflow: hidden; }

.management-workspace { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 230px minmax(780px, 1fr); background: #ffffff; }
.management-workspace[hidden] { display: none; }
.management-nav { height: calc(100vh - 76px); overflow-y: auto; padding: 20px 16px; background: #ffffff; border-right: 1px solid #eceff1; }
.nav-product { margin: 0 0 18px; padding: 0 8px 16px; display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #edf0f2; border-radius: 0; background: transparent; }
.nav-product > span { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 6px; background: white; }
.nav-product > span img { width: 31px; height: 27px; object-fit: contain; mix-blend-mode: multiply; }
.nav-product strong, .nav-product small { display: block; }.nav-product strong { color: #292e33; font-size: 15px; }.nav-product small { margin-top: 3px; color: #979ea5; font-size: 9px; }
.local-navigation { display: grid; gap: 16px; }
.local-nav-section { display: grid; gap: 7px; }
.local-group-heading { min-height: 26px; padding: 0 2px; display: grid; grid-template-columns: 19px 1fr auto; gap: 8px; align-items: center; color: #454b51; }
.local-group-heading strong { font-size: 13px; font-weight: 650; }.local-menu-icon { display: grid; place-items: center; width: 18px; height: 18px; color: #59616a; }.local-menu-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.local-caret { color: #b6bdc4; font-size: 15px; line-height: 1; }
.local-submenu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; padding-left: 12px; }
.local-nav-branch { grid-column: 1 / -1; display: grid; gap: 2px; }
.local-nav-parent { min-height: 31px; padding: 6px 6px; border: 0; border-radius: 4px; background: transparent; color: #858d95; font-size: 12px; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.local-nav-parent:hover { color: #4a555f; background: #f4f6f7; }
.local-nav-parent.active { color: #1473e6; font-weight: 700; }
.local-nav-branch-caret { color: #b6bdc4; font-size: 14px; line-height: 1; transform: rotate(90deg); transition: transform .15s ease; }
.local-nav-branch.is-open > .local-nav-parent .local-nav-branch-caret { transform: rotate(0deg); }
.local-nav-children { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; padding: 0 0 2px 8px; }
.local-nav-branch.is-open > .local-nav-children { display: grid; }
.local-nav-children button { min-width: 0; min-height: 30px; padding: 6px 4px; border: 0; border-radius: 4px; background: transparent; color: #858d95; font-size: 12px; text-align: left; cursor: pointer; white-space: normal; line-height: 1.35; word-break: break-all; }
.local-nav-children button:hover { color: #4a555f; background: #f4f6f7; }
.local-nav-children button.active { color: #1473e6; font-weight: 700; }
.local-submenu > button { min-width: 0; min-height: 31px; padding: 6px 6px; border: 0; border-radius: 4px; background: transparent; color: #858d95; font-size: 12px; text-align: left; cursor: pointer; white-space: normal; line-height: 1.35; overflow: visible; word-break: break-word; }
.local-submenu > button[data-module-page="coupon-issue"],
.local-submenu > button[data-module-page="coupon-writeoff"] { grid-column: 1 / -1; }
.local-submenu > button:hover { color: #4a555f; background: #f4f6f7; }
.local-submenu > button.active { color: #1473e6; background: transparent; font-weight: 700; }
.platform-navigation { padding-top: 12px; }
.platform-navigation button { width: 100%; border: 0; text-align: left; background: transparent; cursor: pointer; }
.platform-item, .module-heading { min-height: 39px; padding: 0 11px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; color: #4d5359; font-size: 12px; }
.platform-item i, .module-heading i { display: grid; place-items: center; width: 21px; height: 21px; color: #7a6b56; background: #f3efe9; font-size: 9px; font-style: normal; }
.platform-item.active, .module-heading.active { color: #745325; background: #f6efe4; font-weight: 700; }
.module-heading b { color: #a2a7ac; font-size: 15px; font-weight: 400; }
.module-nav-section { margin-top: 2px; }
.module-nav-section > div { display: none; padding: 3px 0 5px 36px; }
.module-nav-section.expanded > div { display: grid; }
.module-nav-section > div button { min-height: 31px; padding: 0 10px; color: #767d83; font-size: 10px; border-left: 1px solid #e4e7e9; }
.module-nav-section > div button:hover { color: #5d461f; background: #fbf8f3; }
.module-nav-section > div button.active { color: #745325; background: #f6efe4; border-left: 2px solid var(--gold); font-weight: 700; }
.management-main { min-width: 0; padding: 25px 29px 32px; }
.breadcrumb { margin-bottom: 17px; display: flex; gap: 6px; align-items: center; color: var(--faint); font-size: 11px; }.breadcrumb b { color: #c8c1b8; }.breadcrumb strong { color: var(--gold-dark); font-weight: 600; }
.management-titlebar { display: flex; justify-content: space-between; align-items: end; }
.management-titlebar h1 { margin: 7px 0 4px; color: var(--ink); font-size: 25px; letter-spacing: .01em; font-weight: 720; }.management-titlebar p { margin: 0; color: var(--muted); font-size: 12px; }
.outline-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--paper); color: #706a61; font-size: 11px; font-weight: 600; cursor: pointer; }
.parking-hero { min-height: 112px; padding: 20px 22px; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 18px; align-items: center; overflow: hidden; border: 1px solid #e8ebed; border-radius: 8px; background: linear-gradient(104deg, #ffffff 0%, #ffffff 70%, #f6f8f7 100%); }
.parking-hero-sign { position: relative; width: 76px; height: 68px; overflow: hidden; border-radius: 8px; background: #2e7865; box-shadow: inset 0 -10px 0 rgba(0,0,0,.06); }.parking-hero-sign b { position: absolute; top: 5px; left: 22px; color: white; font: 42px Georgia, serif; }.parking-hero-sign span { position: absolute; right: -15px; bottom: 8px; width: 86px; height: 24px; border-top: 2px dashed rgba(255,255,255,.78); transform: rotate(-11deg); }.parking-hero-sign i { position: absolute; bottom: 10px; left: 12px; width: 24px; height: 10px; border: 2px solid #fff; border-radius: 6px 7px 3px 3px; }.parking-hero-sign i::before, .parking-hero-sign i::after { content: ""; position: absolute; bottom: -5px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }.parking-hero-sign i::before { left: 2px; }.parking-hero-sign i::after { right: 2px; }
.parking-hero-copy > span { color: var(--gold-dark); font-size: 9px; font-weight: 800; letter-spacing: .16em; }.parking-hero-copy h1 { margin: 6px 0 5px; color: #2b3035; font-size: 26px; letter-spacing: .01em; }.parking-hero-copy p { margin: 0; color: #7c858b; font-size: 12px; }
.permission-banner { margin-top: 18px; padding: 12px 15px; display: grid; grid-template-columns: 32px 1fr auto; gap: 11px; align-items: center; border: 1px solid #dce5e1; background: #f5faf8; }.permission-icon { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: var(--green); font: 13px Georgia, serif; }.permission-banner strong, .permission-banner small { display: block; }.permission-banner strong { font-size: 11px; }.permission-banner small { margin-top: 3px; color: #718078; font-size: 9px; }.permission-banner i { padding: 4px 7px; color: var(--green); background: var(--green-soft); font-size: 8px; font-style: normal; }
.operation-strip { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); box-shadow: var(--shadow); }
.operation-strip > div { padding: 13px 16px; border-right: 1px solid #e7eaec; }.operation-strip > div:last-child { border-right: 0; }.operation-strip span, .operation-strip strong { display: block; }.operation-strip span { color: #8a9096; font-size: 9px; }.operation-strip strong { margin-top: 5px; color: #343a3f; font-size: 11px; }
.architecture-banner { margin-top: 22px; padding: 16px 20px; display: grid; grid-template-columns: 1fr 35px 1fr; align-items: center; border: 1px solid #e2d8c8; background: #fffaf2; }
.architecture-banner > div { display: flex; flex-direction: column; gap: 4px; }.architecture-banner span { color: #8e8375; font-size: 9px; }.architecture-banner strong { font-size: 12px; }.architecture-banner small { color: var(--muted); font-size: 9px; }.architecture-banner > b { color: #b4976f; text-align: center; }.architecture-banner .target { padding-left: 18px; border-left: 2px solid var(--gold); }.architecture-banner .target span, .architecture-banner .target strong { color: var(--gold-dark); }
.metric-row { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); box-shadow: var(--shadow); }
.metric-row > div { padding: 16px; background: var(--paper); border-right: 1px solid var(--line); }.metric-row > div:last-child { border-right: 0; }.metric-row span, .metric-row strong, .metric-row small { display: block; }.metric-row span { color: var(--muted); font-size: 10px; }.metric-row strong { margin: 7px 0 5px; color: var(--ink); font-size: 22px; font-weight: 670; }.metric-row small { color: var(--faint); font-size: 9px; }
.parking-table-card { margin-top: 16px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.table-toolbar { min-height: 68px; padding: 13px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e7eaed; }
.table-toolbar > div:first-child { display: flex; flex-direction: column; gap: 4px; }.table-toolbar strong { font-size: 13px; }.table-toolbar span { color: #92999f; font-size: 9px; }
.table-filters { display: flex; gap: 8px; }.table-filters input, .table-filters select { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--muted); font-size: 10px; }.table-filters input { width: 180px; }
.parking-table-wrap { overflow-x: auto; }.parking-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.parking-table th { padding: 11px 14px; text-align: left; background: #f7f8f9; color: #737a81; font-size: 9px; font-weight: 600; }.parking-table td { padding: 13px 14px; border-top: 1px solid #edf0f2; color: #555b61; font-size: 10px; }.parking-table tbody tr:hover { background: #fcfbf8; }
.lot-name-cell { display: flex; align-items: center; gap: 10px; }.lot-name-cell > span.entity-thumb { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: white; }.entity-thumb img { width: 39px; height: 39px; object-fit: contain; mix-blend-mode: multiply; }.lot-name-cell strong, .lot-name-cell small { display: block; }.lot-name-cell strong { color: var(--ink); font-size: 11px; }.lot-name-cell small { margin-top: 3px; color: var(--faint); font-size: 8px; }
.mode-tag, .boolean-tag { padding: 4px 7px; font-size: 9px; font-style: normal; }.mode-tag.amount { color: #315e85; background: #e8f1f8; }.mode-tag.duration { color: #24745c; background: #e7f2ed; }.boolean-tag.yes { color: var(--green); background: var(--green-soft); }.boolean-tag.no { color: var(--red); background: var(--red-soft); }
.rule-summary { color: #3f454b; font-size: 10px; font-weight: 500; }.table-action { padding: 0; border: 0; background: transparent; color: #8a642c; font-size: 10px; font-weight: 700; cursor: pointer; }.table-empty { height: 90px; text-align: center; color: #999 !important; }
.mapping-note { margin-top: 16px; padding: 14px 16px; display: grid; grid-template-columns: 80px 1fr; align-items: start; border-left: 3px solid var(--gold); background: #fff; }.mapping-note strong { font-size: 10px; }.mapping-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.system-note { border-left-color: var(--blue); }
.single-lot-page[hidden] { display: none; }
.lot-detail-heading { min-height: 132px; padding: 22px; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid #e5e9eb; border-radius: 8px; background: linear-gradient(104deg, #fff 0%, #fff 72%, #f5f8f7 100%); }
.lot-detail-logo { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e7e2da; border-radius: 8px; background: white; }.lot-detail-logo img { width: 61px; height: 61px; object-fit: contain; mix-blend-mode: multiply; }
.lot-detail-heading span { color: var(--gold-dark); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.lot-detail-heading h2 { margin: 7px 0 5px; color: #2b3035; font-size: 25px; letter-spacing: .01em; }.lot-detail-heading p { margin: 0; color: #7f878d; font-size: 11px; }.lot-detail-heading-actions { display: flex; align-items: start; gap: 8px; }.lot-detail-heading-actions i { padding: 5px 8px; color: var(--green); background: var(--green-soft); font-size: 9px; font-style: normal; }.back-to-list { padding: 4px 0; border: 0; background: transparent; color: #837562; font-size: 10px; cursor: pointer; }
.lot-detail-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.lot-detail-card { min-width: 0; border: 1px solid #e5e8ea; border-radius: 8px; background: white; overflow: hidden; }.lot-detail-card header { min-height: 58px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #edf0f2; }.lot-detail-card header > div { display: flex; align-items: center; gap: 9px; }.lot-detail-card header span { color: #b6a488; font: 13px Georgia, serif; }.lot-detail-card h3 { margin: 0; color: #343a3f; font-size: 13px; }.lot-detail-card header small { color: #9a9fa4; font-size: 9px; }
.detail-list { margin: 0; padding: 2px 16px; }.detail-list > div { min-height: 42px; display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 10px; align-items: center; border-bottom: 1px dashed #eceff0; }.detail-list > div:last-child { border-bottom: 0; }.detail-list dt { color: #8a9197; font-size: 10px; }.detail-list dd { margin: 0; color: #42484d; font-size: 10px; line-height: 1.45; }.status-enabled, .status-disabled { padding: 3px 6px; font-size: 9px; font-weight: 600; }.status-enabled { color: var(--green); background: var(--green-soft); }.status-disabled { color: var(--red); background: var(--red-soft); }
.detail-action { border: 0; background: transparent; color: var(--gold-dark); font-size: 10px; font-weight: 700; cursor: pointer; }.settlement-card footer { padding: 12px 16px 16px; border-top: 1px solid #edf0f2; }.settlement-card .outline-button { min-height: 32px; }
.parking-rules-page[hidden] { display: none; }.rules-page-heading { margin-bottom: 16px; min-height: 76px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }.rules-page-heading > div:first-child > span { color: #969da3; font-size: 10px; }.rules-page-heading h1 { margin: 8px 0 5px; color: #2d3338; font-size: 25px; }.rules-page-heading p { margin: 0; color: #7f878d; font-size: 11px; }.rules-lot-switcher { display: flex; flex-direction: column; gap: 6px; color: #888f95; font-size: 9px; }.rules-lot-switcher label { display: grid; gap: 6px; }.rules-lot-switcher select { width: 208px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: white; color: #454c52; font-size: 11px; }.rules-lot-switcher strong { color: #3b4146; font-size: 12px; }
.rules-card { margin-top: 14px; overflow: hidden; border: 1px solid #e4e8ea; border-radius: 8px; background: white; }.rules-card > header { min-height: 58px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f2; }.rules-card header span, .rules-card header small { display: block; }.rules-card header span { color: #333a40; font-size: 13px; font-weight: 700; }.rules-card header small { margin-top: 4px; color: #979ea4; font-size: 9px; }
.rules-kv-grid { display: grid; grid-template-columns: 1fr 1fr; }.rules-kv-grid > div { min-height: 96px; padding: 16px 18px; border-right: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; }.rules-kv-grid > div:nth-child(even) { border-right: 0; }.rules-kv-grid > div:last-child, .rules-kv-grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }.rules-kv-grid span, .rules-kv-grid strong, .rules-kv-grid small { display: block; }.rules-kv-grid span { color: #858d93; font-size: 10px; }.rules-kv-grid strong { margin: 8px 0 5px; color: #394047; font-size: 11px; font-weight: 600; }.rules-kv-grid small { color: #999fa4; font-size: 9px; line-height: 1.5; }.rules-kv-grid--three { grid-template-columns: repeat(3, 1fr); }.rules-kv-grid--three > div:nth-child(even) { border-right: 1px solid #edf0f2; }.rules-kv-grid--three > div:last-child { border-right: 0; }.rule-status-on { color: var(--green) !important; }.rule-status-off { color: var(--red) !important; }
.rule-switch-summary { display: grid; grid-template-columns: repeat(3, 1fr); }.rule-switch-summary article { min-height: 88px; padding: 16px 18px; border-right: 1px solid #edf0f2; }.rule-switch-summary article:last-child { border-right: 0; }.rule-switch-summary article > div { display: flex; align-items: center; gap: 8px; }.rule-switch-summary b { width: 27px; height: 15px; position: relative; display: inline-block; border-radius: 99px; background: #c8ced2; }.rule-switch-summary b::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: white; }.rule-switch-summary b.switch-on { background: #3f9076; }.rule-switch-summary b.switch-on::after { left: 14px; }.rule-switch-summary strong { color: #454c51; font-size: 11px; }.rule-switch-summary p { margin: 9px 0 0; color: #91989d; font-size: 9px; line-height: 1.55; }
.points-rule-detail { margin: 0 18px 17px; padding: 15px 16px 0; border: 1px solid #e6eaec; border-radius: 7px; background: #fbfcfc; }.points-rule-title { display: flex; align-items: center; justify-content: space-between; }.points-rule-title strong { color: #3f474d; font-size: 11px; }.points-rule-title span { padding: 3px 6px; color: #496a83; background: #e9f1f6; font-size: 9px; }.points-unit { margin-top: 13px; display: flex; align-items: center; gap: 9px; color: #8a9298; font-size: 10px; }.points-unit strong { color: #343b41; font-size: 11px; }.points-rule-detail > p { margin: 9px 0 13px; color: #92999e; font-size: 9px; }.rule-limit-table { border-top: 1px solid #e7ebed; }.rule-limit-head, .rule-limit-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; align-items: center; min-height: 33px; font-size: 9px; }.rule-limit-head { color: #8a9298; }.rule-limit-row { border-top: 1px solid #edf0f1; color: #5a6268; }.rule-limit-row strong { font-size: 9px; font-weight: 600; }.rules-boundary { margin-top: 15px; padding: 13px 15px; display: grid; grid-template-columns: 72px 1fr; gap: 10px; border-left: 3px solid var(--blue); background: #f9fbfc; }.rules-boundary strong { color: #424a50; font-size: 10px; }.rules-boundary p { margin: 0; color: #7d858b; font-size: 10px; line-height: 1.65; }
.module-landing[hidden] { display: none; }
.module-titlebar { display: flex; justify-content: space-between; align-items: end; }.module-titlebar h1 { margin: 7px 0 4px; color: var(--ink); font-size: 25px; font-weight: 720; }.module-titlebar p { margin: 0; color: var(--muted); font-size: 12px; }
.module-summary { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #e2e5e8; background: white; }
.module-summary > div { min-height: 98px; padding: 16px 18px; border-right: 1px solid #e5e8ea; }.module-summary > div:last-child { border-right: 0; }.module-summary span, .module-summary strong, .module-summary small { display: block; }.module-summary span { color: #8b9298; font-size: 9px; }.module-summary strong { margin: 8px 0 5px; color: #32383d; font-size: 12px; }.module-summary small { color: #8f959b; font-size: 9px; line-height: 1.5; }
.module-feature-card { margin-top: 16px; background: white; border: 1px solid #e2e5e8; }.module-section-head { padding: 15px 18px; border-bottom: 1px solid #e5e8ea; }.module-section-head strong, .module-section-head span { display: block; }.module-section-head strong { font-size: 13px; }.module-section-head span { margin-top: 4px; color: #93999e; font-size: 9px; }
.module-feature-grid { display: grid; grid-template-columns: 1fr 1fr; }.module-feature { width: 100%; min-height: 80px; padding: 15px 18px; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; border: 0; border-right: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; background: white; color: inherit; font-family: inherit; text-align: left; }.module-feature[data-module-page] { cursor: pointer; }.module-feature[data-module-page]:hover, .module-feature[data-module-page]:focus-visible { background: #f7f9fc; outline: 0; }.module-feature[data-module-page]:focus-visible { box-shadow: inset 0 0 0 2px #409eff; }.module-feature:nth-child(even) { border-right: 0; }.module-feature > span { color: #b3a58f; font: 13px Georgia, serif; }.module-feature strong, .module-feature small { display: block; }.module-feature strong { color: #343a3f; font-size: 11px; }.module-feature small { margin-top: 5px; color: #858c92; font-size: 9px; line-height: 1.45; }.module-feature.active { background: #fbf8f3; box-shadow: inset 3px 0 0 var(--gold); }
.lot-drawer { position: absolute; top: 0; right: 0; width: min(620px, 100%); height: 100%; overflow-y: auto; padding: 27px 30px; background: #fff; box-shadow: -20px 0 60px rgba(0,0,0,.16); }.lot-drawer .modal-head h2 { font-size: 25px; }
.drawer-status { padding: 14px 0; display: flex; justify-content: space-between; }.drawer-status span { color: var(--green); font-size: 10px; font-weight: 700; }.drawer-status small { color: var(--muted); font-size: 9px; }
.entity-cover { margin-bottom: 18px; padding: 12px; display: grid; grid-template-columns: 82px 1fr auto; gap: 13px; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fdfcf9; }.entity-cover > div { width: 82px; height: 68px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: white; }.entity-cover img { width: 65px; height: 65px; object-fit: contain; mix-blend-mode: multiply; }.entity-cover span strong, .entity-cover span small { display: block; }.entity-cover span strong { font-size: 11px; }.entity-cover span small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.config-tabs { display: flex; border-bottom: 1px solid #e1e4e7; }.config-tabs button { padding: 10px 13px; border: 0; background: transparent; color: #747b82; font-size: 10px; }.config-tabs button.active { color: var(--gold-dark); border-bottom: 2px solid var(--gold); font-weight: 700; }
.config-section { margin-top: 22px; }.config-section h3 { margin: 0 0 10px; font-size: 12px; }.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e5e8ea; border: 1px solid #e5e8ea; }.config-grid label { min-height: 68px; padding: 13px; display: flex; flex-direction: column; gap: 7px; background: #fafbfb; color: #8a9095; font-size: 9px; }.config-grid strong { color: #34393e; font-size: 11px; font-weight: 600; }
.drawer-actions { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.prototype-disclaimer { color: #999; text-align: center; font-size: 9px; }
.editor-intro { padding: 14px 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }.editor-intro span { color: var(--green); font-size: 10px; font-weight: 700; }.editor-intro small { color: var(--muted); font-size: 9px; text-align: right; }
.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.editor-grid label { min-width: 0; display: grid; gap: 6px; color: #777f85; font-size: 9px; }
.editor-grid input:not([type="checkbox"]), .editor-grid select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 11px; }
.editor-grid label > small { color: #9a9fa3; font-size: 8px; line-height: 1.45; }
.editor-checkbox { min-height: 72px; padding: 11px; grid-template-columns: 18px 1fr; align-content: center; border: 1px solid var(--line); border-radius: 7px; background: #fafaf9; }
.editor-checkbox input { grid-row: 1 / span 2; align-self: start; }.editor-checkbox span { color: var(--ink); font-size: 10px; font-weight: 700; }.editor-checkbox small { grid-column: 2; }
.editor-warning { margin-top: 20px; padding: 13px 14px; border-left: 3px solid var(--blue); background: #f5f8fa; }.editor-warning.pending { border-left-color: #c68929; background: #fff9ed; }.editor-warning strong { font-size: 10px; }.editor-warning p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.reset-rule-button { width: 100%; margin-top: 10px; padding: 9px; border: 0; background: transparent; color: #8c6a37; font-size: 9px; cursor: pointer; }

@media (max-width: 999px) {
  .demo-header { padding: 0 18px; gap: 16px; }.header-copy { display: none; }.brand-mark { min-width: 0; }.header-account-switcher > span { display: none; }.header-account-switcher select { width: 148px; }.mobile-control-button { display: block; }.view-switch { margin-left: auto; }.view-switch button { padding: 0 10px; }.view-switch button.active::after { left: 10px; right: 10px; }
  .demo-workspace { display: block; }.demo-workspace[hidden] { display: none; }.control-panel { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(370px, 90vw); height: 100vh; transform: translateX(-102%); box-shadow: 20px 0 50px rgba(0,0,0,.15); transition: transform .22s; }.control-panel.open { transform: translateX(0); }.control-heading button { display: block; }
  .prototype-stage { min-height: calc(100vh - 72px); padding: 18px 16px 30px; }
  .phone-shell { height: min(844px, calc(100vh - 130px)); }
  .management-workspace { display: block; min-width: 0; }.management-workspace[hidden] { display: none; }.management-nav { display: none; }.management-main { padding: 22px 18px 40px; }.parking-hero { grid-template-columns: 70px 1fr; }.metric-row { grid-template-columns: 1fr 1fr; }.lot-detail-grid, .rules-kv-grid--three, .rule-switch-summary { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .demo-header { height: 58px; padding: 0 12px; gap: 8px; }.brand-mark small, .header-account-switcher > span { display: none; }.brand-mark > span { width: 31px; height: 31px; }.header-account-switcher { margin-left: auto; }.header-account-switcher select { width: 116px; height: 29px; font-size: 10px; }.header-preview-button { display: none; }.demo-workspace { min-height: calc(100vh - 58px); }
  .prototype-stage { min-height: calc(100vh - 58px); padding: 8px 0 0; }.stage-label { padding: 0 12px; }.stage-label small { display: none; }
  .phone-shell { width: 100%; height: calc(100vh - 81px); min-height: 560px; border-width: 0; border-radius: 0; box-shadow: none; }
  .view-switch button { padding: 0 7px; font-size: 10px; }.view-switch button.active::after { left: 7px; right: 7px; }.mobile-control-button { padding: 6px; font-size: 10px; }
  .management-titlebar, .module-titlebar { align-items: start; }.management-titlebar .outline-button, .module-titlebar .outline-button { display: none; }.parking-hero { grid-template-columns: 60px 1fr; padding: 16px; gap: 12px; }.parking-hero-sign { width: 60px; height: 58px; }.parking-hero-sign b { top: 7px; left: 18px; font-size: 34px; }.parking-hero-copy h1 { font-size: 21px; }.parking-hero-copy p { font-size: 10px; line-height: 1.5; }.lot-detail-heading { grid-template-columns: 54px 1fr; padding: 16px; gap: 12px; }.lot-detail-logo { width: 54px; height: 54px; }.lot-detail-logo img { width: 45px; height: 45px; }.lot-detail-heading h2 { font-size: 20px; }.lot-detail-heading p { font-size: 9px; line-height: 1.55; }.lot-detail-heading-actions { display: none; }.detail-list > div { grid-template-columns: 106px minmax(0, 1fr); }.rules-page-heading { align-items: start; flex-direction: column; }.rules-lot-switcher select { width: 100%; }.rules-kv-grid { grid-template-columns: 1fr; }.rules-kv-grid > div, .rules-kv-grid--three > div:nth-child(even) { border-right: 0; }.rule-switch-summary article { border-right: 0; border-bottom: 1px solid #edf0f2; }.points-unit { flex-wrap: wrap; }.rules-boundary { grid-template-columns: 1fr; gap: 5px; }.permission-banner { grid-template-columns: 32px 1fr; }.permission-banner i { display: none; }.operation-strip { grid-template-columns: 1fr 1fr; }.operation-strip > div:nth-child(2) { border-right: 0; }.operation-strip > div:nth-child(-n+2) { border-bottom: 1px solid #e7eaec; }.metric-row { grid-template-columns: 1fr 1fr; }.table-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }.table-filters input { width: 100%; }.table-filters { display: grid; grid-template-columns: 1fr 1fr; }.mapping-note { grid-template-columns: 1fr; gap: 5px; }.module-summary, .module-feature-grid { grid-template-columns: 1fr; }.module-summary > div { border-right: 0; border-bottom: 1px solid #e5e8ea; }.module-feature { border-right: 0; }.lot-drawer { padding: 22px 18px; }.config-grid, .editor-grid { grid-template-columns: 1fr; }.drawer-actions { grid-template-columns: 1fr; }.test-field-row { grid-template-columns: 1fr; }
}

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

/* 缴费规则：按已核查的后台页面使用白底、扁平分区与可读字号呈现。 */
:root { --weimob-blue: #1677ff; --weimob-ink: #303133; --weimob-muted: #8c8c8c; --weimob-line: #ebeef5; --weimob-canvas: #f5f7fa; }
.demo-header { height: 56px; padding: 0 18px; gap: 24px; background: #20242a; color: #f7f8fa; border-bottom: 0; backdrop-filter: none; }
.global-module-toast { top: 60px; }
.brand-mark { min-width: 176px; gap: 9px; }.brand-mark > span { width: 34px; height: 34px; border-radius: 2px; }.brand-logo-frame img { width: 31px; height: 27px; }.brand-mark strong { color: #fff; font-size: 14px; letter-spacing: .04em; }.brand-mark small { color: #b6bbc2; font-size: 8px; letter-spacing: .09em; }
.global-module-nav { gap: 25px; }.global-module-nav button { color: #c5c9cf; font-size: 14px; }.global-module-nav button:hover, .global-module-nav button.active { color: #fff; }.global-module-nav button.active::after { height: 3px; background: #fff; }
.header-account-switcher { gap: 7px; }.header-account-switcher > span { color: #b8bdc4; font-size: 12px; }.header-account-switcher select { height: 32px; width: 176px; border-color: #50555c; border-radius: 2px; background: #2c3036; color: #f5f5f5; font-size: 13px; }.header-preview-button { margin-left: -12px; padding: 7px 11px; border-color: #5a5f66; border-radius: 2px; background: #2c3036; color: #f5f5f5; font-size: 13px; }.header-preview-button.active { background: #1677ff; border-color: #1677ff; }
.management-workspace { min-height: calc(100vh - 56px); background: var(--weimob-canvas); grid-template-columns: 240px minmax(780px, 1fr); }.management-nav { height: calc(100vh - 56px); padding: 18px 10px; background: #fff; border-right-color: #eef0f3; }.nav-product strong { font-size: 17px; }.nav-product small { font-size: 11px; }.local-navigation { gap: 18px; }.local-group-heading strong { font-size: 15px; }.local-submenu > button, .local-nav-parent, .local-nav-children button { min-height: 34px; font-size: 13px; word-break: break-word; }

.parking-rules-page { padding: 0 12px 24px; background: var(--weimob-canvas); }
.parking-bind-shell { padding: 0 12px 24px; }
.parking-bind-row { min-height: 52px; padding: 16px 0; display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: start; border-bottom: 1px solid #f0f2f5; }
.parking-bind-row:last-child { border-bottom: 0; }
.parking-bind-row > .weimob-field-label { padding-top: 6px; }
.parking-bind-fields { display: grid; gap: 8px; color: #303133; font-size: 14px; }
.parking-bind-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 32px; }
.parking-bind-line input { width: 88px; height: 32px; padding: 0 8px; border: 1px solid #dcdfe6; border-radius: 2px; color: #303133; font-size: 14px; background: #fff; }
.parking-bind-fields > p { margin: 0; color: #909399; font-size: 13px; line-height: 1.5; }
.weimob-rule-shell { min-height: calc(100vh - 56px); color: var(--weimob-ink); background: var(--weimob-canvas); font-size: 14px; }
.weimob-page-bar { min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 0; background: transparent; }.weimob-page-bar h1 { margin: 0; color: #303133; font-size: 16px; font-weight: 600; line-height: 1; }.weimob-context-select { display: flex; align-items: center; gap: 10px; color: #606266; font-size: 14px; }.weimob-context-select select { height: 34px; min-width: 190px; padding: 0 30px 0 10px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #303133; font-size: 14px; }.weimob-context-text { color: #606266; font-size: 14px; }
.weimob-rule-section { margin-top: 12px; padding: 0 20px 14px; border: 0; background: #fff; }.weimob-rule-section h2 { height: 54px; margin: 0; display: flex; align-items: center; color: #303133; font-size: 17px; font-weight: 600; border-bottom: 1px solid #f0f2f5; }
.weimob-read-list { margin: 0; padding: 10px 0 18px; }.weimob-read-list > div { min-height: 47px; display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: center; }.weimob-read-list dt { color: #606266; font-size: 14px; }.weimob-read-list dd { margin: 0; color: #303133; font-size: 14px; line-height: 1.65; }.weimob-read-switch { position: relative; display: inline-block; width: 38px; height: 20px; margin-right: 10px; vertical-align: -5px; border-radius: 12px; background: #c0c4cc; }.weimob-read-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .16s; }.weimob-read-switch.is-on { background: var(--weimob-blue); }.weimob-read-switch.is-on::after { left: 21px; }
.weimob-points-read { align-items: start !important; padding-top: 9px; }.weimob-points-read > dt { padding-top: 9px; }.weimob-points-read > dd { min-width: 0; }.weimob-points-band { margin-top: 15px; padding: 16px 16px 0; background: #f7f8fa; }.weimob-read-tabs { height: 28px; border-bottom: 1px solid #e4e7ed; }.weimob-read-tabs span { display: inline-flex; height: 28px; align-items: center; padding: 0 2px; color: var(--weimob-blue); font-size: 14px; border-bottom: 2px solid var(--weimob-blue); }.weimob-points-values { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-height: 54px; }.weimob-points-values span { color: #606266; }.weimob-points-values b { color: #303133; font-weight: 500; }.weimob-points-band p { margin: 0 0 15px; color: #909399; font-size: 13px; }
.weimob-limit-grid--read { display: block !important; margin: 0 -16px; padding: 0 16px; background: #fff; }.weimob-limit-grid--read .rule-limit-head, .weimob-limit-grid--read .rule-limit-row { display: grid !important; min-height: 46px; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; font-size: 14px; }.weimob-limit-grid--read .rule-limit-head { color: #606266; }.weimob-limit-grid--read .rule-limit-row { color: #303133; }.weimob-limit-grid--read .rule-limit-row strong { font-size: 14px; font-weight: 400; }
.weimob-rule-footer { min-height: 92px; padding: 24px 28px; display: flex; justify-content: center; align-items: center; background: #fff; }.weimob-primary-button { min-width: 86px; height: 36px; padding: 0 18px; border: 1px solid var(--weimob-blue); border-radius: 2px; background: var(--weimob-blue); color: #fff; font-size: 14px; cursor: pointer; }.weimob-primary-button:hover { background: #409eff; border-color: #409eff; }

.weimob-rule-shell--editing .weimob-rule-section { padding-bottom: 18px; }.weimob-form-row { min-height: 52px; padding: 10px 0; display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: center; }.weimob-form-row--points { align-items: start; }.weimob-field-label { color: #606266; font-size: 14px; }.weimob-field-label b { color: #f56c6c; font-weight: 400; }.weimob-inline-fields, .weimob-radio-group, .weimob-switch-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #303133; font-size: 14px; }.weimob-inline-fields input { width: 94px; height: 32px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 2px; color: #303133; font-size: 14px; }.weimob-inline-fields input[type="time"] { width: 150px; }.weimob-form-row > p { grid-column: 2; margin: -2px 0 2px; color: #909399; font-size: 13px; line-height: 1.55; }.weimob-radio { display: inline-flex; align-items: center; gap: 7px; min-height: 25px; cursor: pointer; }.weimob-radio input { position: absolute; opacity: 0; }.weimob-radio i { width: 14px; height: 14px; border: 1px solid #c0c4cc; border-radius: 50%; background: #fff; }.weimob-radio input:checked + i { border-color: var(--weimob-blue); box-shadow: inset 0 0 0 3px #fff; background: var(--weimob-blue); }
.weimob-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; cursor: pointer; }.weimob-toggle input { position: absolute; opacity: 0; }.weimob-toggle i { position: relative; width: 38px; height: 20px; border-radius: 12px; background: #c0c4cc; }.weimob-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .16s; }.weimob-toggle input:checked + i { background: var(--weimob-blue); }.weimob-toggle input:checked + i::after { left: 21px; }.weimob-toggle span { color: #606266; font-size: 14px; }
.weimob-points-editor { min-width: 0; padding-top: 1px; }.weimob-points-editor > .weimob-points-band { margin-top: 14px; }.weimob-points-band .weimob-radio-group { min-height: 31px; }.weimob-points-inputs { min-height: 62px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }.weimob-points-inputs label { display: inline-flex; align-items: center; gap: 8px; color: #606266; font-size: 14px; }.weimob-points-inputs input, .weimob-limit-grid input { width: 86px; height: 32px; padding: 0 9px; border: 1px solid #dcdfe6; border-radius: 2px; color: #303133; font-size: 14px; }.weimob-points-inputs span { color: #606266; }.weimob-limit-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; align-items: center; background: #fff; border-top: 1px solid #ebeef5; }.weimob-limit-grid > * { min-height: 46px; padding: 7px 10px; display: flex; align-items: center; border-bottom: 1px solid #ebeef5; color: #606266; font-size: 14px; }.weimob-limit-grid > :nth-child(-n+3) { background: #fafafa; color: #606266; }.weimob-limit-grid strong { color: #303133; font-weight: 400; }.weimob-limit-grid label { gap: 7px; }.weimob-rule-actions { min-height: 92px; display: flex; justify-content: center; align-items: center; gap: 12px; background: #fff; }.weimob-rule-actions > button:first-child { min-width: 86px; height: 36px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #606266; font-size: 14px; cursor: pointer; }
.weimob-form-row--benefit { align-items: start; padding-top: 14px; padding-bottom: 14px; }.weimob-form-row--benefit > .weimob-field-label { padding-top: 6px; }.weimob-benefit-editor { min-width: 0; }.weimob-benefit-band { margin-top: 12px; padding: 12px; background: #f5f7fa; }.weimob-benefit-band > .weimob-radio-group { min-height: 28px; margin-bottom: 12px; }.weimob-config-table { display: grid; grid-template-columns: minmax(180px, 1.15fr) repeat(3, minmax(220px, 1fr)); overflow: hidden; background: #fff; }.weimob-config-head { grid-column: 1 / -1; min-height: 56px; display: grid; grid-template-columns: minmax(180px, 1.15fr) repeat(3, minmax(220px, 1fr)); align-items: center; background: #f2f4f7; color: #303133; font-size: 14px; font-weight: 600; white-space: nowrap; }.weimob-config-head span { padding: 0 16px; }.weimob-config-table > strong, .weimob-config-table > label { min-width: 0; min-height: 66px; border-bottom: 1px solid #ebeef5; white-space: nowrap; }.weimob-config-table > strong { grid-column: 1; padding: 0 16px; display: flex; align-items: center; color: #303133; font-size: 14px; font-weight: 400; }.weimob-config-table > label { grid-row: auto; gap: 0; padding: 0 16px; display: flex; align-items: center; color: #606266; }.weimob-config-table input { min-width: 0; width: calc(100% - 34px); height: 32px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 2px 0 0 2px; color: #303133; font-size: 14px; }.weimob-config-table label span { width: 34px; height: 32px; display: grid; place-items: center; border: 1px solid #dcdfe6; border-left: 0; border-radius: 0 2px 2px 0; background: #f5f7fa; color: #909399; font-size: 14px; }.weimob-config-table input::placeholder { color: #c0c4cc; }

@media (max-width: 999px) { .demo-header { height: 56px; }.management-workspace { min-height: calc(100vh - 56px); }.parking-rules-page { padding: 0 12px 24px; }.weimob-rule-shell { min-height: calc(100vh - 56px); } }
@media (max-width: 640px) { .weimob-page-bar, .weimob-rule-section { padding-left: 16px; padding-right: 16px; }.weimob-page-bar { min-height: 60px; }.weimob-context-select { font-size: 12px; }.weimob-context-select select { min-width: 130px; width: 130px; font-size: 12px; }.weimob-read-list > div, .weimob-form-row { grid-template-columns: 112px minmax(0, 1fr); }.weimob-read-list dt, .weimob-read-list dd, .weimob-field-label, .weimob-inline-fields, .weimob-radio-group, .weimob-switch-group, .weimob-toggle span { font-size: 14px; }.weimob-points-values { gap: 7px 12px; }.weimob-limit-grid { grid-template-columns: 1.1fr 1fr 1fr; overflow-x: auto; }.weimob-limit-grid > * { padding: 7px 5px; font-size: 12px; }.weimob-limit-grid input { width: 55px; }.weimob-form-row > p { grid-column: 1 / -1; margin: 3px 0 0; }.weimob-rule-footer { min-height: 76px; }.weimob-points-read > dt { padding-top: 4px; }.weimob-points-band { margin-left: -112px; } }

@media (max-width: 1180px) { .weimob-config-table, .weimob-config-head { grid-template-columns: minmax(150px, 1.1fr) repeat(3, minmax(150px, 1fr)); }.weimob-config-head, .weimob-config-table > strong, .weimob-config-table input, .weimob-config-table label span { font-size: 13px; }.weimob-config-head span, .weimob-config-table > strong, .weimob-config-table > label { padding-left: 10px; padding-right: 10px; } }
@media (max-width: 760px) { .weimob-config-table { overflow-x: auto; }.weimob-config-table, .weimob-config-head { grid-template-columns: minmax(135px, 1.05fr) repeat(3, minmax(132px, 1fr)); }.weimob-config-head { min-height: 48px; font-size: 12px; }.weimob-config-table > strong, .weimob-config-table > label { min-height: 54px; font-size: 12px; }.weimob-config-table input, .weimob-config-table label span { height: 28px; font-size: 12px; }.weimob-config-table label span { width: 28px; }.weimob-config-table input { width: calc(100% - 28px); padding: 0 7px; } }

/* Harness UI baseline: all management pages share the same neutral admin canvas and title rhythm. */
.management-main { padding: 20px 12px 28px; background: var(--weimob-canvas); }
.admin-page-bar { min-height: 52px; margin-top: 4px; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #303133; }
.admin-page-bar h1 { margin: 0; color: #303133; font-size: 16px; font-weight: 600; line-height: 1.2; }
.admin-page-bar p { margin: 4px 0 0; color: #909399; font-size: 13px; line-height: 1.4; }
.admin-page-bar--detail { margin-bottom: 0; }
.module-titlebar, .management-titlebar, .breadcrumb { display: none; }
.module-summary, .module-feature-card, .mapping-note, .parking-hero, .metric-row, .parking-table-card, .lot-detail-heading, .lot-detail-card { border-color: #ebeef5; border-radius: 0; box-shadow: none; }
.parking-hero { min-height: 96px; margin-top: 16px; padding: 14px 20px; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; background: #fff; }
.parking-hero-sign { width: 54px; height: 52px; border-radius: 3px; }.parking-hero-sign b { top: 6px; left: 16px; font-size: 34px; }.parking-hero-sign span { right: -22px; bottom: 8px; width: 74px; }.parking-hero-sign i { bottom: 9px; left: 9px; width: 20px; height: 9px; }
.parking-hero-copy > span { color: #909399; font-size: 12px; letter-spacing: .08em; }.parking-hero-copy strong { display: block; margin: 5px 0 4px; color: #303133; font-size: 16px; font-weight: 600; }.parking-hero-copy p { color: #909399; font-size: 13px; }
.metric-row, .module-summary { margin-top: 12px; }.metric-row > div, .module-summary > div { min-height: 84px; padding: 14px 16px; }.metric-row span, .module-summary span { font-size: 13px; }.metric-row strong { margin: 5px 0 3px; font-size: 20px; }.metric-row small, .module-summary small { font-size: 12px; }
.parking-table-card, .module-feature-card { margin-top: 12px; }.table-toolbar { min-height: 62px; padding: 12px 16px; }.table-toolbar strong { font-size: 15px; }.table-toolbar span { font-size: 12px; }.table-filters input, .table-filters select { height: 34px; border-radius: 2px; font-size: 13px; }.parking-table th { padding: 12px 14px; font-size: 13px; }.parking-table td { padding: 14px; font-size: 14px; }.lot-name-cell strong { font-size: 14px; }.lot-name-cell small, .mode-tag, .boolean-tag, .rule-summary, .table-action { font-size: 12px; }
.table-filters { flex-wrap: nowrap; }.table-filters .weimob-primary-button { min-width: 92px; height: 34px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.new-lot-form .editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.new-lot-form input, .new-lot-form select { width: 100%; }.parking-save-message { margin: 14px 0 4px 165px; padding: 10px 12px; color: #267b61; background: #f0faf5; border: 1px solid #c7e7da; font-size: 13px; }
.mapping-note { margin-top: 12px; padding: 14px 16px; background: #fff; }.mapping-note strong, .mapping-note p { font-size: 13px; }
.lot-detail-heading { min-height: 92px; padding: 14px 18px; grid-template-columns: 58px minmax(0, 1fr); gap: 13px; background: #fff; }.lot-detail-logo { width: 54px; height: 54px; border-radius: 2px; }.lot-detail-logo img { width: 46px; height: 46px; }.lot-detail-heading span { color: #909399; font-size: 12px; }.lot-detail-heading h2 { margin: 4px 0; font-size: 16px; font-weight: 600; }.lot-detail-heading p { font-size: 13px; }.lot-detail-heading-actions { align-items: center; }.lot-detail-heading-actions i { border-radius: 2px; font-size: 12px; }
.lot-detail-grid { margin-top: 12px; gap: 12px; }.lot-detail-card header { min-height: 54px; padding: 12px 16px; }.lot-detail-card h3 { font-size: 15px; }.lot-detail-card header small, .detail-list dt, .detail-list dd, .detail-action { font-size: 13px; }.detail-list > div { min-height: 44px; grid-template-columns: 126px minmax(0, 1fr); }
.module-summary { background: #fff; }.module-feature-card { overflow: hidden; border: 1px solid #ebeef5; background: #fff; }.module-section-head { min-height: 60px; padding: 0 16px; }.module-section-head strong { font-size: 15px; }.module-section-head span { font-size: 13px; }.module-feature { min-height: 88px; }.module-feature span { font-size: 13px; }.module-feature strong { font-size: 14px; }.module-feature small { font-size: 12px; }

/* 编辑操作固定在当前后台内容区底部，滚动规则表单时始终可见。 */
.weimob-rule-shell--editing form { padding-bottom: 112px; }
.weimob-rule-actions { position: fixed; z-index: 16; right: 12px; bottom: 0; left: 252px; min-height: 88px; border-top: 1px solid #dcdfe6; box-shadow: 0 -4px 12px rgba(0, 0, 0, .04); }

/* 本场资料沿用既有缴费规则页的详情结构，避免页面风格跳变。 */
.single-lot-page { padding-top: 12px; }
.lot-profile-shell { min-height: auto; }
.lot-profile-shell .weimob-page-bar { min-height: 44px; }
.lot-profile-actions { display: flex; align-items: center; gap: 12px; color: #909399; font-size: 14px; }
.lot-profile-actions > span { padding: 3px 7px; color: #409eff; background: #ecf5ff; font-size: 12px; }
.weimob-rule-section h2 { justify-content: space-between; gap: 16px; }
.weimob-rule-section h2 small { margin-left: auto; color: #909399; font-size: 13px; font-weight: 400; }
.weimob-text-button { padding: 0; border: 0; background: transparent; color: #a8751b; font-size: 14px; font-weight: 500; cursor: pointer; }
.weimob-text-button:hover { color: #1677ff; }
.weimob-status { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; font-size: 12px; font-weight: 500; }
.weimob-status.is-enabled { color: #3f8f77; background: #e8f5ef; }
.weimob-status.is-disabled { color: #e06d61; background: #fef0ee; }
.weimob-detail-footer { min-height: 88px; margin-top: 12px; display: flex; align-items: center; justify-content: center; background: #fff; }

/* 左侧菜单不参与内容区滚动，只随顶部一级业务切换而刷新菜单项。 */
.management-nav { position: sticky; top: 0; align-self: start; overflow: hidden; }
@media (max-width: 999px) { .management-main { padding: 16px 12px 24px; } }
@media (max-width: 999px) { .weimob-rule-actions { right: 0; left: 0; } }
@media (max-width: 640px) { .admin-page-bar { min-height: 54px; align-items: center; }.admin-page-bar h1 { font-size: 15px; }.admin-page-bar p { font-size: 12px; }.parking-hero { margin-top: 10px; }.parking-hero-copy p { font-size: 12px; }.lot-detail-grid { grid-template-columns: 1fr; }.weimob-rule-actions { min-height: 72px; }.single-lot-page { padding-top: 8px; }.lot-profile-actions { gap: 8px; font-size: 12px; }.weimob-rule-section h2 small { font-size: 12px; }.lot-profile-shell .weimob-read-list > div { grid-template-columns: 112px minmax(0, 1fr); } }
@media (max-width: 760px) { .new-lot-form .editor-grid { grid-template-columns: 1fr; }.parking-save-message { margin-left: 0; }.table-filters { flex-wrap: wrap; } }

/* 停车缴费：车辆、缴费与退款订单沿用微盟后台的筛选与平面表格结构。 */
.weimob-operation-page { min-height: calc(100vh - 56px); color: #303133; background: var(--weimob-canvas); font-size: 14px; }
.weimob-operation-page > h1 { min-height: 44px; margin: 0; padding: 0 12px; display: flex; align-items: center; color: #303133; font-size: 16px; font-weight: 600; line-height: 1; }
.weimob-operation-content { padding: 28px 42px 32px; background: #fff; }
.weimob-operation-filter { padding: 28px 32px 20px; display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 18px 38px; background: #f5f7fa; }
.weimob-operation-filter label { min-width: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: center; color: #606266; white-space: nowrap; }
.weimob-operation-filter input, .weimob-operation-filter select { min-width: 0; width: 100%; height: 34px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #606266; font: inherit; }
.weimob-combined-field { min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); }.weimob-combined-field > select { border-right: 0; }
.weimob-date-range { min-width: 0; display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; }.weimob-date-range b { color: #c0c4cc; font-weight: 400; text-align: center; }
.weimob-operation-actions { display: flex; align-items: center; gap: 16px; }.weimob-operation-actions .weimob-primary-button, .weimob-operation-actions .crm-secondary-button { min-width: 110px; height: 38px; }.weimob-vehicle-filter { grid-template-columns: repeat(3, minmax(260px, 1fr)); }.weimob-vehicle-filter .weimob-operation-actions, .weimob-order-filter .weimob-operation-actions, .weimob-refund-filter .weimob-operation-actions { grid-column: 1 / -1; padding-left: 94px; }
.weimob-list-total { margin: 28px 0 20px; color: #909399; font-size: 16px; }
.weimob-operation-table-card { overflow: hidden; border: 1px solid #ebeef5; background: #fff; }.weimob-operation-table-wrap { overflow-x: auto; }
.weimob-operation-table { width: 100%; min-width: 1200px; border-collapse: collapse; color: #303133; white-space: nowrap; }.weimob-operation-table th { height: 76px; padding: 0 24px; background: #f5f7fa; color: #303133; font-size: 15px; font-weight: 600; text-align: left; }.weimob-operation-table td { height: 76px; padding: 0 24px; border-top: 1px solid #ebeef5; color: #303133; font-size: 15px; }.weimob-operation-table tbody tr:hover { background: #fafcff; }
.weimob-operation-table-card > footer { min-height: 58px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; color: #909399; font-size: 14px; background: #fff; }.weimob-pagination { display: flex; align-items: center; gap: 8px; }.weimob-pagination button, .weimob-pagination select { height: 30px; min-width: 30px; padding: 0 8px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #606266; font: inherit; }.weimob-pagination button.active { border-color: #409eff; background: #409eff; color: #fff; }.weimob-pagination button:disabled { color: #c0c4cc; }
.weimob-link-button { margin-right: 14px; padding: 0; border: 0; background: transparent; color: #1677ff; font: inherit; cursor: pointer; }.weimob-link-button:hover { color: #409eff; }
.weimob-order-tabs { height: 52px; margin-top: 20px; display: flex; align-items: end; gap: 28px; border-bottom: 1px solid #ebeef5; background: #fff; }.weimob-order-tabs button { height: 52px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #606266; font-size: 14px; cursor: pointer; }.weimob-order-tabs button.active { color: #1677ff; border-bottom-color: #1677ff; }
.weimob-order-page .weimob-list-total, .weimob-refund-page .weimob-list-total { margin-top: 20px; }.weimob-order-table { min-width: 1840px; }.weimob-refund-table { min-width: 1420px; }.weimob-order-filter { grid-template-columns: repeat(4, minmax(230px, 1fr)); }.weimob-refund-filter { grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr) minmax(250px, 1fr); }
@media (max-width: 1250px) { .weimob-operation-filter, .weimob-vehicle-filter, .weimob-order-filter { grid-template-columns: repeat(2, minmax(300px, 1fr)); }.weimob-refund-filter { grid-template-columns: repeat(2, minmax(300px, 1fr)); } }
@media (max-width: 760px) { .weimob-operation-content { padding: 18px 16px 24px; }.weimob-operation-page > h1 { min-height: 44px; padding: 0 16px; }.weimob-operation-filter, .weimob-vehicle-filter, .weimob-order-filter, .weimob-refund-filter { padding: 18px 16px; grid-template-columns: 1fr; gap: 14px; }.weimob-operation-filter label { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }.weimob-vehicle-filter .weimob-operation-actions, .weimob-order-filter .weimob-operation-actions, .weimob-refund-filter .weimob-operation-actions { padding-left: 84px; }.weimob-operation-actions .weimob-primary-button, .weimob-operation-actions .crm-secondary-button { min-width: 86px; }.weimob-operation-table th, .weimob-operation-table td { padding: 0 14px; font-size: 14px; }.weimob-order-tabs { padding: 0 16px; overflow-x: auto; gap: 22px; }.weimob-list-total { margin: 20px 0 14px; }.weimob-operation-table-card > footer { min-width: 720px; } }

/* CRM：沿用现有后台的平面信息结构，以客户为对象承载身份、会员和资产。 */
.crm-page-shell { min-height: calc(100vh - 56px); color: #303133; background: var(--weimob-canvas); font-size: 14px; }
.crm-page-shell .admin-page-bar { min-height: 58px; padding: 0 4px; }
.crm-page-shell .admin-page-bar h1 { font-size: 17px; }
.crm-filter-card, .crm-table-card, .crm-profile-card, .crm-detail-tabs, .crm-info-card { border: 1px solid #ebeef5; background: #fff; }
.crm-filter-card { padding: 20px; }
.crm-filter-row { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; }
.crm-filter-row label { min-width: 180px; display: grid; gap: 8px; color: #606266; font-size: 14px; }
.crm-filter-row input, .crm-filter-row select { width: 220px; height: 34px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #303133; font-size: 14px; }
.crm-filter-row select { width: 170px; }
.crm-secondary-button { min-width: 76px; height: 34px; padding: 0 14px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #606266; font-size: 14px; cursor: pointer; }
.crm-secondary-button:hover { color: #1677ff; border-color: #a7cdfd; }
.crm-table-card { margin-top: 12px; overflow: hidden; }
.crm-table-card > header { min-height: 58px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #ebeef5; }
.crm-table-card > header > div { display: grid; gap: 4px; }
.crm-table-card > header strong { font-size: 15px; font-weight: 600; }
.crm-table-card > header span { color: #909399; font-size: 12px; }
.crm-table-wrap { overflow-x: auto; }
.crm-table { width: 100%; min-width: 1020px; border-collapse: collapse; white-space: nowrap; }
.crm-table th { height: 46px; padding: 0 14px; background: #f5f7fa; color: #606266; font-size: 13px; font-weight: 600; text-align: left; }
.crm-table td { height: 62px; padding: 8px 14px; border-top: 1px solid #ebeef5; color: #606266; font-size: 14px; }
.crm-table tbody tr:hover { background: #fafcff; }
.crm-customer-cell { display: flex; align-items: center; gap: 10px; }
.crm-customer-cell > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #f1e7f4; color: #982173; font-weight: 700; }
.crm-customer-cell strong, .crm-customer-cell small, .crm-cell-note { display: block; }
.crm-customer-cell strong { color: #303133; font-size: 14px; }
.crm-customer-cell small, .crm-cell-note { margin-top: 4px; color: #909399; font-size: 12px; }
.crm-status { display: inline-flex; min-height: 24px; padding: 0 8px; align-items: center; background: #ecf5ff; color: #409eff; font-size: 12px; }
.crm-status--success { color: #3f8f77; background: #e8f5ef; }
.crm-status--warning { color: #d48806; background: #fff7e6; }
.crm-status--gold { color: #9b6a13; background: #fff5d8; }
.crm-status--disabled { color: #909399; background: #f4f4f5; }
.crm-link-button, .crm-back-button { padding: 0; border: 0; background: transparent; color: #1677ff; font-size: 14px; cursor: pointer; }
.crm-link-button:hover, .crm-back-button:hover { color: #409eff; }
.crm-empty-cell { height: 150px !important; color: #909399 !important; text-align: center; }
.crm-back-button { display: inline-flex; align-items: center; width: auto; min-width: max-content; margin-bottom: 5px; color: #606266; font-size: 13px; text-align: left; white-space: nowrap; }
.crm-profile-card { min-height: 132px; padding: 22px; display: grid; grid-template-columns: 68px minmax(260px, 1fr) minmax(480px, 1.6fr); gap: 18px; align-items: center; }
.crm-profile-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #f2f4f7; }
.crm-profile-avatar .demo-user-avatar { width: 100%; height: 100%; border: 0; box-shadow: none; }
.crm-profile-main > span { color: #909399; font-size: 12px; }
.crm-profile-main h2 { margin: 5px 0 4px; font-size: 21px; font-weight: 600; }
.crm-profile-main p { margin: 0 0 10px; color: #606266; font-size: 13px; }
.crm-profile-main > div { display: flex; gap: 8px; }
.crm-profile-metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
.crm-profile-metrics > div { min-height: 62px; padding: 7px 18px; display: grid; align-content: center; gap: 8px; border-left: 1px solid #ebeef5; }
.crm-profile-metrics span { color: #909399; font-size: 13px; }
.crm-profile-metrics strong { color: #303133; font-size: 22px; font-weight: 600; }
.crm-detail-tabs { height: 50px; margin-top: 12px; padding: 0 16px; display: flex; align-items: stretch; gap: 30px; }
.crm-detail-tabs button { position: relative; border: 0; background: transparent; color: #606266; font-size: 14px; cursor: pointer; }
.crm-detail-tabs button.active { color: #1677ff; font-weight: 600; }
.crm-detail-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #1677ff; }
.crm-detail-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crm-detail-panel { margin-top: 12px; }
.crm-detail-stack { margin-top: 12px; display: grid; gap: 12px; }
.crm-detail-stack .crm-detail-panel { margin-top: 0; }
.crm-info-card { min-width: 0; min-height: 265px; }
.crm-info-card > header { height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ebeef5; }
.crm-info-card > header strong { font-size: 15px; font-weight: 600; }
.crm-info-card > header span { color: #909399; font-size: 12px; }
.crm-info-card dl { margin: 0; padding: 8px 16px 14px; }
.crm-info-card dl > div { min-height: 44px; display: grid; grid-template-columns: 120px 1fr; align-items: center; border-bottom: 1px solid #f0f2f5; }
.crm-info-card dl > div:last-child { border-bottom: 0; }
.crm-info-card dt { color: #909399; }
.crm-info-card dd { margin: 0; color: #303133; }
.crm-asset-total { height: 78px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: #fafafa; }
.crm-asset-total span { color: #606266; }
.crm-asset-total strong { color: #303133; font-size: 22px; }
.crm-record-list { margin: 0; padding: 0 16px 12px; list-style: none; }
.crm-record-list li { min-height: 54px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 4px 12px; border-bottom: 1px solid #f0f2f5; }
.crm-record-list li:last-child { border-bottom: 0; }
.crm-record-list span { color: #303133; }
.crm-record-list strong { color: #606266; font-weight: 500; }
.crm-record-list small { grid-column: 1 / -1; color: #909399; font-size: 12px; }
.crm-record-list--wide { padding-top: 6px; }

@media (max-width: 1280px) {
  .crm-profile-card { grid-template-columns: 60px 1fr; }
  .crm-profile-metrics { grid-column: 1 / -1; }
  .crm-profile-metrics > div:first-child { border-left: 0; }
}
@media (max-width: 900px) {
  .crm-detail-grid { grid-template-columns: 1fr; }
  .crm-profile-metrics { grid-template-columns: 1fr 1fr; }
  .crm-profile-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid #ebeef5; }
  .crm-profile-metrics > div:nth-child(4) { border-top: 1px solid #ebeef5; }
  .crm-detail-tabs { gap: 16px; overflow-x: auto; white-space: nowrap; }
}

.role-permission-shell { padding-bottom: 24px; }
.role-page-bar { gap: 18px; }
.role-page-bar p { max-width: 760px; line-height: 1.55; }
.account-role-topbar { height: 62px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border-bottom: 1px solid #ebeef5; }
.account-role-tabs { height: 100%; display: flex; align-items: stretch; gap: 30px; }
.account-role-tabs button { position: relative; padding: 0 2px; border: 0; background: transparent; color: #303133; font-size: 15px; cursor: pointer; }
.account-role-tabs button.active { color: #1677ff; font-weight: 600; }
.account-role-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #1677ff; }
.role-scope-tabs { min-height: 50px; margin: 0 18px; display: flex; align-items: end; gap: 26px; border-bottom: 1px solid #ebeef5; background: #fff; }
.role-scope-tabs button { position: relative; height: 50px; padding: 0 2px; border: 0; background: transparent; color: #606266; text-align: left; cursor: pointer; }
.role-scope-tabs button:hover { color: #1677ff; }
.role-scope-tabs button.active { color: #1677ff; }
.role-scope-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #1677ff; }
.role-scope-tabs strong { font-size: 14px; font-weight: 500; }
.role-scope-tabs span { color: #909399; font-size: 12px; line-height: 1.45; }
.role-toast { margin: 12px 18px 0; padding: 10px 14px; border: 1px solid #a7cdfd; background: #ecf5ff; color: #1677ff; font-size: 13px; }
.role-filter-card, .role-table-card, .role-account-card, .role-boundary-note { margin-left: 18px; margin-right: 18px; }
.role-filter-card { margin-top: 12px; }
.role-table { min-width: 1420px; }
.role-table th:first-child, .role-table td:first-child { width: 42px; padding-right: 0; text-align: center; }
.role-table input[type="checkbox"] { width: 16px; height: 16px; }
.role-table td strong, .role-table td small { display: block; }
.role-table td strong { color: #303133; font-weight: 500; }
.role-table td small { margin-top: 5px; color: #909399; font-size: 12px; line-height: 1.45; }
.role-table tr.is-selected td { background: #f7fbff; }
.role-table .crm-link-button { margin-right: 12px; white-space: nowrap; }
.role-page-permissions { margin: 12px 18px 0; overflow: hidden; border: 1px solid #ebeef5; background: #fff; }
.role-page-permissions > header, .role-user-bind-card > header { min-height: 58px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #ebeef5; }
.role-page-permissions > header > div, .role-user-bind-card > header > div { display: grid; gap: 4px; }
.role-page-permissions > header strong, .role-user-bind-card > header strong { font-size: 15px; }
.role-page-permissions > header span, .role-user-bind-card > header span { color: #909399; font-size: 12px; }
.role-permission-groups { padding: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.role-permission-groups article { min-width: 0; border: 1px solid #ebeef5; background: #fbfcfd; }
.role-permission-groups h2 { height: 38px; margin: 0; padding: 0 12px; display: flex; align-items: center; border-bottom: 1px solid #ebeef5; color: #303133; font-size: 14px; font-weight: 600; }
.role-permission-groups article > div { padding: 8px 10px 10px; display: grid; gap: 7px; }
.role-permission-groups label { min-height: 32px; padding: 6px 8px; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: center; border: 1px solid transparent; background: #fff; cursor: pointer; }
.role-permission-groups label.is-checked { border-color: #a7cdfd; background: #f4f9ff; }
.role-permission-groups input { width: 15px; height: 15px; }
.role-permission-groups span, .role-permission-groups small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-permission-groups span { color: #303133; font-size: 13px; }
.role-permission-groups small { grid-column: 2; color: #909399; font-size: 11px; }
.role-page-permissions--readonly .role-permission-groups label { cursor: default; }
.role-page-permissions--readonly .role-permission-groups input { accent-color: #1677ff; }
.role-empty-permissions { margin: 0; padding: 10px 12px; color: #909399; font-size: 13px; }
.role-page-permissions > footer { min-height: 58px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; border-top: 1px solid #ebeef5; color: #606266; }
.role-page-permissions > footer span { color: #1677ff; }
.role-page-permissions > footer strong { color: #303133; font-weight: 600; }
.role-page-permissions > footer small { color: #909399; line-height: 1.45; }
.role-permission-chips { display: flex; flex-wrap: wrap; gap: 7px; white-space: normal; }
.role-permission-chips span { min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid #dcdfe6; background: #fff; color: #606266; font-size: 12px; }
.role-account-table { min-width: 1180px; }
.role-account-table td strong { color: #303133; font-weight: 500; }
.role-user-bind-card { margin: 12px 18px 0; border: 1px solid #ebeef5; background: #fff; }
.role-user-bind-form { padding: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; background: #f5f7fa; }
.role-user-bind-form label { min-width: 0; display: grid; gap: 8px; color: #606266; font-size: 13px; }
.role-user-bind-form input, .role-user-bind-form select { min-width: 0; width: 100%; height: 34px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #303133; font-size: 14px; }
.role-inherited-permissions { padding: 14px 16px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; border-top: 1px solid #ebeef5; }
.role-inherited-permissions > div:first-child { display: grid; gap: 5px; }
.role-inherited-permissions > div:first-child span { color: #909399; font-size: 12px; }
.role-inherited-permissions > div:first-child strong { color: #303133; font-size: 15px; }
.role-inherited-permissions > div:first-child small { color: #606266; font-size: 12px; line-height: 1.45; }
.role-inherited-permissions > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.role-inherited-permissions > div:last-child span { min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; background: #ecf5ff; color: #1677ff; font-size: 12px; }
.role-boundary-note { margin-top: 12px; }

@media (max-width: 1180px) {
  .role-permission-groups, .role-user-bind-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .account-role-topbar { height: auto; min-height: 58px; padding: 0 12px; }
  .account-role-tabs { gap: 20px; }
  .role-scope-tabs { margin-left: 12px; margin-right: 12px; overflow-x: auto; gap: 22px; }
  .role-permission-groups, .role-user-bind-form, .role-inherited-permissions { grid-template-columns: 1fr; }
  .role-filter-card, .role-table-card, .role-page-permissions, .role-user-bind-card, .role-account-card, .role-boundary-note, .role-toast { margin-left: 12px; margin-right: 12px; }
  .role-page-permissions > header, .role-user-bind-card > header { min-height: 70px; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  .role-page-permissions > footer { align-items: flex-start; flex-direction: column; }
  .role-page-bar { align-items: flex-start; }
}

/* CRM 积分管理：基础规则、流水、特殊规则组成一条可追溯业务链。 */
.crm-points-shell { padding: 0; }
.crm-points-tabs { height: 58px; padding: 0 18px; display: flex; align-items: stretch; gap: 28px; border-bottom: 1px solid #ebeef5; background: #fff; }
.crm-points-tabs button { position: relative; padding: 0 2px; border: 0; background: transparent; color: #303133; font-size: 15px; cursor: pointer; }
.crm-points-tabs button:hover { color: #1677ff; }
.crm-points-tabs button.active { color: #1677ff; font-weight: 600; }
.crm-points-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #1677ff; }
.crm-points-body { padding: 20px; }
.crm-basic-points-body { padding: 16px 24px 28px; background: #fff; }
.crm-basic-notice { position: relative; margin-bottom: 28px; padding: 12px 16px 12px 40px; border: 1px solid #a7cdfd; background: #ecf5ff; color: #303133; line-height: 1.8; }
.crm-basic-notice::before { content: "i"; position: absolute; top: 14px; left: 14px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #1677ff; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.crm-basic-notice ol { margin: 0; padding-left: 18px; font-size: 14px; }
.crm-basic-notice .crm-link-button { display: inline; margin: 0 2px; vertical-align: baseline; }
.crm-basic-section { margin-bottom: 28px; }
.crm-basic-section > h2 { margin: 0 0 18px; color: #303133; font-size: 16px; font-weight: 600; }
.crm-basic-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 36px; margin-bottom: 14px; }
.crm-basic-label { color: #909399; line-height: 22px; }
.crm-basic-value { color: #303133; line-height: 22px; min-height: 22px; }
.crm-basic-hint { margin-left: 12px; color: #c0c4cc; }
.crm-basic-grant-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.crm-basic-grant-rule ul { width: 100%; margin: 4px 0 0; padding: 0; list-style: none; color: #303133; }
.crm-basic-grant-rule li { position: relative; padding-left: 12px; line-height: 24px; }
.crm-basic-grant-rule li::before { content: "·"; position: absolute; left: 0; top: 0; }
.crm-basic-actions { display: flex; justify-content: center; padding: 8px 0 4px; }
.crm-points-notice, .crm-special-notice { padding: 14px 18px; border: 1px solid #a7cdfd; background: #ecf5ff; color: #303133; line-height: 1.7; }
.crm-points-notice { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: baseline; }
.crm-points-notice::before, .crm-special-notice::before { content: "i"; width: 17px; height: 17px; display: grid; place-items: center; grid-row: 1 / span 2; border-radius: 50%; background: #1677ff; color: #fff; font: 12px Georgia, serif; }
.crm-points-notice strong { font-size: 14px; }
.crm-points-notice p { margin: 0; color: #606266; font-size: 14px; }
.crm-rule-heading { height: 66px; display: flex; align-items: center; justify-content: space-between; }
.crm-rule-heading > div { display: flex; align-items: center; gap: 12px; }
.crm-rule-heading h2 { margin: 0; font-size: 17px; font-weight: 600; }
.crm-points-rule-card { margin-bottom: 12px; border: 1px solid #ebeef5; background: #fff; }
.crm-points-rule-card > header { min-height: 54px; padding: 0 18px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #ebeef5; }
.crm-points-rule-card > header strong { font-size: 15px; }
.crm-points-rule-card > header span { color: #909399; font-size: 13px; }
.crm-rule-definition { margin: 0; padding: 10px 18px 16px; }
.crm-rule-definition > div { min-height: 48px; display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; border-bottom: 1px solid #f0f2f5; }
.crm-rule-definition > div:last-child { border-bottom: 0; }
.crm-rule-definition dt { color: #606266; }
.crm-rule-definition dd { margin: 0; color: #303133; }
.crm-rule-definition dd strong, .crm-rule-definition dd small { display: block; }
.crm-rule-definition dd small { margin-top: 5px; color: #909399; font-size: 12px; }
.crm-rule-definition--three { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; }
.crm-rule-definition--three > div { min-height: 105px; padding: 18px; display: block; border-right: 1px solid #ebeef5; border-bottom: 0; }
.crm-rule-definition--three > div:last-child { border-right: 0; }
.crm-rule-definition--three dt { margin-bottom: 10px; }
.crm-confirmed-rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.crm-confirmed-rule-grid article { min-height: 94px; padding: 18px; display: grid; align-content: center; gap: 7px; border-right: 1px solid #ebeef5; }
.crm-confirmed-rule-grid article:last-child { border-right: 0; }
.crm-confirmed-rule-grid span { color: #606266; font-size: 14px; }
.crm-confirmed-rule-grid strong { color: #303133; font-size: 20px; }
.crm-confirmed-rule-grid small { color: #3f8f77; font-size: 12px; }
.crm-points-flow { margin-top: 12px; border: 1px solid #ebeef5; background: #fff; }
.crm-points-flow > header { min-height: 62px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ebeef5; }
.crm-points-flow > header > div { display: grid; gap: 4px; }
.crm-points-flow > header strong { font-size: 15px; }
.crm-points-flow > header span { color: #909399; font-size: 12px; }
.crm-points-flow ol { margin: 0; padding: 24px 18px; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; }
.crm-points-flow li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.crm-points-flow li:not(:last-child)::after { content: ""; position: absolute; top: 13px; right: 10px; left: calc(100% - 34px); height: 1px; background: #dcdfe6; }
.crm-points-flow li b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #ecf5ff; color: #1677ff; font-size: 13px; }
.crm-points-flow li span { display: grid; gap: 5px; padding-right: 20px; }
.crm-points-flow li strong { font-size: 14px; }
.crm-points-flow li small { color: #909399; font-size: 12px; line-height: 1.5; }
.crm-points-filter { margin-top: 18px; padding: 20px; display: flex; align-items: end; flex-wrap: wrap; gap: 14px; background: #f5f7fa; }
.crm-points-filter label { min-width: 200px; display: grid; gap: 8px; color: #606266; font-size: 14px; }
.crm-points-filter input, .crm-points-filter select { width: 240px; height: 34px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #303133; font-size: 14px; }
.crm-points-filter--special { margin-top: 0; }
.crm-points-filter--special label:nth-child(3) select { width: 180px; }
.crm-organization-selects { display: flex; }
.crm-organization-selects select { width: 148px !important; border-right-width: 0; }
.crm-organization-selects select:last-child { border-right-width: 1px; }
.crm-points-table-card { margin-top: 18px; border: 1px solid #ebeef5; background: #fff; }
.crm-points-table-card > header { min-height: 58px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ebeef5; }
.crm-points-table-card > header > div { display: grid; gap: 4px; }
.crm-points-table-card > header strong { font-size: 15px; }
.crm-points-table-card > header span { color: #909399; font-size: 12px; }
.crm-points-table { min-width: 1260px; }
.crm-points-plus { color: #3f8f77; }
.crm-points-minus { color: #e06d61; }
.crm-ledger-body { padding: 12px 12px 24px; }
.crm-ledger-overview { padding: 20px 20px 24px; background: #fff; }
.crm-ledger-overview h2 { margin: 0 0 18px; display: flex; align-items: center; gap: 7px; color: #303133; font-size: 17px; font-weight: 600; }
.crm-ledger-overview h2 span { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #909399; border-radius: 50%; color: #909399; font-size: 11px; font-weight: 400; }
.crm-ledger-metrics { display: grid; grid-template-columns: repeat(5, 1fr); }
.crm-ledger-metrics article { min-height: 76px; padding: 0 20px; display: grid; align-content: center; gap: 8px; }
.crm-ledger-metrics strong { color: #303133; font-size: clamp(18px, 1.45vw, 26px); font-weight: 400; white-space: nowrap; }
.crm-ledger-metrics span { color: #909399; font-size: 14px; }
.crm-ledger-metrics small { margin-left: 6px; color: #1677ff; font-size: 12px; }
.crm-ledger-filter-panel { margin-top: 12px; padding: 16px 20px 20px; background: #fff; }
.crm-ledger-filter-box { padding: 16px 16px 14px; border: 1px solid #d6e4f5; background: #eff5fb; }
.crm-ledger-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; }
.crm-ledger-filter-grid > label { min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center; color: #606266; font-size: 14px; }
.crm-ledger-filter-grid > label > :last-child { min-width: 0; max-width: 100%; }
.crm-ledger-filter-grid input, .crm-ledger-filter-grid select { box-sizing: border-box; min-width: 0; width: 100%; max-width: 100%; height: 34px; padding: 0 8px; border: 1px solid #dcdfe6; border-radius: 0; background: #fff; color: #606266; font-size: 13px; }
.crm-ledger-input-group { min-width: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.crm-ledger-input-group--org { grid-template-columns: 64px minmax(0, 1fr); }
.crm-ledger-input-group > :first-child { border-right: 0; }
.crm-ledger-date-group { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; }
.crm-ledger-date-group b { color: #c0c4cc; font-weight: 400; text-align: center; }
.crm-ledger-date-group input { padding: 0 6px; font-variant-numeric: tabular-nums; }
.crm-ledger-filter-actions { display: flex; align-items: center; gap: 12px; padding: 16px 0 0 80px; }
.crm-ledger-table-card { margin-top: 0; }
.crm-ledger-table { min-width: 1720px; }
.crm-ledger-table th { height: 56px; padding: 0 16px; font-size: 14px; }
.crm-ledger-table td { min-height: 72px; height: 72px; padding: 10px 16px; font-size: 14px; }
.crm-ledger-customer { display: block; line-height: 1.5; }
.crm-ledger-customer small { display: block; color: #909399; font-size: 12px; }
.crm-ledger-table-card > footer { height: 52px; padding: 0 16px; display: flex; align-items: center; color: #909399; }
.crm-special-notice { display: grid; grid-template-columns: 18px 1fr; gap: 0 10px; }
.crm-special-notice::before { grid-column: 1; grid-row: 1 / span 2; margin-top: 1px; }
.crm-special-notice > strong { grid-column: 2; font-size: 14px; }
.crm-special-notice ol { grid-column: 2; margin: 0; padding-left: 18px; font-size: 14px; }
.crm-special-actions { padding: 18px 0; }
.crm-special-table { min-width: 1240px; }
.crm-row-actions { display: flex; gap: 14px; }
.crm-points-table-card > footer { height: 58px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: #909399; }
.crm-points-table-card > footer span { display: flex; gap: 6px; }
.crm-points-table-card > footer button { width: 32px; height: 32px; border: 1px solid #dcdfe6; background: #fff; color: #909399; }
.crm-points-table-card > footer button.active { border-color: #1677ff; background: #1677ff; color: #fff; }

@media (max-width: 1200px) {
  .crm-points-flow ol { grid-template-columns: 1fr; gap: 14px; }
  .crm-points-flow li:not(:last-child)::after { top: 26px; right: auto; bottom: -14px; left: 13px; width: 1px; height: auto; }
  .crm-rule-definition--three { grid-template-columns: 1fr; }
  .crm-rule-definition--three > div { border-right: 0; border-bottom: 1px solid #ebeef5; }
  .crm-confirmed-rule-grid { grid-template-columns: 1fr; }
  .crm-confirmed-rule-grid article { border-right: 0; border-bottom: 1px solid #ebeef5; }
  .crm-ledger-metrics { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .crm-ledger-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .crm-ledger-metrics { grid-template-columns: 1fr 1fr; }
  .crm-ledger-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-ledger-filter-actions { padding-left: 0; }
}

/* 五个核心用例演示页：步骤轨道固定在中间手机上方，现场讲解始终可定位当前进度。 */
.event-console { min-height: calc(100vh - 56px); padding: 10px 20px 22px; background: #f4f6f9; }
.five-case-head { min-height: 48px; max-width: 1680px; margin: 0 auto; padding: 0 0 8px; align-items: center; }
.five-case-head > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.five-case-head > div:first-child > span { font-size: 9px; }
.five-case-head h1 { margin: 0; font-size: 16px; font-weight: 650; }
.five-case-head p { margin: 0; color: #8b929b; font-size: 11px; }
.five-case-head .workbench-head-actions button { min-height: 32px; padding: 0 13px; font-size: 11px; }
.five-case-grid { max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 258px minmax(500px, 1fr) 390px; gap: 14px; align-items: start; }
.five-case-left, .five-case-right { min-width: 0; }
.five-case-left { position: sticky; top: 12px; display: grid; gap: 12px; max-height: calc(100vh - 86px); overflow: hidden auto; background: transparent; border: 0; }
.five-case-cases { height: 484px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e4e7ec; background: #fff; }
.five-case-left .case-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: #cfd5dc transparent; overscroll-behavior: contain; }
.five-case-left .case-list::-webkit-scrollbar { width: 5px; }
.five-case-left .case-list::-webkit-scrollbar-thumb { border-radius: 3px; background: #cfd5dc; }
.five-case-left .case-item { min-height: 66px; margin: 0 0 6px; padding: 9px; border: 1px solid transparent; background: #fff; }
.five-case-left .case-item:hover { border-color: #e2d4b6; background: #fffcf6; }
.five-case-left .case-item.is-active { border-color: #c89a45; background: #fff8eb; box-shadow: inset 0 0 0 1px rgba(200, 154, 69, .12); }
.five-case-left .case-item strong { font-size: 14px; }
.five-case-left .case-item small { margin-top: 5px; font-size: 11px; line-height: 1.35; white-space: normal; }
.sim-event-panel { padding: 10px; border: 1px solid #e4e7ec; background: #fff; }
.sim-event-panel > header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.sim-event-panel > header span { flex: none; color: #343a41; font-size: 11px; font-weight: 650; }
.sim-event-panel > header small { min-width: 0; overflow: hidden; color: #969da6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sim-event-buttons { display: grid; grid-template-columns: 1fr; gap: 7px; }
.sim-event-btn { min-height: 34px; padding: 6px 8px; border: 1px solid #dfe3e8; border-radius: 2px; background: #f7f8fa; color: #44505c; font-size: 11px; font-weight: 600; text-align: left; cursor: pointer; }
.sim-event-btn:not(.is-pending) { min-height: 52px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; }
.sim-event-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 13px; }
.sim-event-copy { min-width: 0; }
.sim-event-copy strong, .sim-event-copy small { display: block; }
.sim-event-copy strong { color: #354049; font-size: 12px; }
.sim-event-copy small { margin-top: 3px; overflow: hidden; color: #8d969f; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sim-event-btn em { color: #71808a; font-size: 9px; font-style: normal; white-space: nowrap; }
.sim-event-btn.is-wechat { border-color: #aee6c3; background: #f3fff7; box-shadow: inset 3px 0 0 #07c160; }
.sim-event-btn.is-wechat .sim-event-icon { background: #07c160; }
.sim-event-btn.is-wechat em { color: #078943; }
.sim-event-btn.is-parking { border-color: #a9cbd7; background: #f2f8fa; box-shadow: inset 3px 0 0 #2b778d; }
.sim-event-btn.is-parking .sim-event-icon { border-radius: 4px; background: #2b778d; font-family: Georgia, serif; font-size: 17px; }
.sim-event-btn.is-parking .sim-event-copy strong { color: #245f71; }
.sim-event-btn.is-parking em { color: #2b778d; }
.sim-event-btn:hover:not(:disabled) { border-color: #1677ff; background: #f0f7ff; color: #1677ff; }
.sim-event-btn:focus-visible { outline: 2px solid #1677ff; outline-offset: 2px; }
.sim-event-btn.is-pending, .sim-event-btn:disabled { color: #9aa1aa; background: #fafbfc; cursor: not-allowed; opacity: .72; }
.sim-event-flyout { position: fixed; z-index: 80; left: 20px; bottom: 18px; width: min(380px, calc(100vw - 40px)); max-height: calc(100vh - 90px); overflow-y: auto; border: 1px solid #d9dee5; background: #fff; box-shadow: 0 16px 38px rgba(24, 32, 42, .22); }
.sim-event-flyout > header { min-height: 70px; padding: 12px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e8ebef; background: #fafbfc; }
.sim-event-flyout > header span { color: #a8751b; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.sim-event-flyout > header h2 { margin: 4px 0 2px; color: #30363d; font-size: 17px; }
.sim-event-flyout > header p { margin: 0; color: #8b929b; font-size: 10px; }
.sim-event-flyout > header button { width: 28px; height: 28px; flex: none; border: 0; background: transparent; color: #7f8790; font-size: 22px; cursor: pointer; }
.sim-checkout-user { margin: 12px 14px 0; padding: 10px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #e8dfcb; background: #fffaf1; }
.sim-checkout-user .demo-user-avatar { width: 38px; height: 38px; }
.sim-checkout-user span, .sim-checkout-user strong, .sim-checkout-user small { display: block; }
.sim-checkout-user span { color: #9a835c; font-size: 9px; }
.sim-checkout-user strong { margin-top: 2px; color: #343a41; font-size: 13px; }
.sim-checkout-user small { margin-top: 3px; color: #7f8790; font-size: 10px; line-height: 1.35; }
.sim-checkout-form { padding: 10px 14px 4px; display: grid; gap: 9px; }
.sim-checkout-form label { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 8px; color: #606872; font-size: 11px; }
.sim-checkout-form select, .sim-checkout-form input { width: 100%; height: 34px; border: 1px solid #dfe3e8; border-radius: 2px; background: #fff; color: #343a41; font: inherit; }
.sim-checkout-form select { padding: 0 8px; }
.sim-checkout-form input { padding: 0 42px 0 9px; }
.parking-event-toggle { display: flex; align-items: center; gap: 8px; color: #5f6872; }
.sim-checkout-form .parking-event-toggle input { width: 16px; height: 16px; padding: 0; accent-color: #1677ff; }
.parking-event-toggle small { color: #8b929b; font-size: 10px; }
.sim-money-input { position: relative; }
.sim-money-input i { position: absolute; top: 0; right: 10px; height: 34px; display: grid; place-items: center; color: #8f969f; font-size: 10px; font-style: normal; pointer-events: none; }
.sim-third-party { margin: 8px 14px 0; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #d9e8e1; background: #f5fbf8; }
.sim-third-party span, .sim-third-party strong, .sim-third-party small { display: block; }
.sim-third-party > div > span { color: #7c8c84; font-size: 9px; }
.sim-third-party strong { margin-top: 2px; color: #246b55; font-size: 13px; }
.sim-third-party small { margin-top: 3px; color: #78847e; font-size: 10px; line-height: 1.35; }
.sim-third-party > em { padding: 5px 8px; border: 1px solid #b9ddcd; background: #eaf6f1; color: #27775f; font-size: 10px; font-style: normal; white-space: nowrap; }
.sim-checkout-summary { margin: 8px 14px 0; border-top: 1px solid #eceff2; border-bottom: 1px solid #eceff2; }
.sim-checkout-summary > div { min-height: 34px; display: flex; align-items: center; justify-content: space-between; color: #7a828c; font-size: 11px; }
.sim-checkout-summary > div + div { border-top: 1px dashed #e8ebef; }
.sim-checkout-summary strong { color: #3b4148; }
.sim-checkout-summary .is-total strong { color: #a56e10; font-size: 15px; }
.sim-checkout-summary p { margin: 0; padding: 8px 0 9px; color: #27775f; font-size: 10px; line-height: 1.4; }
.sim-checkout-error { margin: 8px 14px 0; padding: 8px 10px; color: #b2443a; background: #fff4f2; font-size: 10px; line-height: 1.4; }
.sim-event-flyout > footer { padding: 12px 14px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.sim-event-flyout > footer button { height: 36px; border: 1px solid #d9dee4; border-radius: 2px; background: #fff; color: #58616b; font-size: 11px; cursor: pointer; }
.sim-event-flyout > footer button.is-primary { border-color: #1677ff; background: #1677ff; color: #fff; }
.sim-event-flyout > footer button:disabled { border-color: #e3e6ea; background: #f2f3f5; color: #a7adb5; cursor: not-allowed; }
.parking-event-result { margin: 14px; padding: 20px 16px; border: 1px solid #b9dfce; background: #f3fbf7; text-align: center; }
.parking-event-result > i { width: 42px; height: 42px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: #2f8d69; color: #fff; font-size: 24px; font-style: normal; font-weight: 700; }
.parking-event-result > span { display: block; color: #2f8d69; font-size: 11px; font-weight: 700; }
.parking-event-result h3 { margin: 5px 0 7px; color: #26342e; font-size: 18px; }
.parking-event-result p { margin: 0; color: #66736d; font-size: 11px; line-height: 1.6; }
.parking-event-result.is-warning { border-color: #ecd7a8; background: #fff9ec; }
.parking-event-result.is-warning > i { background: #c28a20; }
.parking-event-result.is-warning > span { color: #9d6b13; }
.parking-event-result.is-error { border-color: #edc5c0; background: #fff5f3; }
.parking-event-result.is-error > i { background: #c95649; }
.parking-event-result.is-error > span { color: #a63f35; }
.parking-event-result-summary { margin: 0 14px; border: 1px solid #e4e8ed; background: #fff; }
.parking-event-result-summary > div { min-height: 38px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #edf0f3; }
.parking-event-result-summary > div:last-child { border-bottom: 0; }
.parking-event-result-summary span { color: #8b929b; font-size: 11px; }
.parking-event-result-summary strong { max-width: 68%; overflow: hidden; color: #394149; font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.current-test-user { margin: 4px 12px 14px; padding: 12px; border-top: 1px solid #eceff3; background: #fafbfc; }
.current-test-user span, .current-test-user strong, .current-test-user small { display: block; }
.current-test-user span { color: #9299a3; font-size: 11px; }
.current-test-user strong { margin-top: 6px; color: #373c43; font-size: 14px; }
.current-test-user small { margin-top: 5px; color: #828a95; font-size: 11px; line-height: 1.45; }

.five-case-center { min-width: 0; display: grid; gap: 12px; }
.case-progress-panel, .phone-stage-card, .demo-user-profile, .focused-action-card, .focused-log-card { border: 1px solid #e4e7ec; background: #fff; }
.case-progress-panel { padding: 10px 14px 12px; }
.case-progress-panel header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.case-progress-panel header > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.case-progress-panel header span, .case-progress-panel header strong { display: block; }
.case-progress-panel header span { flex: 0 0 auto; color: #969da6; font-size: 10px; }
.case-progress-panel header strong { overflow: hidden; color: #2f343b; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.case-progress-panel header em { padding: 4px 8px; border: 1px solid #e0c895; background: #fffaf0; color: #94691f; font-size: 11px; font-style: normal; white-space: nowrap; }
.case-progress-panel header em.is-complete { border-color: #b9ddcd; background: #f0faf5; color: #27765e; }
.case-progress-panel > p { margin: 3px 0 8px; color: #8c939c; font-size: 10px; line-height: 1.4; }
.case-progress-rail { display: flex; align-items: flex-start; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.case-progress-rail > i { flex: 1 0 22px; height: 1px; margin-top: 11px; background: #dfe3e8; }
.case-progress-step { flex: 0 0 auto; min-width: 70px; display: grid; justify-items: center; gap: 4px; color: #9aa1aa; text-align: center; }
.case-progress-step b { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #d8dde3; border-radius: 50%; background: #fff; font-size: 10px; font-weight: 600; }
.case-progress-step span { max-width: 96px; font-size: 10px; line-height: 1.25; white-space: nowrap; }
.case-progress-step.is-done { color: #3f7f69; }
.case-progress-step.is-done b { border-color: #5e9e87; background: #eaf6f1; color: #27745c; }
.case-progress-step.is-done + i { background: #74a994; }
.case-progress-step.is-current { color: #9a6815; font-weight: 600; }
.case-progress-step.is-current b { border: 2px solid #c58d2b; background: #fff7e7; color: #9b6815; box-shadow: 0 0 0 4px rgba(197, 141, 43, .10); }

.phone-stage-card { min-height: 680px; padding-bottom: 18px; }
.phone-stage-card > header { min-height: 46px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf0f3; }
.phone-stage-card > header span, .phone-stage-card > header strong { display: block; }
.phone-stage-card > header span { color: #a8751b; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.phone-stage-card > header strong { margin-top: 4px; color: #363b42; font-size: 15px; }
.phone-stage-card > header small { color: #8e959e; font-size: 11px; }
.demo-phone-shell { width: min(390px, calc(100% - 32px)); min-height: 520px; margin: 18px auto 0; overflow: hidden; border: 7px solid #282725; border-radius: 30px; background: #fff; box-shadow: 0 14px 32px rgba(39, 42, 47, .12); }
.demo-phone-status { height: 24px; padding: 6px 14px 0; display: flex; justify-content: space-between; color: #333; background: #fff; font-size: 9px; font-weight: 700; }
.demo-phone-shell .mini-program-card { width: 100%; min-height: 489px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.demo-phone-shell .mini-program-card > header { min-height: 53px; }
.demo-phone-shell .mini-brand-dot { overflow: hidden; border-radius: 3px; background: #fff; }
.demo-phone-shell .mini-brand-dot img { width: 100%; height: 100%; object-fit: contain; }
.demo-phone-shell .mini-program-content { min-height: 338px; padding: 16px; }
.demo-phone-shell .mini-program-card > footer { min-height: 50px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #edf0f3; background: #fff; }
.demo-phone-shell .mini-program-card > footer button { border: 0; background: #fff; color: #888f98; font-size: 10px; }
.case-phone-shell { width: auto; max-width: calc(100% - 32px); height: min(844px, calc(100vh - 232px)); min-height: 0; aspect-ratio: 390 / 844; margin: 12px auto 0; box-shadow: 0 16px 36px rgba(34, 35, 38, .14); }
.case-phone-shell .case-phone-content { padding-bottom: 18px; }
.case-phone-shell .bottom-nav button { cursor: pointer; }
.case-phone-shell .member-phone-hero::after { content: "M"; }
.case-phone-shell .coupon-phone-hero::after { content: "券"; right: 2px; bottom: -22px; font-size: 92px; }
.case-phone-shell .coupon-phone-card .detail-pair + .detail-pair { border-top: 1px solid #f0ece6; }
.phone-static-action { width: 100%; min-height: 42px; display: grid; place-items: center; color: #fff; background: var(--gold-dark); font-size: 12px; font-weight: 700; }

.five-case-right { position: sticky; top: 12px; display: grid; gap: 12px; max-height: calc(100vh - 86px); overflow-y: auto; }
.demo-persona-panel { padding: 8px 10px; display: grid; gap: 7px; border: 1px solid #e4e7ec; background: #fff; }
.demo-persona-panel > header { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.demo-persona-panel > header span { flex: none; color: #343a41; font-size: 11px; font-weight: 650; }
.demo-persona-panel > header small { min-width: 0; overflow: hidden; color: #969da6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.demo-persona-buttons { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.demo-persona-buttons::-webkit-scrollbar { height: 3px; }
.demo-persona-buttons::-webkit-scrollbar-thumb { border-radius: 2px; background: #d5dae0; }
.demo-persona-chip { flex: none; height: 28px; padding: 0 11px; border: 1px solid #e1e5ea; border-radius: 999px; background: #f7f8fa; color: #555e68; font-size: 11px; white-space: nowrap; cursor: pointer; }
.demo-persona-chip:hover { border-color: #c9a45a; background: #fffaf1; color: #8e631b; }
.demo-persona-chip.is-active { border-color: #1677ff; background: #1677ff; color: #fff; }
.demo-persona-chip:focus-visible { outline: 2px solid #1677ff; outline-offset: 2px; }
.demo-customer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-customer-card { min-width: 0; min-height: 56px; padding: 7px 8px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; overflow: hidden; border: 1px solid #e1e5ea; border-radius: 3px; background: #fff; color: #343a41; text-align: left; cursor: pointer; }
.demo-customer-card:hover { border-color: #c9a45a; background: #fffaf1; }
.demo-customer-card.is-active { border-color: #1677ff; background: #f2f7ff; box-shadow: inset 2px 0 0 #1677ff; }
.demo-customer-card:focus-visible { outline: 2px solid rgba(22, 119, 255, .28); outline-offset: 1px; }
.demo-customer-avatar { width: 38px; height: 38px; flex: none; border: 1px solid rgba(31, 39, 48, .08); border-radius: 7px; object-fit: cover; box-shadow: 0 1px 3px rgba(31, 39, 48, .08); }
.demo-customer-copy { min-width: 0; overflow: hidden; }
.demo-customer-copy strong, .demo-customer-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-customer-copy strong { color: #30363d; font-size: 11px; font-weight: 700; line-height: 1.35; }
.demo-customer-copy small { margin-top: 5px; display: grid; grid-template-columns: minmax(0, max-content) auto; align-items: center; gap: 5px; color: #8c949d; font-size: 9px; }
.demo-customer-copy small em { min-width: 0; max-width: 68px; padding: 2px 5px; overflow: hidden; border-radius: 2px; font-size: 9px; font-style: normal; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.demo-customer-copy small span { min-width: 0; overflow: hidden; color: #747d87; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.demo-customer-card.is-new { background: #fafbfc; }
.demo-customer-card.is-new em { background: #edf0f3; color: #68717c; }
.demo-customer-card.is-cardholder { background: #f7faff; }
.demo-customer-card.is-cardholder em { background: #e5f0ff; color: #276fc2; }
.demo-customer-card.is-member { background: #f6fbf8; }
.demo-customer-card.is-member em { background: #e3f3ea; color: #27775f; }
.demo-customer-card.is-excellent { background: #fffaf1; }
.demo-customer-card.is-excellent em { background: #f5e7c8; color: #8d641d; }
.demo-customer-card.is-employee { background: #fcf7fb; }
.demo-customer-card.is-employee em { background: #f3e3ef; color: #982173; }
.demo-customer-card.is-active { border-color: #1677ff; background: #f2f7ff; box-shadow: inset 2px 0 0 #1677ff; }
.demo-user-profile > header { min-height: 68px; padding: 11px 13px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #edf0f3; }
.demo-user-avatar { width: 40px; height: 40px; display: block; border-radius: 50%; object-fit: cover; background: #f2f4f7; }
.kb-member-avatar { width: 52px; height: 52px; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(87, 64, 150, .18); }
.demo-user-profile header span, .demo-user-profile header strong, .demo-user-profile header small { display: block; }
.demo-user-profile header span { color: #989fa8; font-size: 9px; }
.demo-user-profile header strong { margin-top: 3px; color: #31373e; font-size: 14px; }
.demo-user-profile header small { margin-top: 3px; color: #8b929b; font-size: 10px; }
.demo-user-profile header em { padding: 4px 7px; border: 1px solid #e0c895; background: #fffaf0; color: #94691f; font-size: 10px; font-style: normal; white-space: nowrap; }
.demo-user-profile-grid { display: grid; grid-template-columns: 1fr 1fr; }
.demo-user-profile-grid > div { min-height: 55px; padding: 9px 13px; border-right: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; }
.demo-user-profile-grid > div:nth-child(2n) { border-right: 0; }
.demo-user-profile-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.demo-user-profile-grid span, .demo-user-profile-grid strong { display: block; }
.demo-user-profile-grid span { color: #969da6; font-size: 9px; }
.demo-user-profile-grid strong { margin-top: 5px; overflow: hidden; color: #343a41; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.focused-action-card { padding: 14px; }
.focused-action-card header { padding: 0 0 13px; }
.focused-action-card h2 { font-size: 16px; }
.focused-action-card header p { font-size: 11px; }
.case-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.case-action-buttons button, .case-main-action, .case-secondary-action { min-height: 36px; padding: 0 13px; border: 1px solid #d9dee4; border-radius: 2px; background: #fff; color: #555e68; font-size: 12px; cursor: pointer; }
.case-action-buttons button:hover, .case-main-action:hover, .case-secondary-action:hover { border-color: #b98a35; color: #8e631b; background: #fffaf0; }
.case-action-buttons .is-recommended, .case-main-action.is-recommended, .case-secondary-action.is-recommended { border-color: #1677ff; background: #1677ff; color: #fff; }
.case-main-action { width: 100%; margin-top: 3px; }
.case-secondary-action { width: 100%; margin-top: 8px; }
.case-field { display: grid; gap: 6px; margin: 10px 0; color: #707883; font-size: 11px; }
.case-field > div { display: grid; grid-template-columns: minmax(0, 1fr) 46px; }
.case-field input, .case-field select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #d9dee4; border-radius: 2px; background: #fff; color: #343a41; font-size: 13px; }
.case-field > div input { border-radius: 2px 0 0 2px; }
.case-field i { display: grid; place-items: center; border: 1px solid #d9dee4; border-left: 0; background: #f6f7f9; color: #8c939c; font-size: 11px; font-style: normal; }
.case-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.case-form-note { margin: 10px 0 0; color: #9299a2; font-size: 10px; line-height: 1.55; }
.coupon-rule-preview { margin: 8px 0 12px; padding: 12px; border: 1px dashed #d8b875; background: #fffaf0; }
.coupon-rule-preview span, .coupon-rule-preview strong, .coupon-rule-preview small { display: block; }
.coupon-rule-preview span { color: #a6792c; font-size: 10px; }
.coupon-rule-preview strong { margin-top: 6px; color: #5d4927; font-size: 15px; }
.coupon-rule-preview small { margin-top: 5px; color: #9b855f; font-size: 11px; }
.coupon-flow-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.coupon-flow-actions button { min-height: 34px; padding: 0 8px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 6px; border: 1px solid #dfe3e8; border-radius: 2px; background: #fff; color: #59616b; font-size: 10px; text-align: left; cursor: pointer; }
.coupon-flow-actions button b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #956820; background: #f8ecd8; font-size: 9px; }
.coupon-flow-actions button.is-recommended { border-color: #1677ff; background: #f3f8ff; color: #1266d6; }
.coupon-flow-actions button.is-recommended b { color: #fff; background: #1677ff; }
.coupon-verification-box { margin-top: 10px; padding: 10px; display: grid; grid-template-columns: 1fr 88px; gap: 7px; border: 1px solid #e2e6ea; background: #f8f9fb; }
.coupon-verification-box > span { grid-column: 1 / -1; color: #8e641f; font-size: 10px; font-weight: 700; }
.coupon-verification-box label { display: grid; gap: 4px; }
.coupon-verification-box label small { color: #8b929b; font-size: 9px; }
.coupon-verification-box input { width: 100%; height: 31px; padding: 0 8px; border: 1px solid #d9dee4; background: #fff; color: #3f464e; font-size: 11px; }
.coupon-verification-box label > div { display: grid; grid-template-columns: 1fr 24px; }
.coupon-verification-box label > div i { display: grid; place-items: center; border: 1px solid #d9dee4; border-left: 0; background: #f1f3f5; color: #888f98; font-size: 9px; font-style: normal; }
.coupon-verification-box > button { grid-column: 1 / -1; min-height: 32px; border: 1px solid #d0b06f; background: #fffaf0; color: #8f641c; font-size: 11px; cursor: pointer; }
.coupon-verification-box > button.is-recommended { border-color: #1677ff; background: #1677ff; color: #fff; }
.coupon-payment-preview { margin-top: 8px; padding: 8px 10px; border-left: 2px solid #2d8067; background: #f2f9f6; }
.coupon-payment-preview span, .coupon-payment-preview strong { display: block; }
.coupon-payment-preview span { color: #789287; font-size: 9px; }
.coupon-payment-preview strong { margin-top: 4px; color: #36584d; font-size: 10px; line-height: 1.45; }
.coupon-final-actions { margin-top: 8px; }
.focused-log-card { overflow: hidden; }
.focused-log-card header { padding: 0 14px; }
.focused-log-card .process-log-list { min-height: 180px; max-height: 315px; padding: 0 14px; }
.focused-log-card .empty-log { min-height: 180px; }
.parking-side-result { margin: 10px 14px 0; padding: 10px 12px; border: 1px solid #b9dfce; background: #f3fbf7; }
.parking-side-result span, .parking-side-result strong, .parking-side-result small { display: block; }
.parking-side-result span { color: #2f8d69; font-size: 9px; font-weight: 700; }
.parking-side-result strong { margin-top: 3px; color: #26342e; font-size: 12px; }
.parking-side-result small { margin-top: 4px; color: #66736d; font-size: 10px; line-height: 1.45; }
.parking-side-result.is-warning { border-color: #ecd7a8; background: #fff9ec; }
.parking-side-result.is-warning span { color: #9d6b13; }
.parking-side-result.is-error { border-color: #edc5c0; background: #fff5f3; }
.parking-side-result.is-error span { color: #a63f35; }
.latest-ledger { padding: 10px 14px 12px; display: grid; gap: 5px; border-top: 1px solid #edf0f3; background: #fafbfc; }
.latest-ledger > strong { color: #5d646d; font-size: 11px; }
.latest-ledger span { color: #858d97; font-size: 10px; }
.latest-ledger b { color: #27775f; }

@media (max-width: 1320px) {
  .five-case-grid { grid-template-columns: 230px minmax(440px, 1fr) 340px; }
  .case-progress-step { min-width: 66px; }
  .case-progress-step span { font-size: 10px; }
}
@media (max-width: 1060px) {
  .five-case-grid { grid-template-columns: 230px minmax(0, 1fr); }
  .five-case-right { grid-column: 2; position: static; max-height: none; grid-template-columns: 1fr 1fr; }
  .demo-persona-panel { grid-column: 1 / -1; }
  .demo-user-profile { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .event-console { padding: 10px; }
  .five-case-head { align-items: flex-start; flex-direction: column; }
  .five-case-grid { grid-template-columns: 1fr; }
  .five-case-left, .five-case-right { position: static; max-height: none; }
  .five-case-cases { height: 420px; }
  .five-case-left .case-list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
  .five-case-right { grid-column: auto; grid-template-columns: 1fr; }
  .demo-persona-panel { grid-column: auto; }
  .demo-user-profile { grid-column: auto; }
  .demo-phone-shell { min-height: 500px; }
  .case-progress-panel { padding: 14px 12px 16px; }
  .sim-event-flyout { right: 10px; bottom: 10px; left: 10px; width: auto; max-height: calc(100vh - 20px); }
}
@media (max-width: 480px) {
  .five-case-left .case-list { grid-template-columns: 1fr; }
  .case-field-row { grid-template-columns: 1fr; }
  .phone-stage-card > header { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; flex-direction: column; }
}

/* 业务闭环演示：控制动作与实时日志并排，沿用后台白底扁平信息层级。 */
.header-demo-links { margin-left: auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.header-demo-links .header-preview-button { margin-left: 0; }
.header-event-button { border-color: #7a6339; color: #f0d49a; }
.event-console { min-height: calc(100vh - 56px); padding: 18px; color: #303133; background: #f5f7fa; }
.event-console[hidden] { display: none; }
.event-console-head { min-height: 88px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border: 1px solid #ebeef5; }
.event-console-head span { color: #a8751b; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.event-console-head h1 { margin: 5px 0 4px; font-size: 22px; font-weight: 600; }
.event-console-head p { margin: 0; color: #909399; font-size: 13px; }
.event-console-actions, .event-button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.event-console-actions button, .event-button-row button, .event-state-card header button, .event-log-card header button { min-height: 34px; padding: 0 14px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #606266; font-size: 13px; cursor: pointer; }
.event-console-actions button:first-child, .event-button-row .event-primary-button { border-color: #1677ff; background: #1677ff; color: #fff; }
.event-console-grid { margin-top: 12px; display: grid; grid-template-columns: minmax(620px, 1.45fr) minmax(430px, 1fr); gap: 12px; align-items: start; }
.event-control-column, .event-result-column { display: grid; gap: 12px; min-width: 0; }
.event-result-column { position: sticky; top: 12px; }
.event-card { overflow: hidden; border: 1px solid #ebeef5; background: #fff; }
.event-card > header { min-height: 58px; padding: 0 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #ebeef5; }
.event-card > header > span { min-width: 27px; color: #a8751b; font-size: 12px; font-weight: 700; }
.event-card > header > div { min-width: 0; flex: 1; }
.event-card > header strong, .event-card > header small { display: block; }
.event-card > header strong { font-size: 15px; font-weight: 600; }
.event-card > header small { margin-top: 3px; overflow: hidden; color: #909399; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.event-user-summary { padding: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #ebeef5; }
.event-user-summary > div { min-height: 67px; padding: 11px 12px; background: #fff; }
.event-user-summary span, .event-user-summary strong, .event-user-summary small { display: block; }
.event-user-summary span { color: #909399; font-size: 12px; }
.event-user-summary strong { margin-top: 6px; overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.event-user-summary small { margin-top: 5px; color: #a8751b; font-size: 11px; }
.event-user-card > .event-button-row, .event-card > .event-button-row { padding: 0 16px 16px; }
.event-form-grid { padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.event-form-grid label { min-width: 0; display: grid; gap: 7px; color: #606266; font-size: 13px; }
.event-form-grid input, .event-form-grid select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #303133; font-size: 14px; }
.event-form-grid label small { color: #a1a7ad; font-size: 11px; white-space: nowrap; }
.event-form-grid .event-checkbox { min-height: 36px; display: flex; align-items: center; gap: 8px; }
.event-form-grid .event-checkbox input { width: 16px; height: 16px; padding: 0; accent-color: #1677ff; }
.event-parking-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.event-rule-preview { margin: 0 16px 16px; padding: 12px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-left: 3px solid #1677ff; background: #f5f7fa; }
.event-rule-preview span, .event-rule-preview strong { display: block; }
.event-rule-preview span { color: #909399; font-size: 11px; }
.event-rule-preview strong { margin-top: 4px; overflow: hidden; color: #303133; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.event-state-card #eventResultSummary { padding: 16px; }
.event-empty-state { min-height: 120px; display: grid; place-items: center; color: #909399; font-size: 13px; text-align: center; }
.event-result-status { padding: 14px; border-left: 3px solid #c0c4cc; background: #f7f8fa; }
.event-result-status.is-success { border-left-color: #36a37b; background: #f1faf6; }
.event-result-status.is-warning { border-left-color: #e6a23c; background: #fdf8ef; }
.event-result-status.is-error { border-left-color: #f56c6c; background: #fef3f2; }
.event-result-status span, .event-result-status strong, .event-result-status small { display: block; }
.event-result-status span { color: #909399; font-size: 12px; }
.event-result-status strong { margin: 7px 0 5px; font-size: 17px; }
.event-result-status small { color: #606266; font-size: 12px; line-height: 1.6; }
.event-result-kv { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ebeef5; }
.event-result-kv div { min-height: 62px; padding: 10px; border-right: 1px solid #ebeef5; }
.event-result-kv div:last-child { border-right: 0; }
.event-result-kv span, .event-result-kv strong { display: block; }
.event-result-kv span { color: #909399; font-size: 11px; }
.event-result-kv strong { margin-top: 7px; font-size: 14px; font-weight: 500; }
.event-log-card { min-height: 470px; }
.event-log-list { max-height: calc(100vh - 372px); min-height: 390px; padding: 8px 16px 16px; overflow-y: auto; }
.event-log-empty { min-height: 350px; display: grid; place-items: center; color: #909399; font-size: 13px; text-align: center; }
.event-log-item { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid #ebeef5; }
.event-log-item::before { content: ""; position: absolute; top: 17px; left: 6px; width: 9px; height: 9px; border: 2px solid #67c23a; border-radius: 50%; background: #fff; }
.event-log-item.is-warning::before { border-color: #e6a23c; }
.event-log-item.is-error::before { border-color: #f56c6c; }
.event-log-item::after { content: ""; position: absolute; top: 28px; bottom: -13px; left: 10px; width: 1px; background: #dcdfe6; }
.event-log-item:last-child::after { display: none; }
.event-log-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.event-log-meta span { min-width: 54px; color: #1677ff; font-size: 12px; font-weight: 600; }
.event-log-meta time { color: #a5abb1; font-size: 11px; }
.event-log-item strong { display: block; margin-top: 5px; color: #303133; font-size: 13px; font-weight: 600; }
.event-log-item p { margin: 4px 0 0; color: #606266; font-size: 12px; line-height: 1.55; }

@media (max-width: 1320px) {
  .demo-header { gap: 14px; }
  .global-module-nav { gap: 16px; }
  .header-account-switcher > span { display: none; }
  .header-account-switcher select { width: 150px; }
  .event-console-grid { grid-template-columns: minmax(560px, 1.25fr) minmax(390px, 1fr); }
}
@media (max-width: 1100px) {
  .global-module-nav button:nth-last-child(-n+2) { display: none; }
  .event-console-grid { grid-template-columns: 1fr; }
  .event-result-column { position: static; }
  .event-log-list { max-height: 520px; }
}
@media (max-width: 760px) {
  .event-console { padding: 10px; }
  .event-console-head { align-items: flex-start; flex-direction: column; }
  .event-user-summary, .event-form-grid, .event-parking-fields, .event-rule-preview { grid-template-columns: 1fr 1fr; }
  .header-demo-links .header-preview-button:first-child { display: none; }
}
@media (max-width: 520px) {
  .event-user-summary, .event-form-grid, .event-parking-fields, .event-rule-preview, .event-result-kv { grid-template-columns: 1fr; }
  .event-result-kv div { border-right: 0; border-bottom: 1px solid #ebeef5; }
  .event-result-kv div:last-child { border-bottom: 0; }
}

/* 对客演示默认直接在用户端完成：手机画面与精简操作助手并排。 */
.demo-workspace { grid-template-columns: minmax(520px, 1fr) 420px; background: #f5f7fa; }
.demo-workspace > .control-panel { display: none; }
.prototype-stage { min-height: calc(100vh - 56px); background: #fff; }
.quick-demo-assistant { height: calc(100vh - 56px); position: sticky; top: 0; overflow-y: auto; padding: 16px; background: #f5f7fa; border-left: 1px solid #ebeef5; }
.quick-demo-assistant > header { padding: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid #ebeef5; }
.quick-demo-assistant > header span { color: #a8751b; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.quick-demo-assistant > header h1 { margin: 4px 0; color: #303133; font-size: 20px; font-weight: 600; }
.quick-demo-assistant > header p { margin: 0; color: #909399; font-size: 12px; line-height: 1.5; }
.quick-demo-assistant > header button { flex: 0 0 auto; min-height: 34px; padding: 0 13px; border: 1px solid #1677ff; border-radius: 2px; background: #1677ff; color: #fff; font-size: 13px; cursor: pointer; }
.quick-demo-user { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ebeef5; background: #fff; }
.quick-demo-user > div { min-width: 0; min-height: 62px; padding: 10px; border-right: 1px solid #ebeef5; }
.quick-demo-user > div:last-child { border-right: 0; }
.quick-demo-user span, .quick-demo-user strong { display: block; }
.quick-demo-user span { color: #909399; font-size: 11px; }
.quick-demo-user strong { margin-top: 7px; overflow: hidden; color: #303133; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.quick-demo-step { margin-top: 10px; padding: 14px; background: #fff; border: 1px solid #ebeef5; }
.quick-step-head { display: flex; align-items: center; gap: 10px; }
.quick-step-head > b { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #dcdfe6; border-radius: 50%; color: #a8751b; font-size: 12px; }
.quick-step-head span, .quick-step-head strong, .quick-step-head small { display: block; }
.quick-step-head strong { color: #303133; font-size: 14px; font-weight: 600; }
.quick-step-head small { margin-top: 3px; color: #909399; font-size: 11px; }
.quick-demo-step > button { width: 100%; min-height: 36px; margin-top: 12px; border: 1px solid #d3b477; border-radius: 2px; background: #fffaf0; color: #8a642c; font-size: 13px; cursor: pointer; }
.quick-demo-step > button:hover { border-color: #1677ff; color: #1677ff; background: #fff; }
.quick-inline-field, .quick-select-field { min-height: 36px; margin-top: 12px; display: grid; grid-template-columns: 88px minmax(0, 1fr) 44px; align-items: center; color: #606266; font-size: 12px; }
.quick-select-field { grid-template-columns: 88px minmax(0, 1fr); }
.quick-inline-field input, .quick-select-field select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #dcdfe6; border-radius: 2px 0 0 2px; color: #303133; font-size: 13px; }
.quick-select-field select { border-radius: 2px; background: #fff; }
.quick-inline-field i { height: 34px; display: grid; place-items: center; border: 1px solid #dcdfe6; border-left: 0; background: #f5f7fa; color: #909399; font-size: 12px; font-style: normal; }
.quick-advanced-settings { margin-top: 10px; padding: 9px 10px; background: #f7f8fa; color: #606266; font-size: 12px; }
.quick-advanced-settings summary { cursor: pointer; color: #8a642c; }
.quick-advanced-settings > label:last-child { min-height: 30px; margin-top: 7px; display: flex; align-items: center; gap: 6px; }
.quick-demo-log { margin-top: 10px; padding: 14px; background: #fff; border: 1px solid #ebeef5; }
.quick-demo-log > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quick-demo-log > div:first-child strong { font-size: 14px; }
.quick-demo-log > div:first-child button { padding: 0; border: 0; background: transparent; color: #a8751b; font-size: 11px; cursor: pointer; }
.quick-demo-log-list { margin-top: 9px; }
.quick-log-empty { min-height: 54px; display: grid; place-items: center; color: #909399; font-size: 12px; }
.quick-log-item { min-height: 42px; padding: 8px 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; border-top: 1px solid #ebeef5; }
.quick-log-item span { color: #1677ff; font-size: 11px; font-weight: 600; }
.quick-log-item strong { overflow: hidden; color: #303133; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.quick-log-item small { grid-column: 2; margin-top: -5px; overflow: hidden; color: #909399; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1020px) {
  .demo-workspace { grid-template-columns: minmax(430px, 1fr) 360px; }
  .quick-demo-assistant { padding: 10px; }
  .prototype-stage { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 820px) {
  .demo-workspace { grid-template-columns: 1fr; }
  .quick-demo-assistant { height: auto; position: static; border-top: 1px solid #ebeef5; border-left: 0; }
  .prototype-stage { min-height: auto; }
}

/* 业务闭环测试台：以测试用例为入口，左侧筛选、中间看同一用户状态、右侧模拟外部事件。 */
.event-console { padding: 22px 24px 28px; background: #f4f6f9; }
.workbench-head { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 2px 16px; }
.workbench-head span, .side-panel-title span, .flow-card header span, .user-end-card header span, .data-change-card header span, .event-actions-card header > span, .process-log-card header span { display: block; color: #a8751b; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.workbench-head h1 { margin: 5px 0; color: #24272c; font-size: 25px; font-weight: 650; letter-spacing: -.02em; }
.workbench-head p { margin: 0; color: #7c838e; font-size: 14px; }
.workbench-head-actions { display: flex; gap: 10px; }
.workbench-head-actions button, .current-case-card button { height: 36px; padding: 0 15px; border: 1px solid #d8c49d; border-radius: 2px; background: #fffaf1; color: #8c651d; font-size: 14px; cursor: pointer; }
.workbench-head-actions button:first-child, .current-case-card button { border-color: #1f6f5b; background: #1f6f5b; color: #fff; }
.workbench-grid { display: grid; grid-template-columns: 278px minmax(600px, 1fr) 368px; gap: 16px; align-items: start; max-width: 1640px; margin: 0 auto; }
.workbench-left, .workbench-right { min-width: 0; border: 1px solid #e5e8ed; background: #fff; }
.workbench-left { position: sticky; top: 12px; max-height: calc(100vh - 90px); overflow: hidden auto; }
.side-panel-title { min-height: 69px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eef0f3; }
.side-panel-title strong { display: block; margin-top: 4px; color: #30343a; font-size: 16px; }
.side-panel-title > small { color: #9a7650; font-size: 12px; }
.side-panel-title.compact { min-height: 55px; margin-top: 5px; background: #fbfcfd; }
.case-group { padding: 11px 9px 2px; }
.case-group h2 { margin: 0 6px 7px; color: #8c939f; font-size: 12px; font-weight: 600; }
.case-item { width: 100%; min-height: 51px; margin-bottom: 3px; padding: 8px 7px; display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 8px; border: 0; border-left: 3px solid transparent; background: transparent; color: #454a52; text-align: left; cursor: pointer; }
.case-item:hover { background: #faf7f1; }
.case-item.is-active { border-left-color: #b7862e; background: #fbf6ed; }
.case-item b { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: #f0f2f5; color: #737b87; font-size: 11px; font-weight: 600; }
.case-item.is-active b { background: #b7862e; color: #fff; }
.case-item strong, .case-item small, .persona-item strong, .persona-item small { display: block; }
.case-item strong { overflow: hidden; color: #3b4047; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.case-item small { margin-top: 3px; overflow: hidden; color: #9097a1; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.persona-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px 15px 15px; }
.persona-item { min-height: 54px; padding: 8px; border: 1px solid #e6e9ed; background: #fff; text-align: left; cursor: pointer; }
.persona-item:hover { border-color: #b7862e; background: #fffaf1; }
.persona-item strong { color: #4b5058; font-size: 12px; font-weight: 600; }
.persona-item small { margin-top: 4px; color: #969da7; font-size: 10px; }
.workbench-center { min-width: 0; display: grid; gap: 12px; }
.current-case-card, .user-snapshot, .flow-card, .user-end-card, .data-change-card, .event-actions-card, .process-log-card { border: 1px solid #e5e8ed; background: #fff; }
.current-case-card { min-height: 108px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-top: 3px solid #b7862e; }
.current-case-card span { color: #9a7650; font-size: 12px; }
.current-case-card h2 { margin: 6px 0 5px; color: #272b31; font-size: 20px; font-weight: 650; }
.current-case-card p { margin: 0; color: #727a85; font-size: 13px; line-height: 1.5; }
.current-case-card button { flex: 0 0 auto; }
.user-snapshot { display: grid; grid-template-columns: 44px minmax(170px, 1.4fr) minmax(140px, 1fr) minmax(100px, .7fr); align-items: center; gap: 16px; padding: 14px 18px; }
.snapshot-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #f2f4f7; }
.user-snapshot span, .user-snapshot strong, .user-snapshot small { display: block; }
.user-snapshot span { color: #959da7; font-size: 11px; }
.user-snapshot strong { margin-top: 5px; color: #343940; font-size: 14px; font-weight: 600; }
.user-snapshot small { margin-top: 4px; color: #949aa4; font-size: 11px; }
.flow-card header, .user-end-card header, .data-change-card header, .process-log-card header { min-height: 59px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eef0f3; }
.flow-card h2, .user-end-card h2, .data-change-card h2, .event-actions-card h2, .process-log-card h2 { margin: 4px 0 0; color: #333840; font-size: 16px; font-weight: 650; }
.flow-card header > small, .data-change-card header > small { color: #9299a3; font-size: 11px; }
.flow-rail { min-height: 113px; padding: 17px 18px; display: flex; align-items: stretch; gap: 5px; overflow-x: auto; }
.flow-node { width: 126px; min-width: 126px; position: relative; padding: 10px 11px 9px 17px; border: 1px solid #e5e8ed; border-radius: 2px; background: #fafbfc; }
.flow-node > span { position: absolute; top: 14px; left: 7px; width: 5px; height: 5px; border-radius: 50%; background: #b7bdc6; }
.flow-node.is-done { border-color: #bfddcf; background: #f2faf5; }.flow-node.is-done > span { background: #258467; }
.flow-node.is-error { border-color: #ecc8c4; background: #fff6f4; }.flow-node.is-error > span { background: #d66b5f; }
.flow-node strong, .flow-node small { display: block; }.flow-node strong { color: #48505a; font-size: 12px; font-weight: 650; }.flow-node small { margin-top: 5px; color: #8d959f; font-size: 10px; line-height: 1.35; }
.flow-link { align-self: center; flex: 0 0 auto; color: #c6a96e; font-size: 22px; font-style: normal; }
.user-end-card header button, .process-log-card header button { padding: 0; border: 0; background: transparent; color: #926a25; font-size: 12px; cursor: pointer; }
.user-end-grid { display: grid; grid-template-columns: repeat(3, 1fr); }.user-end-grid article { min-height: 91px; padding: 14px 17px; border-right: 1px solid #eef0f3; }.user-end-grid article:last-child { border-right: 0; }
.user-end-grid span, .user-end-grid strong, .user-end-grid small { display: block; }.user-end-grid span { color: #969da7; font-size: 11px; }.user-end-grid strong { margin: 7px 0 5px; color: #3c424a; font-size: 13px; font-weight: 600; }.user-end-grid small { color: #8c949e; font-size: 11px; line-height: 1.45; }
.interactive-mini-program { padding-bottom: 16px; }.interactive-mini-program > header { margin-bottom: 14px; }.mini-program-card { width: min(100%, 430px); margin: 0 auto; overflow: hidden; border: 1px solid #dfe4e8; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(33, 45, 55, .08); }.mini-program-card > header { min-height: 48px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eef0f3; }.mini-program-card > header > div { display: grid; grid-template-columns: 22px auto; column-gap: 7px; align-items: center; }.mini-brand-dot { width: 22px; height: 22px; display: grid; place-items: center; grid-row: span 2; border-radius: 6px; background: linear-gradient(135deg, #d70959, #8e1a78); color: #fff; font-size: 12px; font-weight: 700; }.mini-program-card header strong { color: #30343a; font-size: 12px; }.mini-program-card header small { color: #9ca3ad; font-size: 9px; }.mini-program-card header > button { padding: 0; border: 0; background: transparent; color: #946b27; font-size: 11px; cursor: pointer; }.mini-program-card > nav { min-height: 39px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #eef0f3; }.mini-program-card > nav button { position: relative; border: 0; background: #fff; color: #7f8791; font-size: 12px; cursor: pointer; }.mini-program-card > nav button.is-active { color: #b17415; font-weight: 600; }.mini-program-card > nav button.is-active::after { content: ""; position: absolute; right: 28%; bottom: 0; left: 28%; height: 2px; background: #c18a26; }.mini-program-content { min-height: 160px; padding: 14px; background: #fafbfc; }.mini-empty { min-height: 132px; display: grid; align-content: center; justify-items: center; text-align: center; }.mini-empty b { color: #4a5059; font-size: 14px; }.mini-empty p { max-width: 286px; margin: 8px auto 12px; color: #8d949d; font-size: 11px; line-height: 1.55; }.mini-empty button, .mini-actions button { min-height: 31px; padding: 0 12px; border: 1px solid #1f6f5b; border-radius: 3px; background: #1f6f5b; color: #fff; font-size: 12px; cursor: pointer; }.mini-empty .mini-secondary, .mini-actions .mini-secondary { border-color: #d4b779; background: #fffaf1; color: #91681f; }.mini-user-profile { min-height: 50px; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #eee5d5; background: #fffaf1; }.mini-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #efdcb8; color: #90631b; font-size: 11px; font-weight: 700; }.mini-user-profile > div:nth-child(2) { min-width: 0; flex: 1; }.mini-user-profile strong, .mini-user-profile small { display: block; }.mini-user-profile strong { color: #40464e; font-size: 12px; }.mini-user-profile small { margin-top: 3px; overflow: hidden; color: #9299a1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.mini-user-profile em { color: #267b61; font-size: 10px; font-style: normal; }.mini-points { margin-top: 9px; padding: 12px 13px; border-radius: 8px; background: linear-gradient(130deg, #3d3022, #706047); color: #fff; }.mini-points span, .mini-points strong, .mini-points p { display: block; }.mini-points span { color: #ead8bb; font-size: 10px; }.mini-points strong { margin-top: 3px; font-size: 23px; line-height: 1; }.mini-points strong small { font-size: 11px; }.mini-points p { margin: 7px 0 0; color: #eadfcf; font-size: 10px; line-height: 1.45; }.mini-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }.mini-coupon { min-height: 116px; padding: 15px; border: 1px dashed #dcb15e; border-radius: 8px; background: linear-gradient(135deg, #fff8e9, #fffdf8); }.mini-coupon span, .mini-coupon strong, .mini-coupon p, .mini-coupon small { display: block; }.mini-coupon span { color: #bd8220; font-size: 10px; }.mini-coupon strong { margin-top: 7px; color: #694a17; font-size: 16px; }.mini-coupon p { margin: 6px 0; color: #987849; font-size: 11px; }.mini-coupon small { color: #b09b74; font-size: 10px; }.mini-parking { min-height: 94px; padding: 12px; display: flex; align-items: center; gap: 11px; border: 1px solid #dce8e3; border-radius: 8px; background: #f4faf7; }.mini-parking-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: #1f765f; color: #fff; font-size: 20px; font-weight: 700; }.mini-parking > div:last-child { min-width: 0; flex: 1; }.mini-parking span, .mini-parking strong, .mini-parking small { display: block; }.mini-parking span { color: #568371; font-size: 10px; }.mini-parking strong { margin: 5px 0; color: #3e554b; font-size: 12px; line-height: 1.35; }.mini-parking small { color: #799187; font-size: 10px; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; }.data-grid > div { min-height: 130px; padding: 13px 17px; border-right: 1px solid #eef0f3; }.data-grid > div:last-child { border-right: 0; }.data-grid h3 { margin: 0 0 8px; color: #666e78; font-size: 12px; font-weight: 600; }.ledger-row { min-height: 25px; display: grid; grid-template-columns: minmax(70px, 1fr) auto auto; align-items: center; gap: 8px; border-top: 1px dashed #eef0f3; color: #808892; font-size: 11px; }.ledger-row strong { font-size: 12px; }.ledger-row .plus { color: #218363; }.ledger-row .minus { color: #cf6457; }.ledger-row small { color: #a1a7b0; }.empty-data { margin: 20px 0; color: #a0a7b0; font-size: 12px; }
.workbench-right { position: sticky; top: 12px; display: grid; gap: 12px; padding: 12px; background: #f8fafb; }
.event-actions-card header { padding: 5px 4px 11px; }.event-actions-card header p { margin: 7px 0 0; color: #8c949e; font-size: 11px; line-height: 1.55; }
.event-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.event-action-grid button { min-height: 34px; border: 1px solid #dfe4e8; border-radius: 2px; background: #fff; color: #4f5861; font-size: 12px; cursor: pointer; }.event-action-grid button:hover { border-color: #a9823d; color: #8c651d; background: #fffaf2; }
.event-parameters { margin-top: 12px; border-top: 1px solid #e7ebee; }.event-parameters summary { padding: 10px 3px; color: #7d858f; font-size: 12px; cursor: pointer; }.event-parameters > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.event-parameters label { display: grid; gap: 4px; color: #818994; font-size: 10px; }.event-parameters input:not([type="checkbox"]), .event-parameters select { width: 100%; height: 30px; padding: 0 7px; border: 1px solid #dfe4e8; border-radius: 2px; background: #fff; color: #424a53; font-size: 12px; }.event-parameters label.event-check { min-height: 30px; display: flex; align-items: center; gap: 6px; }.event-parameters label.event-check span { font-size: 11px; white-space: nowrap; }.event-parameters input[type="checkbox"] { accent-color: #1f6f5b; }.event-parameters p { margin: 10px 0 0; padding: 8px; border-left: 2px solid #c29b56; background: #fffaf1; color: #846c45; font-size: 10px; line-height: 1.45; }
.process-log-card { overflow: hidden; }.process-log-card header { padding: 0 4px; }.process-log-list { max-height: calc(100vh - 461px); min-height: 260px; overflow-y: auto; padding: 0 4px; }.process-log { position: relative; padding: 10px 0 10px 19px; border-bottom: 1px solid #eef0f3; }.process-log::before { content: ""; position: absolute; top: 16px; left: 3px; width: 7px; height: 7px; border: 2px solid #5ba98c; border-radius: 50%; background: #fff; }.process-log.is-warning::before { border-color: #d69f36; }.process-log.is-error::before { border-color: #d86b5f; }.process-log > div { display: flex; justify-content: space-between; gap: 10px; }.process-log span { color: #4e7c9a; font-size: 10px; font-weight: 600; }.process-log time { color: #a2a9b1; font-size: 10px; }.process-log strong { display: block; margin-top: 4px; color: #454c55; font-size: 12px; font-weight: 600; }.process-log p { margin: 3px 0 0; color: #89919b; font-size: 10px; line-height: 1.45; }.empty-log { min-height: 220px; display: grid; place-items: center; padding: 0 20px; color: #a0a7b0; font-size: 12px; line-height: 1.6; text-align: center; }
@media (max-width: 1280px) { .workbench-grid { grid-template-columns: 250px minmax(520px, 1fr) 330px; }.flow-node { min-width: 115px; width: 115px; }.user-snapshot { gap: 10px; padding: 13px; } }
@media (max-width: 1080px) { .workbench-grid { grid-template-columns: 250px minmax(0, 1fr); }.workbench-right { grid-column: 2; position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.process-log-list { max-height: 370px; }.event-actions-card, .process-log-card { min-width: 0; } }
@media (max-width: 760px) { .event-console { padding: 12px; }.workbench-head { align-items: flex-start; flex-direction: column; }.workbench-grid { grid-template-columns: 1fr; }.workbench-left, .workbench-right { position: static; max-height: none; }.workbench-right { grid-column: auto; grid-template-columns: 1fr; }.case-list { max-height: 360px; overflow-y: auto; }.user-snapshot { grid-template-columns: 42px 1fr; }.user-snapshot > div:nth-last-child(-n+2) { grid-column: span 1; }.user-end-grid, .data-grid { grid-template-columns: 1fr; }.user-end-grid article, .data-grid > div { border-right: 0; border-bottom: 1px solid #eef0f3; }.user-end-grid article:last-child, .data-grid > div:last-child { border-bottom: 0; } }

/* 核心演示页只保留紧凑的辅助标题，主视觉始终让给既有小程序页面。 */
.five-case-head.workbench-head { min-height: 48px; padding: 0 0 8px; align-items: center; }
.five-case-head.workbench-head > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.five-case-head.workbench-head > div:first-child > span { font-size: 8px; }
.five-case-head.workbench-head h1 { margin: 0; font-size: 16px; line-height: 1.2; letter-spacing: 0; }
.five-case-head.workbench-head p { margin: 0; color: #8b929b; font-size: 11px; }
.five-case-head.workbench-head .workbench-head-actions button { height: 32px; min-height: 32px; padding: 0 13px; font-size: 11px; }

@media (max-width: 760px) {
  .five-case-head.workbench-head { align-items: stretch; gap: 8px; }
  .five-case-head.workbench-head > div:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
  .case-phone-shell { width: auto; max-width: 100%; height: min(844px, calc(100vh - 210px)); min-height: 0; aspect-ratio: 390 / 844; border-width: 7px; border-radius: 34px; box-shadow: 0 12px 28px rgba(34, 35, 38, .12); }
}

/* 测试步骤并入小程序顶部工具栏，避免单独卡片挤占手机演示空间。 */
.phone-stage-card > .phone-stage-progress { min-height: 58px; padding: 7px 14px; display: grid; grid-template-columns: 122px minmax(0, 1fr); align-items: center; gap: 12px; }
.phone-stage-case { min-width: 0; padding-right: 12px; border-right: 1px solid #edf0f3; }
.phone-stage-card > .phone-stage-progress .phone-stage-case span { overflow: hidden; color: #3c4249; font-size: 12px; font-weight: 650; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.phone-stage-card > .phone-stage-progress .phone-stage-case small { display: block; margin-top: 4px; color: #9a6c20; font-size: 10px; }
.phone-stage-progress .case-progress-rail { min-width: 0; padding: 0; }
.phone-stage-progress .case-progress-rail > i { flex-basis: 12px; margin-top: 9px; }
.phone-stage-progress .case-progress-step { min-width: 54px; gap: 3px; }
.phone-stage-progress .case-progress-step b { width: 19px; height: 19px; font-size: 9px; }
.phone-stage-progress .case-progress-step span { max-width: 82px; font-size: 9px; }
.phone-stage-progress + .case-phone-shell { margin-top: 12px; }

@media (max-width: 760px) {
  .phone-stage-card > .phone-stage-progress { grid-template-columns: 1fr; gap: 7px; }
  .phone-stage-case { padding: 0 0 6px; border-right: 0; border-bottom: 1px solid #edf0f3; }
  .phone-stage-progress .case-progress-rail { overflow-x: auto; }
}

@media (min-width: 1061px) {
  .event-console { box-sizing: border-box; height: calc(100vh - 56px); min-height: 0; overflow: hidden; }
  .five-case-grid { height: calc(100% - 48px); }
  .five-case-center { height: 100%; overflow: hidden; }
  .phone-stage-card { height: 100%; min-height: 0; overflow: hidden; }
}

/* 用户端按照金铂现有小程序的信息架构：首页 / 停车缴费 / 我的。 */
.case-phone-shell.is-portal-page { grid-template-rows: 25px 43px minmax(0, 1fr) 59px; background: #fff; }
.case-phone-shell.is-parking-page { grid-template-rows: 25px 55px 50px minmax(0, 1fr) 59px; }
.case-phone-shell.is-portal-page .phone-status { background: #f8f2fa; }
.case-phone-shell.is-portal-page .case-phone-content { padding: 0; background: #fff; }
.case-phone-shell.is-ref-fill { grid-template-rows: 25px minmax(0, 1fr); }
.case-phone-shell.is-ref-fill .phone-status { background: #fff; }
.case-phone-content.is-ref-content { position: relative; padding: 0; overflow: hidden; }
.weapp-page-tools { padding: 5px 12px 4px; display: flex; justify-content: flex-end; background: linear-gradient(180deg, #f8f2fa 0%, #fff 100%); }
.weapp-page-tools > div { width: 105px; height: 30px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(80, 68, 82, .08); border-radius: 17px; background: rgba(255, 255, 255, .76); color: #202124; box-shadow: 0 1px 3px rgba(42, 32, 47, .04); }
.weapp-page-tools b { font-size: 12px; letter-spacing: .04em; }.weapp-page-tools i { width: 1px; height: 18px; background: #e2dde4; }

.kb-mine-page { min-height: 100%; padding-bottom: 12px; display: flex; flex-direction: column; color: #25272b; background: #fff; }
.case-phone-content:has(.kb-mine-page) { position: relative; }
.kb-member-summary { padding: 10px 14px 0; background: linear-gradient(150deg, #f1ebff 0%, #fff2f7 46%, #fff 78%); }
.kb-member-line { min-height: 67px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 50px; align-items: center; gap: 10px; }
.kb-member-line h2 { margin: 0 0 7px; font-size: 16px; font-weight: 700; }
.kb-member-line p { margin: 0; display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; white-space: nowrap; }
.kb-member-line p b, .kb-member-line p em, .kb-member-line p i { padding: 2px 5px; font-size: 8px; font-style: normal; line-height: 1.2; flex-shrink: 0; white-space: nowrap; }
.kb-member-line p b { color: #fff; background: #3d3241; }.kb-member-line p em { color: #74512a; background: #f5dfbd; }.kb-member-line p i { color: #48494d; background: #ecebea; }
.kb-member-points { text-align: center; }.kb-member-points strong, .kb-member-points span { display: block; }.kb-member-points strong { font-size: 17px; }.kb-member-points span { margin-top: 4px; color: #8d8f94; font-size: 9px; }
.kb-level-card { margin-top: 8px; padding: 10px 12px; border-radius: 5px; background: linear-gradient(110deg, #abd6fb 0%, #a8cdf7 74%, #8ab7ed 100%); color: #2e5278; }
.kb-level-card > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.kb-level-card strong { font-size: 13px; }.kb-level-card span { color: #6889ad; font-size: 9px; }.kb-level-card p { margin: 10px 0 0; color: #6d88a5; font-size: 9px; }
.kb-guest-member-button { width: 100%; min-height: 38px; margin-top: 10px; border: 0; border-radius: 4px; color: #fff; background: #07c160; font-size: 12px; font-weight: 650; cursor: pointer; }
.kb-mine-page.is-guest .kb-member-line p em { color: #666; background: #eceff2; }
.kb-mine-page.is-guest .kb-member-points { color: #a0a4aa; }
.kb-member-login-toast { margin: 10px 14px 0; padding: 9px 10px; border: 1px solid #b7ebc9; color: #277949; background: #f0fff5; font-size: 10px; line-height: 1.5; }
.kb-member-shortcuts { margin: 12px 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kb-member-shortcuts > div { position: relative; min-height: 48px; display: grid; place-items: center; align-content: center; background: #f7ead5; color: #c69552; }
.kb-member-shortcuts > div[role="button"], .kb-mine-menu > div[role="button"] { cursor: pointer; }
.kb-member-shortcuts strong, .kb-member-shortcuts span { display: block; }.kb-member-shortcuts strong { font-size: 13px; font-weight: 500; }.kb-member-shortcuts span { margin-top: 2px; color: #8b8173; font-size: 7px; }.kb-member-shortcuts b { position: absolute; right: 9px; bottom: 8px; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #121212; font-size: 8px; }
.kb-sense-prompt { min-height: 48px; margin-top: 6px; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; color: #c48d40; }
.kb-sense-prompt > span { flex-shrink: 0; font-size: 17px; }.kb-sense-prompt p { margin: 0; flex: 1; min-width: 0; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.kb-sense-prompt b { flex-shrink: 0; padding: 6px 12px; border-radius: 16px; color: #654616; background: #d7ae6c; font-size: 10px; font-weight: 500; white-space: nowrap; }
.kb-mine-menu { padding: 0 14px; }.kb-mine-menu > div { min-height: 48px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; border-bottom: 1px solid #ededed; }.kb-mine-menu > div > span { color: #292b2f; font-size: 17px; }.kb-mine-menu strong { font-size: 12px; font-weight: 500; }.kb-mine-menu b { color: #aeb1b6; font-size: 9px; font-weight: 400; }
.kb-powered { margin-top: auto; padding: 14px 0 8px; color: #d0d1d4; text-align: center; font-size: 8px; letter-spacing: .1em; }

.kb-coupon-wallet-page { min-height: 100%; display: flex; flex-direction: column; color: #2f3338; background: #fff; }
.kb-coupon-wallet-page > header { min-height: 44px; padding: 0 10px; display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; border-bottom: 1px solid #f0f0f0; background: #fff; }
.kb-coupon-wallet-page > header button { width: 28px; height: 28px; border: 0; background: transparent; color: #222; font: 26px/1 Georgia, serif; cursor: pointer; }
.kb-coupon-wallet-page > header strong { text-align: center; font-size: 15px; font-weight: 600; }
.kb-wallet-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #f0f0f0; background: #fff; }
.kb-wallet-tab { position: relative; min-height: 42px; border: 0; background: transparent; color: #9a9da2; font-size: 12px; cursor: pointer; }
.kb-wallet-tab.is-active { color: #222; font-weight: 600; }
.kb-wallet-tab.is-active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 28px; height: 2px; border-radius: 999px; background: #c5a36a; transform: translateX(-50%); }
.kb-wallet-tab-panel { flex: 1; padding: 14px; background: #fff; }
.kb-wallet-empty-state { min-height: 280px; display: grid; place-content: center; justify-items: center; gap: 14px; }
.kb-wallet-empty-icon { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: #f3f3f4; color: #d8d8da; }
.kb-wallet-empty-icon::before { content: ""; position: absolute; width: 54px; height: 38px; border: 2px solid #e2e2e4; border-radius: 4px; transform: translateY(4px); }
.kb-wallet-empty-icon { position: relative; }
.kb-wallet-empty-icon span { position: relative; z-index: 1; font-size: 22px; font-weight: 600; opacity: .45; }
.kb-wallet-empty-state p { margin: 0; color: #b0b3b8; font-size: 12px; }

.kb-member-orders-page { min-height: 100%; display: flex; flex-direction: column; color: #2f3338; background: #fff; }
.kb-member-orders-page > header { min-height: 44px; padding: 0 10px; display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; border-bottom: 1px solid #f0f0f0; background: #fff; }
.kb-member-orders-page > header button { width: 28px; height: 28px; border: 0; background: transparent; color: #222; font: 26px/1 Georgia, serif; cursor: pointer; }
.kb-member-orders-page > header strong { text-align: center; font-size: 15px; font-weight: 600; }
.kb-order-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #f0f0f0; background: #fff; }
.kb-order-tab { position: relative; min-height: 42px; padding: 0 4px; border: 0; background: transparent; color: #9a9da2; font-size: 10px; line-height: 1.2; cursor: pointer; }
.kb-order-tab.is-active { color: #222; font-weight: 600; }
.kb-order-tab.is-active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 28px; height: 2px; border-radius: 999px; background: #c5a36a; transform: translateX(-50%); }
.kb-order-tab-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; background: #f6f6f7; }
.kb-order-card { padding: 12px; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.kb-order-card + .kb-order-card { margin-top: 10px; }
.kb-order-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kb-order-card header span { color: #8d9298; font-size: 10px; }
.kb-order-card header em { color: #c5a36a; font-size: 10px; font-style: normal; font-weight: 600; }
.kb-order-card strong { display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; }
.kb-order-card p { margin: 8px 0 0; color: #9a9da2; font-size: 10px; }
.kb-order-empty-state { min-height: 280px; display: grid; place-content: center; justify-items: center; gap: 14px; }
.kb-order-empty-icon { position: relative; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: #f3f3f4; color: #d8d8da; }
.kb-order-empty-icon span { position: relative; z-index: 1; font-size: 22px; font-weight: 600; opacity: .45; }
.kb-order-empty-state p { margin: 0; color: #b0b3b8; font-size: 12px; }
.kb-order-powered { flex-shrink: 0; padding: 10px 0 14px; color: #d0d1d4; text-align: center; font-size: 8px; letter-spacing: .08em; background: #f6f6f7; }
.kb-wallet-coupon { position: relative; padding: 15px; overflow: hidden; border: 1px solid #ead6ad; border-radius: 6px; background: #fffdf8; box-shadow: 0 5px 14px rgba(80, 62, 31, .05); }
.kb-wallet-coupon > div span, .kb-wallet-coupon > div strong, .kb-wallet-coupon > div small { display: block; }
.kb-wallet-coupon > div span { color: #a87728; font-size: 9px; }.kb-wallet-coupon > div strong { margin-top: 6px; color: #74501d; font-size: 20px; }.kb-wallet-coupon > div small { margin-top: 5px; color: #9e8864; font-size: 9px; }
.kb-wallet-coupon > em { position: absolute; top: 15px; right: 14px; padding: 3px 7px; border: 1px solid #dfc48f; color: #9b6b1f; background: #fff8e8; font-size: 9px; font-style: normal; }
.kb-wallet-coupon > p { margin: 13px 0 0; padding-top: 10px; border-top: 1px dashed #e7d6b6; color: #9b9387; font-size: 8px; }
.kb-wallet-coupon.is-used { filter: grayscale(.75); opacity: .72; }
.kb-wallet-coupon + .kb-wallet-coupon, .kb-claimable-coupon + .kb-claimable-coupon { margin-top: 9px; }
.kb-wallet-section-title { margin: 12px 2px 8px; display: flex; align-items: center; justify-content: space-between; }
.kb-wallet-section-title strong { font-size: 11px; }.kb-wallet-section-title span { color: #96999e; font-size: 8px; }
.kb-claimable-coupon { position: relative; padding: 14px; border: 1px solid #cfe1f7; border-radius: 6px; background: #fff; }
.kb-claimable-coupon div span, .kb-claimable-coupon div strong, .kb-claimable-coupon div small { display: block; }
.kb-claimable-coupon div span { color: #3783d6; font-size: 8px; }.kb-claimable-coupon div strong { max-width: 190px; margin-top: 5px; color: #254f7b; font-size: 14px; }.kb-claimable-coupon div small { max-width: 190px; margin-top: 4px; color: #73869a; font-size: 9px; }
.kb-claimable-coupon button { position: absolute; top: 18px; right: 13px; min-width: 66px; height: 28px; border: 0; border-radius: 3px; color: #fff; background: #1677ff; font-size: 10px; cursor: pointer; }
.kb-claimable-coupon button:disabled { opacity: .62; cursor: wait; }
.kb-claimable-coupon p { margin: 12px 0 0; padding-top: 9px; border-top: 1px dashed #dce7f2; color: #9299a2; font-size: 8px; }
.kb-wallet-toast { margin: 10px 14px 0; padding: 9px 10px; border: 1px solid #b7ebc9; color: #277949; background: #f0fff5; font-size: 9px; line-height: 1.5; }
.kb-coupon-code-card { margin-top: 0; padding: 15px; text-align: center; background: #fff; border: 1px solid #f0f0f0; border-radius: 6px; }
.kb-coupon-code-card span, .kb-coupon-code-card strong, .kb-coupon-code-card small { display: block; }
.kb-coupon-code-card span { color: #96999e; font-size: 9px; }.kb-coupon-code-card strong { margin-top: 8px; color: #2d3035; font-size: 18px; letter-spacing: .12em; }
.kb-coupon-code-card > div { margin: 13px auto 10px; color: #111; font-size: 28px; letter-spacing: .08em; white-space: nowrap; }
.kb-coupon-code-card small { color: #9a9da2; font-size: 9px; }
.kb-wallet-empty { min-height: 180px; display: grid; place-items: center; color: #a0a4aa; font-size: 11px; }

.kb-home-page { min-height: 100%; padding-bottom: 18px; color: #292b2f; background: #f5f5f5; }
.kb-home-banner-wrap { position: relative; overflow: hidden; background: #1f6b45; }
.kb-home-banner-track { display: flex; width: 100%; transition: transform .45s ease; will-change: transform; }
.kb-banner-slide { position: relative; flex: 0 0 100%; min-height: 148px; padding: 18px 16px 28px; color: #fff; }
.kb-banner-slide span { display: inline-block; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 9px; }
.kb-banner-slide strong { display: block; margin-top: 14px; font-size: 22px; line-height: 1.2; letter-spacing: .02em; }
.kb-banner-slide p { margin: 8px 0 0; color: rgba(255,255,255,.82); font-size: 11px; }
.kb-banner-slide > b { position: absolute; right: 16px; bottom: 28px; padding: 5px 10px; border-radius: 3px; color: #fff; background: #111; font-size: 10px; font-weight: 600; }
.kb-banner-slide.is-festival { background: linear-gradient(145deg, #1f6b45 0%, #2f8a5c 48%, #7bb56a 100%); }
.kb-banner-slide.is-parking { background: linear-gradient(145deg, #8a6428 0%, #c29645 55%, #e0be7a 100%); }
.kb-banner-slide.is-member { background: linear-gradient(145deg, #3d2f6d 0%, #6a4db5 52%, #c49a55 100%); }
.kb-home-banner-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; }
.kb-banner-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; }
.kb-banner-dot.is-active { width: 14px; border-radius: 999px; background: #fff; }
.kb-home-toolbar { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 10px 12px; background: #fff; }
.kb-home-location { border: 0; background: transparent; color: #333; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.kb-home-search { min-width: 0; height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 16px; background: #f3f3f3; color: #9a9a9a; }
.kb-home-search span { font-size: 13px; }
.kb-home-search input { width: 100%; border: 0; background: transparent; font-size: 12px; outline: none; }
.kb-home-section { margin-top: 8px; padding: 12px; background: #fff; }
.kb-home-section > header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.kb-home-section > header span { color: #c99548; font-size: 14px; }
.kb-home-section > header strong { color: #5a4330; font-size: 13px; }
.kb-home-section > header small { margin-left: auto; color: #b9a07a; font-size: 9px; letter-spacing: .08em; }
.kb-flash-carousel { overflow: hidden; }
.kb-flash-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kb-flash-track::-webkit-scrollbar { display: none; }
.kb-flash-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}
.kb-flash-thumb { min-height: 54px; overflow: hidden; display: grid; place-items: center; align-content: center; border-radius: 4px; background: #f7f7f7; color: #666; }
.kb-flash-thumb.has-image { padding: 0; background: #f3ece7; }
.kb-flash-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-flash-thumb b { font-size: 16px; }.kb-flash-thumb small { margin-top: 2px; font-size: 8px; }
.kb-flash-card strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.35; }
.kb-flash-card p { margin: 6px 0 0; display: flex; align-items: baseline; gap: 6px; }
.kb-flash-card em { color: #d08a2c; font-size: 15px; font-style: normal; font-weight: 700; }
.kb-flash-card s { color: #aaa; font-size: 10px; }
.kb-flash-card i { display: block; margin-top: 8px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #e2a44a 42%, #eee 42%); }
.kb-home-member-bar { width: calc(100% - 24px); margin: 8px 12px 0; padding: 9px 12px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: #f4e7d2; color: #8a682f; cursor: pointer; text-align: left; }
.kb-home-member-bar span { font-size: 13px; }
.kb-home-member-bar strong { flex: 1; font-size: 12px; font-weight: 650; }
.kb-home-member-bar em { font-size: 10px; font-style: normal; color: #a88448; }

.case-phone-shell.is-subpage { grid-template-rows: 25px 43px minmax(0, 1fr); }
.kb-member-benefits-page { min-height: 100%; display: flex; flex-direction: column; background: #f7f1e6; }
.kb-member-benefits-page > header { min-height: 46px; padding: 0 8px; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 4px; border-bottom: 1px solid #eadfce; background: #fffaf3; }
.kb-member-benefits-page > header button { border: 0; background: transparent; color: #5a4330; font: 28px/1 Georgia, serif; cursor: pointer; }
.kb-member-benefits-page > header strong, .kb-member-benefits-page > header span { display: block; }
.kb-member-benefits-page > header strong { color: #5a4330; font-size: 15px; }
.kb-member-benefits-page > header span { margin-top: 2px; color: #a8906c; font-size: 9px; }
.kb-member-benefits-body { flex: 1; overflow: auto; background: #f7f1e6; }
.kb-member-benefits-body img { width: 100%; display: block; }
.kb-coupon-list { display: grid; gap: 8px; }
.kb-coupon-card { width: 100%; padding: 0; display: grid; grid-template-columns: 68px 1fr; min-height: 78px; overflow: hidden; border: 1px solid #eee; border-radius: 6px; background: #fff; color: inherit; text-align: left; cursor: pointer; }
.kb-coupon-card:hover { border-color: #d5ae65; }
.kb-coupon-value { display: grid; place-items: center; align-content: center; color: #fff; background: linear-gradient(160deg, #3d9a62, #1f6b45); }
.kb-coupon-value b { font-size: 20px; }.kb-coupon-value small { margin-top: 3px; padding: 1px 5px; border-radius: 3px; background: #d0a252; font-size: 8px; }
.kb-coupon-copy { min-width: 0; padding: 10px 10px 8px; display: block; }
.kb-coupon-card strong { display: block; font-size: 12px; line-height: 1.35; }
.kb-coupon-card p { margin: 5px 0 0; color: #999; font-size: 10px; }
.kb-coupon-copy > span { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; }
.kb-coupon-card em { color: #d08a2c; font-size: 14px; font-style: normal; font-weight: 700; }
.kb-coupon-card i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #d0a252; font-size: 14px; font-style: normal; }
.kb-coupon-shop-empty { padding: 22px 14px; display: grid; gap: 6px; border: 1px dashed #ddd3c1; background: #fffcf7; text-align: center; }
.kb-coupon-shop-empty strong { color: #6b5a3c; font-size: 12px; }.kb-coupon-shop-empty span { color: #9b9387; font-size: 9px; line-height: 1.5; }

.case-phone-shell.is-subpage .case-phone-content:has(.kb-coupon-detail-page) { display: flex; flex-direction: column; overflow: hidden; padding: 0; }

.kb-coupon-detail-page { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; color: #303238; background: #f6f6f6; }
.kb-coupon-detail-page.is-auth-open { overflow: hidden; }
.kb-coupon-detail-body { flex: 1; min-height: 0; overflow-y: auto; }
.kb-coupon-detail-page > header { min-height: 44px; padding: 0 10px; display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; background: #fff; }
.kb-coupon-detail-page > header button { width: 28px; height: 28px; border: 0; background: transparent; color: #222; font: 26px/1 Georgia, serif; cursor: pointer; }
.kb-coupon-detail-page > header strong { text-align: center; font-size: 15px; }
.kb-coupon-detail-hero { min-height: 230px; display: grid; place-items: center; background: linear-gradient(145deg, #fdfcf8, #f4ead5); }
.kb-coupon-detail-ticket { width: 78%; min-height: 136px; padding: 18px; display: grid; grid-template-columns: 1fr auto; align-content: center; border: 2px solid #d1a75a; border-radius: 10px; color: #f4dcaa; background: linear-gradient(150deg, #17563c, #267651); box-shadow: 0 16px 24px rgba(29, 81, 58, .18); }
.kb-coupon-detail-ticket small { grid-column: 1 / -1; color: #e8c984; font: 28px Georgia, serif; }
.kb-coupon-detail-ticket strong { margin-top: 10px; font-size: 44px; line-height: 1; }.kb-coupon-detail-ticket span { align-self: end; font-size: 12px; }
.kb-coupon-detail-summary { padding: 14px 16px; background: #fff; }
.kb-coupon-detail-summary > div:first-child { display: flex; align-items: flex-end; justify-content: space-between; }
.kb-coupon-detail-summary > div:first-child strong { color: #bf8b35; font-size: 26px; }.kb-coupon-detail-summary > div:first-child strong small { margin-left: 2px; font-size: 10px; }.kb-coupon-detail-summary > div:first-child span { color: #92969b; font-size: 10px; }
.kb-coupon-detail-summary h2 { margin: 12px 0 0; font-size: 14px; }.kb-coupon-detail-summary p { margin: 8px 0 0; color: #7c8188; font-size: 10px; }
.kb-coupon-shop-toast { margin-top: 10px; padding: 8px 10px; color: #8c641e; background: #fff6e5; font-size: 10px; line-height: 1.45; }
.kb-coupon-detail-rules { margin-top: 8px; background: #fff; }
.kb-coupon-detail-rules dl { margin: 0; padding: 0 16px; }.kb-coupon-detail-rules dl > div { min-height: 52px; display: grid; grid-template-columns: 62px 1fr; align-items: center; border-bottom: 1px solid #f0f0f0; font-size: 11px; }.kb-coupon-detail-rules dt { color: #8d9298; }.kb-coupon-detail-rules dd { margin: 0; line-height: 1.5; }
.kb-coupon-usage { padding: 18px 16px 26px; }.kb-coupon-usage > span { display: block; color: #a4a8ad; font-size: 10px; text-align: center; }.kb-coupon-usage h3 { margin: 18px 0 8px; color: #bd922f; font-size: 16px; }.kb-coupon-usage p { margin: 0; font-size: 11px; line-height: 1.9; }
.kb-coupon-detail-footer { flex-shrink: 0; background: #fff; box-shadow: 0 -1px 5px rgba(0,0,0,.08); }
.kb-coupon-detail-redeem { width: 100%; min-height: 52px; border: 0; background: #d1a253; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.kb-coupon-detail-redeem.is-ready { background: #d1a253; }
.kb-coupon-detail-redeem:disabled { background: #c9c9c9; cursor: not-allowed; }
.kb-wechat-auth-sheet { position: absolute; inset: 0; z-index: 6; display: grid; align-items: end; background: rgba(0,0,0,.45); }
.kb-wechat-auth-card { padding: 18px 16px 22px; border-radius: 14px 14px 0 0; background: #fff; }
.kb-wechat-auth-head { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; }
.kb-wechat-auth-head > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #644bde, #dda03f); font: 18px Georgia, serif; }
.kb-wechat-auth-head strong { display: block; font-size: 14px; }
.kb-wechat-auth-head small { display: block; margin-top: 2px; color: #8d9298; font-size: 10px; }
.kb-wechat-auth-scopes { margin: 16px 0 0; padding: 0; list-style: none; }
.kb-wechat-auth-scopes li { min-height: 36px; padding-left: 12px; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; color: #303238; font-size: 12px; }
.kb-member-login-sheet .kb-wechat-auth-scopes li { padding: 8px 0; justify-content: space-between; gap: 12px; }
.kb-member-login-sheet .kb-wechat-auth-scopes li span { font-weight: 600; }
.kb-member-login-sheet .kb-wechat-auth-scopes li em { color: #969ba2; font-size: 9px; font-style: normal; text-align: right; }
.kb-member-login-loading { min-height: 164px; display: grid; place-content: center; justify-items: center; gap: 9px; text-align: center; }
.kb-member-login-loading i { width: 28px; height: 28px; border: 3px solid #d9f3e2; border-top-color: #07c160; border-radius: 50%; animation: kb-member-login-spin .75s linear infinite; }
.kb-member-login-loading strong { color: #303238; font-size: 13px; }.kb-member-login-loading span { color: #969ba2; font-size: 9px; }
@keyframes kb-member-login-spin { to { transform: rotate(360deg); } }
.kb-wechat-auth-note { margin: 12px 0 0; color: #8d9298; font-size: 10px; line-height: 1.5; }
.kb-wechat-auth-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-wechat-auth-actions button { min-height: 40px; border: 0; border-radius: 6px; font-size: 13px; cursor: pointer; }
.kb-wechat-auth-actions button:first-child { color: #303238; background: #f2f3f5; }
.kb-wechat-auth-actions button:last-child { color: #fff; background: #07c160; font-weight: 600; }
.kb-coupon-detail-missing { padding: 60px 20px; color: #969ba1; text-align: center; }

.coupon-page-shell { display: grid; gap: 14px; }
.coupon-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.coupon-metrics article { min-height: 84px; padding: 14px 16px; border: 1px solid #e6e9ec; background: #fff; }
.coupon-metrics span, .coupon-metrics strong, .coupon-metrics small { display: block; }
.coupon-metrics span { color: #8b929a; font-size: 11px; }
.coupon-metrics strong { margin-top: 7px; color: #2f3439; font-size: 24px; line-height: 1; }
.coupon-metrics small { margin-top: 7px; color: #929aa2; font-size: 10px; }
.coupon-tabs { display: flex; gap: 2px; border-bottom: 1px solid #e6e9ed; }
.coupon-tabs button { min-height: 38px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #68717a; font-size: 12px; cursor: pointer; }
.coupon-tabs button.active { border-bottom-color: #1677ff; color: #1266d6; font-weight: 700; }
.coupon-toast { min-height: 36px; padding: 10px 12px; border: 1px solid #cfe1f7; background: #f4f8ff; color: #2666a5; font-size: 12px; }
.coupon-status { display: inline-flex; min-height: 22px; padding: 0 8px; align-items: center; border-radius: 2px; border: 1px solid #d9dee5; background: #f7f8fa; color: #59616b; font-size: 11px; white-space: nowrap; }
.coupon-status--success { border-color: #c8eadc; background: #f1fbf6; color: #1f7a55; }
.coupon-status--warning { border-color: #f0dfb8; background: #fff9eb; color: #946b1e; }
.coupon-progress { width: 120px; height: 6px; overflow: hidden; border-radius: 999px; background: #edf1f5; }
.coupon-progress span { display: block; height: 100%; border-radius: inherit; background: #1677ff; }
.coupon-offer-table th:nth-child(1) { min-width: 230px; }
.coupon-chain-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #e3e7eb; background: #fff; }
.coupon-chain-card article { position: relative; min-height: 138px; padding: 18px 16px; border-right: 1px solid #edf0f3; }
.coupon-chain-card article:last-child { border-right: 0; }
.coupon-chain-card article:not(:last-child)::after { content: "›"; position: absolute; top: 48px; right: -8px; width: 16px; height: 24px; display: grid; place-items: center; color: #a8b0b8; background: #fff; font-size: 18px; }
.coupon-chain-card b, .coupon-chain-card strong, .coupon-chain-card small { display: block; }
.coupon-chain-card b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #edf5ff; color: #1677ff; font-size: 10px; }
.coupon-chain-card strong { margin-top: 13px; color: #2f3439; font-size: 14px; }
.coupon-chain-card small { margin-top: 7px; color: #76808a; font-size: 11px; line-height: 1.55; }
.coupon-flow-panel, .coupon-guard-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.coupon-flow-panel article, .coupon-guard-panel div { min-height: 86px; padding: 13px 14px; border: 1px solid #e5e8ec; background: #fff; }
.coupon-flow-panel b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f5efe4; color: #8b6420; font-size: 10px; }
.coupon-flow-panel strong, .coupon-flow-panel small, .coupon-guard-panel strong, .coupon-guard-panel span { display: block; }
.coupon-flow-panel strong, .coupon-guard-panel strong { margin-top: 9px; color: #30363c; font-size: 13px; }
.coupon-flow-panel small, .coupon-guard-panel span { margin-top: 5px; color: #7d858e; font-size: 11px; line-height: 1.5; }
.coupon-filter-panel { margin-top: 0; }
.coupon-filter-panel input, .coupon-filter-panel select { width: 100%; height: 32px; padding: 0 9px; border: 1px solid #d9dee4; background: #fff; color: #3f464e; font-size: 12px; }
.coupon-campaign-page { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.coupon-campaign-page .admin-page-bar { min-height: 66px; padding: 0 6px; }
.coupon-campaign-page .admin-page-bar h1 { font-size: 18px; }
.coupon-campaign-workbench { width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 18px 20px 28px; box-sizing: border-box; overflow: hidden; background: #fff; }
.coupon-campaign-create { min-width: 116px; height: 38px; margin: 0 0 18px; }
.coupon-campaign-page .admin-page-bar .coupon-campaign-create { margin: 0 4px 0 0; }
.coupon-campaign-filter { padding: 24px 28px 20px; display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 18px 28px; background: #f5f7fa; }
.coupon-campaign-filter > label { min-width: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; color: #606266; }
.coupon-campaign-filter input, .coupon-campaign-filter select { min-width: 0; width: 100%; height: 38px; padding: 0 12px; box-sizing: border-box; border: 1px solid #dcdfe6; border-radius: 2px; color: #303133; background: #fff; font: inherit; }
.coupon-campaign-filter input:focus, .coupon-campaign-filter select:focus { outline: 0; border-color: #409eff; }
.campaign-owner-fields { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.campaign-owner-fields select + select { border-left: 0; }
.campaign-date-fields { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; }
.campaign-date-fields b { color: #c0c4cc; text-align: center; font-weight: 400; }
.coupon-campaign-filter-actions { grid-column: 1 / -1; padding-left: 82px; display: flex; gap: 12px; }
.coupon-campaign-filter-actions button { min-width: 84px; height: 38px; }
.coupon-campaign-page > .coupon-toast, .coupon-campaign-workbench > .coupon-toast { margin: 14px 0 0; }
.coupon-campaign-table { width: 100%; min-width: 0; max-width: 100%; margin-top: 18px; box-sizing: border-box; border-color: #ebeef5; }
.coupon-campaign-table .crm-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.coupon-campaign-table .crm-table { min-width: 1500px; }
.coupon-campaign-table .crm-table th { height: 56px; padding: 0 14px; white-space: normal; }
.coupon-campaign-table .crm-table td { height: 72px; padding: 12px 14px; line-height: 1.45; }
.coupon-campaign-table .crm-table th:nth-child(n+5):nth-child(-n+10), .coupon-campaign-table .crm-table td:nth-child(n+5):nth-child(-n+10) { text-align: center; }
.coupon-campaign-table .crm-table th:nth-child(2), .coupon-campaign-table .crm-table td:nth-child(2) { min-width: 175px; }
.coupon-campaign-table .crm-table th:nth-child(3), .coupon-campaign-table .crm-table td:nth-child(3) { min-width: 110px; }
.coupon-campaign-table .crm-table th:nth-child(4), .coupon-campaign-table .crm-table td:nth-child(4) { min-width: 170px; }
.coupon-campaign-table .crm-table td:last-child { min-width: 132px; }
.coupon-campaign-table .crm-link-button { margin-right: 8px; }
.coupon-campaign-pagination { min-height: 64px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: #909399; }
.coupon-campaign-pagination > div { display: flex; align-items: center; gap: 8px; }
.coupon-campaign-pagination button, .coupon-campaign-pagination select, .coupon-campaign-pagination input { height: 34px; box-sizing: border-box; border: 1px solid #dcdfe6; background: #fff; color: #606266; }
.coupon-campaign-pagination button { width: 34px; }
.coupon-campaign-pagination button.active { color: #fff; border-color: #1677ff; background: #1677ff; }
.coupon-campaign-pagination select { width: 94px; padding: 0 8px; }
.coupon-campaign-pagination input { width: 52px; padding: 0 8px; text-align: center; }
.coupon-campaign-page .crm-back-button { width: 28px; height: 32px; margin-right: 8px; padding: 0; border: 0; color: #606266; background: transparent; font-size: 28px; cursor: pointer; }
.coupon-campaign-page .admin-page-bar > div:has(.crm-back-button) { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.coupon-campaign-page .admin-page-bar > div:has(.crm-back-button) p { grid-column: 2; }
.coupon-campaign-create-form select, .coupon-campaign-create-form input[type="date"] { width: min(560px, 100%); height: 38px; padding: 0 12px; box-sizing: border-box; border: 1px solid #dcdfe6; border-radius: 2px; color: #303133; background: #fff; font: inherit; }
.coupon-campaign-create-form .template-inline-fields input[type="date"] { width: 210px; }
.campaign-create-header { position: sticky; top: 0; z-index: 5; }
.campaign-create-header nav { margin-left: auto; align-self: stretch; display: flex; align-items: center; gap: 30px; }
.campaign-create-header nav button { width: auto; height: 56px; padding: 0 2px; border-bottom: 3px solid transparent; color: #909399; font-size: 15px; }
.campaign-create-header nav button.active { color: #1677ff; border-bottom-color: #1677ff; }
.campaign-create-layout { grid-template-columns: 220px minmax(720px, 1fr); }
.campaign-assistant { position: sticky; top: 72px; min-height: 270px; padding: 0 20px 24px; border-top: 0; }
.campaign-assistant > strong { margin: 0 -20px; padding: 0 20px; justify-content: center; color: #1677ff; border-bottom: 0; background: #eaf4ff; }
.campaign-assistant h2 { color: #606266; font-weight: 500; }
.coupon-campaign-create-form { padding: 0 0 86px; background: transparent; }
.coupon-campaign-create-form > .coupon-toast { margin: 0 0 12px; }
.campaign-form-section { margin: 0 0 16px; padding: 0 34px 12px; scroll-margin-top: 72px; background: #fff; }
.campaign-form-section > h2 { height: 62px; margin: 0; display: flex; align-items: center; border-bottom: 1px solid #ebeef5; font-size: 18px; }
.campaign-form-section .template-form-row { grid-template-columns: 150px minmax(0, 1fr); padding: 18px 0; border-bottom: 0; }
.campaign-form-section .template-form-row > strong, .campaign-form-section .template-form-row > label { justify-content: flex-end; padding-right: 18px; }
.campaign-name-field { position: relative; width: min(520px, 100%); }
.campaign-name-field #campaignName { width: 100%; box-sizing: border-box; padding-right: 52px; }
.campaign-name-field small { position: absolute; top: 10px; right: 12px; margin: 0 !important; color: #c0c4cc; }
.campaign-period { width: min(560px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
.campaign-period input[type="date"] { width: 100%; }
.coupon-campaign-create-form #campaignOwner, .coupon-campaign-create-form #campaignStore { width: min(560px, 100%); }
.campaign-radio-group { min-height: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 22px 34px; }
.campaign-radio-group label { display: inline-flex; align-items: center; gap: 8px; color: #303133; cursor: pointer; }
.campaign-radio-group input { width: 18px; height: 18px; margin: 0; accent-color: #1677ff; }
.campaign-audience-preview { width: min(700px, 100%); margin-top: 14px; padding: 14px 16px; display: grid; gap: 6px; box-sizing: border-box; border: 1px solid #d9ecff; background: #f5faff; }
.campaign-audience-preview strong { color: #1677ff; font-size: 14px; }
.campaign-audience-preview span { color: #303133; line-height: 1.6; }
.campaign-audience-preview small { color: #909399; line-height: 1.5; }
.campaign-cycle-group { gap: 22px 34px; }
.campaign-time-fields { display: grid; grid-template-columns: 180px 180px; }
.campaign-time-fields select + select { border-left: 0; }
.campaign-offer-field { position: relative; min-height: 38px; display: flex; align-items: center; gap: 14px; }
.campaign-offer-field > span { color: #303133; }
.campaign-offer-picker { position: absolute; top: 38px; left: 0; z-index: 6; width: min(620px, calc(100vw - 420px)); max-height: 260px; padding: 8px; overflow-y: auto; border: 1px solid #dcdfe6; background: #fff; box-shadow: 0 8px 24px rgba(31, 35, 41, .12); }
.campaign-offer-picker button { width: 100%; min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; border: 0; border-bottom: 1px solid #ebeef5; color: #606266; background: #fff; text-align: left; cursor: pointer; }
.campaign-offer-picker button:hover { background: #f5f7fa; }
.campaign-offer-picker button:last-child { border-bottom: 0; }
.campaign-offer-picker strong { color: #303133; font-weight: 500; }
.campaign-offer-picker span { grid-column: 1; font-size: 12px; }
.campaign-offer-picker small { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #909399; }
.coupon-campaign-create-form #campaignLimit { width: 100px; height: 38px; padding: 0 10px; box-sizing: border-box; border: 1px solid #dcdfe6; }
.campaign-create-actions { position: fixed; left: 240px; z-index: 8; padding-left: calc(220px + 52px); }
@media (max-width: 1120px) { .coupon-campaign-filter { grid-template-columns: repeat(2, minmax(240px, 1fr)); }.coupon-campaign-filter-actions { grid-column: 1 / -1; } }
@media (max-width: 760px) { .coupon-campaign-workbench { padding: 12px; }.coupon-campaign-filter { padding: 18px 14px; grid-template-columns: 1fr; gap: 14px; }.coupon-campaign-filter > label { grid-template-columns: 76px minmax(0, 1fr); }.coupon-campaign-filter-actions { grid-column: auto; padding-left: 76px; }.coupon-campaign-pagination { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px; }.coupon-campaign-pagination > div { max-width: 100%; overflow-x: auto; }.campaign-create-header nav { display: none; }.campaign-form-section { padding: 0 16px 8px; }.campaign-form-section .template-form-row { grid-template-columns: 1fr; gap: 8px; }.campaign-form-section .template-form-row > strong, .campaign-form-section .template-form-row > label { justify-content: flex-start; padding-right: 0; }.campaign-radio-group { align-items: flex-start; flex-direction: column; gap: 14px; }.campaign-time-fields { grid-template-columns: 1fr 1fr; }.campaign-offer-picker { width: calc(100vw - 48px); }.campaign-create-actions { left: 0; padding-left: 16px; } }

/* 优惠券首屏采用券中心的标准工作台层级：页签、筛选、列表。 */
.coupon-page-shell { gap: 0; align-content: start; }
.coupon-admin-page-bar { min-height: 102px !important; padding: 0 4px 12px !important; align-items: end !important; }
.coupon-admin-page-bar h1 { font-size: 18px !important; }
.coupon-admin-page-bar p { font-size: 13px !important; }
.coupon-page-shell .coupon-tabs { height: 52px; margin: 0; padding: 0 14px; align-items: end; background: #fff; border: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5; }
.coupon-page-shell .coupon-tabs button { min-width: 88px; height: 52px; padding: 0 8px; border-bottom-width: 2px; color: #606266; font-size: 14px; }
.coupon-page-shell .coupon-tabs button.active { color: #1677ff; font-weight: 500; }
.coupon-management-filter { margin: 0; padding: 24px 18px; display: grid; grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, .78fr)) auto; gap: 16px 22px; align-items: end; border: 1px solid #ebeef5; border-top: 0; background: #fff; }
.coupon-management-filter label { min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; color: #606266; font-size: 14px; white-space: nowrap; }
.coupon-management-filter input, .coupon-management-filter select { min-width: 0; width: 100%; height: 34px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 2px; color: #606266; background: #fff; font: inherit; }
.coupon-management-filter input:focus, .coupon-management-filter select:focus { outline: 0; border-color: #409eff; }
.coupon-management-filter-actions { display: flex; align-items: center; gap: 10px; }
.coupon-management-filter-actions .weimob-primary-button, .coupon-management-filter-actions .crm-secondary-button { min-width: 76px; height: 34px; }
.coupon-page-shell .coupon-toast { margin-top: 12px; }
.coupon-page-shell .coupon-management-table { margin-top: 16px; }
.coupon-management-table > header { min-height: 56px; }
.coupon-management-table > header strong { color: #303133; font-size: 15px; }
.coupon-management-table .weimob-primary-button { min-width: 108px; }
.coupon-management-table .crm-table { min-width: 1240px; }
.coupon-management-table .crm-table th { height: 48px; color: #303133; font-weight: 600; }
.coupon-management-table .crm-table td { height: 76px; color: #606266; }
.coupon-management-table .crm-table td:first-child strong { color: #303133; font-weight: 600; }
.coupon-management-table .crm-link-button { margin-right: 14px; }
.coupon-management-table .coupon-progress { width: 104px; height: 6px; margin-bottom: 5px; }
.coupon-management-table .coupon-status { min-height: 24px; }
@media (max-width: 1240px) { .coupon-management-filter { grid-template-columns: repeat(2, minmax(300px, 1fr)); }.coupon-management-filter-actions { padding-left: 86px; } }
@media (max-width: 760px) { .coupon-admin-page-bar { min-height: 72px !important; }.coupon-page-shell .coupon-tabs { overflow-x: auto; }.coupon-management-filter { grid-template-columns: 1fr; padding: 18px 16px; gap: 14px; }.coupon-management-filter-actions { padding-left: 86px; }.coupon-management-table { overflow-x: auto; } }

/* 微盟券码中心：一级页面、券渠道、券模板/优惠券三层结构。 */
.coupon-primary-tabs { height: 64px; padding: 0 18px; display: flex; align-items: end; gap: 36px; background: #fff; border-bottom: 1px solid #ebeef5; }
.coupon-primary-tabs button { height: 64px; padding: 0 2px; border: 0; border-bottom: 3px solid transparent; color: #303133; background: transparent; font-size: 17px; cursor: pointer; }
.coupon-primary-tabs button.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
.coupon-channel-grid { padding: 10px 18px 12px; display: flex; flex-wrap: nowrap; gap: 8px; align-items: stretch; }
.coupon-channel-card { flex: 1 1 0; min-width: 0; height: 56px; min-height: 0; padding: 8px 10px; box-sizing: border-box; overflow: hidden; border: 1px solid transparent; border-top: 2px solid transparent; background: #fff; color: #909399; text-align: left; cursor: pointer; }
.coupon-channel-card strong, .coupon-channel-card span { display: block; }
.coupon-channel-card strong { color: #909399; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coupon-channel-card span { margin-top: 3px; display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.coupon-channel-card.active { border-color: #d8e8ff; border-top-color: #1677ff; }
.coupon-channel-card.active strong { color: #1677ff; }
.coupon-lifecycle { margin: 0 18px 12px; padding: 12px 18px; display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr; align-items: center; border: 1px solid #ebeef5; background: #fff; }
.coupon-lifecycle > div { min-width: 0; display: flex; align-items: center; gap: 10px; color: #909399; }
.coupon-lifecycle > div b { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; color: #909399; background: #f0f2f5; font-size: 12px; }
.coupon-lifecycle > div span, .coupon-lifecycle > div strong, .coupon-lifecycle > div small { min-width: 0; display: block; }
.coupon-lifecycle > div strong { color: #606266; font-size: 13px; }
.coupon-lifecycle > div small { margin-top: 2px; overflow: hidden; color: #a8abb2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.coupon-lifecycle > div.active b { color: #fff; background: #1677ff; }
.coupon-lifecycle > div.active strong { color: #1677ff; }
.coupon-lifecycle > i { color: #c0c4cc; text-align: center; font-style: normal; }
.coupon-workbench { margin: 0 18px; padding: 0 28px 20px; background: #fff; }
.coupon-workbench .coupon-tabs { height: 68px; padding: 0; gap: 36px; border: 0; border-bottom: 1px solid #dcdfe6; }
.coupon-workbench .coupon-tabs button { min-width: auto; height: 68px; padding: 0; font-size: 16px; }
.coupon-template-filter { position: relative; margin-top: 20px; padding: 20px 24px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; background: #f5f7fa; }
.coupon-template-filter label { min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; color: #606266; font-size: 14px; }
.coupon-template-filter input[type="search"], .coupon-template-filter select { width: 100%; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid #dcdfe6; border-radius: 2px; color: #606266; background: #fff; font: inherit; }
.coupon-template-filter input:focus, .coupon-template-filter select:focus { outline: 0; border-color: #409eff; }
.coupon-template-filter .coupon-archive-check { position: absolute; top: 0; right: 0; width: auto; display: flex; grid-template-columns: none; gap: 8px; transform: translateY(-34px); }
.coupon-template-filter .coupon-archive-check input { width: 18px; height: 18px; margin: 0; }
.coupon-template-filter .coupon-management-filter-actions { grid-column: 1 / -1; padding-left: 84px; display: flex; gap: 12px; }
.coupon-template-filter .coupon-management-filter-actions button { min-width: 88px; height: 36px; }
.coupon-template-filter--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 18px; padding-bottom: 14px; gap: 12px 24px; }
.coupon-offer-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coupon-date-range { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; }
.coupon-date-range input { min-width: 0; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #dcdfe6; background: #fff; color: #606266; font: inherit; }
.coupon-date-range b { color: #c0c4cc; text-align: center; font-weight: 400; }
.coupon-page-shell > .coupon-management-table { margin: 16px 18px 0; }
.coupon-management-table > header { min-height: 54px; padding: 0; border: 0; background: transparent; }
.coupon-management-table > header > span { color: #909399; font-size: 14px; }
.coupon-management-table > header > button { min-width: 108px; height: 36px; }
.coupon-management-table .crm-table { min-width: 1600px; }
.coupon-management-table .coupon-instance-table { min-width: 2200px; }
.coupon-management-table .crm-table th:first-child, .coupon-management-table .crm-table td:first-child { width: 48px; padding-right: 0; text-align: center; }
.coupon-management-table .crm-table input[type="checkbox"] { width: 18px; height: 18px; }
.coupon-management-table .crm-table th { height: 56px; font-size: 14px; }
.coupon-management-table .crm-table td { height: 68px; font-size: 14px; }
.coupon-management-table .crm-table td:nth-child(2) strong { color: #303133; font-weight: 500; }
.coupon-settings-panel { margin: 20px 18px; background: #fff; border: 1px solid #ebeef5; }
.coupon-settings-panel h2 { height: 58px; margin: 0; padding: 0 20px; display: flex; align-items: center; border-bottom: 1px solid #ebeef5; font-size: 16px; }
.coupon-settings-panel > div { min-height: 82px; padding: 0 20px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; border-bottom: 1px solid #ebeef5; }
.coupon-settings-panel > div:last-child { border-bottom: 0; }
.coupon-settings-panel > div span { color: #909399; }
.coupon-settings-body { margin: 20px 18px; }
.coupon-settings-body .coupon-settings-panel { margin: 0 0 16px; }
.coupon-settings-panel em { color: #f56c6c; font-style: normal; }
.coupon-setting-input { width: min(560px, 100%); height: 38px; padding: 0 12px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; color: #606266; font: inherit; }
.coupon-face-preview { width: 260px; min-height: 126px; padding: 16px; display: grid; grid-template-columns: 1fr auto; align-content: start; border-left: 4px solid #1677ff; background: #f4f8ff; }
.coupon-face-preview b { grid-column: 1 / -1; color: #1677ff; font-size: 12px; }
.coupon-face-preview strong { margin-top: 10px; color: #1677ff; font-size: 24px; }
.coupon-face-preview > span { margin-top: 16px; color: #606266 !important; }
.coupon-face-preview p, .coupon-face-preview small { grid-column: 1 / -1; margin: 7px 0 0; }
.coupon-face-preview small { color: #909399; }
.coupon-switch input { position: absolute; opacity: 0; }
.coupon-switch i { width: 42px; height: 22px; display: block; border-radius: 11px; background: #dcdfe6; cursor: pointer; }
.coupon-switch i::after { content: ""; width: 18px; height: 18px; margin: 2px; display: block; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.coupon-switch input:checked + i { background: #1677ff; }
.coupon-switch input:checked + i::after { transform: translateX(20px); }

/* 微盟新建券模板：填写助手 + 单列表单工作区。 */
.coupon-template-create-page { min-height: 100%; background: #f5f7fa; }
.template-create-header { height: 56px; padding: 0 22px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #ebeef5; background: #fff; }
.template-create-header h1 { margin: 0; font-size: 17px; font-weight: 600; }
.template-create-header button { width: 28px; height: 32px; padding: 0; border: 0; color: #606266; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; }
.template-create-layout { padding: 16px 18px 28px; display: grid; grid-template-columns: 210px minmax(720px, 1fr); align-items: start; gap: 16px; }
.template-assistant { min-height: 360px; padding: 0 18px 24px; border-top: 3px solid #1677ff; background: #fff; }
.template-assistant > strong { height: 52px; display: flex; align-items: center; color: #1677ff; border-bottom: 1px solid #ebeef5; font-size: 16px; }
.template-assistant h2 { margin: 22px 0 12px; font-size: 15px; }
.template-assistant ul { margin: 0; padding-left: 18px; color: #909399; }
.template-assistant li { margin: 0 0 12px; line-height: 1.7; }
.template-create-form { position: relative; min-height: 760px; padding: 0 34px 86px; background: #fff; }
.template-create-form > h2 { height: 58px; margin: 0 0 8px; display: flex; align-items: center; border-bottom: 1px solid #ebeef5; font-size: 16px; }
.template-create-form em, .template-rule-section em { color: #f56c6c; font-style: normal; }
.template-form-row, .template-rule-section { padding: 12px 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start; border-bottom: 1px solid #f0f2f5; }
.template-form-row > strong, .template-form-row > label, .template-rule-section > strong { min-height: 36px; display: flex; align-items: center; color: #606266; font-weight: 400; }
.template-form-row > div > input[type="text"], .template-form-row > div > input:not([type]), #templateDraftName, #templateDraftRemark { width: min(440px, calc(100% - 50px)); height: 38px; padding: 0 12px; border: 1px solid #dcdfe6; border-radius: 2px; color: #303133; background: #fff; font: inherit; }
.template-form-row > div > input:focus, .template-rule-box input:focus, .template-fixed-time input:focus { outline: 0; border-color: #409eff; }
.template-form-row > div > small { margin-left: 10px; color: #c0c4cc; }
.template-type-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 170px)); gap: 10px; }
.template-type-card { position: relative; height: 52px; min-height: 0; padding: 7px 14px; box-sizing: border-box; border: 1px solid #dcdfe6; border-radius: 2px; color: #909399; background: #fff; text-align: left; cursor: pointer; }
.template-type-card strong, .template-type-card span { display: block; }
.template-type-card strong { color: #606266; font-size: 15px; font-weight: 500; }
.template-type-card span { margin-top: 3px; font-size: 11px; }
.template-type-card.active { border-color: #1677ff; background: #f2f7ff; }
.template-type-card.active strong { color: #1677ff; }
.template-type-card.active::after { content: "✓"; position: absolute; right: 0; bottom: 0; width: 20px; height: 18px; display: grid; place-items: center; color: #fff; background: #1677ff; font-size: 12px; clip-path: polygon(100% 0, 100% 100%, 0 100%); padding: 6px 0 0 6px; box-sizing: border-box; }
.template-radio-line, .template-checkbox-line { min-height: 36px; display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.template-radio-line label, .template-checkbox-line label, .template-rule-box label { display: inline-flex; align-items: center; gap: 7px; color: #606266; cursor: pointer; }
.template-radio-line input, .template-checkbox-line input, .template-rule-box input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: #1677ff; }
.template-rule-section { row-gap: 14px; }
.template-rule-box { min-height: 52px; margin-top: 10px; padding: 12px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #606266; background: #f5f7fa; }
.template-rule-box input[type="number"], .template-cost-share-fields input { width: 112px; height: 34px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; font: inherit; }
.template-rule-box small { color: #909399; }
.template-rule-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.template-rule-fields[hidden] { display: none !important; }
.template-cost-share-fields { margin-top: 12px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 24px; background: #f5f7fa; }
.template-cost-share-fields[hidden] { display: none !important; }
.template-cost-share-fields label { display: inline-flex; align-items: center; gap: 7px; color: #606266; }
.template-hint, .template-empty-product { margin: 8px 0 0; color: #909399; line-height: 1.6; }
.template-fixed-time { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.template-fixed-time input { width: 180px; height: 36px; padding: 0 10px; border: 1px solid #dcdfe6; background: #fff; color: #606266; font: inherit; }
.template-owner { min-height: 36px; display: inline-flex; align-items: center; color: #303133; }
.template-product-row { width: min(600px, 100%); min-height: 52px; margin-top: 12px; padding: 0 14px; display: grid; grid-template-columns: 1fr 140px auto; align-items: center; border: 1px solid #ebeef5; }
.template-product-row small { color: #909399; }
.template-create-actions { position: absolute; right: 0; bottom: 0; left: 0; height: 66px; padding-left: 166px; display: flex; align-items: center; gap: 12px; border-top: 1px solid #ebeef5; background: #fff; }
.template-create-actions button { min-width: 92px; height: 36px; }
.coupon-template-create-page .coupon-toast { margin: 12px 0; }
.coupon-offer-create-form select, .coupon-offer-create-form input[type="number"] { height: 38px; padding: 0 12px; border: 1px solid #dcdfe6; border-radius: 2px; color: #303133; background: #fff; font: inherit; }
.coupon-offer-create-form select { width: min(560px, 100%); }
.coupon-offer-create-form input[type="number"] { width: 140px; }
.coupon-offer-create-form [hidden] { display: none !important; }
.coupon-points-shop-fields .template-inline-fields + .template-inline-fields { margin-top: 10px; }
.coupon-offer-radio-options { gap: 24px; }
.coupon-limit-period-fields { align-items: flex-start; }
.coupon-limit-period-fields > span { padding-top: 8px; white-space: nowrap; }
.template-unit { margin-left: 8px; color: #606266; }
.template-inline-fields { min-height: 38px; display: flex; align-items: center; gap: 8px; color: #606266; }
@media (max-width: 1180px) { .coupon-template-filter .coupon-management-filter-actions { grid-column: 1 / -1; } }
@media (max-width: 900px) { .coupon-template-filter, .coupon-template-filter--compact, .coupon-offer-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; }.coupon-template-filter label { grid-template-columns: 68px minmax(0, 1fr); gap: 6px; font-size: 13px; }.coupon-template-filter input[type="search"], .coupon-template-filter select { height: 34px; padding: 0 8px; font-size: 13px; }.coupon-template-filter .coupon-management-filter-actions { padding-left: 74px; } }
@media (max-width: 1180px) { .template-create-layout { grid-template-columns: 180px minmax(620px, 1fr); }.template-type-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); } }
@media (max-width: 760px) { .coupon-primary-tabs { height: 56px; }.coupon-primary-tabs button { height: 56px; font-size: 15px; }.coupon-channel-grid { padding: 10px 12px; overflow-x: auto; }.coupon-channel-card { flex: 0 0 140px; height: 52px; min-height: 0; padding: 8px 10px; }.coupon-lifecycle { grid-template-columns: 1fr 14px 1fr; gap: 8px; overflow-x: auto; }.coupon-lifecycle > div:nth-of-type(n+3), .coupon-lifecycle > i:nth-of-type(n+2) { display: none; }.coupon-workbench { margin: 0 12px; padding: 0 16px 20px; }.coupon-template-filter { padding: 20px 16px; grid-template-columns: 1fr; gap: 14px; }.coupon-template-filter--compact, .coupon-offer-filter { grid-template-columns: 1fr; }.coupon-template-filter label { grid-template-columns: 76px minmax(0, 1fr); }.coupon-template-filter .coupon-archive-check { position: static; transform: none; }.coupon-template-filter .coupon-management-filter-actions { padding-left: 76px; }.coupon-page-shell > .coupon-management-table { margin: 12px; }.coupon-settings-body { margin: 12px; }.coupon-settings-panel > div { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px; }.coupon-settings-panel > div span { grid-column: 1 / -1; grid-row: auto; }.coupon-setting-input, .coupon-face-preview { grid-column: 1 / -1; width: 100%; }.template-create-layout { padding: 10px; display: block; }.template-assistant { display: none; }.template-create-form { min-height: 0; padding: 0 16px 82px; }.template-form-row, .template-rule-section { grid-template-columns: 1fr; gap: 8px; }.template-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.template-create-actions { position: fixed; z-index: 4; padding: 0 16px; justify-content: flex-end; }.template-product-row { grid-template-columns: 1fr auto; gap: 4px 12px; }.template-product-row small { grid-row: 2; } }
.kb-home-promo { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 14px; background: rgba(20, 18, 16, .46); }
.kb-home-promo-card { width: min(86%, 280px); padding: 22px 18px 18px; border-radius: 12px; color: #5a4330; background: linear-gradient(160deg, #fffaf1, #f3e2c0); text-align: center; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.kb-home-promo-card span { color: #a8751b; font-size: 10px; letter-spacing: .08em; }
.kb-home-promo-card strong { display: block; margin-top: 10px; font-size: 18px; }
.kb-home-promo-card p { margin: 8px 0 0; color: #8a7558; font-size: 11px; line-height: 1.45; }
.kb-home-promo-card button { width: 100%; min-height: 40px; margin-top: 16px; border: 0; border-radius: 8px; color: #fff; background: #b8893a; font-size: 13px; font-weight: 650; cursor: pointer; }
.kb-home-promo-close { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: transparent; font-size: 20px; cursor: pointer; }
.case-phone-shell.is-portal-page .case-phone-content:has(.kb-home-page) { position: relative; }
.case-phone-shell.is-portal-page .case-phone-content:has(.kb-home-promo) { overflow: hidden; }

.kb-home-welcome { padding: 13px 5px 12px; display: grid; grid-template-columns: 1fr 72px; align-items: end; }.kb-home-welcome span { color: #a1763a; font-size: 9px; }.kb-home-welcome h2 { margin: 5px 0 4px; font-size: 18px; }.kb-home-welcome p { margin: 0; color: #8b8e94; font-size: 9px; }.kb-home-points { padding: 8px; border-radius: 7px; text-align: center; background: rgba(255,255,255,.78); }.kb-home-points span, .kb-home-points strong { display: block; }.kb-home-points strong { margin-top: 4px; color: #a8751b; font-size: 20px; }
.kb-home-banner { padding: 15px; border-radius: 6px; color: #fff; background: linear-gradient(125deg, #28251f, #5b4b36); }.kb-home-banner span { color: #e5c990; font-size: 9px; }.kb-home-banner strong { display: block; margin-top: 7px; font: 18px Georgia, "Songti SC", serif; }.kb-home-banner p { margin: 7px 0 0; color: #d5cec3; font-size: 9px; }
.kb-service-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.kb-service-grid article { min-height: 83px; padding: 11px; border: 1px solid #eee9e2; border-radius: 5px; background: #fff; }.kb-service-grid i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #a8751b; background: #f8ecd8; font-size: 11px; font-style: normal; }.kb-service-grid strong, .kb-service-grid span { display: block; }.kb-service-grid strong { margin-top: 7px; font-size: 11px; }.kb-service-grid span { margin-top: 3px; color: #9a9ca1; font-size: 8px; }
.kb-home-feature { margin-top: 12px; padding: 13px; display: flex; align-items: center; justify-content: space-between; border-left: 3px solid #b8863b; background: #fbf7f0; }.kb-home-feature span { color: #b8863b; font-size: 8px; }.kb-home-feature strong { display: block; margin-top: 4px; font-size: 12px; }.kb-home-feature p { margin: 4px 0 0; color: #8e9095; font-size: 8px; }.kb-home-feature > b { color: #9d7335; font-size: 9px; font-weight: 500; }

/* 中间凸起停车缴费按钮：外壳（黑边圆角）不变，只重写导航内部。 */
.case-phone-shell.has-raised-nav .bottom-nav--raised {
  position: relative;
  z-index: 3;
  height: 59px;
  padding: 0 8px 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  overflow: visible;
  border-top: 1px solid #ece7e0;
  background: #fff;
}
.bottom-nav--raised button {
  position: relative;
  min-height: 44px;
  padding: 0;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 2px;
  border: 0;
  background: transparent;
  color: #8d8680;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.bottom-nav--raised button em {
  font-style: normal;
  font-size: 9px;
  font-weight: 500;
}
.bottom-nav--raised .nav-ico {
  width: 22px;
  height: 22px;
  display: block;
}
.bottom-nav--raised .is-main {
  z-index: 4;
  color: #b8893a;
}
.bottom-nav--raised .nav-main-fab {
  width: 52px;
  height: 52px;
  margin: -28px 0 4px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(160deg, #dfb56a 0%, #c99645 48%, #b88327 100%);
  box-shadow:
    0 6px 14px rgba(120, 82, 24, .28),
    0 1px 0 rgba(255, 255, 255, .35) inset;
  font: 700 26px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
}
.bottom-nav--raised button.active { color: #c99548; }
.bottom-nav--raised button.active .nav-ico { color: #c99548; }
.bottom-nav--raised .is-main.active .nav-main-fab {
  background: linear-gradient(160deg, #e4bf78 0%, #d0a252 48%, #c08c2f 100%);
  box-shadow:
    0 7px 16px rgba(120, 82, 24, .32),
    0 1px 0 rgba(255, 255, 255, .4) inset;
}

/* 截图页落入统一手机外壳：裁掉截图自带状态栏/底栏，外壳与「我的」一致。 */
.kb-reference-screen.is-in-shell { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.kb-reference-screen.is-in-shell > img {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
.kb-reference-screen.is-home.is-in-shell > img,
.kb-reference-screen.is-promo.is-in-shell > img {
  top: -5.2%;
  height: 121%;
}
.kb-reference-screen.is-auto-points.is-in-shell > img {
  top: -4%;
  height: 108%;
}
.kb-reference-screen.is-in-shell .reference-hotspot { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.kb-reference-screen.is-in-shell .reference-hotspot:focus-visible { outline: 3px solid rgba(16, 190, 100, .85); outline-offset: -3px; }
.kb-reference-screen.is-in-shell .promo-open-hotspot { left: 16.7%; top: 69.5%; width: 66.7%; height: 7%; }
.kb-reference-screen.is-in-shell .promo-close-hotspot { left: 46.5%; top: 84.2%; width: 7.4%; height: 4.8%; border-radius: 50%; }
.kb-reference-screen.is-in-shell .auto-points-back-hotspot { left: 0; top: 0; width: 13%; height: 8%; }
.kb-reference-screen.is-in-shell .auto-points-submit-hotspot { left: 9.2%; top: 72%; width: 81.6%; height: 8%; }
.kb-reference-screen.is-loading .auto-points-submit-hotspot { pointer-events: none; }

/* 旧参考页壳保留兼容，演示台已统一到 phone-shell。 */
.case-phone-shell.is-reference-page {
  position: relative;
  display: block;
  width: auto;
  max-width: calc(100% - 32px);
  height: min(844px, calc(100vh - 232px));
  aspect-ratio: 390 / 844;
  margin: 12px auto 0;
  overflow: hidden;
  border: 8px solid #272522;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(34, 35, 38, .14);
}
.kb-reference-screen:not(.is-in-shell) { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.kb-reference-screen:not(.is-in-shell) > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.reference-hotspot { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.reference-hotspot:focus-visible { outline: 3px solid rgba(16, 190, 100, .85); outline-offset: -3px; }
.promo-open-hotspot { left: 16.7%; top: 65.4%; width: 66.7%; height: 6.1%; }
.promo-close-hotspot { left: 46.5%; top: 78.3%; width: 7.4%; height: 4.2%; border-radius: 50%; }
.nav-home-hotspot { left: 0; bottom: 0; width: 33.333%; height: 7.3%; }
.nav-parking-hotspot { left: 33.333%; bottom: 0; width: 33.333%; height: 9.2%; }
.nav-mine-hotspot { right: 0; bottom: 0; width: 33.333%; height: 7.3%; }
.auto-points-back-hotspot { left: 0; top: 1.8%; width: 13%; height: 7.3%; }
.auto-points-submit-hotspot { left: 9.2%; top: 70%; width: 81.6%; height: 7.2%; }

@media (max-width: 760px) {
  .case-phone-shell.is-reference-page {
    max-width: 100%;
    height: min(844px, calc(100vh - 210px));
    aspect-ratio: 390 / 844;
    border: 8px solid #272522;
    border-radius: 34px;
  }
}