:root {
      --bg: #0b1220;
      --panel: rgba(255,255,255,0.08);
      --panel-border: rgba(255,255,255,0.12);
      --text: #eef2ff;
      --muted: #a5b4fc;
      --lunch: #f59e0b;
      --dinner: #6366f1;
      --total: #10b981;
      --danger: #fb7185;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
      color: var(--text);
      background: radial-gradient(circle at top left, rgba(99,102,241,.25), transparent 35%), radial-gradient(circle at top right, rgba(16,185,129,.18), transparent 28%), linear-gradient(180deg, #0b1220 0%, #111827 100%);
      min-height: 100vh;
    }
    .wrap { max-width: 1180px; margin: 0 auto; padding: 28px 18px 48px; }
    .topbar { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; margin-bottom: 24px; }
    .title { font-size: 34px; font-weight: 800; letter-spacing: .5px; }
    .subtitle { color: var(--muted); margin-top: 6px; font-size: 15px; }
    .panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 22px; backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
    .date-switch { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
    .status-pill { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:14px; font-weight:700; font-size:14px; background: rgba(255,255,255,.08); color:#e5e7eb; border:1px solid rgba(255,255,255,.08); }
    .status-pill.ok { color:#86efac; border-color: rgba(134,239,172,.25); }
    .status-pill.bad { color:#fb7185; border-color: rgba(251,113,133,.25); }
    .date-btn { border:none; border-radius:14px; padding:10px 16px; cursor:pointer; background: rgba(255,255,255,.08); color: var(--text); font-weight:700; }
    .grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
    .card { padding: 20px; }
    .span-4 { grid-column: span 4; }
    .span-6 { grid-column: span 6; }
    .span-12 { grid-column: span 12; }
    @media (max-width: 900px) { .span-4,.span-6,.span-12 { grid-column: span 12; } .title { font-size: 28px; } }
    .kicker { font-size: 13px; color:#c7d2fe; text-transform: uppercase; letter-spacing: .12em; }
    .metric { font-size: 46px; font-weight: 800; margin: 8px 0 4px; }
    .metric-sub { color:#cbd5e1; font-size: 14px; }
    .badge { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#e5e7eb; }
    .dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
    .lunch { background: var(--lunch); }
    .dinner { background: var(--dinner); }
    .chart-row { margin-top:18px; }
    .bar-group { margin: 16px 0 22px; }
    .bar-head { display:flex; justify-content:space-between; gap:16px; font-size:16px; font-weight:700; margin-bottom:10px; }
    .track { width:100%; height:18px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
    .fill { height:100%; border-radius:999px; }
    .fill.lunch { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
    .fill.dinner { background: linear-gradient(90deg,#4f46e5,#8b5cf6); }
    table { width:100%; border-collapse: collapse; margin-top: 8px; }
    th, td { padding: 14px 10px; text-align:left; border-bottom: 1px solid rgba(255,255,255,.08); }
    th { color:#c7d2fe; font-size: 14px; }
    td { font-size: 15px; }
    .footnote { color:#94a3b8; font-size: 13px; margin-top: 14px; }
    .ok { color:#86efac; }

    /* ===== Mobile polish ===== */
    :root {
      --ok-bg: rgba(16,185,129,.16);
      --ok-bd: rgba(52,211,153,.4);
      --ok-tx: #bbf7d0;
      --warn-bg: rgba(251,113,133,.14);
      --warn-bd: rgba(251,113,133,.35);
      --warn-tx: #fecdd3;
    }

    #uiStatus {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.06);
      font-size: 12px;
      line-height: 1;
      color: #c7d2fe;
    }

    #errorBox {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--warn-bg);
      border: 1px solid var(--warn-bd);
      color: var(--warn-tx);
      font-size: 13px;
    }

    #datePicker, #todayBtn, #captchaCode, #captchaSubmitBtn, #captchaCancelBtn {
      height: 44px;
      font-size: 16px;
      border-radius: 10px;
    }

    #datePicker {
      min-width: 160px;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      color: #eef2ff;
    }

    #todayBtn {
      padding: 0 14px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      color: #eef2ff;
      cursor: pointer;
    }

    #captchaModal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0,0,0,.52);
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    #captchaCard {
      width: min(360px, calc(100vw - 32px));
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(17,24,39,.96);
      box-shadow: 0 20px 50px rgba(0,0,0,.35);
      padding: 14px;
      color: #e5e7eb;
    }

    #captchaImgWrap {
      margin-top: 10px;
      height: 100px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.04);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    #captchaImg {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    #captchaCode {
      width: 100%;
      margin-top: 10px;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.06);
      color: #eef2ff;
    }

    #captchaErr {
      min-height: 18px;
      margin-top: 6px;
      font-size: 12px;
      color: #fda4af;
    }

    #captchaActions {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    #captchaCancelBtn {
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.05);
      color: #e5e7eb;
    }

    #captchaSubmitBtn {
      border: 1px solid transparent;
      background: linear-gradient(90deg, #4f46e5, #7c3aed);
      color: #fff;
      font-weight: 700;
    }

    #captchaSubmitBtn:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

    @media (max-width: 768px) {
      .wrap { padding: 18px 12px 28px; }
      .title { font-size: 24px; }
      .subtitle { font-size: 13px; }
      .card { padding: 16px; border-radius: 16px; }
      .metric { font-size: 40px; line-height: 1.05; }
      .metric-sub { font-size: 12px; }
      .topbar { align-items: stretch; gap: 10px; margin-bottom: 14px; }
      .date-switch { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
    }