编辑页面

HTML内容
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>餐饮点餐小程序交互原型</title>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
  <style>
    :root {
      --bg: #f5f7fb;
      --panel: #ffffff;
      --ink: #172033;
      --muted: #667085;
      --line: #e6e9f0;
      --teal: #0f8b7a;
      --teal-soft: #e8f7f4;
      --coral: #e85d4f;
      --coral-soft: #fff0ed;
      --amber: #f4a62a;
      --amber-soft: #fff5df;
      --blue: #2f6bff;
      --green: #1f9d63;
      --shadow: 0 18px 45px rgba(23, 32, 51, .10);
      font-family: "Inter", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background:
        radial-gradient(circle at 18% 4%, rgba(232, 93, 79, .10), transparent 28%),
        linear-gradient(145deg, #f7f9fc 0%, #eef4f6 44%, #f8f9fc 100%);
    }

    button, input, select {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .page {
      min-height: 100vh;
      padding: 22px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 18px;
    }

    .topbar {
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 16px;
      background: rgba(255, 255, 255, .84);
      border: 1px solid rgba(230, 233, 240, .88);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(23, 32, 51, .08);
      backdrop-filter: blur(14px);
    }

    .brand-mark {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 250px;
    }

    .logo {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--teal), #19b69f);
      color: #fff;
      box-shadow: 0 10px 22px rgba(15, 139, 122, .24);
    }

    .brand-title {
      margin: 0;
      font-size: 17px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .brand-subtitle {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .mode-tabs {
      display: inline-grid;
      grid-template-columns: repeat(4, minmax(96px, auto));
      gap: 4px;
      padding: 4px;
      background: #edf1f6;
      border-radius: 8px;
    }

    .mode-tabs button,
    .pill-button,
    .icon-button,
    .ghost-button,
    .primary-button,
    .danger-button {
      min-height: 36px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      white-space: nowrap;
      transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .mode-tabs button {
      padding: 0 13px;
      color: var(--muted);
      background: transparent;
      font-size: 13px;
      font-weight: 650;
    }

    .mode-tabs button.active {
      background: #fff;
      color: var(--teal);
      box-shadow: 0 6px 16px rgba(23, 32, 51, .10);
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .pill-button {
      padding: 0 12px;
      color: #fff;
      background: var(--ink);
      font-size: 13px;
      font-weight: 700;
    }

    .ghost-button {
      padding: 0 12px;
      color: var(--ink);
      background: #f2f5fa;
      border: 1px solid var(--line);
      font-size: 13px;
      font-weight: 650;
    }

    .primary-button {
      padding: 0 14px;
      color: #fff;
      background: var(--teal);
      font-size: 13px;
      font-weight: 760;
      box-shadow: 0 10px 22px rgba(15, 139, 122, .20);
    }

    .danger-button {
      padding: 0 12px;
      color: #fff;
      background: var(--coral);
      font-size: 13px;
      font-weight: 760;
    }

    .icon-button {
      width: 36px;
      min-width: 36px;
      color: var(--ink);
      background: #f2f5fa;
      border: 1px solid var(--line);
    }

    button:hover {
      transform: translateY(-1px);
    }

    .workspace {
      display: grid;
      grid-template-columns: minmax(344px, 390px) minmax(680px, 1fr);
      gap: 18px;
      align-items: stretch;
      min-height: 0;
    }

    .phone-shell {
      display: flex;
      justify-content: center;
      min-height: 0;
    }

    .phone {
      width: min(100%, 390px);
      height: calc(100vh - 128px);
      min-height: 740px;
      max-height: 880px;
      border-radius: 36px;
      padding: 12px;
      background: #111827;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .phone-screen {
      height: 100%;
      border-radius: 26px;
      background: #f7f8fb;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr auto;
      position: relative;
    }

    .mini-header {
      padding: 16px 16px 12px;
      background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.92) 100%);
      border-bottom: 1px solid var(--line);
    }

    .mini-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #2f3747;
      font-size: 12px;
      font-weight: 760;
      margin-bottom: 12px;
    }

    .mini-location {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .store-title {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .header-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .store-title h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .table-badge {
      height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      border-radius: 8px;
      color: var(--teal);
      background: var(--teal-soft);
      font-size: 12px;
      font-weight: 760;
      white-space: nowrap;
    }

    .mini-content {
      min-height: 0;
      overflow: auto;
      padding: 14px 14px 92px;
      scrollbar-width: none;
    }

    .mini-content::-webkit-scrollbar { width: 0; }

    .mini-header-back {
      width: 32px;
      min-width: 32px;
      min-height: 32px;
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
      background: #fff;
      box-shadow: 0 6px 16px rgba(23, 32, 51, .08);
    }

    .hero-strip {
      height: 138px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      background-image:
        linear-gradient(90deg, rgba(18, 24, 38, .78), rgba(18, 24, 38, .16)),
        url("https://images.unsplash.com/photo-1559847844-5315695dadae?auto=format&fit=crop&w=900&q=80");
      background-size: cover;
      background-position: center;
      color: #fff;
      padding: 18px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .hero-strip h3 {
      margin: 0 0 5px;
      font-size: 22px;
      letter-spacing: 0;
    }

    .hero-strip p {
      margin: 0;
      font-size: 12px;
      color: rgba(255, 255, 255, .86);
    }

    .quick-row,
    .coupon-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 14px;
    }

    .quick-action {
      min-height: 72px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 7px;
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      box-shadow: 0 8px 18px rgba(23, 32, 51, .06);
      font-size: 12px;
      font-weight: 760;
    }

    .quick-action i,
    .quick-action svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--teal);
    }

    .section-head {
      margin: 18px 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .section-head h3 {
      margin: 0;
      font-size: 16px;
      letter-spacing: 0;
    }

    .section-head span,
    .link-text {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }

    .mini-grid {
      display: grid;
      grid-template-columns: 84px 1fr;
      gap: 10px;
      align-items: start;
    }

    .category-list {
      display: grid;
      gap: 8px;
      position: sticky;
      top: 0;
    }

    .category-list button {
      min-height: 40px;
      padding: 0 9px;
      border-radius: 8px;
      background: #fff;
      color: #596273;
      border: 1px solid var(--line);
      font-size: 12px;
      font-weight: 760;
      text-align: left;
    }

    .category-list button.active {
      color: #fff;
      background: var(--teal);
      border-color: var(--teal);
    }

    .dish-list {
      display: grid;
      gap: 10px;
    }

    .dish-card {
      display: grid;
      grid-template-columns: 86px 1fr;
      gap: 10px;
      min-height: 108px;
      padding: 9px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .dish-img {
      width: 86px;
      height: 90px;
      border-radius: 8px;
      object-fit: cover;
      background: #d9dee8;
    }

    .product-detail {
      display: grid;
      gap: 12px;
    }

    .product-cover {
      width: 100%;
      aspect-ratio: 1.35;
      border-radius: 8px;
      object-fit: cover;
      background: #d9dee8;
    }

    .product-info {
      display: grid;
      gap: 8px;
    }

    .product-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .product-title-row h3 {
      margin: 0;
      font-size: 19px;
      line-height: 1.25;
      letter-spacing: 0;
    }

    .product-desc {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .product-price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-top: 2px;
    }

    .product-price {
      color: var(--coral);
      font-size: 22px;
      font-weight: 880;
    }

    .product-actions {
      display: grid;
      gap: 8px;
    }

    .product-actions .primary-button {
      width: 100%;
      height: 42px;
      justify-content: center;
    }

    .dish-info {
      min-width: 0;
      display: grid;
      gap: 6px;
      align-content: start;
    }

    .dish-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .dish-title strong {
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tag {
      height: 22px;
      display: inline-flex;
      align-items: center;
      padding: 0 7px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 760;
      color: var(--coral);
      background: var(--coral-soft);
      white-space: nowrap;
    }

    .dish-desc {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
      min-height: 33px;
    }

    .price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-width: 0;
    }

    .price {
      color: var(--coral);
      font-size: 14px;
      font-weight: 840;
      min-width: 0;
      flex: 1 1 auto;
      white-space: nowrap;
    }

    .stepper {
      display: flex;
      align-items: center;
      gap: 5px;
      flex: 0 0 auto;
    }

    .stepper button {
      width: 23px;
      height: 23px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--teal);
    }

    .stepper button.minus {
      color: var(--teal);
      background: #eaf4f2;
    }

    .stepper span {
      min-width: 12px;
      text-align: center;
      font-size: 12px;
      font-weight: 760;
    }

    .mini-panel {
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
      overflow: hidden;
    }

    .member-card {
      padding: 16px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(23, 32, 51, .95), rgba(15, 139, 122, .88)),
        url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=800&q=80");
      background-size: cover;
      background-position: center;
      border-radius: 8px;
    }

    .member-card h3,
    .member-card p {
      margin: 0;
    }

    .member-card h3 {
      font-size: 20px;
      margin-bottom: 6px;
    }

    .member-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 16px;
    }

    .member-stat {
      min-height: 62px;
      padding: 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .14);
      backdrop-filter: blur(8px);
    }

    .member-stat b {
      display: block;
      font-size: 17px;
      margin-bottom: 4px;
    }

    .member-stat span {
      font-size: 11px;
      color: rgba(255, 255, 255, .76);
    }

    .profile-page {
      display: grid;
      gap: 10px;
    }

    .profile-page .section-head {
      margin: 6px 0 0;
    }

    .profile-hero {
      padding: 14px;
      min-height: 0;
    }

    .profile-head {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 12px;
      align-items: center;
    }

    .profile-avatar {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, .18);
      border: 1px solid rgba(255, 255, 255, .32);
      font-size: 20px;
      font-weight: 850;
    }

    .profile-meta {
      margin-top: 4px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      color: rgba(255, 255, 255, .82);
      font-size: 12px;
    }

    .profile-meta span {
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .12);
    }

    .profile-summary {
      display: grid;
      gap: 10px;
      padding: 13px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .profile-summary-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .profile-summary-head h3,
    .profile-summary-head p {
      margin: 0;
    }

    .profile-summary-head h3 {
      font-size: 16px;
    }

    .profile-summary-head p {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .profile-tier {
      padding: 6px 9px;
      border-radius: 999px;
      color: var(--teal);
      background: var(--teal-soft);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .profile-benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .profile-benefit {
      min-height: 56px;
      padding: 9px;
      border-radius: 8px;
      background: #f7faf9;
      border: 1px solid #e4eeeb;
    }

    .profile-benefit b {
      display: block;
      color: var(--ink);
      font-size: 16px;
      margin-bottom: 4px;
    }

    .profile-benefit span {
      color: var(--muted);
      font-size: 11px;
    }

    .profile-detail-page {
      display: grid;
      gap: 12px;
    }

    .profile-detail-hero {
      padding: 16px;
      border-radius: 8px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(23, 32, 51, .96), rgba(15, 139, 122, .9)),
        url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=800&q=80");
      background-size: cover;
      background-position: center;
      box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
    }

    .profile-detail-head {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 12px;
      align-items: center;
      margin-bottom: 16px;
    }

    .profile-detail-avatar {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, .18);
      border: 1px solid rgba(255, 255, 255, .34);
      font-size: 24px;
      font-weight: 900;
    }

    .profile-detail-head h3,
    .profile-detail-head p {
      margin: 0;
    }

    .profile-detail-head h3 {
      margin-bottom: 6px;
      font-size: 21px;
      letter-spacing: 0;
    }

    .profile-detail-head p {
      color: rgba(255, 255, 255, .76);
      font-size: 12px;
      line-height: 1.45;
    }

    .profile-detail-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .profile-detail-tags span {
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .14);
      color: rgba(255, 255, 255, .88);
      font-size: 11px;
      font-weight: 800;
    }

    .profile-detail-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .profile-detail-kpi {
      min-height: 58px;
      padding: 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .12);
    }

    .profile-detail-kpi b,
    .profile-detail-kpi span {
      display: block;
    }

    .profile-detail-kpi b {
      margin-bottom: 5px;
      font-size: 15px;
    }

    .profile-detail-kpi span {
      color: rgba(255, 255, 255, .72);
      font-size: 11px;
    }

    .profile-detail-card {
      padding: 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .profile-detail-card h4 {
      margin: 0 0 12px;
      font-size: 15px;
    }

    .profile-preference-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .profile-preference {
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #edf1f6;
      font-size: 12px;
      color: var(--muted);
    }

    .profile-preference strong {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
      font-size: 13px;
    }

    .member-benefit-page {
      display: grid;
      gap: 12px;
    }

    .member-benefit-hero {
      padding: 16px;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, #172033, #0f8b7a);
      box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
    }

    .member-benefit-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 16px;
    }

    .member-benefit-top h3,
    .member-benefit-top p {
      margin: 0;
    }

    .member-benefit-top h3 {
      margin-bottom: 6px;
      font-size: 20px;
      letter-spacing: 0;
    }

    .member-benefit-top p {
      color: rgba(255, 255, 255, .74);
      font-size: 12px;
      line-height: 1.45;
    }

    .member-benefit-pill {
      flex: 0 0 auto;
      padding: 6px 9px;
      border-radius: 999px;
      color: #0f8b7a;
      background: #fff;
      font-size: 12px;
      font-weight: 820;
      white-space: nowrap;
    }

    .member-benefit-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .member-benefit-kpi {
      min-height: 58px;
      padding: 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .12);
    }

    .member-benefit-kpi b,
    .member-benefit-kpi span {
      display: block;
    }

    .member-benefit-kpi b {
      margin-bottom: 5px;
      font-size: 15px;
    }

    .member-benefit-kpi span {
      color: rgba(255, 255, 255, .72);
      font-size: 11px;
    }

    .member-benefit-card {
      padding: 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .member-benefit-card h4 {
      margin: 0 0 12px;
      font-size: 15px;
    }

    .benefit-rule-list {
      display: grid;
      gap: 0;
    }

    .benefit-rule {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 10px;
      min-height: 34px;
      align-items: center;
      border-bottom: 1px solid #eef1f6;
      color: var(--muted);
      font-size: 13px;
    }

    .benefit-rule:last-child {
      border-bottom: 0;
    }

    .benefit-rule strong {
      color: var(--ink);
      text-align: right;
      line-height: 1.35;
    }

    .benefit-highlight-list {
      display: grid;
      gap: 8px;
    }

    .benefit-highlight {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      font-size: 13px;
    }

    .benefit-highlight strong,
    .benefit-highlight span {
      display: block;
    }

    .benefit-highlight span {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .benefit-highlight b {
      color: var(--coral);
      font-size: 14px;
      white-space: nowrap;
    }

    .benefit-store-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .benefit-store {
      padding: 10px;
      border-radius: 8px;
      background: #f7faf9;
      border: 1px solid #e4eeeb;
      font-size: 12px;
      color: var(--muted);
    }

    .benefit-store strong {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
      font-size: 13px;
    }

    .benefit-timeline {
      display: grid;
      gap: 0;
    }

    .benefit-step {
      position: relative;
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: 10px;
      padding-bottom: 14px;
    }

    .benefit-step:last-child {
      padding-bottom: 0;
    }

    .benefit-step::before {
      content: "";
      position: absolute;
      left: 11px;
      top: 24px;
      bottom: 0;
      width: 2px;
      background: #e5eaf1;
    }

    .benefit-step:last-child::before {
      display: none;
    }

    .benefit-step-dot {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--teal);
      font-size: 12px;
      font-weight: 900;
      z-index: 1;
    }

    .benefit-step strong,
    .benefit-step span {
      display: block;
    }

    .benefit-step strong {
      margin-bottom: 4px;
      font-size: 13px;
    }

    .benefit-step span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .scan-people-page {
      display: grid;
      gap: 12px;
    }

    .scan-success-card {
      display: grid;
      gap: 12px;
      padding: 14px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .scan-success-head {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 10px;
      align-items: center;
    }

    .scan-success-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--teal);
    }

    .scan-success-head h3,
    .scan-success-head p {
      margin: 0;
    }

    .scan-success-head h3 {
      font-size: 17px;
    }

    .scan-success-head p {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .scan-table-info {
      display: grid;
      gap: 8px;
    }

    .people-options {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .people-option {
      min-height: 54px;
      border-radius: 8px;
      background: #f7faf9;
      border: 1px solid #e4eeeb;
      color: var(--ink);
      font-weight: 800;
    }

    .people-option.active {
      color: #fff;
      background: var(--teal);
      border-color: var(--teal);
    }

    .scan-people-actions {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 10px;
    }

    .coupon-card {
      display: grid;
      grid-template-columns: 84px 1fr;
      min-height: 92px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .coupon-value {
      display: grid;
      place-items: center;
      background: var(--coral-soft);
      color: var(--coral);
      font-weight: 860;
      font-size: 20px;
    }

    .coupon-body {
      padding: 12px;
      min-width: 0;
    }

    .coupon-body strong {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
    }

    .coupon-body p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .coupon-detail-page {
      display: grid;
      gap: 12px;
    }

    .coupon-detail-hero {
      display: grid;
      grid-template-columns: 96px 1fr;
      min-height: 128px;
      overflow: hidden;
      border-radius: 8px;
      background: #fff;
      border: 1px solid #ffd4c8;
      box-shadow: 0 14px 28px rgba(15, 23, 42, .12);
    }

    .coupon-detail-value {
      display: grid;
      place-items: center;
      color: var(--coral);
      background: var(--coral-soft);
      border-right: 1px dashed #ffc3b3;
      font-size: 26px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .coupon-detail-info {
      display: grid;
      align-content: center;
      gap: 8px;
      padding: 16px;
      min-width: 0;
    }

    .coupon-detail-info h3,
    .coupon-detail-info p {
      margin: 0;
    }

    .coupon-detail-info h3 {
      font-size: 19px;
      line-height: 1.25;
      letter-spacing: 0;
    }

    .coupon-detail-info p {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .coupon-detail-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .coupon-detail-tags span {
      padding: 4px 7px;
      border-radius: 999px;
      color: var(--teal);
      background: var(--teal-soft);
      font-size: 11px;
      font-weight: 800;
    }

    .coupon-detail-card {
      padding: 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .coupon-detail-card h4 {
      margin: 0 0 12px;
      font-size: 15px;
    }

    .coupon-detail-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .coupon-detail-stat {
      min-height: 58px;
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #edf1f6;
    }

    .coupon-detail-stat b,
    .coupon-detail-stat span {
      display: block;
    }

    .coupon-detail-stat b {
      margin-bottom: 5px;
      color: var(--ink);
      font-size: 15px;
    }

    .coupon-detail-stat span {
      color: var(--muted);
      font-size: 11px;
    }

    .promotion-list {
      display: grid;
      gap: 10px;
    }

    .promotion-card {
      min-height: 110px;
      padding: 13px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
    }

    .promo-art {
      width: 78px;
      height: 78px;
      border-radius: 8px;
      object-fit: cover;
    }

    .order-track {
      display: grid;
      gap: 10px;
    }

    .history-list {
      display: grid;
      gap: 10px;
    }

    .history-card {
      padding: 13px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
      display: grid;
      gap: 10px;
    }

    .history-top,
    .history-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .history-top strong {
      font-size: 14px;
    }

    .history-meta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .history-dishes {
      color: var(--ink);
      font-size: 13px;
      line-height: 1.45;
    }

    .history-price {
      color: var(--coral);
      font-size: 16px;
      font-weight: 840;
      white-space: nowrap;
    }

    .track-item {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      align-items: start;
      padding: 13px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
    }

    .track-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--teal);
      border-radius: 50%;
    }

    .track-item h4 {
      margin: 0 0 4px;
      font-size: 14px;
    }

    .track-item p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .order-progress-page {
      display: grid;
      gap: 12px;
    }

    .order-progress-hero {
      padding: 15px;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, #172033, #0f8b7a);
      box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
    }

    .order-progress-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }

    .order-progress-top h3,
    .order-progress-top p {
      margin: 0;
    }

    .order-progress-top h3 {
      margin-bottom: 6px;
      font-size: 20px;
    }

    .order-progress-top p {
      color: rgba(255, 255, 255, .72);
      font-size: 12px;
    }

    .order-progress-pill {
      flex: 0 0 auto;
      padding: 6px 9px;
      border-radius: 999px;
      color: #0f8b7a;
      background: #fff;
      font-size: 12px;
      font-weight: 800;
    }

    .order-progress-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .order-progress-stat {
      min-height: 58px;
      padding: 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .12);
    }

    .order-progress-stat b,
    .order-progress-stat span {
      display: block;
    }

    .order-progress-stat b {
      margin-bottom: 5px;
      font-size: 15px;
    }

    .order-progress-stat span {
      color: rgba(255, 255, 255, .72);
      font-size: 11px;
    }

    .order-status-card {
      padding: 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .order-status-card h4 {
      margin: 0 0 12px;
      font-size: 15px;
    }

    .order-timeline {
      display: grid;
      gap: 0;
    }

    .order-step {
      position: relative;
      display: grid;
      grid-template-columns: 24px 1fr auto;
      gap: 10px;
      padding-bottom: 16px;
    }

    .order-step:last-child {
      padding-bottom: 0;
    }

    .order-step::before {
      content: "";
      position: absolute;
      left: 11px;
      top: 24px;
      bottom: 0;
      width: 2px;
      background: #e5eaf1;
    }

    .order-step:last-child::before {
      display: none;
    }

    .order-step-dot {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: #cbd5e1;
      font-size: 12px;
      font-weight: 900;
      z-index: 1;
    }

    .order-step.done .order-step-dot,
    .order-step.current .order-step-dot {
      background: var(--teal);
    }

    .order-step.current .order-step-dot {
      box-shadow: 0 0 0 5px rgba(15, 139, 122, .12);
    }

    .order-step strong,
    .order-step span,
    .dish-status-row strong,
    .dish-status-row span {
      display: block;
    }

    .order-step strong,
    .dish-status-row strong {
      margin-bottom: 4px;
      font-size: 13px;
    }

    .order-step span,
    .dish-status-row span,
    .order-step time {
      color: var(--muted);
      font-size: 12px;
    }

    .dish-status-list {
      display: grid;
      gap: 9px;
    }

    .dish-status-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
    }

    .dish-status-row .status {
      justify-self: end;
    }

    .invoice-page {
      display: grid;
      gap: 12px;
    }

    .invoice-hero {
      padding: 16px;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, #172033, #0f8b7a);
      box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
    }

    .invoice-hero-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 16px;
    }

    .invoice-hero h3,
    .invoice-hero p {
      margin: 0;
    }

    .invoice-hero h3 {
      margin-bottom: 6px;
      font-size: 20px;
      letter-spacing: 0;
    }

    .invoice-hero p {
      color: rgba(255, 255, 255, .72);
      font-size: 12px;
      line-height: 1.45;
    }

    .invoice-status {
      flex: 0 0 auto;
      padding: 6px 9px;
      border-radius: 999px;
      color: #0f8b7a;
      background: #fff;
      font-size: 12px;
      font-weight: 800;
    }

    .invoice-amount {
      display: grid;
      gap: 5px;
    }

    .invoice-amount strong {
      font-size: 28px;
      line-height: 1;
      letter-spacing: 0;
    }

    .invoice-amount span {
      color: rgba(255, 255, 255, .72);
      font-size: 12px;
    }

    .invoice-card {
      padding: 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .invoice-card h4 {
      margin: 0 0 12px;
      font-size: 15px;
    }

    .invoice-code {
      display: grid;
      gap: 8px;
      padding: 12px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px dashed #d8e0ea;
      margin-bottom: 10px;
    }

    .invoice-code span {
      color: var(--muted);
      font-size: 12px;
    }

    .invoice-code strong {
      color: var(--ink);
      font-size: 18px;
      letter-spacing: 0;
    }

    .invoice-list {
      display: grid;
      gap: 0;
    }

    .invoice-line {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 10px;
      min-height: 34px;
      align-items: center;
      border-bottom: 1px solid #eef1f6;
      color: var(--muted);
      font-size: 13px;
    }

    .invoice-line:last-child {
      border-bottom: 0;
    }

    .invoice-line strong {
      color: var(--ink);
      text-align: right;
      line-height: 1.35;
    }

    .invoice-items {
      display: grid;
      gap: 8px;
    }

    .invoice-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      font-size: 13px;
    }

    .invoice-item span {
      color: var(--muted);
      font-size: 12px;
    }

    .invoice-file {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 10px;
      align-items: center;
      padding: 12px;
      border-radius: 8px;
      background: #fff7ed;
      border: 1px solid #fed7aa;
    }

    .invoice-file-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      background: var(--coral);
      font-size: 12px;
      font-weight: 900;
    }

    .invoice-file strong,
    .invoice-file span {
      display: block;
    }

    .invoice-file span {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .cart-bar {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 72px;
      height: 56px;
      border-radius: 8px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 8px 8px 8px 14px;
      color: #fff;
      background: #192132;
      box-shadow: 0 16px 34px rgba(23, 32, 51, .22);
      z-index: 4;
    }

    .cart-bar small {
      display: block;
      color: rgba(255, 255, 255, .66);
      font-size: 11px;
      margin-top: 2px;
    }

    .cart-price {
      font-size: 18px;
      font-weight: 860;
    }

    .cart-bar .primary-button {
      height: 40px;
      background: var(--coral);
      box-shadow: none;
    }

    .mini-tabbar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      height: 64px;
      background: #fff;
      border-top: 1px solid var(--line);
    }

    .mini-tabbar button {
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 4px;
      color: #7b8495;
      background: #fff;
      font-size: 11px;
      font-weight: 700;
    }

    .mini-tabbar button > svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mini-tabbar button > i {
      width: 18px;
      height: 18px;
      display: inline-flex;
    }

    .mini-tabbar button.active {
      color: var(--teal);
    }

    .admin-shell {
      min-height: 0;
      display: grid;
      grid-template-columns: 228px 1fr;
      border-radius: 8px;
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .sidebar {
      background: #151d2e;
      color: #d7dce8;
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 0;
    }

    .side-head {
      padding: 18px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .tenant {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .tenant-badge {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--coral);
      font-weight: 900;
    }

    .tenant strong {
      display: block;
      color: #fff;
      font-size: 14px;
    }

    .tenant span {
      display: block;
      margin-top: 3px;
      color: #9aa5bb;
      font-size: 12px;
    }

    .side-nav {
      padding: 12px;
      display: grid;
      align-content: start;
      gap: 4px;
      overflow: auto;
      scrollbar-width: thin;
    }

    .side-nav button {
      min-height: 40px;
      display: grid;
      grid-template-columns: 20px 1fr auto;
      align-items: center;
      gap: 9px;
      padding: 0 10px;
      border-radius: 8px;
      color: #b8c1d4;
      background: transparent;
      text-align: left;
      font-size: 13px;
      font-weight: 680;
    }

    .side-nav button.active {
      color: #fff;
      background: rgba(255, 255, 255, .10);
    }

    .side-foot {
      padding: 14px;
      border-top: 1px solid rgba(255,255,255,.08);
      display: grid;
      gap: 10px;
    }

    .store-select {
      width: 100%;
      min-height: 38px;
      padding: 0 10px;
      border-radius: 8px;
      color: #fff;
      border: 1px solid rgba(255,255,255,.14);
      background: #101827;
    }

    .admin-main {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: auto 1fr;
      background: #f7f8fb;
    }

    .admin-top {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 18px;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    .admin-title h2 {
      margin: 0;
      font-size: 20px;
      letter-spacing: 0;
    }

    .admin-title p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .searchbox {
      width: min(360px, 34vw);
      height: 38px;
      display: grid;
      grid-template-columns: 34px 1fr;
      align-items: center;
      border: 1px solid var(--line);
      background: #f7f9fc;
      border-radius: 8px;
      color: var(--muted);
    }

    .searchbox input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
    }

    .admin-content {
      min-height: 0;
      overflow: auto;
      padding: 18px;
    }

    .cashier-shell {
      grid-column: 1 / -1;
      min-height: 760px;
      display: grid;
      grid-template-rows: auto 1fr;
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .cashier-top {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .cashier-title h2 {
      margin: 0;
      font-size: 20px;
      letter-spacing: 0;
    }

    .cashier-title p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .shift-badge {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 11px;
      border-radius: 8px;
      color: var(--blue);
      background: #edf3ff;
      font-size: 12px;
      font-weight: 760;
    }

    .cashier-layout {
      min-height: 0;
      display: grid;
      grid-template-columns: 260px minmax(460px, 1fr) 340px;
      gap: 0;
      background: #f7f8fb;
    }

    .cashier-pane {
      min-width: 0;
      min-height: 0;
      padding: 14px;
      overflow: auto;
      border-right: 1px solid var(--line);
    }

    .cashier-pane:last-child {
      border-right: 0;
    }

    .pane-head {
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }

    .pane-head h3 {
      margin: 0;
      font-size: 15px;
      letter-spacing: 0;
    }

    .table-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
    }

    .table-tile {
      min-height: 76px;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      text-align: left;
      display: grid;
      align-content: space-between;
      color: var(--ink);
    }

    .table-tile strong {
      font-size: 15px;
    }

    .table-tile span {
      color: var(--muted);
      font-size: 12px;
    }

    .table-tile.active {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(15, 139, 122, .12);
    }

    .table-tile.busy {
      background: var(--coral-soft);
      border-color: #ffd1c8;
    }

    .table-tile.ready {
      background: var(--teal-soft);
      border-color: #c8ece5;
    }

    .pos-menu-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(128px, 1fr));
      gap: 10px;
    }

    .pos-dish {
      min-height: 104px;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      display: grid;
      align-content: space-between;
      gap: 8px;
      text-align: left;
      color: var(--ink);
    }

    .pos-dish-main {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .pos-dish strong {
      font-size: 14px;
      line-height: 1.35;
    }

    .pos-dish span {
      color: var(--muted);
      font-size: 12px;
    }

    .pos-dish b {
      color: var(--coral);
      font-size: 16px;
    }

    .pos-dish-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .pos-stepper {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 86px;
      justify-content: flex-end;
    }

    .pos-stepper button {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--teal);
      color: #fff;
      box-shadow: 0 8px 16px rgba(15, 139, 122, .16);
    }

    .pos-stepper button.minus {
      background: #fff;
      color: var(--teal);
      border: 1px solid #bfe8df;
      box-shadow: none;
    }

    .pos-stepper span {
      min-width: 18px;
      text-align: center;
      color: var(--ink);
      font-size: 13px;
      font-weight: 820;
    }

    .pos-order-list {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .pos-order-row {
      min-height: 46px;
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      font-size: 13px;
    }

    .pos-order-row small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    .pos-order-row strong {
      white-space: nowrap;
    }

    .qty-pill {
      min-width: 30px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 7px;
      color: var(--teal);
      background: var(--teal-soft);
      font-size: 12px;
      font-weight: 820;
    }

    .payment-panel {
      display: grid;
      gap: 12px;
    }

    .cashier-card {
      padding: 13px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
    }

    .cashier-card h3 {
      margin: 0 0 10px;
      font-size: 15px;
    }

    .member-scan {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 58px;
      padding: 10px;
      border-radius: 8px;
      background: var(--teal-soft);
    }

    .member-scan strong {
      display: block;
      margin-bottom: 3px;
      font-size: 13px;
    }

    .member-scan span {
      color: var(--muted);
      font-size: 12px;
    }

    .cashier-member-profile {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: center;
      padding: 16px;
      border: 1px solid rgba(15, 139, 122, .18);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(15, 139, 122, .1), rgba(245, 158, 11, .08));
    }

    .cashier-member-avatar {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      font-size: 22px;
      font-weight: 800;
      background: var(--teal);
      box-shadow: 0 10px 22px rgba(15, 139, 122, .2);
    }

    .cashier-member-meta h4,
    .cashier-member-meta p {
      margin: 0;
    }

    .cashier-member-meta h4 {
      margin-bottom: 6px;
      font-size: 18px;
    }

    .cashier-member-meta p {
      color: var(--muted);
      font-size: 12px;
    }

    .cashier-benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .cashier-benefit-item {
      min-height: 74px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .cashier-benefit-item strong {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
    }

    .cashier-benefit-item span {
      color: var(--muted);
      font-size: 12px;
    }

    .pay-methods {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
    }

    .pay-method {
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      font-size: 13px;
      font-weight: 760;
    }

    .pay-method.active {
      color: var(--teal);
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(15, 139, 122, .12);
    }

    .settlement-lines {
      display: grid;
      gap: 9px;
    }

    .settlement-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
    }

    .settlement-line strong {
      color: var(--ink);
      white-space: nowrap;
    }

    .settlement-total {
      padding-top: 10px;
      border-top: 1px solid var(--line);
      color: var(--ink);
      font-size: 20px;
      font-weight: 880;
    }

    .cashier-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
    }

    .cashier-toast {
      position: fixed;
      right: 28px;
      bottom: 28px;
      z-index: 40;
      max-width: min(360px, calc(100vw - 40px));
      padding: 12px 16px;
      border-radius: 8px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
      background: rgba(15, 23, 42, .92);
      box-shadow: 0 16px 38px rgba(15, 23, 42, .24);
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px);
      transition: opacity .18s ease, transform .18s ease;
    }

    .cashier-toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .detail-view {
      display: grid;
      gap: 12px;
    }

    .detail-head {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .admin-content [data-admin-view="secondary"] .detail-head {
      display: none;
    }

    .detail-title {
      min-width: 0;
    }

    .detail-title h3 {
      margin: 0;
      font-size: 17px;
      letter-spacing: 0;
    }

    .detail-title p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .detail-card {
      padding: 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
    }

    .detail-card h4 {
      margin: 0 0 10px;
      font-size: 14px;
    }

    .detail-list {
      display: grid;
      gap: 9px;
    }

    .detail-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 32px;
      color: var(--muted);
      font-size: 13px;
      border-bottom: 1px solid #eef1f6;
    }

    .detail-line:last-child {
      border-bottom: 0;
    }

    .detail-line strong {
      color: var(--ink);
      text-align: right;
    }

    .detail-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .mini-content.detail-open > [data-view]:not([data-view="mini-secondary"]),
    .admin-content.detail-open > [data-admin-view]:not([data-admin-view="secondary"]) {
      display: none !important;
    }

    .cashier-shell.cashier-detail-open .cashier-layout {
      display: none;
    }

    .cashier-secondary {
      display: none;
      min-height: 0;
      overflow: auto;
      padding: 18px;
      background: #f7f8fb;
    }

    .cashier-shell.cashier-detail-open .cashier-secondary {
      display: block;
    }

    .dialog-mask {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(15, 23, 42, .42);
    }

    .dialog-mask.show {
      display: grid;
    }

    .dialog-panel {
      width: min(720px, calc(100vw - 36px));
      max-height: 86vh;
      overflow: auto;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
    }

    .scan-dialog-panel {
      width: min(420px, calc(100vw - 32px));
    }

    .scan-dialog-panel .dialog-head {
      min-height: 52px;
      padding: 12px 14px;
    }

    .scan-dialog-panel .dialog-body {
      padding: 12px 14px;
    }

    .scan-dialog-panel .dialog-actions {
      padding: 12px 14px 14px;
      flex-wrap: wrap;
    }

    .scan-dialog-panel .dialog-actions button {
      min-width: 118px;
    }

    .dialog-head {
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
    }

    .dialog-head h3 {
      margin: 0;
      font-size: 17px;
    }

    .dialog-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .dialog-body {
      padding: 16px;
    }

    .dialog-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 16px 16px;
      border-top: 1px solid var(--line);
    }

    .scan-order-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: stretch;
    }

    .scan-frame {
      min-height: 176px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: #0f172a;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .scan-frame::before,
    .scan-frame::after {
      content: "";
      position: absolute;
      inset: 18px;
      border: 2px solid rgba(255, 255, 255, .7);
      border-radius: 8px;
    }

    .scan-frame::after {
      top: 50%;
      bottom: auto;
      height: 2px;
      border: 0;
      background: var(--teal);
      box-shadow: 0 0 22px rgba(18, 184, 134, .85);
    }

    .scan-code {
      width: 86px;
      height: 86px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background:
        linear-gradient(90deg, #fff 10px, transparent 10px) 0 0 / 26px 26px,
        linear-gradient(#fff 10px, transparent 10px) 0 0 / 26px 26px,
        #e8fff8;
      color: var(--teal);
      font-weight: 860;
      z-index: 1;
    }

    .scan-result-card {
      display: grid;
      gap: 10px;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
    }

    .scan-result-card h4,
    .scan-result-card p {
      margin: 0;
    }

    .scan-result-card p {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .scan-result-list {
      display: grid;
      gap: 8px;
    }

    .scan-result-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 34px;
      padding-bottom: 8px;
      border-bottom: 1px solid #edf1f5;
      font-size: 13px;
      color: var(--muted);
    }

    .scan-result-card .form-grid {
      grid-template-columns: 1fr;
      gap: 9px;
    }

    .scan-result-card select {
      width: 100%;
      min-width: 0;
    }

    .scan-result-item strong {
      color: var(--ink);
      text-align: right;
    }

    [data-detail],
    .admin-content tbody tr,
    .metric,
    .cashier-card {
      cursor: pointer;
    }

    .cashier-card[data-cashier-static="true"] {
      cursor: default;
    }

    [data-admin-static="true"],
    .metric[data-admin-static="true"] {
      cursor: default;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      gap: 12px;
    }

    .metric {
      min-height: 112px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      display: grid;
      align-content: space-between;
    }

    .metric-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 680;
    }

    .metric-icon {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: var(--teal);
      background: var(--teal-soft);
    }

    .metric b {
      display: block;
      margin-top: 10px;
      font-size: 25px;
      letter-spacing: 0;
    }

    .delta {
      color: var(--green);
      font-size: 12px;
      font-weight: 760;
    }

    .admin-grid {
      display: grid;
      grid-template-columns: minmax(460px, 1.45fr) minmax(290px, .9fr);
      gap: 12px;
      margin-top: 12px;
      align-items: start;
    }

    .admin-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

    .card-head {
      min-height: 54px;
      padding: 13px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
    }

    .card-head h3 {
      margin: 0;
      font-size: 15px;
      letter-spacing: 0;
    }

    .dashboard-data-grid {
      display: grid;
      grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
      gap: 12px;
      margin-top: 12px;
    }

    .dashboard-card-body {
      display: grid;
      gap: 10px;
      padding: 14px;
    }

    .dashboard-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      min-height: 54px;
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #edf1f6;
      cursor: default;
    }

    .dashboard-row strong,
    .dashboard-row span {
      display: block;
    }

    .dashboard-row strong {
      margin-bottom: 4px;
      color: var(--ink);
      font-size: 13px;
    }

    .dashboard-row span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .dashboard-row b {
      color: var(--ink);
      font-size: 14px;
      white-space: nowrap;
    }

    .dashboard-progress {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #e8edf4;
      margin-top: 8px;
    }

    .dashboard-progress i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--teal), #19b69f);
    }

    .dashboard-split {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 14px;
    }

    .dashboard-split-item {
      min-height: 76px;
      padding: 11px;
      border-radius: 8px;
      background: #f7faf9;
      border: 1px solid #e4eeeb;
    }

    .dashboard-split-item b,
    .dashboard-split-item span {
      display: block;
    }

    .dashboard-split-item b {
      margin-bottom: 5px;
      color: var(--ink);
      font-size: 17px;
    }

    .dashboard-split-item span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .segmented {
      display: inline-grid;
      grid-auto-flow: column;
      gap: 3px;
      padding: 3px;
      border-radius: 8px;
      background: #edf1f6;
    }

    .segmented button {
      min-height: 28px;
      padding: 0 10px;
      border-radius: 7px;
      color: var(--muted);
      background: transparent;
      font-size: 12px;
      font-weight: 760;
    }

    .segmented button.active {
      color: var(--teal);
      background: #fff;
    }

    .table-wrap {
      width: 100%;
      overflow: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 620px;
    }

    th,
    td {
      padding: 12px 14px;
      text-align: left;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      vertical-align: middle;
    }

    td .ghost-button + .ghost-button {
      margin-left: 6px;
    }

    th {
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
      background: #fbfcfe;
      white-space: nowrap;
    }

    tr:last-child td {
      border-bottom: 0;
    }

    .status {
      height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 760;
      white-space: nowrap;
    }

    .status.ok { color: var(--green); background: #eaf8f1; }
    .status.warn { color: #bc7713; background: var(--amber-soft); }
    .status.hot { color: var(--coral); background: var(--coral-soft); }
    .status.blue { color: var(--blue); background: #edf3ff; }

    .list-stack {
      display: grid;
      gap: 10px;
      padding: 14px;
    }

    .task-row,
    .brand-row,
    .setting-row {
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
    }

    .task-row strong,
    .brand-row strong,
    .setting-row strong {
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
    }

    .task-row span,
    .brand-row span,
    .setting-row span {
      color: var(--muted);
      font-size: 12px;
    }

    .brand-logo {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      object-fit: cover;
      background: #eef2f7;
    }

    .brand-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .form-grid {
      padding: 14px;
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr));
      gap: 12px;
    }

    .field {
      display: grid;
      gap: 7px;
    }

    .field label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
    }

    .field input,
    .field select {
      min-height: 38px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      outline-color: rgba(15,139,122,.32);
    }

    .switch {
      position: relative;
      width: 42px;
      height: 24px;
      flex: 0 0 auto;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      inset: 0;
      background: #d5dbe7;
      border-radius: 24px;
      transition: .16s;
    }

    .slider:before {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      left: 3px;
      top: 3px;
      background: #fff;
      border-radius: 50%;
      transition: .16s;
      box-shadow: 0 2px 7px rgba(0,0,0,.22);
    }

    .switch input:checked + .slider {
      background: var(--teal);
    }

    .switch input:checked + .slider:before {
      transform: translateX(18px);
    }

    .chart {
      height: 436px;
      padding: 14px 14px 30px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 1fr 18px;
      gap: 8px;
      align-items: end;
    }

    .bar {
      min-height: 24px;
      border-radius: 7px 7px 3px 3px;
      background: linear-gradient(180deg, #19b69f, var(--teal));
      position: relative;
      grid-row: 1;
    }

    .bar:nth-child(3n) { background: linear-gradient(180deg, #ff8b72, var(--coral)); }
    .bar:nth-child(4n) { background: linear-gradient(180deg, #ffc85a, var(--amber)); }

    .bar span {
      position: absolute;
      left: 50%;
      bottom: -24px;
      transform: translateX(-50%);
      color: var(--muted);
      font-size: 11px;
      line-height: 18px;
    }

    .checkout-page-head {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .checkout-page-head h3 {
      margin: 0;
      font-size: 17px;
    }

    .checkout-page-head #backToOrder {
      display: none;
    }

    .checkout-card {
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 9px 20px rgba(23, 32, 51, .06);
      overflow: hidden;
    }

    .checkout-list {
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    .checkout-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
      min-width: 0;
    }

    .checkout-row strong {
      color: var(--ink);
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .checkout-row span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .checkout-total {
      padding-top: 12px;
      margin-top: 4px;
      border-top: 1px solid var(--line);
      color: var(--ink);
      font-size: 18px;
      font-weight: 860;
    }

    .checkout-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 14px 14px;
      border-top: 1px solid var(--line);
    }

    .checkout-tip {
      margin-top: 12px;
      padding: 12px;
      border-radius: 8px;
      color: #bc7713;
      background: var(--amber-soft);
      font-size: 12px;
      line-height: 1.55;
    }

    .hidden { display: none !important; }

    [data-view] { display: none; }
    [data-view].active { display: block; }
    [data-admin-view] { display: none; }
    [data-admin-view].active { display: block; }

    .only-mini .admin-shell,
    .only-mini .cashier-shell { display: none; }
    .only-mini .workspace { grid-template-columns: minmax(344px, 420px); justify-content: center; }
    .only-admin .phone-shell,
    .only-admin .cashier-shell { display: none; }
    .only-admin .workspace { grid-template-columns: minmax(760px, 1fr); }
    .only-cashier .phone-shell,
    .only-cashier .admin-shell { display: none; }
    .only-cashier .workspace { grid-template-columns: minmax(860px, 1fr); }

    @media (max-width: 1120px) {
      .workspace {
        grid-template-columns: 1fr;
      }

      .phone {
        height: 820px;
      }

      .admin-shell {
        min-height: 820px;
      }

      .cashier-layout {
        grid-template-columns: 220px 1fr;
      }

      .cashier-pane:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid var(--line);
      }
    }

    @media (max-width: 780px) {
      .page {
        padding: 12px;
      }

      .topbar,
      .admin-top {
        align-items: stretch;
        flex-direction: column;
      }

      .brand-mark,
      .searchbox {
        width: 100%;
        min-width: 0;
      }

      .mode-tabs {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
      }

      .top-actions {
        width: 100%;
        justify-content: space-between;
      }

      .admin-shell {
        grid-template-columns: 1fr;
      }

      .cashier-top {
        align-items: stretch;
        flex-direction: column;
      }

      .cashier-layout {
        grid-template-columns: 1fr;
      }

      .cashier-pane {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .pos-menu-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
      }

      .sidebar {
        min-height: auto;
      }

      .side-nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
      }

      .side-nav button {
        grid-template-columns: 20px 1fr;
      }

      .side-nav small,
      .side-foot {
        display: none;
      }

      .metric-grid,
      .admin-grid,
      .dashboard-data-grid,
      .scan-order-layout,
      .form-grid {
        grid-template-columns: 1fr;
      }

      #cashierDetailList .metric-grid,
      .cashier-benefit-grid {
        grid-template-columns: 1fr !important;
      }

      .cashier-member-profile {
        grid-template-columns: 1fr;
      }

      .dashboard-split {
        grid-template-columns: 1fr;
      }

      .scan-frame {
        min-height: 220px;
      }

      .phone {
        min-height: 760px;
        height: 82vh;
      }
    }

    @media (max-width: 430px) {
      .phone {
        border-radius: 0;
        width: 100%;
        min-height: 760px;
        height: calc(100vh - 156px);
        padding: 0;
      }

      .phone-screen {
        border-radius: 0;
      }

      .quick-row {
        grid-template-columns: repeat(2, 1fr);
      }

      .people-options {
        grid-template-columns: repeat(2, 1fr);
      }

      .dish-card {
        grid-template-columns: 76px 1fr;
      }

      .dish-img {
        width: 76px;
        height: 82px;
      }

      .price {
        font-size: 13px;
      }
    }
  
    .split-file .system-tabs { display: none; }
    .split-file.only-mini .admin-shell,
    .split-file.only-mini .cashier-system { display: none !important; }
    .split-file.only-admin .mini-program,
    .split-file.only-admin .cashier-system { display: none !important; }
    .split-file.only-cashier .mini-program,
    .split-file.only-cashier .admin-shell { display: none !important; }
    .split-file.only-mini { max-width: 520px; padding: 18px 0 28px; }
    .split-file.only-admin,
    .split-file.only-cashier { max-width: 1440px; padding-top: 0; }
  </style>
</head>
<body>
  <main class="page only-mini split-file" id="page">
    <header class="topbar">
      <div class="brand-mark">
        <div class="logo"><i data-lucide="utensils"></i></div>
        <div>
          <h1 class="brand-title">多品牌餐饮点餐系统原型</h1>
          <div class="brand-subtitle">扫码点餐、会员、券包、折扣、促销、门店经营后台</div>
        </div>
      </div>
      <div class="top-actions">
        <button class="ghost-button" id="resetDemo"><i data-lucide="rotate-ccw"></i>重置</button>
        <button class="pill-button" id="openCheckout"><i data-lucide="scan-line"></i>扫码点餐</button>
      </div>
    </header>

    <section class="workspace">
      <div class="phone-shell">
        <div class="phone" aria-label="用户小程序端原型">
          <div class="phone-screen">
            <header class="mini-header">
              <div class="mini-status">
                <span>18:08</span>
                <span>5G  92%</span>
              </div>
              <div class="mini-location">
                <div class="header-title-row">
                  <button class="icon-button mini-header-back hidden" id="miniHeaderBack" data-back-mini-page title="返回上级" aria-label="返回上级">‹</button>
                  <div class="store-title">
                    <i data-lucide="map-pin" color="#0f8b7a"></i>
                    <h2 id="miniStore">悦味小馆 · 静安店</h2>
                  </div>
                </div>
                <button class="table-badge" id="tableBadge"><i data-lucide="qr-code"></i>A12 桌</button>
              </div>
            </header>

            <section class="mini-content">
              <div data-view="mini-home" class="active">
                <div class="hero-strip">
                  <h3>今日堂食套餐</h3>
                  <p>会员满 88 减 12，可叠加指定饮品第二杯半价</p>
                </div>
                <div class="quick-row">
                  <button class="quick-action" data-scan-order><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7V5a1 1 0 0 1 1-1h2"/><path d="M17 4h2a1 1 0 0 1 1 1v2"/><path d="M20 17v2a1 1 0 0 1-1 1h-2"/><path d="M7 20H5a1 1 0 0 1-1-1v-2"/><path d="M7 12h10"/></svg>扫码点餐</button>
                  <button class="quick-action" data-mini-tab="order"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 8h10"/><path d="M8.5 5.5h7L18 9l-1.6 7.5H7.6L6 9l2.5-3.5Z"/><path d="M9 18.5h6"/><path d="M10 12h4"/></svg>浏览菜单</button>
                  <button class="quick-action" data-mini-tab="profile"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/><path d="M5 20a7 7 0 0 1 14 0"/></svg>我的权益</button>
                  <button class="quick-action" data-mini-tab="history"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h10v16l-2-1.2-2 1.2-2-1.2-2 1.2-2-1.2V4Z"/><path d="M9.5 8h5"/><path d="M9.5 12h5"/><path d="M9.5 16h3"/></svg>历史订单</button>
                </div>
                <div class="section-head">
                  <h3>为你推荐</h3>
                  <button class="link-text" data-mini-tab="order">查看更多</button>
                </div>
                <div class="promotion-list">
                  <article class="promotion-card" data-mini-detail="dish" data-dish-id="beef" data-title="藤椒牛肉饭" data-subtitle="藤椒风味牛肉配溏心蛋，午市会员 9 折。" data-price="¥42.00" data-tag="新品" data-img="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=320&q=80">
                    <div>
                      <span class="tag">新品</span>
                      <h3>藤椒牛肉饭</h3>
                      <p class="dish-desc">工作日午市 11:00-14:00 限时 9 折，会员积分翻倍。</p>
                      <button class="ghost-button"><i data-lucide="plus"></i>加入点餐</button>
                    </div>
                    <img class="promo-art" src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=300&q=80" alt="藤椒牛肉饭" />
                  </article>
                  <article class="promotion-card" data-mini-detail="dish" data-dish-id="set4" data-title="四人欢聚套餐" data-subtitle="含 2 道主菜、3 道热炒、2 份小食和 4 杯饮品。" data-price="¥298.00" data-tag="套餐" data-img="https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=320&q=80">
                    <div>
                      <span class="tag">多人餐</span>
                      <h3>四人欢聚套餐</h3>
                      <p class="dish-desc">含主菜、热炒、小食和饮品，扫码下单自动享优惠价。</p>
                      <button class="ghost-button"><i data-lucide="plus"></i>加入点餐</button>
                    </div>
                    <img class="promo-art" src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=300&q=80" alt="四人套餐" />
                  </article>
                </div>
              </div>

              <div data-view="mini-order">
                <div class="mini-grid">
                  <nav class="category-list" aria-label="菜品分类">
                    <button class="active" data-cat="hot">热销</button>
                    <button data-cat="set">套餐</button>
                    <button data-cat="main">主食</button>
                    <button data-cat="drink">饮品</button>
                    <button data-cat="snack">小食</button>
                  </nav>
                  <div class="dish-list" id="dishList"></div>
                </div>
              </div>

              <div data-view="mini-profile">
                <div class="profile-page">
                  <div class="member-card profile-hero" data-mini-detail="profile-info" data-title="张女士" data-subtitle="138****2098 · 悦味小馆常客">
                    <div class="profile-head">
                      <div class="profile-avatar">张</div>
                      <div>
                        <h3>张女士</h3>
                        <p>138****2098 · 悦味小馆常客</p>
                        <div class="profile-meta">
                          <span>当前 A12 桌</span>
                          <span>铂金会员</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="profile-summary">
                    <div class="profile-summary-head">
                      <div>
                        <h3>铂金会员 Lv.4</h3>
                        <p>本月再消费 126 元升级，生日月享双倍积分。</p>
                      </div>
                      <span class="profile-tier">8.8 折</span>
                    </div>
                    <div class="profile-benefit-grid">
                      <div class="profile-benefit"><b>2,860</b><span>可用积分</span></div>
                      <div class="profile-benefit"><b>6 张</b><span>可用券</span></div>
                      <div class="profile-benefit"><b>¥126</b><span>距升级</span></div>
                    </div>
                  </div>
                  <div class="section-head">
                    <h3>会员权益</h3>
                    <span>跨品牌通用</span>
                  </div>
                  <div class="promotion-list">
                    <article class="track-item" data-mini-detail="member-benefit" data-benefit="newcomer" data-title="新人入会礼" data-subtitle="注册即领 20 元代金券和指定小食兑换券。">
                      <div class="track-icon"><i data-lucide="gift"></i></div>
                      <div><h4>新人入会礼</h4><p>注册即领 20 元代金券和指定小食兑换券。</p></div>
                    </article>
                    <article class="track-item" data-mini-detail="member-benefit" data-benefit="points" data-title="积分抵现" data-subtitle="100 积分抵 1 元，结算时自动展示最优抵扣。">
                      <div class="track-icon"><i data-lucide="coins"></i></div>
                      <div><h4>积分抵现</h4><p>100 积分抵 1 元，结算时自动展示最优抵扣。</p></div>
                    </article>
                    <article class="track-item" data-mini-detail="member-benefit" data-benefit="birthday" data-title="生日专享" data-subtitle="生日月全品牌门店消费享 7.8 折。">
                      <div class="track-icon"><i data-lucide="cake-slice"></i></div>
                      <div><h4>生日专享</h4><p>生日月全品牌门店消费享 7.8 折。</p></div>
                    </article>
                  </div>
                  <div class="section-head">
                    <h3>我的券包</h3>
                    <span>自动匹配最优券</span>
                  </div>
                  <div class="promotion-list">
                    <article class="coupon-card" data-mini-detail="coupon-detail" data-coupon="cash" data-title="满 99 元可用代金券" data-subtitle="堂食、扫码点餐可用。有效期至 2026-07-31。">
                      <div class="coupon-value">¥20</div>
                      <div class="coupon-body">
                        <strong>满 99 元可用代金券</strong>
                        <p>堂食、扫码点餐可用。有效期至 2026-07-31。</p>
                      </div>
                    </article>
                    <article class="coupon-card" data-mini-detail="coupon-detail" data-coupon="discount" data-title="指定品牌会员折扣券" data-subtitle="适用于悦味小馆、锅里香旗下门店，不与套餐同享。">
                      <div class="coupon-value">8.5折</div>
                      <div class="coupon-body">
                        <strong>指定品牌会员折扣券</strong>
                        <p>适用于悦味小馆、锅里香旗下门店，不与套餐同享。</p>
                      </div>
                    </article>
                    <article class="coupon-card" data-mini-detail="coupon-detail" data-coupon="exchange" data-title="酸梅汤兑换券" data-subtitle="任意消费可兑换，单桌限用 1 张。">
                      <div class="coupon-value">换</div>
                      <div class="coupon-body">
                        <strong>酸梅汤兑换券</strong>
                        <p>任意消费可兑换，单桌限用 1 张。</p>
                      </div>
                    </article>
                  </div>
                </div>
              </div>

              <div data-view="mini-promos">
                <div class="section-head" style="margin-top:0">
                  <h3>促销活动</h3>
                  <span>门店实时生效</span>
                </div>
                <div class="promotion-list">
                  <article class="promotion-card">
                    <div>
                      <span class="tag">满减</span>
                      <h3>堂食满 168 减 30</h3>
                      <p class="dish-desc">适用于全部正价菜品，会员折扣后再判断门槛。</p>
                    </div>
                    <img class="promo-art" src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=300&q=80" alt="促销菜品" />
                  </article>
                  <article class="promotion-card">
                    <div>
                      <span class="tag">加价购</span>
                      <h3>主食加 9.9 元换购饮品</h3>
                      <p class="dish-desc">选购任意主食后，结算页自动出现换购入口。</p>
                    </div>
                    <img class="promo-art" src="https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?auto=format&fit=crop&w=300&q=80" alt="饮品" />
                  </article>
                  <article class="promotion-card">
                    <div>
                      <span class="tag">拼桌</span>
                      <h3>多人同桌下单积分翻倍</h3>
                      <p class="dish-desc">扫码加入同一桌号，订单合并后统一结账。</p>
                    </div>
                    <img class="promo-art" src="https://images.unsplash.com/photo-1551218808-94e220e084d2?auto=format&fit=crop&w=300&q=80" alt="多人就餐" />
                  </article>
                </div>
              </div>

              <div data-view="mini-scan-people">
                <div class="scan-people-page">
                  <div class="scan-success-card">
                    <div class="scan-success-head">
                      <div class="scan-success-icon"><i data-lucide="scan-line"></i></div>
                      <div>
                        <h3>扫码成功</h3>
                        <p>已识别当前门店和桌台，请选择本次用餐人数。</p>
                      </div>
                    </div>
                    <div class="scan-table-info">
                      <div class="detail-line"><span>门店</span><strong id="scanPeopleStore">悦味小馆 · 静安店</strong></div>
                      <div class="detail-line"><span>桌台</span><strong id="scanPeopleTable">A12 桌</strong></div>
                      <div class="detail-line"><span>点餐模式</span><strong>堂食扫码点餐</strong></div>
                    </div>
                  </div>
                  <div class="section-head" style="margin:0">
                    <h3>选择人数</h3>
                    <span id="scanPeopleTip">已选 2 人</span>
                  </div>
                  <div class="people-options">
                    <button class="people-option" data-diners="1">1 人</button>
                    <button class="people-option active" data-diners="2">2 人</button>
                    <button class="people-option" data-diners="3">3 人</button>
                    <button class="people-option" data-diners="4">4 人</button>
                    <button class="people-option" data-diners="5">5 人</button>
                    <button class="people-option" data-diners="6">6 人</button>
                    <button class="people-option" data-diners="8">8 人</button>
                    <button class="people-option" data-diners="10">10 人</button>
                  </div>
                  <div class="scan-people-actions">
                    <button class="ghost-button" data-mini-tab="home"><i data-lucide="arrow-left"></i>返回首页</button>
                    <button class="primary-button" id="startScanOrder"><i data-lucide="utensils-crossed"></i>开始点餐</button>
                  </div>
                </div>
              </div>

              <div data-view="mini-status">
                <div class="order-progress-page">
                  <section class="order-progress-hero">
                    <div class="order-progress-top">
                      <div>
                        <h3>制作中</h3>
                        <p>订单 #A1208 · 悦味小馆 · 静安店 · A12 桌</p>
                      </div>
                      <span class="order-progress-pill">预计 18 分钟</span>
                    </div>
                    <div class="order-progress-stats">
                      <div class="order-progress-stat"><b>5 件</b><span>本单菜品</span></div>
                      <div class="order-progress-stat"><b>¥114.60</b><span>已微信支付</span></div>
                      <div class="order-progress-stat"><b>4 人</b><span>堂食用餐</span></div>
                    </div>
                  </section>

                  <section class="order-status-card">
                    <h4>订单进度</h4>
                    <div class="order-timeline">
                      <div class="order-step done">
                        <div class="order-step-dot">✓</div>
                        <div><strong>已提交订单</strong><span>会员折扣、满减券和积分抵扣已自动计算。</span></div>
                        <time>18:08</time>
                      </div>
                      <div class="order-step done">
                        <div class="order-step-dot">✓</div>
                        <div><strong>门店已接单</strong><span>前台已确认 A12 桌订单，后厨开始分单制作。</span></div>
                        <time>18:09</time>
                      </div>
                      <div class="order-step current">
                        <div class="order-step-dot">3</div>
                        <div><strong>后厨制作中</strong><span>热菜档、主食档和饮品档正在同步处理。</span></div>
                        <time>进行中</time>
                      </div>
                      <div class="order-step">
                        <div class="order-step-dot">4</div>
                        <div><strong>待上菜</strong><span>完成菜品将由服务员送至桌台。</span></div>
                        <time>待完成</time>
                      </div>
                    </div>
                  </section>

                  <section class="order-status-card">
                    <h4>菜品状态</h4>
                    <div class="dish-status-list">
                      <div class="dish-status-row"><div><strong>招牌酸菜鱼</strong><span>热菜档 · 预计 12 分钟</span></div><span class="status warn">制作中</span></div>
                      <div class="dish-status-row"><div><strong>藤椒牛肉饭</strong><span>主食档 · 正在出餐</span></div><span class="status blue">待上菜</span></div>
                      <div class="dish-status-row"><div><strong>手作酸梅汤 x2</strong><span>饮品档 · 已完成</span></div><span class="status ok">可上桌</span></div>
                      <div class="dish-status-row"><div><strong>椒盐小酥肉</strong><span>小食档 · 已排队</span></div><span class="status">待制作</span></div>
                    </div>
                  </section>

                  <section class="order-status-card">
                    <h4>上菜信息</h4>
                    <div class="detail-line"><span>服务员</span><strong>李然 · 大厅 A 区</strong></div>
                    <div class="detail-line"><span>桌台</span><strong>A12 桌 · 4 人</strong></div>
                    <div class="detail-line"><span>备注</span><strong>少辣，酸梅汤少冰</strong></div>
                    <div class="detail-line"><span>发票</span><strong>支付完成后可在历史订单申请</strong></div>
                  </section>
                </div>
              </div>

              <div data-view="mini-history">
                <div class="section-head" style="margin-top:0">
                  <h3>历史订单</h3>
                  <span>近 90 天订单</span>
                </div>
                <div class="history-list">
                  <article class="history-card" data-mini-detail="history" data-title="订单 #A1208" data-subtitle="悦味小馆 · 静安店 · A12 桌" data-price="¥114.60">
                    <div class="history-top">
                      <strong>悦味小馆 · 静安店</strong>
                      <span class="status warn">制作中</span>
                    </div>
                    <div class="history-meta">2026-07-14 18:08 · 堂食 A12 桌 · 微信支付</div>
                    <div class="history-dishes">招牌酸菜鱼、藤椒牛肉饭、手作酸梅汤 x2</div>
                    <div class="history-bottom">
                      <span class="history-price">¥114.60</span>
                      <button class="ghost-button" data-mini-tab="status"><i data-lucide="receipt-text"></i>查看进度</button>
                    </div>
                  </article>
                  <article class="history-card" data-mini-detail="history" data-title="订单 #Q3302" data-subtitle="青禾轻食 · 陆家嘴店 · 18 桌" data-price="¥56.00">
                    <div class="history-top">
                      <strong>青禾轻食 · 陆家嘴店</strong>
                      <span class="status ok">已完成</span>
                    </div>
                    <div class="history-meta">2026-07-12 12:24 · 堂食 18 桌 · 代金券抵扣 ¥20</div>
                    <div class="history-dishes">青禾鸡胸沙拉、茉莉冷泡茶</div>
                    <div class="history-bottom">
                      <span class="history-price">¥56.00</span>
                      <button class="ghost-button" data-mini-tab="order"><i data-lucide="refresh-cw"></i>再来一单</button>
                    </div>
                  </article>
                  <article class="history-card" data-mini-detail="history" data-title="订单 #B0916" data-subtitle="锅里香 · 徐汇店 · B06 桌" data-price="¥165.44">
                    <div class="history-top">
                      <strong>锅里香 · 徐汇店</strong>
                      <span class="status blue">已开票</span>
                    </div>
                    <div class="history-meta">2026-07-08 19:36 · 堂食 B06 桌 · 会员 8.8 折</div>
                    <div class="history-dishes">双人火锅套餐、椒盐小酥肉、酸梅汤</div>
                    <div class="history-bottom">
                      <span class="history-price">¥165.44</span>
                      <button class="ghost-button" data-mini-detail="invoice" data-title="发票 #B0916" data-subtitle="电子发票已发送"><i data-lucide="file-text"></i>查看发票</button>
                    </div>
                  </article>
                </div>
              </div>

              <div data-view="mini-checkout">
                <div class="checkout-page-head">
                  <button class="icon-button" id="backToOrder" title="返回点餐"><i data-lucide="arrow-left"></i></button>
                  <h3>确认订单</h3>
                  <button class="icon-button" data-mini-tab="profile" title="选择优惠券"><i data-lucide="ticket-percent"></i></button>
                </div>
                <div class="checkout-card">
                  <div class="checkout-list" id="checkoutList"></div>
                  <div class="checkout-actions">
                    <button class="ghost-button" id="continueOrder"><i data-lucide="plus"></i>继续加菜</button>
                    <button class="danger-button" id="payOrder"><i data-lucide="wallet"></i>微信支付</button>
                  </div>
                </div>
                <div class="checkout-tip">已自动匹配会员折扣、代金券和积分抵扣。后台可配置优惠优先级、叠加规则和门店适用范围。</div>
              </div>

              <div data-view="mini-secondary">
                <div class="detail-view">
                  <div class="detail-card">
                    <h4 id="miniDetailSection">详情信息</h4>
                    <div class="detail-list" id="miniDetailList"></div>
                  </div>
                  <div class="detail-card" id="miniDetailActions">
                    <h4>操作</h4>
                    <div class="detail-actions">
                      <button class="ghost-button" data-back-mini-detail><i data-lucide="arrow-left"></i>返回</button>
                      <button class="primary-button" id="miniDetailPrimary"><i data-lucide="check"></i>确认</button>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <div class="cart-bar" id="cartBar">
              <div>
                <div class="cart-price" id="cartPrice">¥0.00</div>
                <small id="cartDesc">未选择菜品</small>
              </div>
              <button class="primary-button" id="checkoutBtn"><i data-lucide="wallet-cards"></i>结算</button>
            </div>

            <nav class="mini-tabbar" aria-label="小程序底部导航">
              <button class="active" data-mini-tab="home"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11.5 12 5l8 6.5"/><path d="M6.5 10.5V20h11v-9.5"/><path d="M10 20v-5h4v5"/></svg>首页</button>
              <button data-mini-tab="order"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 8h10"/><path d="M8.5 5.5h7L18 9l-1.6 7.5H7.6L6 9l2.5-3.5Z"/><path d="M9 18.5h6"/><path d="M10 12h4"/></svg>点餐</button>
              <button data-mini-tab="history"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h10v16l-2-1.2-2 1.2-2-1.2-2 1.2-2-1.2V4Z"/><path d="M9.5 8h5"/><path d="M9.5 12h5"/><path d="M9.5 16h3"/></svg>订单</button>
              <button data-mini-tab="profile"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/><path d="M5 20a7 7 0 0 1 14 0"/></svg>我的</button>
            </nav>
          </div>
        </div>
      </div>

      <section class="admin-shell" aria-label="后台管理系统原型">
        <aside class="sidebar">
          <div class="side-head">
            <div class="tenant">
              <div class="tenant-badge">餐</div>
              <div>
                <strong>餐饮集团后台</strong>
                <span>多品牌 · 多门店</span>
              </div>
            </div>
          </div>
          <nav class="side-nav" aria-label="后台导航">
            <button class="active" data-admin-tab="dashboard"><i data-lucide="layout-dashboard"></i>经营看板 <small>12</small></button>
            <button data-admin-tab="brands"><i data-lucide="store"></i>品牌门店 <small>4</small></button>
            <button data-admin-tab="menu"><i data-lucide="book-open"></i>菜品菜单 <small>86</small></button>
            <button data-admin-tab="orders"><i data-lucide="receipt"></i>订单中心 <small>28</small></button>
            <button data-admin-tab="members"><i data-lucide="users"></i>会员管理 <small>9k</small></button>
            <button data-admin-tab="coupons"><i data-lucide="ticket-percent"></i>券与折扣 <small>18</small></button>
            <button data-admin-tab="promos"><i data-lucide="badge-percent"></i>促销活动 <small>7</small></button>
            <button data-admin-tab="reports"><i data-lucide="chart-no-axes-combined"></i>数据报表 <small></small></button>
            <button data-admin-tab="miniapp-settings"><i data-lucide="smartphone"></i>小程序配置 <small></small></button>
            <button data-admin-tab="role-settings"><i data-lucide="shield-check"></i>权限角色 <small></small></button>
          </nav>
          <div class="side-foot">
            <select class="store-select" id="storeSelect" aria-label="选择门店">
              <option>全部品牌与门店</option>
              <option>悦味小馆 · 静安店</option>
              <option>锅里香 · 徐汇店</option>
              <option>青禾轻食 · 陆家嘴店</option>
            </select>
            <button class="primary-button" data-open-promo-create><i data-lucide="plus"></i>新建活动</button>
          </div>
        </aside>

        <div class="admin-main">
          <header class="admin-top">
            <div class="header-title-row">
              <div class="admin-title">
                <h2 id="adminTitle">经营看板</h2>
                <p id="adminSubtitle">今日堂食、扫码点餐、会员营销与门店履约概览</p>
              </div>
            </div>
            <div class="top-actions">
              <label class="searchbox">
                <i data-lucide="search"></i>
                <input id="adminSearch" placeholder="搜索订单、会员、门店、配置、角色" />
              </label>
              <button class="icon-button" title="消息"><i data-lucide="bell"></i></button>
            </div>
          </header>

          <section class="admin-content">
            <div data-admin-view="dashboard" class="active">
              <div class="metric-grid">
                <article class="metric" data-admin-static="true">
                  <div class="metric-head"><span>今日营业额</span><span class="metric-icon"><i data-lucide="wallet"></i></span></div>
                  <div><b>¥86,420</b><span class="delta">较昨日 +12.4%</span></div>
                </article>
                <article class="metric" data-admin-static="true">
                  <div class="metric-head"><span>扫码点餐订单</span><span class="metric-icon"><i data-lucide="qr-code"></i></span></div>
                  <div><b>1,268</b><span class="delta">堂食占比 78%</span></div>
                </article>
                <article class="metric" data-admin-static="true">
                  <div class="metric-head"><span>会员消费占比</span><span class="metric-icon"><i data-lucide="crown"></i></span></div>
                  <div><b>64.8%</b><span class="delta">新增会员 186</span></div>
                </article>
                <article class="metric" data-admin-static="true">
                  <div class="metric-head"><span>券核销率</span><span class="metric-icon"><i data-lucide="ticket-check"></i></span></div>
                  <div><b>31.6%</b><span class="delta">带动 GMV ¥18,920</span></div>
                </article>
              </div>
              <div class="admin-grid" style="grid-template-columns:1fr">
                <article class="admin-card">
                  <div class="card-head">
                    <h3>近 12 小时订单趋势</h3>
                    <div class="segmented">
                      <button class="active">营业额</button>
                      <button>订单</button>
                      <button>会员</button>
                    </div>
                  </div>
                  <div class="chart">
                    <div class="bar" style="height:34%"><span>8</span></div>
                    <div class="bar" style="height:42%"><span>9</span></div>
                    <div class="bar" style="height:58%"><span>10</span></div>
                    <div class="bar" style="height:62%"><span>11</span></div>
                    <div class="bar" style="height:88%"><span>12</span></div>
                    <div class="bar" style="height:79%"><span>13</span></div>
                    <div class="bar" style="height:44%"><span>14</span></div>
                    <div class="bar" style="height:52%"><span>15</span></div>
                    <div class="bar" style="height:48%"><span>16</span></div>
                    <div class="bar" style="height:66%"><span>17</span></div>
                    <div class="bar" style="height:94%"><span>18</span></div>
                    <div class="bar" style="height:82%"><span>19</span></div>
                  </div>
                </article>
              </div>
              <div class="dashboard-split">
                <div class="dashboard-split-item"><b>78%</b><span>扫码点餐占比<br>较昨日 +4.6%</span></div>
                <div class="dashboard-split-item"><b>¥68.2</b><span>堂食客单价<br>会员客单 ¥82.3</span></div>
                <div class="dashboard-split-item"><b>22 分钟</b><span>平均履约时长<br>超时订单 18 笔</span></div>
              </div>
              <div class="dashboard-data-grid">
                <article class="admin-card">
                  <div class="card-head">
                    <h3>品牌营收排行</h3>
                    <span class="status ok">实时</span>
                  </div>
                  <div class="dashboard-card-body">
                    <div class="dashboard-row">
                      <div><strong>悦味小馆</strong><span>12 家门店 · 订单 586 笔 · 客单 ¥82.3</span><div class="dashboard-progress"><i style="width:92%"></i></div></div>
                      <b>¥42,682</b>
                    </div>
                    <div class="dashboard-row">
                      <div><strong>锅里香</strong><span>8 家门店 · 订单 286 笔 · 客单 ¥113.5</span><div class="dashboard-progress"><i style="width:74%"></i></div></div>
                      <b>¥31,848</b>
                    </div>
                    <div class="dashboard-row">
                      <div><strong>青禾轻食</strong><span>4 家门店 · 订单 310 笔 · 客单 ¥47.3</span><div class="dashboard-progress"><i style="width:46%"></i></div></div>
                      <b>¥14,692</b>
                    </div>
                    <div class="dashboard-row">
                      <div><strong>面里有光</strong><span>2 家门店 · 订单 86 笔 · 客单 ¥38.6</span><div class="dashboard-progress"><i style="width:28%"></i></div></div>
                      <b>¥3,198</b>
                    </div>
                  </div>
                </article>
                <article class="admin-card">
                  <div class="card-head">
                    <h3>订单渠道结构</h3>
                    <span class="status blue">今日</span>
                  </div>
                  <div class="dashboard-card-body">
                    <div class="dashboard-row">
                      <div><strong>小程序扫码点餐</strong><span>桌台扫码、多人同桌加菜、线上支付</span><div class="dashboard-progress"><i style="width:78%"></i></div></div>
                      <b>1,268 单</b>
                    </div>
                    <div class="dashboard-row">
                      <div><strong>门店收银点单</strong><span>前台代客下单、加菜、现金/储值卡支付</span><div class="dashboard-progress"><i style="width:34%"></i></div></div>
                      <b>426 单</b>
                    </div>
                    <div class="dashboard-row">
                      <div><strong>会员券包核销</strong><span>代金券 218 张 · 折扣券 146 张 · 兑换券 88 张</span><div class="dashboard-progress"><i style="width:31%"></i></div></div>
                      <b>452 次</b>
                    </div>
                    <div class="dashboard-row">
                      <div><strong>发票申请</strong><span>电子发票 62 张 · 待处理 5 张 · 异常 1 张</span><div class="dashboard-progress"><i style="width:18%"></i></div></div>
                      <b>68 张</b>
                    </div>
                  </div>
                </article>
                <article class="admin-card">
                  <div class="card-head">
                    <h3>热销菜品排行</h3>
                    <span class="status hot">晚市</span>
                  </div>
                  <div class="table-wrap">
                    <table>
                      <thead><tr><th>菜品</th><th>品牌</th><th>销量</th><th>营收</th><th>库存</th></tr></thead>
                      <tbody>
                        <tr data-admin-static="true"><td>招牌酸菜鱼</td><td>悦味小馆</td><td>186</td><td>¥23,808</td><td><span class="status ok">充足</span></td></tr>
                        <tr data-admin-static="true"><td>双人火锅套餐</td><td>锅里香</td><td>96</td><td>¥18,048</td><td><span class="status warn">偏低</span></td></tr>
                        <tr data-admin-static="true"><td>藤椒牛肉饭</td><td>悦味小馆</td><td>142</td><td>¥5,964</td><td><span class="status ok">充足</span></td></tr>
                        <tr data-admin-static="true"><td>手作酸梅汤</td><td>多品牌</td><td>318</td><td>¥5,088</td><td><span class="status blue">补货中</span></td></tr>
                      </tbody>
                    </table>
                  </div>
                </article>
                <article class="admin-card">
                  <div class="card-head">
                    <h3>会员与券转化</h3>
                    <span class="status warn">运营</span>
                  </div>
                  <div class="dashboard-card-body">
                    <div class="dashboard-row">
                      <div><strong>入会访问 → 注册会员</strong><span>访问 1,920 人，新增会员 186 人，转化率 9.7%</span><div class="dashboard-progress"><i style="width:49%"></i></div></div>
                      <b>186 人</b>
                    </div>
                    <div class="dashboard-row">
                      <div><strong>领券 → 下单核销</strong><span>发券 1,430 张，核销 452 张，带动 GMV ¥18,920</span><div class="dashboard-progress"><i style="width:64%"></i></div></div>
                      <b>31.6%</b>
                    </div>
                    <div class="dashboard-row">
                      <div><strong>会员复购</strong><span>近 30 日复购 42.7%，铂金会员贡献营收 31%</span><div class="dashboard-progress"><i style="width:72%"></i></div></div>
                      <b>42.7%</b>
                    </div>
                    <div class="dashboard-row">
                      <div><strong>沉睡会员召回</strong><span>触达 2,600 人，回流 318 人，建议继续发放晚市券</span><div class="dashboard-progress"><i style="width:38%"></i></div></div>
                      <b>318 人</b>
                    </div>
                  </div>
                </article>
              </div>
            </div>

            <div data-admin-view="brands">
              <div class="metric-grid">
                <article class="metric" data-admin-static="true">
                  <div class="metric-head"><span>品牌总数</span><span class="metric-icon"><i data-lucide="badge-check"></i></span></div>
                  <div><b>5</b><span class="delta">覆盖 3 个品类</span></div>
                </article>
                <article class="metric" data-admin-static="true">
                  <div class="metric-head"><span>门店总数</span><span class="metric-icon"><i data-lucide="store"></i></span></div>
                  <div><b>26</b><span class="delta">直营 18 / 加盟 8</span></div>
                </article>
                <article class="metric" data-admin-static="true">
                  <div class="metric-head"><span>营业中门店</span><span class="metric-icon"><i data-lucide="door-open"></i></span></div>
                  <div><b>22</b><span class="delta">装修 3 / 试运营 1</span></div>
                </article>
                <article class="metric" data-admin-static="true">
                  <div class="metric-head"><span>今日品牌营收</span><span class="metric-icon"><i data-lucide="chart-column"></i></span></div>
                  <div><b>¥115,246</b><span class="delta">较昨日 +8.6%</span></div>
                </article>
              </div>
              <div class="admin-grid" style="grid-template-columns:1fr">
                <article class="admin-card">
                  <div class="card-head">
                    <h3>品牌列表</h3>
                    <div class="top-actions">
                      <button class="ghost-button"><i data-lucide="upload"></i>导入品牌</button>
                      <button class="primary-button" data-open-brand-create><i data-lucide="plus"></i>新增品牌</button>
                    </div>
                  </div>
                  <div class="table-wrap">
                    <table>
                      <thead>
                        <tr><th>品牌</th><th>品牌编码</th><th>类型</th><th>门店</th><th>负责人</th><th>客单价</th><th>今日门店总营收</th><th>状态</th><th>操作</th></tr>
                      </thead>
                      <tbody id="brandTableRows">
                        <tr>
                          <td><div class="brand-left"><img class="brand-logo" src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&w=160&q=80" alt="悦味小馆" /><div><strong>悦味小馆</strong><span>中式融合菜 · 堂食为主</span></div></div></td>
                          <td>YW-001</td><td>正餐</td><td>8 家</td><td>林晓</td><td>¥86</td><td>¥42,860</td><td><span class="status ok">营业中</span></td><td><button class="ghost-button">管理</button><button class="ghost-button" data-brand-stores="悦味小馆" data-store-count="8">门店</button></td>
                        </tr>
                        <tr>
                          <td><div class="brand-left"><img class="brand-logo" src="https://images.unsplash.com/photo-1529042410759-befb1204b468?auto=format&fit=crop&w=160&q=80" alt="锅里香" /><div><strong>锅里香</strong><span>火锅烧烤 · 包间较多</span></div></div></td>
                          <td>GLX-002</td><td>火锅</td><td>5 家</td><td>周启明</td><td>¥112</td><td>¥31,480</td><td><span class="status ok">营业中</span></td><td><button class="ghost-button">管理</button><button class="ghost-button" data-brand-stores="锅里香" data-store-count="5">门店</button></td>
                        </tr>
                        <tr>
                          <td><div class="brand-left"><img class="brand-logo" src="https://images.unsplash.com/photo-1543353071-10c8ba85a904?auto=format&fit=crop&w=160&q=80" alt="青禾轻食" /><div><strong>青禾轻食</strong><span>轻食沙拉 · 午市高峰</span></div></div></td>
                          <td>QH-003</td><td>轻食</td><td>3 家</td><td>陈禾</td><td>¥48</td><td>¥12,920</td><td><span class="status warn">部分装修</span></td><td><button class="ghost-button">管理</button><button class="ghost-button" data-brand-stores="青禾轻食" data-store-count="3">门店</button></td>
                        </tr>
                        <tr>
                          <td><div class="brand-left"><img class="brand-logo" src="https://images.unsplash.com/photo-1498654896293-37aacf113fd9?auto=format&fit=crop&w=160&q=80" alt="面里有光" /><div><strong>面里有光</strong><span>快餐面馆 · 外带自取</span></div></div></td>
                          <td>ML-004</td><td>快餐</td><td>6 家</td><td>王可</td><td>¥36</td><td>¥18,306</td><td><span class="status blue">试运营</span></td><td><button class="ghost-button">管理</button><button class="ghost-button" data-brand-stores="面里有光" data-store-count="6">门店</button></td>
                        </tr>
                        <tr>
                          <td><div class="brand-left"><img class="brand-logo" src="https://images.unsplash.com/photo-1551024506-0bccd828d307?auto=format&fit=crop&w=160&q=80" alt="甜作所" /><div><strong>甜作所</strong><span>甜品饮品 · 商场店</span></div></div></td>
                          <td>TZS-005</td><td>饮品甜品</td><td>4 家</td><td>许安</td><td>¥29</td><td>¥9,680</td><td><span class="status hot">暂停招商</span></td><td><button class="ghost-button">管理</button><button class="ghost-button" data-brand-stores="甜作所" data-store-count="4">门店</button></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </article>
              </div>
            </div>

            <div data-admin-view="menu">
              <article class="admin-card">
                <div class="card-head">
                  <h3>菜品菜单</h3>
                  <div class="top-actions">
                    <button class="ghost-button"><i data-lucide="upload"></i>批量导入</button>
                    <button class="primary-button" data-open-dish-create><i data-lucide="plus"></i>新增菜品</button>
                  </div>
                </div>
                <div class="table-wrap">
                  <table>
                    <thead><tr><th>菜品</th><th>品牌</th><th>分类</th><th>价格</th><th>库存</th><th>促销</th><th>状态</th></tr></thead>
                    <tbody id="menuRows"></tbody>
                  </table>
                </div>
              </article>
            </div>

            <div data-admin-view="orders">
              <article class="admin-card">
                <div class="card-head">
                  <h3>订单中心</h3>
                  <div class="segmented">
                    <button class="active">进行中</button>
                    <button>已支付</button>
                    <button>退款</button>
                  </div>
                </div>
                <div class="table-wrap">
                  <table>
                    <thead><tr><th>订单号</th><th>品牌</th><th>门店/桌台</th><th>菜品</th><th>金额</th><th>优惠</th><th>进度</th><th>操作</th></tr></thead>
                    <tbody>
                      <tr data-order-id="A1208"><td>#A1208</td><td>悦味小馆</td><td>静安店 A12</td><td>酸菜鱼等 5 件</td><td>¥218.00</td><td>满减 ¥30</td><td><span class="status warn">制作中</span></td><td><button class="ghost-button">催单</button></td></tr>
                      <tr data-order-id="B0916"><td>#B0916</td><td>锅里香</td><td>徐汇店 B06</td><td>双人火锅套餐</td><td>¥188.00</td><td>会员 8.8 折</td><td><span class="status blue">待支付</span></td><td><button class="ghost-button">锁桌</button></td></tr>
                      <tr data-order-id="Q3302"><td>#Q3302</td><td>青禾轻食</td><td>陆家嘴店 18</td><td>轻食沙拉等 3 件</td><td>¥76.00</td><td>代金券 ¥20</td><td><span class="status ok">已上齐</span></td><td><button class="ghost-button">开票</button></td></tr>
                      <tr data-order-id="A1210"><td>#A1210</td><td>悦味小馆</td><td>静安店 A03</td><td>商务午餐 2 份</td><td>¥96.00</td><td>无</td><td><span class="status hot">待接单</span></td><td><button class="primary-button">接单</button></td></tr>
                    </tbody>
                  </table>
                </div>
              </article>
            </div>

            <div data-admin-view="members">
              <div class="metric-grid">
                <article class="metric" data-admin-static="true"><div class="metric-head"><span>会员总数</span><span class="metric-icon"><i data-lucide="users"></i></span></div><div><b>92,481</b><span class="delta">今日新增 186</span></div></article>
                <article class="metric" data-admin-static="true"><div class="metric-head"><span>复购率</span><span class="metric-icon"><i data-lucide="repeat-2"></i></span></div><div><b>42.7%</b><span class="delta">近 30 日 +3.1%</span></div></article>
                <article class="metric" data-admin-static="true"><div class="metric-head"><span>积分余额</span><span class="metric-icon"><i data-lucide="coins"></i></span></div><div><b>18.6M</b><span class="delta">可抵扣 ¥186k</span></div></article>
                <article class="metric" data-admin-static="true"><div class="metric-head"><span>沉睡会员</span><span class="metric-icon"><i data-lucide="moon"></i></span></div><div><b>8,204</b><span class="delta">待召回</span></div></article>
              </div>
              <div class="admin-grid" style="grid-template-columns:1fr">
                <article class="admin-card">
                  <div class="card-head">
                    <h3>会员分层</h3>
                    <div class="detail-actions">
                      <button class="primary-button" data-open-member-level-create><i data-lucide="plus"></i>新增会员层级</button>
                      <button class="ghost-button"><i data-lucide="send"></i>创建触达</button>
                    </div>
                  </div>
                  <div class="table-wrap">
                    <table>
                      <thead><tr><th>层级</th><th>人数</th><th>权益</th><th>近 30 日客单</th><th>操作</th></tr></thead>
                      <tbody id="memberLevelTableRows">
                        <tr><td>铂金会员</td><td>6,832</td><td>8.8 折、生日礼</td><td>¥128</td><td><button class="ghost-button" data-member-level="铂金会员" data-member-count="6832">查看</button><button class="ghost-button">权益配置</button></td></tr>
                        <tr><td>黄金会员</td><td>21,490</td><td>9.2 折、积分翻倍日</td><td>¥94</td><td><button class="ghost-button" data-member-level="黄金会员" data-member-count="21490">查看</button><button class="ghost-button">权益配置</button></td></tr>
                        <tr><td>普通会员</td><td>64,159</td><td>积分、领券</td><td>¥61</td><td><button class="ghost-button" data-member-level="普通会员" data-member-count="64159">查看</button><button class="ghost-button">发券召回</button></td></tr>
                      </tbody>
                    </table>
                  </div>
                </article>
              </div>
              <article class="admin-card" style="margin-top:12px">
                <div class="card-head">
                  <h3>最新会员</h3>
                  <span class="status blue">自动更新</span>
                </div>
                <div class="table-wrap">
                  <table>
                    <thead><tr><th>会员姓名</th><th>手机号</th><th>会员等级</th><th>偏好品牌</th><th>积分</th><th>注册时间</th><th>状态</th><th>操作</th></tr></thead>
                    <tbody id="memberRows"></tbody>
                  </table>
                </div>
              </article>
            </div>

            <div data-admin-view="coupons">
              <article class="admin-card">
                <div class="card-head">
                  <h3>券与折扣</h3>
                  <button class="primary-button" data-open-coupon-create><i data-lucide="plus"></i>新建券模板</button>
                </div>
                <div class="table-wrap">
                  <table>
                    <thead><tr><th>名称</th><th>类型</th><th>适用范围</th><th>领取/核销</th><th>叠加规则</th><th>状态</th></tr></thead>
                    <tbody id="couponTableRows">
                      <tr><td>满 99 减 20</td><td>代金券</td><td>全品牌堂食</td><td>12,480 / 3,926</td><td>可与会员折扣同享</td><td><span class="status ok">投放中</span></td></tr>
                      <tr><td>铂金会员 8.5 折</td><td>折扣券</td><td>悦味小馆</td><td>2,600 / 984</td><td>不可与套餐同享</td><td><span class="status ok">投放中</span></td></tr>
                      <tr><td>饮品兑换券</td><td>兑换券</td><td>指定饮品</td><td>6,840 / 1,126</td><td>单桌限 1 张</td><td><span class="status warn">库存低</span></td></tr>
                      <tr><td>午市 9 折</td><td>时段折扣</td><td>工作日 11:00-14:00</td><td>自动生效</td><td>按优惠优先级计算</td><td><span class="status blue">待开始</span></td></tr>
                    </tbody>
                  </table>
                </div>
              </article>
            </div>

            <div data-admin-view="promos">
              <div class="admin-grid">
                <article class="admin-card">
                  <div class="card-head">
                    <h3>促销活动编排</h3>
                    <button class="primary-button" data-open-promo-create><i data-lucide="plus"></i>新建活动</button>
                  </div>
                  <div class="list-stack" id="promoActivityRows">
                    <div class="task-row"><div><strong>堂食满 168 减 30</strong><span>全品牌生效，会员折扣后判断门槛</span></div><span class="status ok">进行中</span></div>
                    <div class="task-row"><div><strong>主食加 9.9 元换购饮品</strong><span>选购主食后在结算页展示</span></div><span class="status ok">进行中</span></div>
                    <div class="task-row"><div><strong>午市套餐第 2 份半价</strong><span>仅工作日午市，库存联动</span></div><span class="status blue">排期中</span></div>
                    <div class="task-row"><div><strong>新店开业裂变券</strong><span>分享给好友后双方各得 10 元券</span></div><span class="status warn">审核中</span></div>
                  </div>
                </article>
                <article class="admin-card">
                  <div class="card-head"><h3>优惠计算优先级</h3><button class="ghost-button"><i data-lucide="arrow-up-down"></i>调整</button></div>
                  <div class="list-stack">
                    <div class="setting-row"><div><strong>1. 套餐价</strong><span>固定套餐优先锁价</span></div><span class="status blue">最高</span></div>
                    <div class="setting-row"><div><strong>2. 会员折扣</strong><span>按会员等级自动计算</span></div><span class="status ok">启用</span></div>
                    <div class="setting-row"><div><strong>3. 代金券</strong><span>用户可选或系统推荐最优</span></div><span class="status ok">启用</span></div>
                    <div class="setting-row"><div><strong>4. 积分抵扣</strong><span>支付前由用户确认抵扣金额</span></div><span class="status warn">可选</span></div>
                  </div>
                </article>
              </div>
            </div>

            <div data-admin-view="reports">
              <div class="metric-grid">
                <article class="metric"><div class="metric-head"><span>品牌坪效</span><span class="metric-icon"><i data-lucide="chart-column"></i></span></div><div><b>¥1,428</b><span class="delta">周环比 +5.2%</span></div></article>
                <article class="metric"><div class="metric-head"><span>菜品毛利率</span><span class="metric-icon"><i data-lucide="percent"></i></span></div><div><b>62.3%</b><span class="delta">热销菜贡献 46%</span></div></article>
                <article class="metric"><div class="metric-head"><span>桌台翻台率</span><span class="metric-icon"><i data-lucide="refresh-cw"></i></span></div><div><b>3.7</b><span class="delta">晚市峰值 5.1</span></div></article>
                <article class="metric"><div class="metric-head"><span>营销 ROI</span><span class="metric-icon"><i data-lucide="target"></i></span></div><div><b>4.8</b><span class="delta">券活动最佳</span></div></article>
              </div>
              <article class="admin-card" style="margin-top:12px">
                <div class="card-head"><h3>品牌销售对比</h3><button class="ghost-button"><i data-lucide="download"></i>导出</button></div>
                <div class="table-wrap">
                  <table>
                    <thead><tr><th>品牌</th><th>营业额</th><th>订单量</th><th>会员占比</th><th>券核销</th><th>客单价</th></tr></thead>
                    <tbody>
                      <tr><td>悦味小馆</td><td>¥426,820</td><td>5,186</td><td>68%</td><td>14,820</td><td>¥82.3</td></tr>
                      <tr><td>锅里香</td><td>¥318,480</td><td>2,806</td><td>61%</td><td>8,992</td><td>¥113.5</td></tr>
                      <tr><td>青禾轻食</td><td>¥146,920</td><td>3,104</td><td>55%</td><td>6,104</td><td>¥47.3</td></tr>
                    </tbody>
                  </table>
                </div>
              </article>
            </div>

            <div data-admin-view="miniapp-settings">
              <article class="admin-card">
                <div class="card-head"><h3>小程序配置</h3><button class="primary-button"><i data-lucide="save"></i>保存配置</button></div>
                <div class="table-wrap">
                  <table>
                    <thead><tr><th>配置项</th><th>当前值</th><th>适用范围</th><th>状态</th><th>操作</th></tr></thead>
                    <tbody>
                      <tr><td>小程序名称</td><td>餐饮集团点餐</td><td>全集团</td><td><span class="status ok">启用</span></td><td><button class="ghost-button">编辑</button></td></tr>
                      <tr><td>会员体系</td><td>集团统一会员</td><td>全品牌</td><td><span class="status ok">启用</span></td><td><button class="ghost-button">编辑</button></td></tr>
                      <tr><td>支付方式</td><td>微信支付、储值卡、积分抵扣</td><td>小程序/收银</td><td><span class="status ok">启用</span></td><td><button class="ghost-button">编辑</button></td></tr>
                      <tr><td>订单超时</td><td>15 分钟未支付自动关闭</td><td>扫码点餐</td><td><span class="status blue">自动</span></td><td><button class="ghost-button">编辑</button></td></tr>
                      <tr><td>扫码入口</td><td>桌台码绑定门店和桌号</td><td>堂食门店</td><td><span class="status ok">启用</span></td><td><button class="ghost-button">编辑</button></td></tr>
                      <tr><td>通知模板</td><td>接单、上菜、支付、开票</td><td>用户通知</td><td><span class="status warn">待审核</span></td><td><button class="ghost-button">编辑</button></td></tr>
                    </tbody>
                  </table>
                </div>
              </article>
            </div>

            <div data-admin-view="role-settings">
              <article class="admin-card">
                <div class="card-head"><h3>权限角色</h3><button class="primary-button"><i data-lucide="user-plus"></i>邀请成员</button></div>
                <div class="table-wrap">
                  <table>
                    <thead><tr><th>角色</th><th>权限范围</th><th>数据范围</th><th>成员数</th><th>状态</th><th>操作</th></tr></thead>
                    <tbody>
                      <tr><td>集团管理员</td><td>品牌、财务、营销、系统配置</td><td>全集团</td><td>8 人</td><td><span class="status ok">启用</span></td><td><button class="ghost-button">编辑</button><button class="ghost-button" data-role-members="集团管理员" data-role-count="8" data-role-scope="全集团">成员</button></td></tr>
                      <tr><td>品牌运营</td><td>菜单、活动、报表、会员触达</td><td>指定品牌</td><td>24 人</td><td><span class="status blue">运营中</span></td><td><button class="ghost-button">编辑</button><button class="ghost-button" data-role-members="品牌运营" data-role-count="24" data-role-scope="指定品牌">成员</button></td></tr>
                      <tr><td>门店店长</td><td>订单、库存、桌台、班次</td><td>指定门店</td><td>41 人</td><td><span class="status warn">需复核</span></td><td><button class="ghost-button">编辑</button><button class="ghost-button" data-role-members="门店店长" data-role-count="41" data-role-scope="指定门店">成员</button></td></tr>
                      <tr><td>收银员</td><td>收款、退款申请、补打小票</td><td>本门店</td><td>86 人</td><td><span class="status ok">启用</span></td><td><button class="ghost-button">编辑</button><button class="ghost-button" data-role-members="收银员" data-role-count="86" data-role-scope="本门店">成员</button></td></tr>
                    </tbody>
                  </table>
                </div>
              </article>
            </div>

            <div data-admin-view="secondary">
              <div class="detail-view">
                <div class="detail-head">
                  <button class="icon-button" data-back-admin-detail title="返回"><i data-lucide="arrow-left"></i></button>
                  <div class="detail-title">
                    <h3 id="adminDetailTitle">二级页面</h3>
                    <p id="adminDetailSubtitle">配置、审核、查看明细与运营动作</p>
                  </div>
                  <button class="primary-button" id="adminDetailSave"><i data-lucide="save"></i>保存</button>
                </div>
                <div class="admin-grid" id="adminDetailGrid">
                  <article class="admin-card">
                    <div class="card-head"><h3 id="adminDetailSection">基础信息</h3><span class="status blue">二级页</span></div>
                    <div class="list-stack" id="adminDetailList"></div>
                  </article>
                  <article class="admin-card" id="adminDetailActions">
                    <div class="card-head"><h3>处理动作</h3><button class="ghost-button" data-back-admin-detail><i data-lucide="arrow-left"></i>返回列表</button></div>
                    <div class="form-grid">
                      <div class="field"><label>适用品牌/门店</label><select><option>全部品牌与门店</option><option>悦味小馆 · 静安店</option><option>锅里香 · 徐汇店</option></select></div>
                      <div class="field"><label>状态</label><select><option>启用</option><option>待审核</option><option>暂停</option></select></div>
                      <div class="field"><label>生效时间</label><input value="2026-07-14 18:00" /></div>
                      <div class="field"><label>负责人</label><input value="门店运营组" /></div>
                    </div>
                  </article>
                </div>
              </div>
            </div>
          </section>
        </div>
      </section>

      <section class="cashier-shell" aria-label="门店收银系统原型">
        <header class="cashier-top">
          <div class="header-title-row">
            <button class="icon-button" data-back-app="cashier" title="返回上级"><i data-lucide="arrow-left"></i></button>
            <div class="cashier-title">
              <h2>门店收银系统</h2>
              <p>堂食桌台、前台加菜、会员识别、优惠核销、聚合支付、打印与交班</p>
            </div>
          </div>
          <div class="top-actions">
            <span class="shift-badge"><i data-lucide="clock-3"></i>晚班 17:00-23:00</span>
            <button class="ghost-button" id="handoverBtn"><i data-lucide="clipboard-list"></i>交班汇总</button>
            <button class="primary-button" id="newPosOrder"><i data-lucide="plus"></i>新开台</button>
          </div>
        </header>
        <div class="cashier-layout">
          <aside class="cashier-pane">
            <div class="pane-head">
              <h3>桌台状态</h3>
              <span class="status ok">静安店</span>
            </div>
            <div class="table-grid" id="posTableGrid">
              <button class="table-tile busy active" data-pos-table="A12" data-pos-people="4人" data-pos-status="用餐中"><strong>A12</strong><span>4人 · 用餐中</span></button>
              <button class="table-tile ready" data-pos-table="A03" data-pos-people="2人" data-pos-status="待接单"><strong>A03</strong><span>2人 · 待接单</span></button>
              <button class="table-tile" data-pos-table="A08" data-pos-people="0人" data-pos-status="空闲"><strong>A08</strong><span>空闲</span></button>
              <button class="table-tile busy" data-pos-table="B06" data-pos-people="3人" data-pos-status="待支付"><strong>B06</strong><span>3人 · 待支付</span></button>
              <button class="table-tile" data-pos-table="B10" data-pos-people="0人" data-pos-status="空闲"><strong>B10</strong><span>空闲</span></button>
              <button class="table-tile ready" data-pos-table="P02" data-pos-people="6人" data-pos-status="包间预订"><strong>P02</strong><span>6人 · 包间预订</span></button>
              <button class="table-tile" data-pos-table="A15" data-pos-people="0人" data-pos-status="空闲"><strong>A15</strong><span>空闲</span></button>
              <button class="table-tile ready" data-pos-table="B03" data-pos-people="2人" data-pos-status="待接单"><strong>B03</strong><span>2人 · 待接单</span></button>
              <button class="table-tile busy" data-pos-table="B12" data-pos-people="4人" data-pos-status="用餐中"><strong>B12</strong><span>4人 · 用餐中</span></button>
              <button class="table-tile busy" data-pos-table="P05" data-pos-people="8人" data-pos-status="待支付"><strong>P05</strong><span>8人 · 待支付</span></button>
            </div>
          </aside>

          <section class="cashier-pane">
            <div class="pane-head">
              <h3 id="posOrderTitle">A12 桌收银单</h3>
              <div class="segmented">
                <button class="active" data-pos-cat="hot">热销</button>
                <button data-pos-cat="set">套餐</button>
                <button data-pos-cat="drink">饮品</button>
                <button data-pos-cat="snack">小食</button>
              </div>
            </div>
            <div class="pos-menu-grid" id="posMenuGrid"></div>
            <div class="pane-head" style="margin-top:16px">
              <h3>当前点菜单</h3>
              <button class="ghost-button" id="clearPosOrder"><i data-lucide="trash-2"></i>清空</button>
            </div>
            <div class="pos-order-list" id="posOrderList"></div>
          </section>

          <aside class="cashier-pane payment-panel">
            <article class="cashier-card" data-cashier-detail="member-recognition">
              <h3>会员识别</h3>
              <div class="member-scan">
                <div>
                  <strong>张女士 · 铂金会员</strong>
                  <span>积分 2,860 · 当前享 8.8 折</span>
                </div>
                <button class="icon-button" title="扫码识别会员"><i data-lucide="scan-face"></i></button>
              </div>
            </article>

            <article class="cashier-card" data-cashier-static="true">
              <h3>优惠核销</h3>
              <div class="settlement-lines">
                <div class="settlement-line"><span>满 168 减 30</span><strong id="posPromoLine">- ¥30.00</strong></div>
                <div class="settlement-line"><span>会员 8.8 折</span><strong id="posMemberLine">- ¥20.40</strong></div>
                <div class="settlement-line"><span>积分抵扣</span><strong>- ¥5.00</strong></div>
              </div>
            </article>

            <article class="cashier-card">
              <h3>支付方式</h3>
              <div class="pay-methods">
                <button class="pay-method active" data-pay-method="微信"><i data-lucide="message-circle"></i>微信</button>
                <button class="pay-method" data-pay-method="支付宝"><i data-lucide="badge-dollar-sign"></i>支付宝</button>
                <button class="pay-method" data-pay-method="现金"><i data-lucide="banknote"></i>现金</button>
                <button class="pay-method" data-pay-method="储值卡"><i data-lucide="credit-card"></i>储值卡</button>
              </div>
            </article>

            <article class="cashier-card">
              <h3>收款汇总</h3>
              <div class="settlement-lines">
                <div class="settlement-line"><span>桌台</span><strong id="posTableName">A12 · 4人</strong></div>
                <div class="settlement-line"><span>商品小计</span><strong id="posSubtotal">¥170.00</strong></div>
                <div class="settlement-line"><span>优惠合计</span><strong id="posDiscount">- ¥55.40</strong></div>
                <div class="settlement-line settlement-total"><span>应收</span><strong id="posTotal">¥114.60</strong></div>
              </div>
            </article>

            <div class="cashier-actions">
              <button class="ghost-button" id="holdPosOrder"><i data-lucide="pause"></i>挂单</button>
              <button class="ghost-button" id="printPosOrder"><i data-lucide="printer"></i>打印</button>
              <button class="danger-button" id="refundPosOrder"><i data-lucide="undo-2"></i>退款</button>
              <button class="primary-button" id="payPosOrder"><i data-lucide="wallet"></i>确认收款</button>
            </div>
          </aside>
        </div>
        <div class="cashier-secondary">
          <div class="detail-view">
            <div class="admin-grid" id="cashierDetailGrid">
              <article class="admin-card">
                <div class="card-head"><h3 id="cashierDetailSection">业务详情</h3><span class="status ok">门店端</span></div>
                <div class="list-stack" id="cashierDetailList"></div>
              </article>
              <article class="admin-card" id="cashierDetailActions">
                <div class="card-head"><h3>前台处理</h3><button class="ghost-button" data-back-cashier-detail><i data-lucide="arrow-left"></i>返回收银</button></div>
                <div class="form-grid">
                  <div class="field"><label>处理类型</label><select><option>加菜/改价</option><option>核销优惠</option><option>退款</option><option>交班</option></select></div>
                  <div class="field"><label>授权员工</label><input value="店长 018" /></div>
                  <div class="field"><label>打印联数</label><input value="顾客联、后厨联、财务联" /></div>
                  <div class="field"><label>备注</label><input value="堂食高峰优先处理" /></div>
                </div>
              </article>
            </div>
          </div>
        </div>
        <div class="cashier-toast" id="cashierToast" role="status" aria-live="polite"></div>
      </section>
    </section>
  </main>

  <div class="dialog-mask" id="scanOrderDialog" role="dialog" aria-modal="true" aria-label="扫码点餐">
    <div class="dialog-panel scan-dialog-panel">
      <div class="dialog-head">
        <div>
          <h3>扫码点餐</h3>
          <p>扫描桌台二维码后，自动绑定门店、桌台和用餐人数。</p>
        </div>
        <button class="icon-button" id="closeScanOrder" title="关闭"><i data-lucide="x"></i></button>
      </div>
      <div class="dialog-body">
        <div class="scan-order-layout">
          <div class="scan-frame">
            <div class="scan-code">QR</div>
          </div>
          <div class="scan-result-card">
            <div>
              <h4>识别结果</h4>
              <p>当前为原型演示，可通过下方字段切换门店和桌台，确认后进入小程序点餐页。</p>
            </div>
            <div class="form-grid">
              <div class="field"><label>识别门店</label><select id="scanStore"><option>悦味小馆 · 静安店</option><option>悦味小馆 · 徐汇店</option><option>锅里香 · 陆家嘴店</option><option>青禾轻食 · 人民广场店</option></select></div>
              <div class="field"><label>识别桌台</label><select id="scanTable"><option>A12 桌</option><option>B06 桌</option><option>包间 P03</option><option>18 桌</option></select></div>
              <div class="field"><label>用餐人数</label><select id="scanPeople"><option>2 人</option><option>3 人</option><option>4 人</option><option>6 人</option></select></div>
              <div class="field"><label>点餐模式</label><select id="scanMode"><option>堂食扫码点餐</option><option>先点后付</option><option>多人同桌点餐</option></select></div>
            </div>
            <div class="scan-result-list">
              <div class="scan-result-item"><span>桌台状态</span><strong>可点餐</strong></div>
              <div class="scan-result-item"><span>优惠匹配</span><strong>会员折扣、可用券自动带入</strong></div>
              <div class="scan-result-item"><span>后厨同步</span><strong>下单后按档口分单打印</strong></div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-actions">
        <button class="ghost-button" id="rescanOrder"><i data-lucide="refresh-cw"></i>重新扫码</button>
        <button class="primary-button" id="confirmScanOrder"><i data-lucide="utensils-crossed"></i>进入点餐</button>
      </div>
    </div>
  </div>

  <div class="dialog-mask" id="storeConfigDialog" role="dialog" aria-modal="true" aria-label="门店配置">
    <div class="dialog-panel">
      <div class="dialog-head">
        <div>
          <h3 id="storeConfigTitle">门店配置</h3>
          <p id="storeConfigSubtitle">配置点餐、桌台、后厨打印、发票和服务费规则</p>
        </div>
        <button class="icon-button" id="closeStoreConfig" title="关闭"><i data-lucide="x"></i></button>
      </div>
      <div class="dialog-body">
        <div class="form-grid">
          <div class="field"><label>点餐模式</label><select><option>扫码桌台点餐</option><option>外带自取</option><option>服务员代客下单</option></select></div>
          <div class="field"><label>营业状态</label><select><option>营业中</option><option>暂停接单</option><option>预约营业</option></select></div>
          <div class="field"><label>桌台前缀</label><input id="storeConfigTablePrefix" value="A / B / 包间" /></div>
          <div class="field"><label>后厨打印机</label><input value="热菜、冷菜、饮品分单打印" /></div>
          <div class="field"><label>发票入口</label><select><option>支付后开启</option><option>隐藏</option></select></div>
          <div class="field"><label>服务费</label><input value="包间 10%，大厅免服务费" /></div>
          <div class="field"><label>门店编码</label><input id="storeConfigCode" value="YW-001" /></div>
          <div class="field"><label>桌台数量</label><input id="storeConfigTables" value="18 桌" /></div>
        </div>
      </div>
      <div class="dialog-actions">
        <button class="ghost-button" id="copyStoreConfig"><i data-lucide="copy"></i>复制配置</button>
        <button class="primary-button" id="saveStoreConfig"><i data-lucide="save"></i>保存配置</button>
      </div>
    </div>
  </div>

  <div class="dialog-mask" id="brandCreateDialog" role="dialog" aria-modal="true" aria-label="新增品牌">
    <div class="dialog-panel">
      <div class="dialog-head">
        <div>
          <h3>新增品牌</h3>
          <p>录入品牌档案、经营类型、负责人和默认经营数据，保存后加入品牌列表。</p>
        </div>
        <button class="icon-button" id="closeBrandCreate" title="关闭"><i data-lucide="x"></i></button>
      </div>
      <div class="dialog-body">
        <div class="form-grid">
          <div class="field"><label>品牌名称</label><input id="newBrandName" value="新味研究所" /></div>
          <div class="field"><label>品牌编码</label><input id="newBrandCode" value="NW-006" /></div>
          <div class="field"><label>经营类型</label><select id="newBrandType"><option>正餐</option><option>火锅</option><option>轻食</option><option>快餐</option><option>饮品甜品</option><option>融合餐饮</option></select></div>
          <div class="field"><label>品牌负责人</label><input id="newBrandOwner" value="赵一鸣" /></div>
          <div class="field"><label>门店数量</label><input id="newBrandStores" value="1" /></div>
          <div class="field"><label>客单价</label><input id="newBrandAvg" value="¥58" /></div>
          <div class="field"><label>今日门店总营收</label><input id="newBrandRevenue" value="¥0" /></div>
          <div class="field"><label>品牌状态</label><select id="newBrandStatus"><option>营业中</option><option>试运营</option><option>部分装修</option><option>暂停招商</option></select></div>
          <div class="field"><label>品牌简介</label><input id="newBrandDesc" value="融合餐饮 · 商圈首店" /></div>
          <div class="field"><label>默认门店配置</label><select id="newBrandStoreConfig"><option>创建 1 家默认门店</option><option>稍后手动添加门店</option><option>复制悦味小馆门店配置</option></select></div>
        </div>
      </div>
      <div class="dialog-actions">
        <button class="ghost-button" id="cancelBrandCreate"><i data-lucide="x"></i>取消</button>
        <button class="primary-button" id="saveBrandCreate"><i data-lucide="save"></i>保存品牌</button>
      </div>
    </div>
  </div>

  <div class="dialog-mask" id="dishCreateDialog" role="dialog" aria-modal="true" aria-label="新增菜品">
    <div class="dialog-panel">
      <div class="dialog-head">
        <div>
          <h3>新增菜品</h3>
          <p>录入菜品基础信息、价格库存、售卖状态和后厨档口，保存后加入菜品菜单列表。</p>
        </div>
        <button class="icon-button" id="closeDishCreate" title="关闭"><i data-lucide="x"></i></button>
      </div>
      <div class="dialog-body">
        <div class="form-grid">
          <div class="field"><label>菜品名称</label><input id="newDishName" value="招牌黑椒牛柳" /></div>
          <div class="field"><label>所属品牌</label><select id="newDishBrand"><option>悦味小馆</option><option>锅里香</option><option>青禾轻食</option><option>面里有光</option><option>甜作所</option></select></div>
          <div class="field"><label>菜品分类</label><select id="newDishCategory"><option>热销</option><option>套餐</option><option>主食</option><option>饮品</option><option>小食</option><option>轻食</option></select></div>
          <div class="field"><label>销售价格</label><input id="newDishPrice" value="¥68" /></div>
          <div class="field"><label>库存数量</label><input id="newDishStock" value="50 份" /></div>
          <div class="field"><label>促销标签</label><input id="newDishPromo" value="新品推荐" /></div>
          <div class="field"><label>售卖状态</label><select id="newDishStatus"><option>上架</option><option>暂不上架</option><option>售罄</option></select></div>
          <div class="field"><label>后厨档口</label><select id="newDishStation"><option>热菜档</option><option>冷菜档</option><option>主食档</option><option>饮品档</option><option>小食档</option></select></div>
          <div class="field"><label>计量单位</label><select id="newDishUnit"><option>份</option><option>杯</option><option>套</option><option>例</option></select></div>
          <div class="field"><label>菜品描述</label><input id="newDishDesc" value="黑椒汁现炒牛柳，适合堂食与扫码点餐展示。" /></div>
        </div>
      </div>
      <div class="dialog-actions">
        <button class="ghost-button" id="cancelDishCreate"><i data-lucide="x"></i>取消</button>
        <button class="primary-button" id="saveDishCreate"><i data-lucide="save"></i>保存菜品</button>
      </div>
    </div>
  </div>

  <div class="dialog-mask" id="couponCreateDialog" role="dialog" aria-modal="true" aria-label="新增券模板">
    <div class="dialog-panel">
      <div class="dialog-head">
        <div>
          <h3>新增券模板</h3>
          <p>配置代金券、折扣券、兑换券或时段折扣，保存后加入券与折扣列表。</p>
        </div>
        <button class="icon-button" id="closeCouponCreate" title="关闭"><i data-lucide="x"></i></button>
      </div>
      <div class="dialog-body">
        <div class="form-grid">
          <div class="field"><label>券模板名称</label><input id="newCouponName" value="满 128 减 30" /></div>
          <div class="field"><label>券类型</label><select id="newCouponType"><option>代金券</option><option>折扣券</option><option>兑换券</option><option>时段折扣</option></select></div>
          <div class="field"><label>优惠内容</label><input id="newCouponValue" value="满 128 元减 30 元" /></div>
          <div class="field"><label>使用门槛</label><input id="newCouponThreshold" value="订单满 128 元可用" /></div>
          <div class="field"><label>适用范围</label><select id="newCouponScope"><option>全品牌堂食</option><option>悦味小馆</option><option>指定门店</option><option>指定菜品</option><option>小程序专享</option></select></div>
          <div class="field"><label>发放库存</label><input id="newCouponStock" value="5000" /></div>
          <div class="field"><label>有效期</label><input id="newCouponDate" value="2026-07-15 至 2026-08-15" /></div>
          <div class="field"><label>领取方式</label><select id="newCouponChannel"><option>用户主动领取</option><option>会员自动发放</option><option>支付后赠送</option><option>后台定向发放</option></select></div>
          <div class="field"><label>叠加规则</label><select id="newCouponStack"><option>可与会员折扣同享</option><option>不可与套餐同享</option><option>单桌限 1 张</option><option>按优惠优先级计算</option></select></div>
          <div class="field"><label>模板状态</label><select id="newCouponStatus"><option>投放中</option><option>待开始</option><option>草稿</option><option>库存低</option></select></div>
        </div>
      </div>
      <div class="dialog-actions">
        <button class="ghost-button" id="cancelCouponCreate"><i data-lucide="x"></i>取消</button>
        <button class="primary-button" id="saveCouponCreate"><i data-lucide="save"></i>保存券模板</button>
      </div>
    </div>
  </div>

  <div class="dialog-mask" id="promoCreateDialog" role="dialog" aria-modal="true" aria-label="新增促销活动">
    <div class="dialog-panel">
      <div class="dialog-head">
        <div>
          <h3>新增促销活动</h3>
          <p>配置满减、套餐、加价购、裂变或时段活动，保存后加入促销活动编排。</p>
        </div>
        <button class="icon-button" id="closePromoCreate" title="关闭"><i data-lucide="x"></i></button>
      </div>
      <div class="dialog-body">
        <div class="form-grid">
          <div class="field"><label>活动名称</label><input id="newPromoName" value="晚市满 168 减 30" /></div>
          <div class="field"><label>活动类型</label><select id="newPromoType"><option>满减</option><option>套餐</option><option>加价购</option><option>时段折扣</option><option>裂变券</option></select></div>
          <div class="field"><label>适用品牌</label><select id="newPromoBrand"><option>全品牌</option><option>悦味小馆</option><option>锅里香</option><option>青禾轻食</option><option>面里有光</option><option>甜作所</option></select></div>
          <div class="field"><label>适用门店</label><input id="newPromoStores" value="全部门店" /></div>
          <div class="field"><label>活动规则</label><input id="newPromoRule" value="堂食订单满 168 元立减 30 元" /></div>
          <div class="field"><label>活动时间</label><input id="newPromoTime" value="2026-07-15 至 2026-08-15" /></div>
          <div class="field"><label>参与渠道</label><select id="newPromoChannel"><option>小程序扫码点餐</option><option>门店收银</option><option>小程序与门店收银</option><option>会员定向触达</option></select></div>
          <div class="field"><label>预算上限</label><input id="newPromoBudget" value="¥50,000" /></div>
          <div class="field"><label>库存/名额</label><input id="newPromoStock" value="不限" /></div>
          <div class="field"><label>活动状态</label><select id="newPromoStatus"><option>进行中</option><option>排期中</option><option>审核中</option><option>草稿</option></select></div>
        </div>
      </div>
      <div class="dialog-actions">
        <button class="ghost-button" id="cancelPromoCreate"><i data-lucide="x"></i>取消</button>
        <button class="primary-button" id="savePromoCreate"><i data-lucide="save"></i>保存活动</button>
      </div>
    </div>
  </div>

  <div class="dialog-mask" id="memberCreateDialog" role="dialog" aria-modal="true" aria-label="新增会员">
    <div class="dialog-panel">
      <div class="dialog-head">
        <div>
          <h3>新增会员</h3>
          <p>录入会员资料，保存后加入会员管理列表</p>
        </div>
        <button class="icon-button" id="closeMemberCreate" title="关闭"><i data-lucide="x"></i></button>
      </div>
      <div class="dialog-body">
        <div class="form-grid">
          <div class="field"><label>会员姓名</label><input id="newMemberName" value="新会员" /></div>
          <div class="field"><label>手机号</label><input id="newMemberPhone" value="13800000000" /></div>
          <div class="field"><label>会员等级</label><select id="newMemberLevel"><option>普通会员</option><option>黄金会员</option><option>铂金会员</option></select></div>
          <div class="field"><label>偏好品牌</label><select id="newMemberBrand"><option>悦味小馆</option><option>锅里香</option><option>青禾轻食</option><option>面里有光</option><option>甜作所</option></select></div>
          <div class="field"><label>初始积分</label><input id="newMemberPoints" value="0" /></div>
          <div class="field"><label>注册来源</label><select id="newMemberSource"><option>后台录入</option><option>小程序注册</option><option>收银台扫码</option></select></div>
        </div>
      </div>
      <div class="dialog-actions">
        <button class="ghost-button" id="cancelMemberCreate"><i data-lucide="x"></i>取消</button>
        <button class="primary-button" id="saveMemberCreate"><i data-lucide="save"></i>保存会员</button>
      </div>
    </div>
  </div>

  <div class="dialog-mask" id="memberLevelCreateDialog" role="dialog" aria-modal="true" aria-label="新增会员层级">
    <div class="dialog-panel">
      <div class="dialog-head">
        <div>
          <h3>新增会员层级</h3>
          <p>配置会员等级名称、权益、客单价和初始人数</p>
        </div>
        <button class="icon-button" id="closeMemberLevelCreate" title="关闭"><i data-lucide="x"></i></button>
      </div>
      <div class="dialog-body">
        <div class="form-grid">
          <div class="field"><label>层级名称</label><input id="newLevelName" value="钻石会员" /></div>
          <div class="field"><label>初始人数</label><input id="newLevelCount" value="0" /></div>
          <div class="field"><label>会员权益</label><input id="newLevelBenefits" value="8.5 折、生日礼、积分 2 倍" /></div>
          <div class="field"><label>近 30 日客单</label><input id="newLevelAvg" value="¥156" /></div>
          <div class="field"><label>折扣规则</label><select id="newLevelDiscount"><option>8.5 折</option><option>8.8 折</option><option>9.2 折</option><option>无固定折扣</option></select></div>
          <div class="field"><label>升级条件</label><input id="newLevelRule" value="累计消费满 3000 元" /></div>
        </div>
        <div class="list-stack" style="padding:14px 0 0">
          <div class="setting-row"><div><strong>入会首单礼</strong><span>入会 24 小时内未消费自动发券</span></div><label class="switch"><input id="newLevelFirstOrder" type="checkbox" checked><span class="slider"></span></label></div>
          <div class="setting-row"><div><strong>沉睡会员召回</strong><span>60 天未消费发送满减券</span></div><label class="switch"><input id="newLevelRecall" type="checkbox" checked><span class="slider"></span></label></div>
          <div class="setting-row"><div><strong>生日月提醒</strong><span>提前 7 天推送生日权益</span></div><label class="switch"><input id="newLevelBirthday" type="checkbox"><span class="slider"></span></label></div>
        </div>
      </div>
      <div class="dialog-actions">
        <button class="ghost-button" id="cancelMemberLevelCreate"><i data-lucide="x"></i>取消</button>
        <button class="primary-button" id="saveMemberLevelCreate"><i data-lucide="save"></i>保存层级</button>
      </div>
    </div>
  </div>

  <script>
    const dishes = [
      { id: "fish", cat: "hot", name: "招牌酸菜鱼", desc: "黑鱼片、老坛酸菜、金汤底，适合 2-3 人共享。", price: 128, tag: "招牌", img: "https://images.unsplash.com/photo-1563245372-f21724e3856d?auto=format&fit=crop&w=320&q=80" },
      { id: "beef", cat: "hot", name: "藤椒牛肉饭", desc: "藤椒风味牛肉配溏心蛋，午市会员 9 折。", price: 42, tag: "新品", img: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=320&q=80" },
      { id: "set4", cat: "set", name: "四人欢聚套餐", desc: "含 2 道主菜、3 道热炒、2 份小食和 4 杯饮品。", price: 298, tag: "套餐", img: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=320&q=80" },
      { id: "noodle", cat: "main", name: "葱油拌面", desc: "现熬葱油与手工面，支持加煎蛋、加牛肉。", price: 26, tag: "主食", img: "https://images.unsplash.com/photo-1612929633738-8fe44f7ec841?auto=format&fit=crop&w=320&q=80" },
      { id: "salad", cat: "main", name: "青禾鸡胸沙拉", desc: "低脂鸡胸、牛油果、杂粮饭，适合轻食人群。", price: 48, tag: "轻食", img: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=320&q=80" },
      { id: "plum", cat: "drink", name: "手作酸梅汤", desc: "乌梅、山楂、洛神花慢煮，兑换券可用。", price: 16, tag: "饮品", img: "https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?auto=format&fit=crop&w=320&q=80" },
      { id: "tea", cat: "drink", name: "茉莉冷泡茶", desc: "第二杯半价活动中，适合搭配辛辣菜品。", price: 18, tag: "半价", img: "https://images.unsplash.com/photo-1556679343-c7306c1976bc?auto=format&fit=crop&w=320&q=80" },
      { id: "snack", cat: "snack", name: "椒盐小酥肉", desc: "外酥里嫩，后厨 8 分钟出餐。", price: 32, tag: "小食", img: "https://images.unsplash.com/photo-1625938145744-e3805153995d?auto=format&fit=crop&w=320&q=80" }
    ];

    const menuRows = [
      ["招牌酸菜鱼", "悦味小馆", "热销", "¥128", "充足", "满减可用", "上架"],
      ["藤椒牛肉饭", "悦味小馆", "主食", "¥42", "68 份", "午市 9 折", "上架"],
      ["双人火锅套餐", "锅里香", "套餐", "¥188", "24 套", "会员 8.8 折", "上架"],
      ["青禾鸡胸沙拉", "青禾轻食", "轻食", "¥48", "12 份", "代金券可用", "上架"],
      ["手作酸梅汤", "悦味小馆", "饮品", "¥16", "库存低", "兑换券", "上架"],
      ["椒盐小酥肉", "锅里香", "小食", "¥32", "售罄", "无", "暂停售卖"]
    ];

    const posOrder = new Map([
      ["招牌酸菜鱼", { price: 128, qty: 1, station: "热菜" }],
      ["藤椒牛肉饭", { price: 42, qty: 1, station: "主食" }]
    ]);
    const posMenuCatalog = {
      hot: [
        { name: "招牌酸菜鱼", price: 128, meta: "后厨热菜 · 可满减", station: "热菜" },
        { name: "藤椒牛肉饭", price: 42, meta: "午市折扣 · 主食", station: "主食" },
        { name: "四人欢聚套餐", price: 298, meta: "热销套餐 · 4人", station: "套餐" },
        { name: "椒盐小酥肉", price: 32, meta: "小食 · 8分钟出餐", station: "小食" },
        { name: "手作酸梅汤", price: 16, meta: "兑换券可用", station: "饮品" },
        { name: "青禾鸡胸沙拉", price: 48, meta: "轻食热卖 · 低脂", station: "冷菜" }
      ],
      set: [
        { name: "四人欢聚套餐", price: 298, meta: "2主菜+3热炒+饮品", station: "套餐" },
        { name: "双人火锅套餐", price: 188, meta: "锅底+荤素拼盘", station: "套餐" },
        { name: "商务午餐双人餐", price: 96, meta: "工作日午市", station: "套餐" },
        { name: "亲子分享套餐", price: 138, meta: "含小食和甜品", station: "套餐" },
        { name: "单人快餐套餐", price: 36, meta: "主食+例汤", station: "套餐" },
        { name: "晚市聚会套餐", price: 368, meta: "6人推荐", station: "套餐" }
      ],
      drink: [
        { name: "手作酸梅汤", price: 16, meta: "兑换券可用", station: "饮品" },
        { name: "茉莉冷泡茶", price: 18, meta: "第二杯半价", station: "饮品" },
        { name: "鲜榨西瓜汁", price: 22, meta: "现榨 · 冰饮", station: "饮品" },
        { name: "桂花乌龙", price: 15, meta: "无糖可选", station: "饮品" },
        { name: "柠檬气泡水", price: 19, meta: "加价购可用", station: "饮品" },
        { name: "热豆浆", price: 8, meta: "早餐/午市", station: "饮品" }
      ],
      snack: [
        { name: "椒盐小酥肉", price: 32, meta: "小食 · 8分钟出餐", station: "小食" },
        { name: "黄金薯条", price: 18, meta: "儿童喜爱", station: "小食" },
        { name: "凉拌木耳", price: 16, meta: "冷菜档", station: "冷菜" },
        { name: "蒜香拍黄瓜", price: 14, meta: "开胃小菜", station: "冷菜" },
        { name: "红糖糍粑", price: 24, meta: "甜品小食", station: "小食" },
        { name: "炸春卷", price: 20, meta: "后厨小食", station: "小食" }
      ]
    };
    const memberRecords = [
      { name: "张女士", phone: "138****2098", level: "铂金会员", brand: "悦味小馆", points: "2,860", date: "2026-07-14", status: "正常" },
      { name: "陈女士", phone: "135****9033", level: "黄金会员", brand: "悦味小馆", points: "980", date: "2026-07-14", status: "正常" },
      { name: "刘女士", phone: "187****4566", level: "普通会员", brand: "青禾轻食", points: "180", date: "2026-07-14", status: "正常" }
    ];
    let activeMemberListLevel = "";
    let posTable = { name: "A12", people: "4人", status: "用餐中" };
    let posPayMethod = "微信";
    let activePosCat = "hot";

    const cart = new Map();
    let activeCat = "hot";
    let activeMiniTab = "home";
    let activeAdminTab = "dashboard";
    const navHistory = {
      mini: [],
      admin: [],
      cashier: []
    };

    const $ = (selector, root = document) => root.querySelector(selector);
    const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];

    function money(n) {
      return "¥" + n.toFixed(2);
    }

    function renderDishes() {
      const list = $("#dishList");
      const rows = dishes.filter(item => item.cat === activeCat || activeCat === "hot" && ["hot", "set"].includes(item.cat));
      list.innerHTML = rows.map(item => {
        const qty = cart.get(item.id) || 0;
        return `
          <article class="dish-card" data-mini-detail="dish" data-dish-id="${item.id}" data-title="${item.name}" data-subtitle="${item.desc}" data-price="${money(item.price)}" data-tag="${item.tag}" data-img="${item.img}">
            <img class="dish-img" src="${item.img}" alt="${item.name}" />
            <div class="dish-info">
              <div class="dish-title"><strong>${item.name}</strong><span class="tag">${item.tag}</span></div>
              <div class="dish-desc">${item.desc}</div>
              <div class="price-row">
                <span class="price">${money(item.price)}</span>
                <div class="stepper">
                  <button class="minus ${qty ? "" : "hidden"}" data-dec="${item.id}" aria-label="减少 ${item.name}"><i data-lucide="minus"></i></button>
                  <span class="${qty ? "" : "hidden"}">${qty}</span>
                  <button data-inc="${item.id}" aria-label="增加 ${item.name}"><i data-lucide="plus"></i></button>
                </div>
              </div>
            </div>
          </article>
        `;
      }).join("");
      refreshIcons();
    }

    function renderMenuRows() {
      $("#menuRows").innerHTML = menuRows.map(row => {
        const statusClass = row[4].includes("售罄") ? "hot" : row[4].includes("低") ? "warn" : "ok";
        const saleClass = row[6].includes("暂停") || row[6].includes("暂不") ? "warn" : row[6].includes("售罄") ? "hot" : "ok";
        return `<tr>
          <td>${row[0]}</td><td>${row[1]}</td><td>${row[2]}</td><td>${row[3]}</td>
          <td><span class="status ${statusClass}">${row[4]}</span></td><td>${row[5]}</td>
          <td><span class="status ${saleClass}">${row[6]}</span></td>
        </tr>`;
      }).join("");
    }

    function renderMemberRows() {
      $("#memberRows").innerHTML = memberRecords.map(member => `
        <tr>
          <td>${member.name}</td>
          <td>${member.phone}</td>
          <td>${member.level}</td>
          <td>${member.brand}</td>
          <td>${member.points}</td>
          <td>${member.date}</td>
          <td><span class="status ok">${member.status}</span></td>
          <td><button class="ghost-button">详情</button><button class="ghost-button">发券</button></td>
        </tr>
      `).join("");
    }

    function renderPosMenu() {
      const rows = posMenuCatalog[activePosCat] || posMenuCatalog.hot;
      $("#posMenuGrid").innerHTML = rows.map(item => {
        const qty = posOrder.get(item.name)?.qty || 0;
        return `
          <article class="pos-dish" data-pos-dish="${item.name}" data-pos-price="${item.price}" data-pos-station="${item.station}">
            <div class="pos-dish-main">
              <strong>${item.name}</strong>
              <span>${item.meta}</span>
            </div>
            <div class="pos-dish-bottom">
              <b>${money(item.price)}</b>
              <div class="pos-stepper">
                <button class="minus ${qty ? "" : "hidden"}" data-pos-dec="${item.name}" aria-label="减少 ${item.name}"><i data-lucide="minus"></i></button>
                <span class="${qty ? "" : "hidden"}">${qty}</span>
                <button data-pos-inc="${item.name}" data-pos-price="${item.price}" data-pos-station="${item.station}" aria-label="增加 ${item.name}"><i data-lucide="plus"></i></button>
              </div>
            </div>
          </article>
        `;
      }).join("");
      $$("[data-pos-cat]").forEach(button => button.classList.toggle("active", button.dataset.posCat === activePosCat));
      refreshIcons();
    }

    function openBrandCreateDialog() {
      $("#brandCreateDialog").classList.add("show");
      refreshIcons();
    }

    function closeBrandCreateDialog() {
      $("#brandCreateDialog").classList.remove("show");
    }

    function saveNewBrand() {
      const name = $("#newBrandName").value.trim() || "新品牌";
      const code = $("#newBrandCode").value.trim() || "AUTO-NEW";
      const type = $("#newBrandType").value;
      const owner = $("#newBrandOwner").value.trim() || "待分配";
      const stores = $("#newBrandStores").value.trim() || "1";
      const avg = $("#newBrandAvg").value.trim() || "¥0";
      const revenue = $("#newBrandRevenue").value.trim() || "¥0";
      const status = $("#newBrandStatus").value;
      const desc = $("#newBrandDesc").value.trim() || "新品牌档案";
      const statusClass = status === "营业中" ? "ok" : status === "试运营" ? "blue" : status === "部分装修" ? "warn" : "hot";
      $("#brandTableRows")?.insertAdjacentHTML("afterbegin", `
        <tr>
          <td><div class="brand-left"><img class="brand-logo" src="https://images.unsplash.com/photo-1551218808-94e220e084d2?auto=format&fit=crop&w=160&q=80" alt="${name}" /><div><strong>${name}</strong><span>${desc}</span></div></div></td>
          <td>${code}</td><td>${type}</td><td>${stores} 家</td><td>${owner}</td><td>${avg}</td><td>${revenue}</td><td><span class="status ${statusClass}">${status}</span></td><td><button class="ghost-button">管理</button><button class="ghost-button" data-brand-stores="${name}" data-store-count="${stores}">门店</button></td>
        </tr>
      `);
      closeBrandCreateDialog();
      refreshIcons();
    }

    function openDishCreateDialog() {
      $("#dishCreateDialog").classList.add("show");
      refreshIcons();
    }

    function closeDishCreateDialog() {
      $("#dishCreateDialog").classList.remove("show");
    }

    function saveNewDish() {
      const name = $("#newDishName").value.trim() || "新菜品";
      const brand = $("#newDishBrand").value;
      const category = $("#newDishCategory").value;
      const price = $("#newDishPrice").value.trim() || "¥0";
      const stock = $("#newDishStock").value.trim() || "0 份";
      const promo = $("#newDishPromo").value.trim() || "无";
      const status = $("#newDishStatus").value;
      menuRows.unshift([name, brand, category, price, stock, promo, status]);
      renderMenuRows();
      closeDishCreateDialog();
      refreshIcons();
    }

    function openCouponCreateDialog() {
      $("#couponCreateDialog").classList.add("show");
      refreshIcons();
    }

    function closeCouponCreateDialog() {
      $("#couponCreateDialog").classList.remove("show");
    }

    function saveNewCoupon() {
      const name = $("#newCouponName").value.trim() || "新券模板";
      const type = $("#newCouponType").value;
      const value = $("#newCouponValue").value.trim();
      const threshold = $("#newCouponThreshold").value.trim();
      const scope = $("#newCouponScope").value;
      const stock = $("#newCouponStock").value.trim() || "0";
      const channel = $("#newCouponChannel").value;
      const stack = $("#newCouponStack").value;
      const status = $("#newCouponStatus").value;
      const statusClass = status === "投放中" ? "ok" : status === "待开始" || status === "草稿" ? "blue" : "warn";
      const receiveText = type === "时段折扣" ? "自动生效" : `${Number(stock).toLocaleString()} / 0`;
      $("#couponTableRows")?.insertAdjacentHTML("afterbegin", `
        <tr><td>${name}</td><td>${type}</td><td>${scope}${threshold ? ` · ${threshold}` : ""}${value ? ` · ${value}` : ""}</td><td>${receiveText}</td><td>${stack} · ${channel}</td><td><span class="status ${statusClass}">${status}</span></td></tr>
      `);
      closeCouponCreateDialog();
      refreshIcons();
    }

    function openPromoCreateDialog() {
      $("#promoCreateDialog").classList.add("show");
      refreshIcons();
    }

    function closePromoCreateDialog() {
      $("#promoCreateDialog").classList.remove("show");
    }

    function saveNewPromo() {
      const name = $("#newPromoName").value.trim() || "新促销活动";
      const type = $("#newPromoType").value;
      const brand = $("#newPromoBrand").value;
      const stores = $("#newPromoStores").value.trim() || "全部门店";
      const rule = $("#newPromoRule").value.trim() || "按活动规则执行";
      const time = $("#newPromoTime").value.trim();
      const channel = $("#newPromoChannel").value;
      const budget = $("#newPromoBudget").value.trim();
      const stock = $("#newPromoStock").value.trim();
      const status = $("#newPromoStatus").value;
      const statusClass = status === "进行中" ? "ok" : status === "排期中" || status === "草稿" ? "blue" : "warn";
      const desc = `${brand} · ${stores} · ${type} · ${rule}${time ? ` · ${time}` : ""}${budget ? ` · 预算 ${budget}` : ""}${stock ? ` · 名额 ${stock}` : ""}${channel ? ` · ${channel}` : ""}`;
      $("#promoActivityRows")?.insertAdjacentHTML("afterbegin", `
        <div class="task-row"><div><strong>${name}</strong><span>${desc}</span></div><span class="status ${statusClass}">${status}</span></div>
      `);
      closePromoCreateDialog();
      refreshIcons();
    }

    function openMemberCreateDialog(level = activeMemberListLevel || "普通会员") {
      $("#newMemberLevel").value = level;
      $("#memberCreateDialog").classList.add("show");
      refreshIcons();
    }

    function closeMemberCreateDialog() {
      $("#memberCreateDialog").classList.remove("show");
    }

    function saveNewMember() {
      const name = $("#newMemberName").value.trim() || "新会员";
      const rawPhone = $("#newMemberPhone").value.trim() || "13800000000";
      const phone = rawPhone.length >= 7 ? `${rawPhone.slice(0, 3)}****${rawPhone.slice(-4)}` : rawPhone;
      const points = $("#newMemberPoints").value.trim() || "0";
      memberRecords.unshift({
        name,
        phone,
        level: $("#newMemberLevel").value,
        brand: $("#newMemberBrand").value,
        points,
        date: "2026-07-15",
        status: "正常"
      });
      renderMemberRows();
      if ($("#memberLevelRows") && $(".admin-content").classList.contains("detail-open")) {
        $("#memberLevelRows").insertAdjacentHTML("afterbegin", `
          <tr><td>${name}</td><td>${phone}</td><td>${$("#newMemberBrand").value}</td><td>¥0</td><td>${points}</td><td>2026-07-15</td><td><span class="status ok">正常</span></td><td><button class="ghost-button">详情</button><button class="ghost-button">发券</button></td></tr>
        `);
      }
      closeMemberCreateDialog();
    }

    function openMemberLevelCreateDialog() {
      $("#memberLevelCreateDialog").classList.add("show");
      refreshIcons();
    }

    function closeMemberLevelCreateDialog() {
      $("#memberLevelCreateDialog").classList.remove("show");
    }

    function saveNewMemberLevel() {
      const level = $("#newLevelName").value.trim() || "新会员层级";
      const count = $("#newLevelCount").value.trim() || "0";
      const benefits = $("#newLevelBenefits").value.trim() || $("#newLevelDiscount").value;
      const avg = $("#newLevelAvg").value.trim() || "¥0";
      const rules = [
        $("#newLevelFirstOrder").checked ? "首单礼" : "",
        $("#newLevelRecall").checked ? "召回" : "",
        $("#newLevelBirthday").checked ? "生日提醒" : ""
      ].filter(Boolean).join("、");
      $("#memberLevelTableRows").insertAdjacentHTML("afterbegin", `
        <tr><td>${level}</td><td>${Number(count).toLocaleString()}</td><td>${benefits}${rules ? ` · ${rules}` : ""}</td><td>${avg}</td><td><button class="ghost-button" data-member-level="${level}" data-member-count="${count}">查看</button><button class="ghost-button">权益配置</button></td></tr>
      `);
      closeMemberLevelCreateDialog();
    }

    function renderPosOrder() {
      const list = $("#posOrderList");
      const rows = [...posOrder.entries()];
      if (!rows.length) {
        list.innerHTML = `<div class="track-item"><div class="track-icon"><i data-lucide="receipt-text"></i></div><div><h4>当前收银单为空</h4><p>点击上方菜品或扫码录入商品。</p></div></div>`;
      } else {
        list.innerHTML = rows.map(([name, item]) => `
          <div class="pos-order-row" data-cashier-detail="order" data-title="${name}" data-subtitle="${item.station} · 已发送后厨" data-price="${money(item.price * item.qty)}" data-qty="${item.qty}">
            <div><strong>${name}</strong><small>${item.station} · 已发送后厨</small></div>
            <span class="qty-pill">x${item.qty}</span>
            <strong>${money(item.price * item.qty)}</strong>
          </div>
        `).join("");
      }
      updatePosSettlement();
      refreshIcons();
    }

    function updatePosSettlement() {
      const subtotal = [...posOrder.values()].reduce((sum, item) => sum + item.price * item.qty, 0);
      const promo = subtotal >= 168 ? 30 : subtotal >= 99 ? 20 : 0;
      const member = subtotal * 0.12;
      const points = subtotal ? 5 : 0;
      const discount = promo + member + points;
      const total = Math.max(0, subtotal - discount);
      $("#posOrderTitle").textContent = `${posTable.name} 桌收银单`;
      $("#posTableName").textContent = `${posTable.name} · ${posTable.people}`;
      $("#posSubtotal").textContent = money(subtotal);
      $("#posPromoLine").textContent = `- ${money(promo)}`;
      $("#posMemberLine").textContent = `- ${money(member)}`;
      $("#posDiscount").textContent = `- ${money(discount)}`;
      $("#posTotal").textContent = money(total);
    }

    function addPosDish(name, price, station = "") {
      const current = posOrder.get(name);
      if (current) {
        current.qty += 1;
      } else {
        posOrder.set(name, { price, qty: 1, station: station || (price >= 100 ? "热菜" : "前台") });
      }
      renderPosOrder();
      renderPosMenu();
    }

    function reducePosDish(name) {
      const current = posOrder.get(name);
      if (!current) return;
      current.qty -= 1;
      if (current.qty <= 0) posOrder.delete(name);
      renderPosOrder();
      renderPosMenu();
    }

    function updateCart() {
      let count = 0;
      let subtotal = 0;
      cart.forEach((qty, id) => {
        const item = dishes.find(dish => dish.id === id);
        count += qty;
        subtotal += item.price * qty;
      });
      const discount = subtotal >= 168 ? 30 : subtotal >= 99 ? 20 : 0;
      const memberDiscount = subtotal > 0 ? subtotal * 0.12 : 0;
      const total = Math.max(0, subtotal - discount - memberDiscount);
      $("#cartPrice").textContent = money(total);
      $("#cartDesc").textContent = count ? `${count} 件商品，已享会员 8.8 折${discount ? "和满减" : ""}` : "未选择菜品";
      $("#cartBar").classList.toggle("hidden", false);
      return { count, subtotal, discount, memberDiscount, total };
    }

    function changeQty(id, delta) {
      const next = Math.max(0, (cart.get(id) || 0) + delta);
      if (next) cart.set(id, next); else cart.delete(id);
      renderDishes();
      updateCart();
    }

    function currentMiniPage() {
      const detailOpen = $(".mini-content").classList.contains("detail-open");
      return detailOpen ? { type: "mini-detail", tab: activeMiniTab } : { type: "mini", tab: activeMiniTab };
    }

    function currentAdminPage() {
      const detailOpen = $(".admin-content").classList.contains("detail-open");
      return detailOpen ? { type: "admin-detail", tab: activeAdminTab } : { type: "admin", tab: activeAdminTab };
    }

    function currentCashierPage() {
      return $(".cashier-shell").classList.contains("cashier-detail-open") ? { type: "cashier-detail" } : { type: "cashier" };
    }

    function updateMiniBackBar(tab = activeMiniTab, detailOpen = $(".mini-content").classList.contains("detail-open")) {
      const backButton = $("#miniHeaderBack");
      if (!backButton) return;
      const mainTabs = ["home", "order", "history", "profile"];
      const showBack = detailOpen || !mainTabs.includes(tab);
      backButton.classList.toggle("hidden", !showBack);
    }

    function showMini(tab, recordHistory = true) {
      if (recordHistory) navHistory.mini.push(currentMiniPage());
      activeMiniTab = tab;
      $(".mini-content").classList.remove("detail-open");
      $$("[data-view]").forEach(view => view.classList.remove("active"));
      $(`[data-view="mini-${tab}"]`).classList.add("active");
      $$(".mini-tabbar button").forEach(button => button.classList.toggle("active", button.dataset.miniTab === tab));
      if (tab === "promos" || tab === "checkout" || tab === "status") {
        $$(".mini-tabbar button").forEach(button => button.classList.remove("active"));
      }
      updateCart();
      const isFlowPage = tab === "scan-people" || tab === "checkout" || tab === "status";
      $("#cartBar").classList.toggle("hidden", isFlowPage);
      $(".mini-tabbar").classList.toggle("hidden", isFlowPage);
      updateMiniBackBar(tab, false);
      refreshIcons();
    }

    function showAdmin(tab, recordHistory = true) {
      if (recordHistory) navHistory.admin.push(currentAdminPage());
      activeAdminTab = tab;
      $(".admin-content").classList.remove("detail-open");
      const titles = {
        dashboard: ["经营看板", "今日堂食、扫码点餐、会员营销与门店履约概览"],
        brands: ["品牌门店", "集团品牌、门店、桌台、营业与后厨配置"],
        menu: ["菜品菜单", "多品牌菜品、分类、库存、价格和上下架管理"],
        orders: ["订单中心", "扫码点餐订单、制作进度、支付、发票和退款处理"],
        members: ["会员管理", "会员分层、积分、权益、自动化触达与复购运营"],
        coupons: ["券与折扣", "代金券、折扣券、兑换券和优惠叠加规则"],
        promos: ["促销活动", "满减、套餐、加价购、裂变与时段活动编排"],
        reports: ["数据报表", "品牌销售、菜品毛利、桌台效率和营销 ROI"],
        "miniapp-settings": ["小程序配置", "小程序名称、会员体系、支付方式、扫码入口和通知模板配置"],
        "role-settings": ["权限角色", "角色权限、数据范围、成员管理和操作审计"]
      };
      $$("[data-admin-view]").forEach(view => view.classList.toggle("active", view.dataset.adminView === tab));
      $$(".side-nav button").forEach(button => button.classList.toggle("active", button.dataset.adminTab === tab));
      $("#adminTitle").textContent = titles[tab][0];
      $("#adminSubtitle").textContent = titles[tab][1];
      refreshIcons();
    }

    function detailRows(rows) {
      return rows.map(([label, value]) => `
        <div class="detail-line"><span>${label}</span><strong>${value}</strong></div>
      `).join("");
    }

    function setMiniDetailActions(hidden) {
      $("#miniDetailActions")?.classList.toggle("hidden", hidden);
    }

    function showMiniDetail(title, subtitle, rows, actionText = "确认", recordHistory = true, hideActions = false) {
      if (recordHistory) navHistory.mini.push(currentMiniPage());
      $(".mini-content").classList.add("detail-open");
      $$("[data-view]").forEach(view => view.classList.remove("active"));
      $('[data-view="mini-secondary"]').classList.add("active");
      if ($("#miniDetailTitle")) $("#miniDetailTitle").textContent = title;
      if ($("#miniDetailSubtitle")) $("#miniDetailSubtitle").textContent = subtitle;
      $("#miniDetailSection").textContent = `${title}详情`;
      $("#miniDetailList").innerHTML = detailRows(rows);
      $("#miniDetailPrimary").lastChild.textContent = actionText;
      setMiniDetailActions(hideActions);
      $("#cartBar").classList.add("hidden");
      $(".mini-tabbar").classList.add("hidden");
      updateMiniBackBar(activeMiniTab, true);
      refreshIcons();
    }

    function showDishDetail(card) {
      const dish = dishes.find(item => item.id === card.dataset.dishId) || {
        id: card.dataset.dishId || "fish",
        name: card.dataset.title || "商品详情",
        desc: card.dataset.subtitle || "查看商品规格、价格和点餐信息。",
        price: Number(String(card.dataset.price || "0").replace(/[^\d.]/g, "")) || 0,
        tag: card.dataset.tag || "热销",
        img: card.dataset.img || card.querySelector("img")?.src || ""
      };
      navHistory.mini.push(currentMiniPage());
      $(".mini-content").classList.add("detail-open");
      $$("[data-view]").forEach(view => view.classList.remove("active"));
      $('[data-view="mini-secondary"]').classList.add("active");
      if ($("#miniDetailTitle")) $("#miniDetailTitle").textContent = "商品详情";
      if ($("#miniDetailSubtitle")) $("#miniDetailSubtitle").textContent = "查看菜品图片、价格、规格与点餐操作";
      $("#miniDetailSection").textContent = "商品信息";
      $("#miniDetailList").innerHTML = `
        <div class="product-detail">
          <img class="product-cover" src="${dish.img}" alt="${dish.name}" />
          <div class="product-info">
            <div class="product-title-row">
              <h3>${dish.name}</h3>
              <span class="tag">${dish.tag}</span>
            </div>
            <p class="product-desc">${dish.desc}</p>
            <div class="product-price-row">
              <span class="product-price">${money(dish.price)}</span>
              <span class="status ok">可点餐</span>
            </div>
          </div>
          <div class="product-actions">
            <button class="primary-button" data-inc="${dish.id}"><i data-lucide="plus"></i>加入点餐</button>
          </div>
        </div>
      `;
      setMiniDetailActions(true);
      $("#cartBar").classList.add("hidden");
      $(".mini-tabbar").classList.add("hidden");
      updateMiniBackBar(activeMiniTab, true);
      refreshIcons();
    }

    function showInvoiceDetail(card) {
      const orderTitle = card.dataset.title || "发票 #B0916";
      navHistory.mini.push(currentMiniPage());
      $(".mini-content").classList.add("detail-open");
      $$("[data-view]").forEach(view => view.classList.remove("active"));
      $('[data-view="mini-secondary"]').classList.add("active");
      if ($("#miniDetailTitle")) $("#miniDetailTitle").textContent = "电子发票";
      if ($("#miniDetailSubtitle")) $("#miniDetailSubtitle").textContent = "查看开票信息、订单来源和发送记录";
      $("#miniDetailSection").textContent = "发票详情";
      $("#miniDetailList").innerHTML = `
        <div class="invoice-page">
          <section class="invoice-hero">
            <div class="invoice-hero-top">
              <div>
                <h3>电子发票已开具</h3>
                <p>已通过微信服务通知发送，可用于报销与留存。</p>
              </div>
              <span class="invoice-status">已发送</span>
            </div>
            <div class="invoice-amount">
              <strong>¥165.44</strong>
              <span>${orderTitle} · 锅里香 · 徐汇店</span>
            </div>
          </section>

          <section class="invoice-card">
            <h4>发票信息</h4>
            <div class="invoice-code">
              <span>发票号码</span>
              <strong>031002400111</strong>
            </div>
            <div class="invoice-list">
              <div class="invoice-line"><span>发票类型</span><strong>增值税普通电子发票</strong></div>
              <div class="invoice-line"><span>发票抬头</span><strong>张女士</strong></div>
              <div class="invoice-line"><span>税号</span><strong>91310000MA1K3B0916</strong></div>
              <div class="invoice-line"><span>开票时间</span><strong>2026-07-08 20:12</strong></div>
            </div>
          </section>

          <section class="invoice-card">
            <h4>订单关联</h4>
            <div class="invoice-list">
              <div class="invoice-line"><span>订单编号</span><strong>#B0916</strong></div>
              <div class="invoice-line"><span>所属品牌</span><strong>锅里香</strong></div>
              <div class="invoice-line"><span>下单门店</span><strong>徐汇店 · B06 桌</strong></div>
              <div class="invoice-line"><span>支付方式</span><strong>微信支付 · 会员 8.8 折</strong></div>
              <div class="invoice-line"><span>接收方式</span><strong>微信服务通知 / zhang***@mail.com</strong></div>
            </div>
          </section>

          <section class="invoice-card">
            <h4>开票明细</h4>
            <div class="invoice-items">
              <div class="invoice-item"><div><strong>双人火锅套餐</strong><br><span>餐饮服务 · 1 份</span></div><strong>¥128.00</strong></div>
              <div class="invoice-item"><div><strong>椒盐小酥肉</strong><br><span>餐饮服务 · 1 份</span></div><strong>¥26.00</strong></div>
              <div class="invoice-item"><div><strong>酸梅汤</strong><br><span>饮品服务 · 1 份</span></div><strong>¥11.44</strong></div>
            </div>
          </section>

          <section class="invoice-file">
            <div class="invoice-file-mark">PDF</div>
            <div>
              <strong>电子发票文件</strong>
              <span>文件已生成，原型中展示下载、转发、复制抬头等入口位置。</span>
            </div>
          </section>
        </div>
      `;
      setMiniDetailActions(true);
      $("#cartBar").classList.add("hidden");
      $(".mini-tabbar").classList.add("hidden");
      updateMiniBackBar(activeMiniTab, true);
      refreshIcons();
    }

    function showMemberBenefitDetail(card) {
      const configs = {
        newcomer: {
          title: "新人入会礼",
          subtitle: "注册会员后自动发放，适合首次扫码点餐使用。",
          status: "已领取",
          kpis: [["¥20", "代金券"], ["1 张", "小食券"], ["7 天", "有效期"]],
          highlights: [
            ["20 元代金券", "满 99 元可用，堂食扫码点餐自动匹配。", "可用"],
            ["指定小食兑换券", "可兑换椒盐小酥肉、手作酸梅汤等新人专属单品。", "待使用"],
            ["首单积分加赠", "首单完成后额外赠送 100 积分。", "+100"]
          ],
          rules: [
            ["领取方式", "注册并绑定手机号后自动入券包"],
            ["使用门槛", "代金券满 99 元可用，小食券任意消费可用"],
            ["叠加规则", "可与会员折扣同享，不与套餐专享价叠加"],
            ["到期提醒", "到期前 24 小时通过微信服务通知提醒"]
          ],
          stores: [["悦味小馆", "静安店、徐汇店、人民广场店"], ["锅里香", "徐汇店、虹桥天地店"], ["青禾轻食", "陆家嘴店、滨江店"], ["面里有光", "五角场店、前滩店"]],
          steps: [["入会领取", "完成手机号授权后，权益自动进入我的券包。"], ["下单匹配", "结算页会优先展示新人券和可兑换小食。"], ["支付核销", "支付成功后同步更新券状态和积分记录。"]]
        },
        points: {
          title: "积分抵现",
          subtitle: "消费得积分，结算时按规则抵扣订单金额。",
          status: "可抵扣",
          kpis: [["2,860", "可用积分"], ["¥28.60", "理论价值"], ["¥5.00", "本单建议"]],
          highlights: [
            ["积分余额", "当前账户可用积分 2,860，跨品牌统一累计。", "2,860"],
            ["抵扣比例", "100 积分抵 1 元，结算页展示本单可抵扣金额。", "100:1"],
            ["积分到账", "支付完成后按实付金额累计，活动日可享双倍积分。", "次日"]
          ],
          rules: [
            ["抵扣上限", "单笔最多抵扣实付金额的 20%"],
            ["适用订单", "扫码点餐、收银台点单、小程序外带订单均可用"],
            ["不可抵扣", "储值充值、服务费、部分特价套餐不可抵扣"],
            ["有效期", "积分自获得日起 12 个月内有效"]
          ],
          stores: [["悦味小馆", "全部直营门店"], ["锅里香", "全部直营门店"], ["青禾轻食", "陆家嘴店、滨江店"], ["甜作所", "指定门店试运行"]],
          steps: [["选择菜品", "进入确认订单页后系统计算可用积分。"], ["确认抵扣", "用户可手动开启或关闭积分抵扣。"], ["完成支付", "抵扣积分即时扣减，新积分按订单规则发放。"]]
        },
        birthday: {
          title: "生日专享",
          subtitle: "生日月全品牌门店消费享 7.8 折，并可领取生日礼。",
          status: "生日月可用",
          kpis: [["7.8 折", "专享折扣"], ["1 份", "生日甜品"], ["31 天", "权益周期"]],
          highlights: [
            ["生日月折扣", "生日自然月内到店堂食可享全品牌 7.8 折。", "7.8 折"],
            ["生日礼", "赠送招牌甜品或指定饮品兑换券 1 张。", "已发放"],
            ["双倍积分", "生日月消费积分按基础积分的 2 倍累计。", "2 倍"]
          ],
          rules: [
            ["生效时间", "生日所在自然月 1 日 00:00 自动生效"],
            ["使用次数", "折扣不限次数，生日礼每年限领 1 次"],
            ["叠加规则", "生日折扣与部分套餐价、限时秒杀不可同享"],
            ["身份校验", "需完成手机号绑定并填写生日信息"]
          ],
          stores: [["悦味小馆", "静安店、徐汇店、人民广场店"], ["锅里香", "徐汇店、虹桥天地店"], ["青禾轻食", "陆家嘴店"], ["甜作所", "全部参与门店"]],
          steps: [["权益提醒", "生日月开始前 7 天推送提醒。"], ["到店点餐", "扫码点餐或收银台识别会员后自动匹配。"], ["结算生效", "支付页展示生日折扣、生日礼和双倍积分。"]]
        }
      };
      const benefit = configs[card.dataset.benefit] || configs.newcomer;
      navHistory.mini.push(currentMiniPage());
      $(".mini-content").classList.add("detail-open");
      $$("[data-view]").forEach(view => view.classList.remove("active"));
      $('[data-view="mini-secondary"]').classList.add("active");
      if ($("#miniDetailTitle")) $("#miniDetailTitle").textContent = benefit.title;
      if ($("#miniDetailSubtitle")) $("#miniDetailSubtitle").textContent = benefit.subtitle;
      $("#miniDetailSection").textContent = "会员权益详情";
      $("#miniDetailList").innerHTML = `
        <div class="member-benefit-page">
          <section class="member-benefit-hero">
            <div class="member-benefit-top">
              <div>
                <h3>${benefit.title}</h3>
                <p>${benefit.subtitle}</p>
              </div>
              <span class="member-benefit-pill">${benefit.status}</span>
            </div>
            <div class="member-benefit-kpis">
              ${benefit.kpis.map(([value, label]) => `<div class="member-benefit-kpi"><b>${value}</b><span>${label}</span></div>`).join("")}
            </div>
          </section>

          <section class="member-benefit-card">
            <h4>权益内容</h4>
            <div class="benefit-highlight-list">
              ${benefit.highlights.map(([title, desc, value]) => `
                <div class="benefit-highlight">
                  <div><strong>${title}</strong><span>${desc}</span></div>
                  <b>${value}</b>
                </div>
              `).join("")}
            </div>
          </section>

          <section class="member-benefit-card">
            <h4>使用规则</h4>
            <div class="benefit-rule-list">
              ${benefit.rules.map(([label, value]) => `<div class="benefit-rule"><span>${label}</span><strong>${value}</strong></div>`).join("")}
            </div>
          </section>

          <section class="member-benefit-card">
            <h4>适用门店</h4>
            <div class="benefit-store-grid">
              ${benefit.stores.map(([brand, stores]) => `<div class="benefit-store"><strong>${brand}</strong>${stores}</div>`).join("")}
            </div>
          </section>

          <section class="member-benefit-card">
            <h4>使用流程</h4>
            <div class="benefit-timeline">
              ${benefit.steps.map(([title, desc], index) => `
                <div class="benefit-step">
                  <div class="benefit-step-dot">${index + 1}</div>
                  <div><strong>${title}</strong><span>${desc}</span></div>
                </div>
              `).join("")}
            </div>
          </section>
        </div>
      `;
      setMiniDetailActions(true);
      $("#cartBar").classList.add("hidden");
      $(".mini-tabbar").classList.add("hidden");
      updateMiniBackBar(activeMiniTab, true);
      refreshIcons();
    }

    function showCouponDetail(card) {
      const configs = {
        cash: {
          title: "满 99 元可用代金券",
          value: "¥20",
          subtitle: "堂食、扫码点餐可用，结算时自动匹配最优券。",
          tags: ["可用", "扫码点餐", "堂食"],
          stats: [["¥20", "优惠金额"], ["¥99", "使用门槛"], ["2026-07-31", "有效期"]],
          rules: [
            ["券状态", "可使用"],
            ["使用门槛", "订单实付商品金额满 99 元"],
            ["适用场景", "堂食扫码点餐、小程序点餐"],
            ["叠加规则", "可与会员折扣同享，不与满减券叠加"],
            ["退款规则", "整单退款后券退回，过期不退"]
          ],
          highlights: [
            ["推荐使用", "当前 A12 桌订单满 99 元时，确认订单页优先展示。", "优先"],
            ["适用品类", "正价菜品、饮品、小食均可计入门槛。", "全品类"],
            ["到账来源", "新人入会礼自动发放。", "入会礼"]
          ],
          stores: [["悦味小馆", "静安店、徐汇店、人民广场店"], ["锅里香", "徐汇店、虹桥天地店"], ["青禾轻食", "陆家嘴店、滨江店"], ["面里有光", "五角场店"]],
          steps: [["进入点餐", "选择菜品后进入确认订单页。"], ["自动匹配", "系统判断订单金额和门店范围，展示可用券。"], ["支付核销", "支付成功后券状态变为已使用，并记录核销订单。"]]
        },
        discount: {
          title: "指定品牌会员折扣券",
          value: "8.5折",
          subtitle: "适用于悦味小馆、锅里香旗下门店，不与套餐同享。",
          tags: ["可用", "指定品牌", "会员券"],
          stats: [["8.5折", "折扣力度"], ["2 个", "适用品牌"], ["¥50", "最高优惠"]],
          rules: [
            ["券状态", "可使用"],
            ["适用品牌", "悦味小馆、锅里香"],
            ["适用门槛", "正价菜品订单可用，无最低消费限制"],
            ["不可同享", "套餐价、秒杀价、生日折扣不可叠加"],
            ["有效期", "2026-08-15 23:59 前可用"]
          ],
          highlights: [
            ["本单建议", "如果订单以正价菜品为主，优先使用该折扣券。", "推荐"],
            ["优惠上限", "单笔订单最高优惠 50 元。", "¥50"],
            ["会员限制", "仅限当前手机号绑定会员本人使用。", "本人"]
          ],
          stores: [["悦味小馆", "静安店、徐汇店、人民广场店"], ["锅里香", "徐汇店、虹桥天地店"], ["其他品牌", "暂不支持该券"], ["使用终端", "小程序、门店收银台均可核销"]],
          steps: [["选择门店", "进入悦味小馆或锅里香门店点餐。"], ["结算确认", "确认订单页展示折扣金额和优惠来源。"], ["完成支付", "支付后同步扣减券次数，订单详情可查看优惠记录。"]]
        },
        exchange: {
          title: "酸梅汤兑换券",
          value: "换",
          subtitle: "任意消费可兑换，单桌限用 1 张。",
          tags: ["可兑换", "饮品券", "单桌限用"],
          stats: [["1 杯", "兑换数量"], ["0 元", "兑换价"], ["1 张", "单桌限用"]],
          rules: [
            ["券状态", "可兑换"],
            ["兑换商品", "手作酸梅汤 1 杯"],
            ["使用门槛", "任意消费可用，需随订单一起提交"],
            ["使用限制", "每桌每单限用 1 张，不可兑换现金"],
            ["有效期", "2026-07-31 23:59 前可用"]
          ],
          highlights: [
            ["兑换商品", "手作酸梅汤，默认少冰，可在备注中调整。", "饮品"],
            ["核销方式", "确认订单页添加兑换商品后自动抵扣。", "自动"],
            ["适合场景", "堂食扫码点餐、多人同桌订单。", "堂食"]
          ],
          stores: [["悦味小馆", "静安店、徐汇店、人民广场店"], ["锅里香", "徐汇店、虹桥天地店"], ["青禾轻食", "陆家嘴店"], ["库存说明", "门店售罄时不可兑换"]],
          steps: [["加入饮品", "在菜单中选择手作酸梅汤或进入券详情兑换。"], ["提交订单", "结算时系统识别兑换券并抵扣饮品金额。"], ["门店制作", "后厨按订单制作，取餐/上菜时同步核销。"]]
        }
      };
      const coupon = configs[card.dataset.coupon] || configs.cash;
      navHistory.mini.push(currentMiniPage());
      $(".mini-content").classList.add("detail-open");
      $$("[data-view]").forEach(view => view.classList.remove("active"));
      $('[data-view="mini-secondary"]').classList.add("active");
      if ($("#miniDetailTitle")) $("#miniDetailTitle").textContent = coupon.title;
      if ($("#miniDetailSubtitle")) $("#miniDetailSubtitle").textContent = coupon.subtitle;
      $("#miniDetailSection").textContent = "券包详情";
      $("#miniDetailList").innerHTML = `
        <div class="coupon-detail-page">
          <section class="coupon-detail-hero">
            <div class="coupon-detail-value">${coupon.value}</div>
            <div class="coupon-detail-info">
              <div class="coupon-detail-tags">${coupon.tags.map(tag => `<span>${tag}</span>`).join("")}</div>
              <h3>${coupon.title}</h3>
              <p>${coupon.subtitle}</p>
            </div>
          </section>

          <section class="coupon-detail-card">
            <h4>票券概览</h4>
            <div class="coupon-detail-summary">
              ${coupon.stats.map(([value, label]) => `<div class="coupon-detail-stat"><b>${value}</b><span>${label}</span></div>`).join("")}
            </div>
          </section>

          <section class="coupon-detail-card">
            <h4>使用规则</h4>
            <div class="benefit-rule-list">
              ${coupon.rules.map(([label, value]) => `<div class="benefit-rule"><span>${label}</span><strong>${value}</strong></div>`).join("")}
            </div>
          </section>

          <section class="coupon-detail-card">
            <h4>优惠说明</h4>
            <div class="benefit-highlight-list">
              ${coupon.highlights.map(([title, desc, value]) => `
                <div class="benefit-highlight">
                  <div><strong>${title}</strong><span>${desc}</span></div>
                  <b>${value}</b>
                </div>
              `).join("")}
            </div>
          </section>

          <section class="coupon-detail-card">
            <h4>适用范围</h4>
            <div class="benefit-store-grid">
              ${coupon.stores.map(([brand, stores]) => `<div class="benefit-store"><strong>${brand}</strong>${stores}</div>`).join("")}
            </div>
          </section>

          <section class="coupon-detail-card">
            <h4>使用流程</h4>
            <div class="benefit-timeline">
              ${coupon.steps.map(([title, desc], index) => `
                <div class="benefit-step">
                  <div class="benefit-step-dot">${index + 1}</div>
                  <div><strong>${title}</strong><span>${desc}</span></div>
                </div>
              `).join("")}
            </div>
          </section>
        </div>
      `;
      setMiniDetailActions(true);
      $("#cartBar").classList.add("hidden");
      $(".mini-tabbar").classList.add("hidden");
      updateMiniBackBar(activeMiniTab, true);
      refreshIcons();
    }

    function showProfileInfoDetail(card) {
      navHistory.mini.push(currentMiniPage());
      $(".mini-content").classList.add("detail-open");
      $$("[data-view]").forEach(view => view.classList.remove("active"));
      $('[data-view="mini-secondary"]').classList.add("active");
      if ($("#miniDetailTitle")) $("#miniDetailTitle").textContent = "个人中心";
      if ($("#miniDetailSubtitle")) $("#miniDetailSubtitle").textContent = "查看会员资料、账户资产、消费偏好与常用门店";
      $("#miniDetailSection").textContent = "个人资料";
      $("#miniDetailList").innerHTML = `
        <div class="profile-detail-page">
          <section class="profile-detail-hero">
            <div class="profile-detail-head">
              <div class="profile-detail-avatar">张</div>
              <div>
                <h3>张女士</h3>
                <p>138****2098 · 会员ID M20260714008</p>
                <div class="profile-detail-tags">
                  <span>铂金会员</span>
                  <span>悦味小馆常客</span>
                  <span>A12 桌用餐中</span>
                </div>
              </div>
            </div>
            <div class="profile-detail-kpis">
              <div class="profile-detail-kpi"><b>¥2,860</b><span>累计消费</span></div>
              <div class="profile-detail-kpi"><b>2,860</b><span>可用积分</span></div>
              <div class="profile-detail-kpi"><b>6 张</b><span>可用券包</span></div>
            </div>
          </section>

          <section class="profile-detail-card">
            <h4>基础信息</h4>
            <div class="benefit-rule-list">
              <div class="benefit-rule"><span>手机号</span><strong>138****2098</strong></div>
              <div class="benefit-rule"><span>会员等级</span><strong>铂金会员 Lv.4 · 当前享 8.8 折</strong></div>
              <div class="benefit-rule"><span>注册来源</span><strong>小程序扫码注册</strong></div>
              <div class="benefit-rule"><span>注册时间</span><strong>2026-04-18 12:36</strong></div>
              <div class="benefit-rule"><span>生日信息</span><strong>7 月生日月 · 已开启提醒</strong></div>
            </div>
          </section>

          <section class="profile-detail-card">
            <h4>账户资产</h4>
            <div class="benefit-highlight-list">
              <div class="benefit-highlight"><div><strong>积分余额</strong><span>可在确认订单页抵扣，100 积分抵 1 元。</span></div><b>2,860</b></div>
              <div class="benefit-highlight"><div><strong>可用券</strong><span>含代金券、折扣券、兑换券，系统自动匹配最优券。</span></div><b>6 张</b></div>
              <div class="benefit-highlight"><div><strong>距升级</strong><span>本月再消费 126 元可升级下一会员层级。</span></div><b>¥126</b></div>
            </div>
          </section>

          <section class="profile-detail-card">
            <h4>消费偏好</h4>
            <div class="profile-preference-grid">
              <div class="profile-preference"><strong>偏好品牌</strong>悦味小馆、锅里香</div>
              <div class="profile-preference"><strong>常点品类</strong>招牌热菜、酸辣口味、手作饮品</div>
              <div class="profile-preference"><strong>常用场景</strong>晚市堂食、多人同桌扫码点餐</div>
              <div class="profile-preference"><strong>服务偏好</strong>少辣、酸梅汤少冰、靠窗座位</div>
            </div>
          </section>

          <section class="profile-detail-card">
            <h4>常用门店</h4>
            <div class="benefit-store-grid">
              <div class="benefit-store"><strong>悦味小馆 · 静安店</strong>近 30 日到店 4 次 · 当前 A12 桌</div>
              <div class="benefit-store"><strong>悦味小馆 · 徐汇店</strong>近 90 日到店 3 次 · 偏好午市</div>
              <div class="benefit-store"><strong>锅里香 · 徐汇店</strong>近 90 日到店 2 次 · 已开发票</div>
              <div class="benefit-store"><strong>青禾轻食 · 陆家嘴店</strong>收藏门店 · 最近浏览</div>
            </div>
          </section>

          <section class="profile-detail-card">
            <h4>近期消费</h4>
            <div class="benefit-timeline">
              <div class="benefit-step"><div class="benefit-step-dot">1</div><div><strong>悦味小馆 · 静安店</strong><span>2026-07-14 18:08 · 订单 #A1208 · ¥114.60 · 制作中</span></div></div>
              <div class="benefit-step"><div class="benefit-step-dot">2</div><div><strong>青禾轻食 · 陆家嘴店</strong><span>2026-07-12 12:24 · 订单 #Q3302 · ¥56.00 · 使用代金券</span></div></div>
              <div class="benefit-step"><div class="benefit-step-dot">3</div><div><strong>锅里香 · 徐汇店</strong><span>2026-07-08 19:36 · 订单 #B0916 · ¥165.44 · 已开发票</span></div></div>
            </div>
          </section>
        </div>
      `;
      setMiniDetailActions(true);
      $("#cartBar").classList.add("hidden");
      $(".mini-tabbar").classList.add("hidden");
      updateMiniBackBar(activeMiniTab, true);
      refreshIcons();
    }

    function closeMiniDetail() {
      $(".mini-content").classList.remove("detail-open");
      showMini(activeMiniTab || "home", false);
    }

    function brandStoreRows(brand, count) {
      const suffixes = ["静安店", "徐汇店", "陆家嘴店", "人民广场店", "虹桥天地店", "五角场店", "滨江店", "前滩店"];
      const managers = ["赵敏", "李哲", "周宁", "陈可", "王璐", "何然", "孙一", "林川"];
      return suffixes.slice(0, count).map((store, index) => {
        const status = index === 6 ? "装修中" : index === 7 ? "试运营" : "营业中";
        const revenue = [12860, 9360, 8420, 7380, 6920, 5840, 0, 3160][index] || 4200;
        return { name: `${brand} · ${store}`, code: `${brand.slice(0, 2).toUpperCase()}-${String(index + 1).padStart(3, "0")}`, manager: managers[index], status, revenue, tables: 18 + index * 2 };
      });
    }

    function setAdminDetailActions(hidden) {
      const grid = $("#adminDetailGrid");
      const actions = $("#adminDetailActions");
      if (!grid || !actions) return;
      actions.classList.toggle("hidden", hidden);
      grid.style.gridTemplateColumns = hidden ? "1fr" : "";
    }

    function showBrandStoresList(brand, count) {
      navHistory.admin.push(currentAdminPage());
      const stores = brandStoreRows(brand, count);
      $(".admin-content").classList.add("detail-open");
      setAdminDetailActions(true);
      $$("[data-admin-view]").forEach(view => view.classList.remove("active"));
      $('[data-admin-view="secondary"]').classList.add("active");
      $("#adminDetailTitle").textContent = `${brand}门店列表`;
      $("#adminDetailSubtitle").textContent = `查看 ${brand} 旗下 ${count} 家门店`;
      $("#adminDetailSection").textContent = "门店列表";
      $("#adminDetailList").innerHTML = `
        <div class="table-wrap">
          <table>
            <thead><tr><th>品牌名称</th><th>品牌编码</th><th>品牌负责人</th><th>桌台数</th><th>今日门店总营收</th><th>状态</th><th>操作</th></tr></thead>
            <tbody>
              ${stores.map(store => `
                <tr>
                  <td>${store.name}</td>
                  <td>${store.code}</td>
                  <td>${store.manager}</td>
                  <td>${store.tables} 桌</td>
                  <td>${money(store.revenue)}</td>
                  <td><span class="status ${store.status === "营业中" ? "ok" : store.status === "试运营" ? "blue" : "warn"}">${store.status}</span></td>
                  <td><button class="ghost-button" data-store-config="${store.name}" data-store-code="${store.code}" data-store-tables="${store.tables}">配置</button><button class="ghost-button">桌台码</button></td>
                </tr>
              `).join("")}
            </tbody>
          </table>
        </div>
      `;
      $("#adminTitle").textContent = `${brand}门店列表 · 二级页`;
      $("#adminSubtitle").textContent = `品牌门店 / ${brand} / ${count} 家门店`;
      refreshIcons();
    }

    function memberRows(level) {
      const base = {
        "铂金会员": [["张女士", "138****2098", "悦味小馆", "¥2,860", "2,860", "2026-07-14"], ["林先生", "136****8812", "锅里香", "¥2,420", "2,120", "2026-07-13"], ["周女士", "139****7721", "悦味小馆", "¥1,980", "1,840", "2026-07-12"], ["何先生", "137****6106", "青禾轻食", "¥1,760", "1,620", "2026-07-10"]],
        "黄金会员": [["陈女士", "135****9033", "悦味小馆", "¥1,260", "980", "2026-07-14"], ["王先生", "188****5570", "面里有光", "¥1,080", "860", "2026-07-11"], ["赵女士", "186****0135", "锅里香", "¥940", "720", "2026-07-09"], ["许先生", "150****2190", "甜作所", "¥820", "690", "2026-07-08"]],
        "普通会员": [["刘女士", "187****4566", "青禾轻食", "¥260", "180", "2026-07-14"], ["马先生", "159****7781", "悦味小馆", "¥188", "120", "2026-07-12"], ["宋女士", "185****2910", "甜作所", "¥96", "76", "2026-07-10"], ["高先生", "131****6680", "面里有光", "¥72", "54", "2026-07-06"]]
      };
      return base[level] || base["普通会员"];
    }

    function showMemberLevelList(level, count) {
      navHistory.admin.push(currentAdminPage());
      activeMemberListLevel = level;
      const rows = memberRows(level);
      $(".admin-content").classList.add("detail-open");
      setAdminDetailActions(true);
      $$("[data-admin-view]").forEach(view => view.classList.remove("active"));
      $('[data-admin-view="secondary"]').classList.add("active");
      $("#adminDetailTitle").textContent = `${level}列表`;
      $("#adminDetailSubtitle").textContent = `展示 ${level} 下的会员信息，共 ${Number(count).toLocaleString()} 人`;
      $("#adminDetailSection").textContent = "会员列表";
      $("#adminDetailList").innerHTML = `
        <div class="detail-actions" style="margin-bottom:12px">
          <button class="primary-button" data-open-member-create><i data-lucide="user-plus"></i>新增会员</button>
        </div>
        <div class="table-wrap">
          <table>
            <thead><tr><th>会员姓名</th><th>手机号</th><th>偏好品牌</th><th>累计消费</th><th>积分</th><th>最近消费</th><th>状态</th><th>操作</th></tr></thead>
            <tbody id="memberLevelRows">
              ${rows.map(row => `
                <tr><td>${row[0]}</td><td>${row[1]}</td><td>${row[2]}</td><td>${row[3]}</td><td>${row[4]}</td><td>${row[5]}</td><td><span class="status ok">正常</span></td><td><button class="ghost-button">详情</button><button class="ghost-button">发券</button></td></tr>
              `).join("")}
            </tbody>
          </table>
        </div>
      `;
      $("#adminTitle").textContent = `${level}列表 · 二级页`;
      $("#adminSubtitle").textContent = `会员管理 / ${level} / 会员明细`;
      refreshIcons();
    }

    function showAdminCreate() {
      if (activeAdminTab === "members") {
        openMemberLevelCreateDialog();
        return;
      }
      const createMap = {
        dashboard: ["新增经营备注", "记录今日经营异常、运营动作和复盘事项", [["类型", "经营备注"], ["适用门店", $("#storeSelect")?.value || "全部品牌与门店"], ["负责人", "运营负责人"], ["状态", "待跟进"]]],
        brands: ["新增品牌", "创建品牌档案并配置默认门店规则", [["品牌名称", "新品牌"], ["品牌编码", "AUTO-NEW"], ["负责人", "待分配"], ["状态", "草稿"]]],
        menu: ["新增菜品", "创建菜品并同步到小程序、收银端和后厨档口", [["菜品名称", "新菜品"], ["分类", "热销"], ["价格", "待设置"], ["状态", "草稿"]]],
        orders: ["新增手工订单", "门店后台补录或服务员代客下单", [["订单来源", "后台手工"], ["品牌门店", $("#storeSelect")?.value || "全部品牌与门店"], ["桌台", "待选择"], ["状态", "待提交"]]],
        members: ["新增会员", "录入会员资料、绑定手机号并设置初始等级", [["会员姓名", "待填写"], ["手机号", "待填写"], ["会员等级", "普通会员"], ["初始积分", "0"]]],
        coupons: ["新增券模板", "创建代金券、折扣券或兑换券", [["券类型", "代金券"], ["适用范围", "全品牌堂食"], ["库存", "待设置"], ["状态", "草稿"]]],
        promos: ["新增促销活动", "创建满减、套餐、加价购或时段活动", [["活动类型", "满减"], ["适用门店", "全部门店"], ["活动时间", "待设置"], ["状态", "待审核"]]],
        reports: ["新增报表订阅", "创建固定报表视图和推送计划", [["报表类型", "经营日报"], ["周期", "每日"], ["接收人", "运营负责人"], ["状态", "启用"]]],
        "miniapp-settings": ["新增小程序配置", "新增小程序端、支付、扫码或通知相关配置项", [["配置项", "新配置"], ["当前值", "待设置"], ["适用范围", "全部品牌"], ["状态", "草稿"]]],
        "role-settings": ["新增角色权限", "创建后台成员角色并配置权限范围与数据范围", [["角色名称", "新角色"], ["权限范围", "待配置"], ["数据范围", "按品牌/门店"], ["状态", "启用"]]]
      };
      const config = createMap[activeAdminTab] || createMap.dashboard;
      showAdminDetail(config[0], config[1], config[2]);
    }

    function openStoreConfig(name, code, tables) {
      $("#storeConfigTitle").textContent = `${name}配置`;
      $("#storeConfigSubtitle").textContent = `门店编码 ${code} · ${tables} 桌 · 点餐、桌台、后厨和财务规则`;
      $("#storeConfigCode").value = code;
      $("#storeConfigTables").value = `${tables} 桌`;
      $("#storeConfigTablePrefix").value = name.includes("包间") ? "P / 包间" : "A / B / 包间";
      $("#storeConfigDialog").classList.add("show");
      refreshIcons();
    }

    function showOrderDetail(orderId) {
      const orders = {
        A1208: {
          title: "#A1208", brand: "悦味小馆", store: "静安店", table: "A12 桌", people: "4 人", source: "小程序扫码点餐", member: "张女士 · 铂金会员 · 138****2098", created: "2026-07-14 18:08", pay: "微信支付 · 已支付", status: "制作中", amount: "¥218.00", discount: "满减 ¥30 + 积分抵扣 ¥5", payable: "¥183.00", invoice: "待用户申请",
          dishes: [["招牌酸菜鱼", "热菜档", "x1", "¥128.00", "制作中"], ["藤椒牛肉饭", "主食档", "x1", "¥42.00", "待上菜"], ["手作酸梅汤", "饮品档", "x2", "¥32.00", "已完成"], ["椒盐小酥肉", "小食档", "x1", "¥32.00", "排队中"]],
          timeline: [["18:08", "用户扫码提交订单"], ["18:09", "前台接单并分发后厨"], ["18:12", "热菜档开始制作"], ["进行中", "预计 18:26 前上齐"]]
        },
        B0916: {
          title: "#B0916", brand: "锅里香", store: "徐汇店", table: "B06 桌", people: "3 人", source: "门店扫码点餐", member: "张女士 · 铂金会员 · 138****2098", created: "2026-07-08 19:36", pay: "待支付 · 已锁桌", status: "待支付", amount: "¥188.00", discount: "会员 8.8 折", payable: "¥165.44", invoice: "电子发票已开具 #031002400111",
          dishes: [["双人火锅套餐", "套餐档", "x1", "¥188.00", "待支付"], ["椒盐小酥肉", "小食档", "x1", "¥32.00", "待支付"], ["酸梅汤", "饮品档", "x1", "¥16.00", "待支付"]],
          timeline: [["19:36", "用户提交订单"], ["19:37", "系统计算会员折扣"], ["19:38", "等待用户支付"], ["20:12", "历史记录显示已开发票"]]
        },
        Q3302: {
          title: "#Q3302", brand: "青禾轻食", store: "陆家嘴店", table: "18 桌", people: "2 人", source: "小程序扫码点餐", member: "刘女士 · 普通会员 · 187****4566", created: "2026-07-12 12:24", pay: "微信支付 · 已支付", status: "已上齐", amount: "¥76.00", discount: "代金券 ¥20", payable: "¥56.00", invoice: "未申请",
          dishes: [["青禾鸡胸沙拉", "冷菜档", "x1", "¥48.00", "已上齐"], ["茉莉冷泡茶", "饮品档", "x1", "¥18.00", "已上齐"], ["黄金薯条", "小食档", "x1", "¥10.00", "已上齐"]],
          timeline: [["12:24", "用户提交订单"], ["12:25", "门店接单"], ["12:34", "菜品制作完成"], ["12:36", "已上齐并完成支付"]]
        },
        A1210: {
          title: "#A1210", brand: "悦味小馆", store: "静安店", table: "A03 桌", people: "2 人", source: "后台手工订单", member: "非会员散客", created: "2026-07-15 12:10", pay: "未支付", status: "待接单", amount: "¥96.00", discount: "无", payable: "¥96.00", invoice: "不可开票，待支付",
          dishes: [["商务午餐", "套餐档", "x2", "¥96.00", "待接单"]],
          timeline: [["12:10", "后台补录订单"], ["待处理", "等待门店接单"], ["待处理", "后厨未开始制作"]]
        }
      };
      const order = orders[orderId] || orders.A1208;
      navHistory.admin.push(currentAdminPage());
      $(".admin-content").classList.add("detail-open");
      setAdminDetailActions(true);
      $$("[data-admin-view]").forEach(view => view.classList.remove("active"));
      $('[data-admin-view="secondary"]').classList.add("active");
      $("#adminDetailTitle").textContent = `${order.title}订单详情`;
      $("#adminDetailSubtitle").textContent = `${order.brand} / ${order.store} / ${order.table}`;
      $("#adminDetailSection").textContent = "订单详情";
      $("#adminDetailList").innerHTML = `
        <div class="metric-grid" style="grid-template-columns:repeat(4,minmax(140px,1fr));padding:0 0 12px">
          <article class="metric" data-admin-static="true"><div class="metric-head"><span>订单金额</span><span class="metric-icon"><i data-lucide="wallet"></i></span></div><div><b>${order.amount}</b><span class="delta">应付 ${order.payable}</span></div></article>
          <article class="metric" data-admin-static="true"><div class="metric-head"><span>订单状态</span><span class="metric-icon"><i data-lucide="receipt-text"></i></span></div><div><b>${order.status}</b><span class="delta">${order.pay}</span></div></article>
          <article class="metric" data-admin-static="true"><div class="metric-head"><span>桌台人数</span><span class="metric-icon"><i data-lucide="users"></i></span></div><div><b>${order.table}</b><span class="delta">${order.people}</span></div></article>
          <article class="metric" data-admin-static="true"><div class="metric-head"><span>优惠信息</span><span class="metric-icon"><i data-lucide="ticket-percent"></i></span></div><div><b>${order.discount}</b><span class="delta">自动计算</span></div></article>
        </div>
        <div class="list-stack" style="padding:0 0 12px">
          <div class="setting-row"><div><strong>订单来源</strong><span>${order.source}</span></div><span class="status blue">${order.brand}</span></div>
          <div class="setting-row"><div><strong>下单门店</strong><span>${order.store} · ${order.table} · ${order.people}</span></div><span class="status ok">门店</span></div>
          <div class="setting-row"><div><strong>会员信息</strong><span>${order.member}</span></div><span class="status ok">会员</span></div>
          <div class="setting-row"><div><strong>下单时间</strong><span>${order.created}</span></div><span class="status warn">时间</span></div>
          <div class="setting-row"><div><strong>发票/售后</strong><span>${order.invoice}</span></div><span class="status blue">财务</span></div>
        </div>
        <div class="table-wrap" style="margin-bottom:12px">
          <table><thead><tr><th>菜品</th><th>后厨档口</th><th>数量</th><th>金额</th><th>制作状态</th></tr></thead>
            <tbody>${order.dishes.map(row => `<tr data-admin-static="true"><td>${row[0]}</td><td>${row[1]}</td><td>${row[2]}</td><td>${row[3]}</td><td><span class="status ${row[4].includes("已") ? "ok" : row[4].includes("待") ? "blue" : "warn"}">${row[4]}</span></td></tr>`).join("")}</tbody>
          </table>
        </div>
        <div class="list-stack" style="padding:0">
          ${order.timeline.map(item => `<div class="setting-row"><div><strong>${item[0]}</strong><span>${item[1]}</span></div><span class="status ok">进度</span></div>`).join("")}
        </div>
      `;
      $("#adminTitle").textContent = `${order.title}订单详情 · 二级页`;
      $("#adminSubtitle").textContent = `订单中心 / ${order.brand} / ${order.store}`;
      refreshIcons();
    }

    function showAdminDetail(title, subtitle, rows, recordHistory = true) {
      if (recordHistory) navHistory.admin.push(currentAdminPage());
      $(".admin-content").classList.add("detail-open");
      setAdminDetailActions(false);
      $$("[data-admin-view]").forEach(view => view.classList.remove("active"));
      $('[data-admin-view="secondary"]').classList.add("active");
      $("#adminDetailTitle").textContent = title;
      $("#adminDetailSubtitle").textContent = subtitle;
      $("#adminDetailSection").textContent = `${title}详情`;
      $("#adminDetailList").innerHTML = rows.map(([label, value]) => `
        <div class="setting-row"><div><strong>${label}</strong><span>${value}</span></div><span class="status blue">可配置</span></div>
      `).join("");
      $("#adminTitle").textContent = `${title} · 二级页`;
      $("#adminSubtitle").textContent = subtitle;
      refreshIcons();
    }

    function roleMemberRows(role) {
      const rows = {
        "集团管理员": [
          ["顾明", "gu.ming", "集团总部", "2026-07-15 09:18", "启用"],
          ["周澜", "zhou.lan", "集团财务中心", "2026-07-15 08:42", "启用"],
          ["沈亦", "shen.yi", "集团运营中心", "2026-07-14 20:16", "启用"],
          ["唐可", "tang.ke", "集团技术支持", "2026-07-14 18:05", "启用"],
          ["宋宁", "song.ning", "审计与风控", "2026-07-14 16:40", "启用"],
          ["林初", "lin.chu", "集团总部", "2026-07-13 19:22", "启用"],
          ["贺一", "he.yi", "品牌管理部", "2026-07-12 11:35", "停用"],
          ["许安", "xu.an", "数据中心", "2026-07-11 17:28", "启用"]
        ],
        "品牌运营": [
          ["赵敏", "zhao.min", "悦味小馆", "2026-07-15 10:06", "启用"],
          ["李乔", "li.qiao", "锅里香", "2026-07-15 09:51", "启用"],
          ["王璐", "wang.lu", "青禾轻食", "2026-07-14 21:04", "启用"],
          ["陈可", "chen.ke", "面里有光", "2026-07-14 18:26", "启用"],
          ["何然", "he.ran", "甜作所", "2026-07-14 15:18", "启用"],
          ["孙一", "sun.yi", "悦味小馆", "2026-07-13 19:44", "待激活"],
          ["林川", "lin.chuan", "锅里香", "2026-07-13 13:07", "启用"],
          ["蒋南", "jiang.nan", "青禾轻食", "2026-07-12 16:32", "启用"]
        ],
        "门店店长": [
          ["张宁", "zhang.ning", "悦味小馆 静安店", "2026-07-15 09:33", "启用"],
          ["刘晨", "liu.chen", "悦味小馆 徐汇店", "2026-07-15 08:58", "启用"],
          ["韩序", "han.xu", "锅里香 陆家嘴店", "2026-07-14 22:10", "启用"],
          ["罗静", "luo.jing", "青禾轻食 人民广场店", "2026-07-14 17:49", "启用"],
          ["魏然", "wei.ran", "面里有光 虹桥天地店", "2026-07-14 14:15", "需复核"],
          ["郑欣", "zheng.xin", "甜作所 五角场店", "2026-07-13 20:01", "启用"],
          ["方舟", "fang.zhou", "悦味小馆 滨江店", "2026-07-13 12:28", "启用"],
          ["马越", "ma.yue", "锅里香 前滩店", "2026-07-12 18:33", "启用"]
        ],
        "收银员": [
          ["吴迪", "wu.di", "悦味小馆 静安店", "2026-07-15 10:22", "启用"],
          ["钱雨", "qian.yu", "悦味小馆 徐汇店", "2026-07-15 10:11", "启用"],
          ["孟佳", "meng.jia", "锅里香 陆家嘴店", "2026-07-15 09:40", "启用"],
          ["高洋", "gao.yang", "青禾轻食 人民广场店", "2026-07-14 22:36", "启用"],
          ["白露", "bai.lu", "面里有光 虹桥天地店", "2026-07-14 19:14", "启用"],
          ["杜衡", "du.heng", "甜作所 五角场店", "2026-07-14 16:52", "停用"],
          ["任清", "ren.qing", "悦味小馆 滨江店", "2026-07-13 21:07", "启用"],
          ["姚远", "yao.yuan", "锅里香 前滩店", "2026-07-13 15:29", "启用"]
        ]
      };
      return rows[role] || rows["收银员"];
    }

    function showRoleMembersList(role, count, scope) {
      navHistory.admin.push(currentAdminPage());
      const rows = roleMemberRows(role);
      $(".admin-content").classList.add("detail-open");
      setAdminDetailActions(true);
      $$("[data-admin-view]").forEach(view => view.classList.remove("active"));
      $('[data-admin-view="secondary"]').classList.add("active");
      $("#adminDetailTitle").textContent = `${role}成员列表`;
      $("#adminDetailSubtitle").textContent = `查看 ${role} 角色下的成员信息，共 ${Number(count).toLocaleString()} 人`;
      $("#adminDetailSection").textContent = "成员列表";
      $("#adminDetailList").innerHTML = `
        <div class="table-wrap">
          <table>
            <thead><tr><th>成员姓名</th><th>账号</th><th>所属范围</th><th>角色</th><th>最近登录</th><th>状态</th><th>操作</th></tr></thead>
            <tbody>
              ${rows.map(row => `
                <tr>
                  <td>${row[0]}</td>
                  <td>${row[1]}</td>
                  <td>${row[2]}</td>
                  <td>${role}</td>
                  <td>${row[3]}</td>
                  <td><span class="status ${row[4] === "启用" ? "ok" : row[4] === "停用" ? "warn" : "blue"}">${row[4]}</span></td>
                  <td><button class="ghost-button">详情</button><button class="ghost-button">权限</button></td>
                </tr>
              `).join("")}
            </tbody>
          </table>
        </div>
      `;
      $("#adminTitle").textContent = `${role}成员列表 · 二级页`;
      $("#adminSubtitle").textContent = `权限角色 / ${role} / ${scope}`;
      refreshIcons();
    }

    function closeAdminDetail() {
      $(".admin-content").classList.remove("detail-open");
      showAdmin(activeAdminTab);
    }

    function cashierDefaultActionsHtml() {
      return `
        <div class="card-head"><h3>前台处理</h3><button class="ghost-button" data-back-cashier-detail><i data-lucide="arrow-left"></i>返回收银</button></div>
        <div class="form-grid">
          <div class="field"><label>处理类型</label><select><option>加菜/改价</option><option>核销优惠</option><option>退款</option><option>交班</option></select></div>
          <div class="field"><label>授权员工</label><input value="店长 018" /></div>
          <div class="field"><label>打印联数</label><input value="顾客联、后厨联、财务联" /></div>
          <div class="field"><label>备注</label><input value="堂食高峰优先处理" /></div>
        </div>
      `;
    }

    function setCashierDetailActions(hidden, content = null) {
      const grid = $("#cashierDetailGrid");
      const actions = $("#cashierDetailActions");
      if (!grid || !actions) return;
      if (content) actions.innerHTML = content;
      actions.classList.toggle("hidden", hidden);
      grid.style.gridTemplateColumns = hidden ? "1fr" : "";
    }

    let cashierToastTimer;
    function showCashierToast(message) {
      const toast = $("#cashierToast");
      if (!toast) return;
      toast.textContent = message;
      toast.classList.add("show");
      window.clearTimeout(cashierToastTimer);
      cashierToastTimer = window.setTimeout(() => toast.classList.remove("show"), 1800);
    }

    function showCashierDetail(title, subtitle, rows, recordHistory = true) {
      if (recordHistory) navHistory.cashier.push(currentCashierPage());
      $(".cashier-shell").classList.add("cashier-detail-open");
      setCashierDetailActions(false, cashierDefaultActionsHtml());
      if ($("#cashierDetailTitle")) $("#cashierDetailTitle").textContent = title;
      if ($("#cashierDetailSubtitle")) $("#cashierDetailSubtitle").textContent = subtitle;
      $("#cashierDetailSection").textContent = `${title}详情`;
      $("#cashierDetailList").innerHTML = rows.map(([label, value]) => `
        <div class="setting-row"><div><strong>${label}</strong><span>${value}</span></div><span class="status ok">门店</span></div>
      `).join("");
      refreshIcons();
    }

    function showCashierMemberDetail(recordHistory = true) {
      if (recordHistory) navHistory.cashier.push(currentCashierPage());
      $(".cashier-shell").classList.add("cashier-detail-open");
      setCashierDetailActions(true);
      $("#cashierDetailSection").textContent = "会员识别详情";
      $("#cashierDetailList").innerHTML = `
        <div class="cashier-member-profile">
          <div class="cashier-member-avatar">张</div>
          <div class="cashier-member-meta">
            <h4>张女士 · 铂金会员</h4>
            <p>手机号 138****6721 · 会员ID M20260715018 · 近 30 日到店 6 次</p>
          </div>
        </div>
        <div class="metric-grid" style="grid-template-columns:repeat(4,minmax(120px,1fr));margin-top:12px">
          <article class="metric"><div class="metric-head"><span>会员折扣</span><span class="metric-icon"><i data-lucide="badge-percent"></i></span></div><div><b>8.8 折</b><span class="delta">本单预计优惠 ¥20.40</span></div></article>
          <article class="metric"><div class="metric-head"><span>可用积分</span><span class="metric-icon"><i data-lucide="coins"></i></span></div><div><b>2,860</b><span class="delta">可抵扣 ¥5.00</span></div></article>
          <article class="metric"><div class="metric-head"><span>储值余额</span><span class="metric-icon"><i data-lucide="credit-card"></i></span></div><div><b>¥328.00</b><span class="delta">可用于本单支付</span></div></article>
          <article class="metric"><div class="metric-head"><span>可用券</span><span class="metric-icon"><i data-lucide="ticket-percent"></i></span></div><div><b>3 张</b><span class="delta">推荐满 168 减 30</span></div></article>
        </div>
        <div class="cashier-benefit-grid" style="margin-top:12px">
          <div class="cashier-benefit-item"><strong>等级权益</strong><span>全品牌堂食 8.8 折，生日月赠招牌甜品券。</span></div>
          <div class="cashier-benefit-item"><strong>偏好标签</strong><span>偏好酸辣口味、常点热菜，最近收藏招牌酸菜鱼。</span></div>
          <div class="cashier-benefit-item"><strong>本单建议</strong><span>优先使用满减券，再叠加会员折扣和积分抵扣。</span></div>
        </div>
        <div class="table-wrap" style="margin-top:12px">
          <table>
            <thead><tr><th>最近消费</th><th>品牌门店</th><th>桌台/订单</th><th>消费金额</th><th>使用权益</th><th>状态</th></tr></thead>
            <tbody>
              <tr><td>2026-07-13 19:24</td><td>悦味小馆 · 静安店</td><td>B08 / #B0816</td><td>¥236.00</td><td>会员折扣、满减券</td><td><span class="status ok">已完成</span></td></tr>
              <tr><td>2026-07-09 12:18</td><td>悦味小馆 · 徐汇店</td><td>A03 / #A0311</td><td>¥128.00</td><td>积分抵扣</td><td><span class="status ok">已完成</span></td></tr>
              <tr><td>2026-07-02 20:06</td><td>锅里香 · 浦东店</td><td>C12 / #C1220</td><td>¥312.00</td><td>储值卡支付</td><td><span class="status ok">已完成</span></td></tr>
            </tbody>
          </table>
        </div>
        <div class="list-stack" style="margin-top:12px">
          <div class="setting-row"><div><strong>当前绑定桌台</strong><span>${posTable.name} · ${posTable.people} · ${posTable.status}</span></div><span class="status ok">已绑定</span></div>
          <div class="setting-row"><div><strong>本单金额</strong><span>应收 ${$("#posTotal").textContent}，已计算会员折扣、满减与积分抵扣。</span></div><span class="status blue">已计算</span></div>
          <div class="setting-row"><div><strong>积分变动</strong><span>支付完成后预计新增 114 积分，抵扣 500 积分。</span></div><span class="status warn">待支付</span></div>
        </div>
      `;
      refreshIcons();
    }

    function showHandoverDetail(recordHistory = true) {
      if (recordHistory) navHistory.cashier.push(currentCashierPage());
      $(".cashier-shell").classList.add("cashier-detail-open");
      setCashierDetailActions(true);
      if ($("#cashierDetailTitle")) $("#cashierDetailTitle").textContent = "晚班交班汇总";
      if ($("#cashierDetailSubtitle")) $("#cashierDetailSubtitle").textContent = "悦味小馆 · 静安店 · 2026-07-15 17:00-23:00";
      $("#cashierDetailSection").textContent = "交班明细";
      $("#cashierDetailList").innerHTML = `
        <div class="metric-grid" style="grid-template-columns:repeat(4,minmax(120px,1fr));margin-bottom:12px">
          <article class="metric"><div class="metric-head"><span>收款总额</span><span class="metric-icon"><i data-lucide="wallet"></i></span></div><div><b>¥18,642</b><span class="delta">已核对</span></div></article>
          <article class="metric"><div class="metric-head"><span>订单数</span><span class="metric-icon"><i data-lucide="receipt-text"></i></span></div><div><b>126</b><span class="delta">堂食 112 / 加菜 14</span></div></article>
          <article class="metric"><div class="metric-head"><span>退款</span><span class="metric-icon"><i data-lucide="undo-2"></i></span></div><div><b>¥328</b><span class="delta">3 笔待复核</span></div></article>
          <article class="metric"><div class="metric-head"><span>现金差异</span><span class="metric-icon"><i data-lucide="banknote"></i></span></div><div><b>¥0</b><span class="delta">无差异</span></div></article>
        </div>
        <div class="table-wrap" style="margin-bottom:12px">
          <table>
            <thead><tr><th>支付方式</th><th>笔数</th><th>实收金额</th><th>手续费</th><th>状态</th></tr></thead>
            <tbody>
              <tr><td>微信支付</td><td>78</td><td>¥11,286</td><td>¥33.86</td><td><span class="status ok">已对账</span></td></tr>
              <tr><td>支付宝</td><td>24</td><td>¥3,942</td><td>¥11.82</td><td><span class="status ok">已对账</span></td></tr>
              <tr><td>储值卡</td><td>16</td><td>¥2,108</td><td>¥0.00</td><td><span class="status blue">会员账户</span></td></tr>
              <tr><td>现金</td><td>8</td><td>¥1,306</td><td>¥0.00</td><td><span class="status ok">已清点</span></td></tr>
            </tbody>
          </table>
        </div>
        <div class="list-stack">
          <div class="setting-row"><div><strong>待交接桌台</strong><span>B06 待支付，P05 大桌待核销发票信息</span></div><span class="status warn">2 项</span></div>
          <div class="setting-row"><div><strong>挂单记录</strong><span>A08 桌已挂单，含手作酸梅汤 1 份</span></div><span class="status blue">1 笔</span></div>
          <div class="setting-row"><div><strong>发票与退款</strong><span>#A1208 已申请发票，#R0921 退款待店长复核</span></div><span class="status warn">待处理</span></div>
          <div class="setting-row"><div><strong>备用金交接</strong><span>备用金 ¥2,000，现金实点 ¥1,306，钱箱无差异</span></div><span class="status ok">正常</span></div>
        </div>
      `;
      refreshIcons();
    }

    function closeCashierDetail() {
      $(".cashier-shell").classList.remove("cashier-detail-open");
      setCashierDetailActions(false);
      refreshIcons();
    }

    function goBackMini() {
      const previous = navHistory.mini.pop();
      if (!previous) {
        showMini("home", false);
        return;
      }
      if (previous.type === "mini-detail") {
        closeMiniDetail();
      } else {
        showMini(previous.tab || "home", false);
      }
    }

    function goBackAdmin() {
      const previous = navHistory.admin.pop();
      if (!previous) {
        showAdmin("dashboard", false);
        return;
      }
      if (previous.type === "admin-detail") {
        closeAdminDetail();
      } else {
        showAdmin(previous.tab || "dashboard", false);
      }
    }

    function goBackCashier() {
      const previous = navHistory.cashier.pop();
      if (!previous) {
        closeCashierDetail();
        return;
      }
      if (previous.type === "cashier-detail") {
        closeCashierDetail();
      } else {
        closeCashierDetail();
      }
    }

    function showCheckout() {
      const summary = updateCart();
      const selected = [...cart.entries()].map(([id, qty]) => ({ ...dishes.find(dish => dish.id === id), qty }));
      $("#checkoutList").innerHTML = `
        ${selected.length ? selected.map(item => `
          <div class="checkout-row"><span>${item.name} x ${item.qty}</span><strong>${money(item.price * item.qty)}</strong></div>
        `).join("") : `<div class="checkout-row"><span>推荐先加一份招牌酸菜鱼</span><strong>¥128.00</strong></div>`}
        <div class="checkout-row"><span>商品小计</span><strong>${money(summary.subtotal || 128)}</strong></div>
        <div class="checkout-row"><span>会员 8.8 折</span><strong>- ${money(summary.memberDiscount || 15.36)}</strong></div>
        <div class="checkout-row"><span>最优代金券/满减</span><strong>- ${money(summary.discount || 20)}</strong></div>
        <div class="checkout-row"><span>积分抵扣</span><strong>- ¥5.00</strong></div>
        <div class="checkout-row checkout-total"><span>应付</span><strong>${money(Math.max(0, (summary.total || 92.64) - 5))}</strong></div>
      `;
      showMini("checkout");
      refreshIcons();
    }

    function openScanOrderDialog() {
      $("#scanOrderDialog").classList.add("show");
      refreshIcons();
    }

    function closeScanOrderDialog() {
      $("#scanOrderDialog").classList.remove("show");
    }

    function showScanPeoplePage(store = "悦味小馆 · 静安店", table = "A12 桌") {
      $("#miniStore").textContent = store;
      $("#tableBadge").innerHTML = `<i data-lucide="qr-code"></i>${table}`;
      $("#scanPeopleStore").textContent = store;
      $("#scanPeopleTable").textContent = table;
      $$(".people-option").forEach(button => button.classList.toggle("active", button.dataset.diners === "2"));
      $("#scanPeopleTip").textContent = "已选 2 人";
      showMini("scan-people");
      refreshIcons();
    }

    function rescanOrderCode() {
      const stores = ["悦味小馆 · 静安店", "悦味小馆 · 徐汇店", "锅里香 · 陆家嘴店", "青禾轻食 · 人民广场店"];
      const tables = ["A12 桌", "B06 桌", "包间 P03", "18 桌"];
      const index = (stores.indexOf($("#scanStore").value) + 1) % stores.length;
      $("#scanStore").value = stores[index];
      $("#scanTable").value = tables[index];
      $("#scanPeople").value = index === 2 ? "6 人" : index === 3 ? "3 人" : "2 人";
    }

    function confirmScanOrder() {
      const store = $("#scanStore").value;
      const table = $("#scanTable").value;
      $("#miniStore").textContent = store;
      $("#tableBadge").innerHTML = `<i data-lucide="qr-code"></i>${table}`;
      closeScanOrderDialog();
      showScanPeoplePage(store, table);
    }

    function chooseDiners(button) {
      $$(".people-option").forEach(option => option.classList.toggle("active", option === button));
      $("#scanPeopleTip").textContent = `已选 ${button.dataset.diners} 人`;
    }

    function startScannedOrder() {
      showMini("order");
      updateCart();
      refreshIcons();
    }

    function refreshIcons() {
      if (window.lucide) lucide.createIcons({ attrs: { width: 18, height: 18, strokeWidth: 2 } });
    }

    document.addEventListener("click", event => {
      if (event.target.closest("[data-scan-order]")) {
        showScanPeoplePage();
        return;
      }

      if (event.target.closest("#closeScanOrder") || event.target.id === "scanOrderDialog") {
        closeScanOrderDialog();
        return;
      }

      if (event.target.closest("#rescanOrder")) {
        rescanOrderCode();
        return;
      }

      if (event.target.closest("#confirmScanOrder")) {
        confirmScanOrder();
        return;
      }

      const diners = event.target.closest("[data-diners]");
      if (diners) {
        chooseDiners(diners);
        return;
      }

      if (event.target.closest("#startScanOrder")) {
        startScannedOrder();
        return;
      }

      const storeConfig = event.target.closest("[data-store-config]");
      if (storeConfig) {
        openStoreConfig(storeConfig.dataset.storeConfig, storeConfig.dataset.storeCode, storeConfig.dataset.storeTables);
        return;
      }

      if (event.target.closest("#closeStoreConfig") || event.target.closest("#saveStoreConfig") || event.target.id === "storeConfigDialog") {
        $("#storeConfigDialog").classList.remove("show");
        return;
      }

      if (event.target.closest("#copyStoreConfig")) {
        $("#storeConfigSubtitle").textContent = "已复制当前门店配置，可应用到同品牌其他门店";
        return;
      }

      if (event.target.closest("#closeBrandCreate") || event.target.closest("#cancelBrandCreate") || event.target.id === "brandCreateDialog") {
        closeBrandCreateDialog();
        return;
      }

      if (event.target.closest("#saveBrandCreate")) {
        saveNewBrand();
        return;
      }

      if (event.target.closest("#closeDishCreate") || event.target.closest("#cancelDishCreate") || event.target.id === "dishCreateDialog") {
        closeDishCreateDialog();
        return;
      }

      if (event.target.closest("#saveDishCreate")) {
        saveNewDish();
        return;
      }

      if (event.target.closest("#closeCouponCreate") || event.target.closest("#cancelCouponCreate") || event.target.id === "couponCreateDialog") {
        closeCouponCreateDialog();
        return;
      }

      if (event.target.closest("#saveCouponCreate")) {
        saveNewCoupon();
        return;
      }

      if (event.target.closest("#closePromoCreate") || event.target.closest("#cancelPromoCreate") || event.target.id === "promoCreateDialog") {
        closePromoCreateDialog();
        return;
      }

      if (event.target.closest("#savePromoCreate")) {
        saveNewPromo();
        return;
      }

      if (event.target.closest("#closeMemberCreate") || event.target.closest("#cancelMemberCreate") || event.target.id === "memberCreateDialog") {
        closeMemberCreateDialog();
        return;
      }

      if (event.target.closest("#saveMemberCreate")) {
        saveNewMember();
        return;
      }

      if (event.target.closest("#closeMemberLevelCreate") || event.target.closest("#cancelMemberLevelCreate") || event.target.id === "memberLevelCreateDialog") {
        closeMemberLevelCreateDialog();
        return;
      }

      if (event.target.closest("#saveMemberLevelCreate")) {
        saveNewMemberLevel();
        return;
      }

      const miniPageBack = event.target.closest("[data-back-mini-page]");
      if (miniPageBack) {
        goBackMini();
        return;
      }

      const appBack = event.target.closest("[data-back-app]");
      if (appBack) {
        if (appBack.dataset.backApp === "mini") goBackMini();
        if (appBack.dataset.backApp === "admin") goBackAdmin();
        if (appBack.dataset.backApp === "cashier") goBackCashier();
        return;
      }

      const miniBack = event.target.closest("[data-back-mini-detail]");
      if (miniBack) {
        goBackMini();
        return;
      }

      const adminBack = event.target.closest("[data-back-admin-detail]");
      if (adminBack) {
        goBackAdmin();
        return;
      }

      const cashierBack = event.target.closest("[data-back-cashier-detail]");
      if (cashierBack) {
        goBackCashier();
        return;
      }

      const mode = event.target.closest("[data-mode]");
      if (mode) {
        $$(".mode-tabs button").forEach(button => button.classList.toggle("active", button === mode));
        $("#page").classList.toggle("only-mini", mode.dataset.mode === "mini");
        $("#page").classList.toggle("only-admin", mode.dataset.mode === "admin");
        $("#page").classList.toggle("only-cashier", mode.dataset.mode === "cashier");
      }

      const mini = event.target.closest("[data-mini-tab]");
      if (mini) showMini(mini.dataset.miniTab);

      const cat = event.target.closest("[data-cat]");
      if (cat) {
        activeCat = cat.dataset.cat;
        $$(".category-list button").forEach(button => button.classList.toggle("active", button === cat));
        renderDishes();
      }

      const inc = event.target.closest("[data-inc]");
      if (inc) changeQty(inc.dataset.inc, 1);

      const dec = event.target.closest("[data-dec]");
      if (dec) changeQty(dec.dataset.dec, -1);

      const admin = event.target.closest("[data-admin-tab]");
      if (admin) showAdmin(admin.dataset.adminTab);

      const posCat = event.target.closest("[data-pos-cat]");
      if (posCat) {
        activePosCat = posCat.dataset.posCat;
        renderPosMenu();
        return;
      }

      const brandStores = event.target.closest("[data-brand-stores]");
      if (brandStores) {
        const brand = brandStores.dataset.brandStores;
        const count = Number(brandStores.dataset.storeCount || 8);
        showBrandStoresList(brand, count);
        return;
      }

      const memberLevel = event.target.closest("[data-member-level]");
      if (memberLevel) {
        showMemberLevelList(memberLevel.dataset.memberLevel, memberLevel.dataset.memberCount);
        return;
      }

      const roleMembers = event.target.closest("[data-role-members]");
      if (roleMembers) {
        showRoleMembersList(roleMembers.dataset.roleMembers, roleMembers.dataset.roleCount, roleMembers.dataset.roleScope);
        return;
      }

      const openMemberCreate = event.target.closest("[data-open-member-create]");
      if (openMemberCreate) {
        openMemberCreateDialog(activeMemberListLevel || "普通会员");
        return;
      }

      const openMemberLevelCreate = event.target.closest("[data-open-member-level-create]");
      if (openMemberLevelCreate) {
        openMemberLevelCreateDialog();
        return;
      }

      const openCouponCreate = event.target.closest("[data-open-coupon-create]");
      if (openCouponCreate) {
        openCouponCreateDialog();
        return;
      }

      const openPromoCreate = event.target.closest("[data-open-promo-create]");
      if (openPromoCreate) {
        openPromoCreateDialog();
        return;
      }

      const openBrandCreate = event.target.closest("[data-open-brand-create]");
      if (openBrandCreate) {
        openBrandCreateDialog();
        return;
      }

      const openDishCreate = event.target.closest("[data-open-dish-create]");
      if (openDishCreate) {
        openDishCreateDialog();
        return;
      }

      const miniDetail = event.target.closest("[data-mini-detail], .coupon-card, .promotion-card, .track-item, .member-card, .history-card, .checkout-card, .checkout-tip, .quick-action");
      if (miniDetail && !event.target.closest("[data-inc], [data-dec], [data-mini-tab], button[data-cat], #checkoutBtn, #payOrder, #continueOrder, #backToOrder")) {
        const title = miniDetail.dataset.title || miniDetail.querySelector("h3, h4, strong")?.textContent?.trim() || "小程序二级页面";
        const subtitle = miniDetail.dataset.subtitle || miniDetail.querySelector("p, .dish-desc, span")?.textContent?.trim() || "查看门店、小程序、会员与订单详情";
        const isHistory = miniDetail.classList.contains("history-card") || miniDetail.dataset.miniDetail === "history";
        const isOrderProgress = activeMiniTab === "status" && !!miniDetail.closest('[data-view="mini-status"]');
        const isDishDetail = miniDetail.dataset.miniDetail === "dish";
        const isInvoiceDetail = miniDetail.dataset.miniDetail === "invoice";
        const isMemberBenefitDetail = miniDetail.dataset.miniDetail === "member-benefit";
        const isCouponDetail = miniDetail.dataset.miniDetail === "coupon-detail";
        const isProfileInfoDetail = miniDetail.dataset.miniDetail === "profile-info";
        if (isDishDetail) {
          showDishDetail(miniDetail);
          return;
        }
        if (isInvoiceDetail) {
          showInvoiceDetail(miniDetail);
          return;
        }
        if (isMemberBenefitDetail) {
          showMemberBenefitDetail(miniDetail);
          return;
        }
        if (isCouponDetail) {
          showCouponDetail(miniDetail);
          return;
        }
        if (isProfileInfoDetail) {
          showProfileInfoDetail(miniDetail);
          return;
        }
        showMiniDetail(title, subtitle, [
          ["适用门店", $("#miniStore").textContent],
          ["桌台", $("#tableBadge").textContent.trim()],
          ["业务类型", isHistory ? "历史订单" : miniDetail.dataset.miniDetail || "页面详情"],
          ["价格/权益", miniDetail.dataset.price || miniDetail.querySelector(".price, .coupon-value, .tag")?.textContent?.trim() || "按规则自动计算"],
          ["状态", isHistory ? miniDetail.querySelector(".status")?.textContent?.trim() || "已完成" : "可用"],
          ["售后服务", isHistory ? "支持查看发票、再来一单、申请售后" : "按页面规则处理"]
        ], isHistory ? "再来一单" : "确认", true, isOrderProgress);
        return;
      }

      const adminRow = event.target.closest(".admin-content tbody tr, .metric, .task-row, .brand-row, .setting-row");
      if (adminRow && !event.target.closest("button, input, select, label, [data-back-admin-detail]")) {
        if (adminRow.dataset.adminStatic === "true") return;
        if (adminRow.dataset.orderId) {
          showOrderDetail(adminRow.dataset.orderId);
          return;
        }
        const cells = [...adminRow.querySelectorAll("td")].map(cell => cell.textContent.trim()).filter(Boolean);
        const title = cells[0] || adminRow.querySelector("strong, b")?.textContent?.trim() || "后台二级页面";
        const subtitle = adminRow.querySelector("span, .delta")?.textContent?.trim() || "查看配置详情、处理记录和运营动作";
        showAdminDetail(title, subtitle, [
          ["所属模块", $("#adminTitle").textContent.replace(" · 二级页", "")],
          ["当前筛选", $("#storeSelect")?.value || "全部品牌与门店"],
          ["核心信息", cells.slice(1).join(" / ") || subtitle],
          ["操作权限", "集团管理员、品牌运营、门店店长"],
          ["变更记录", "最近更新于 2026-07-14 18:30"]
        ]);
        return;
      }

      const posTableBtn = event.target.closest("[data-pos-table]");
      if (posTableBtn) {
        posTable = {
          name: posTableBtn.dataset.posTable,
          people: posTableBtn.dataset.posPeople,
          status: posTableBtn.dataset.posStatus
        };
        $$(".table-tile").forEach(button => button.classList.toggle("active", button === posTableBtn));
        updatePosSettlement();
        return;
      }

      const posInc = event.target.closest("[data-pos-inc]");
      if (posInc) {
        addPosDish(posInc.dataset.posInc, Number(posInc.dataset.posPrice), posInc.dataset.posStation);
        return;
      }

      const posDec = event.target.closest("[data-pos-dec]");
      if (posDec) {
        reducePosDish(posDec.dataset.posDec);
        return;
      }

      const posDish = event.target.closest("[data-pos-dish]");
      if (posDish) {
        showCashierDetail(posDish.dataset.posDish, "菜品规格、后厨档口、库存和改价授权", [
          ["菜品价格", money(Number(posDish.dataset.posPrice))],
          ["当前桌台", `${posTable.name} · ${posTable.people}`],
          ["后厨档口", `${posDish.dataset.posStation || "前台"}档`],
          ["优惠规则", "跟随门店满减、会员折扣和券核销"],
          ["操作结果", "点击加号加入当前收银单，可在商品卡片直接增减数量"]
        ]);
        return;
      }

      const payMethod = event.target.closest("[data-pay-method]");
      if (payMethod) {
        posPayMethod = payMethod.dataset.payMethod;
        $$(".pay-method").forEach(button => button.classList.toggle("active", button === payMethod));
      }

      const memberRecognition = event.target.closest('[data-cashier-detail="member-recognition"]');
      if (memberRecognition && !event.target.closest("[data-back-cashier-detail]")) {
        showCashierMemberDetail();
        return;
      }

      const cashierDetail = event.target.closest("[data-cashier-detail], .cashier-card");
      if (cashierDetail && !event.target.closest("#clearPosOrder, #newPosOrder, [data-pos-table], [data-pos-dish], [data-pos-inc], [data-pos-dec], [data-pay-method], [data-back-cashier-detail]")) {
        if (cashierDetail.dataset.cashierStatic === "true") return;
        const title = cashierDetail.dataset.title || cashierDetail.querySelector("h3, strong")?.textContent?.trim() || "收银二级页面";
        const subtitle = cashierDetail.dataset.subtitle || cashierDetail.textContent.trim().replace(/\s+/g, " ").slice(0, 42);
        showCashierDetail(title, subtitle, [
          ["当前门店", "悦味小馆 · 静安店"],
          ["桌台", `${posTable.name} · ${posTable.people} · ${posTable.status}`],
          ["支付方式", posPayMethod],
          ["订单金额", $("#posTotal").textContent],
          ["处理状态", "待前台确认"]
        ]);
        return;
      }
    });

    $("#checkoutBtn").addEventListener("click", showCheckout);
    $("#openCheckout").addEventListener("click", openScanOrderDialog);
    $("#backToOrder").addEventListener("click", () => showMini("order"));
    $("#continueOrder").addEventListener("click", () => {
      showMini("order");
    });
    $("#payOrder").addEventListener("click", () => {
      showMini("status");
    });
    $("#resetDemo").addEventListener("click", () => {
      cart.clear();
      activeCat = "hot";
      $$(".category-list button").forEach(button => button.classList.toggle("active", button.dataset.cat === "hot"));
      showMini("home");
      showAdmin("dashboard");
      $(".mini-content").classList.remove("detail-open");
      $(".admin-content").classList.remove("detail-open");
      $(".cashier-shell").classList.remove("cashier-detail-open");
      navHistory.mini.length = 0;
      navHistory.admin.length = 0;
      navHistory.cashier.length = 0;
      $$(".mode-tabs button").forEach(button => button.classList.toggle("active", button.dataset.mode === "all"));
      $("#page").classList.remove("only-mini", "only-admin", "only-cashier");
      posTable = { name: "A12", people: "4人", status: "用餐中" };
      activePosCat = "hot";
      $$(".table-tile").forEach(button => button.classList.toggle("active", button.dataset.posTable === "A12"));
      posOrder.clear();
      posOrder.set("招牌酸菜鱼", { price: 128, qty: 1, station: "热菜" });
      posOrder.set("藤椒牛肉饭", { price: 42, qty: 1, station: "主食" });
      renderDishes();
      renderMemberRows();
      renderPosMenu();
      renderPosOrder();
      updateCart();
    });
    $("#storeSelect").addEventListener("change", event => {
      $("#miniStore").textContent = event.target.value === "全部品牌与门店" ? "悦味小馆 · 静安店" : event.target.value;
    });
    $("#adminCreate")?.addEventListener("click", showAdminCreate);
    $("#adminSearch").addEventListener("input", event => {
      const q = event.target.value.trim();
      if (q.includes("券") || q.toLowerCase().includes("coupon")) showAdmin("coupons");
      if (q.includes("会员")) showAdmin("members");
      if (q.includes("订单")) showAdmin("orders");
      if (q.includes("门店")) showAdmin("brands");
      if (q.includes("小程序") || q.includes("配置")) showAdmin("miniapp-settings");
      if (q.includes("权限") || q.includes("角色")) showAdmin("role-settings");
    });
    $("#clearPosOrder").addEventListener("click", () => {
      posOrder.clear();
      renderPosOrder();
    });
    $("#newPosOrder").addEventListener("click", () => {
      posTable = { name: "A08", people: "2人", status: "新开台" };
      $$(".table-tile").forEach(button => button.classList.toggle("active", button.dataset.posTable === "A08"));
      posOrder.clear();
      addPosDish("手作酸梅汤", 16, "饮品");
    });
    $("#holdPosOrder").addEventListener("click", event => {
      event.stopPropagation();
      showCashierToast(`${posTable.name} 桌已挂单，可在收银单列表继续处理`);
    });
    $("#printPosOrder").addEventListener("click", event => {
      event.stopPropagation();
      showCashierToast(`${posTable.name} 桌小票已发送打印`);
    });
    $("#payPosOrder").addEventListener("click", event => {
      event.stopPropagation();
      showCashierToast(`${posTable.name} 桌${posPayMethod}收款已确认`);
    });
    $("#refundPosOrder").addEventListener("click", event => {
      event.stopPropagation();
      showCashierToast(`${posTable.name} 桌退款申请已提交，等待店长复核`);
    });
    $("#handoverBtn").addEventListener("click", event => {
      event.stopPropagation();
      showHandoverDetail();
    });
    renderDishes();
    renderMenuRows();
    renderMemberRows();
    renderPosMenu();
    renderPosOrder();
    updateCart();
    refreshIcons();
  </script>
</body>
</html>