* { box-sizing: border-box; }
    :root {
      --bg: linear-gradient(180deg, #eff8f1 0%, #f7fbf7 48%, #edf5f0 100%);
      --bg-glow-1: rgba(103, 181, 137, 0.22);
      --bg-glow-2: rgba(255, 219, 157, 0.18);
      --surface: rgba(255, 255, 255, 0.92);
      --surface-strong: rgba(255, 255, 255, 0.97);
      --surface-soft: #eef6f0;
      --surface-muted: #f5faf7;
      --text: #163b31;
      --muted: #5b766a;
      --border: rgba(42, 106, 80, 0.12);
      --border-strong: rgba(42, 106, 80, 0.22);
      --primary: #2d9968;
      --primary-strong: #1e7a52;
      --primary-soft: rgba(45, 153, 104, 0.12);
      --accent: #f2b85a;
      --warn: #d76d48;
      --shadow: 0 18px 45px rgba(21, 58, 44, 0.11);
      --shadow-soft: 0 10px 25px rgba(21, 58, 44, 0.06);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    body.dark-mode {
      --bg: linear-gradient(180deg, #0d1615 0%, #11201d 50%, #0b1312 100%);
      --bg-glow-1: rgba(82, 177, 118, 0.2);
      --bg-glow-2: rgba(242, 184, 90, 0.08);
      --surface: rgba(17, 31, 28, 0.92);
      --surface-strong: rgba(21, 37, 34, 0.98);
      --surface-soft: rgba(25, 46, 41, 0.96);
      --surface-muted: rgba(18, 37, 32, 0.82);
      --text: #effaf3;
      --muted: #9cb9ac;
      --border: rgba(137, 205, 170, 0.12);
      --border-strong: rgba(137, 205, 170, 0.2);
      --primary: #65d08c;
      --primary-strong: #46b372;
      --primary-soft: rgba(101, 208, 140, 0.12);
      --accent: #e3b25b;
      --shadow: 0 18px 45px rgba(0, 0, 0, 0.26);
      --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.18);
    }
    html, body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(circle at top left, var(--bg-glow-1), transparent 30%),
        radial-gradient(circle at top right, var(--bg-glow-2), transparent 26%),
        var(--bg);
      color: var(--text);
      font-family: var(--font);
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.14), transparent 78%);
      opacity: 0.28;
    }
    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease; }
    button:hover:not(:disabled) { transform: translateY(-1px); }
    button:disabled { cursor: not-allowed; opacity: 0.56; transform: none; }
    .page { width: min(100%, 1200px); margin: 0 auto; padding: 18px 14px 36px; position: relative; z-index: 1; }
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }
    .hero, .panel, .auth-card { padding: 22px; }
    .hero {
      display: flex;
      gap: 18px;
      justify-content: space-between;
      align-items: stretch;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,255,255,0.68)),
        radial-gradient(circle at right top, var(--primary-soft), transparent 40%);
    }
    body.dark-mode .hero {
      background:
        linear-gradient(135deg, rgba(18,34,31,0.96), rgba(16,29,27,0.92)),
        radial-gradient(circle at right top, var(--primary-soft), transparent 42%);
    }
    .hero::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(45,153,104,0.16), transparent 68%);
    }
    .hero > div:first-child,
    .hero-actions { position: relative; z-index: 1; }
    .hero-actions, .toolbar, .tab-row, .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .hero-main {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .screen-topbar {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
      position: sticky;
      top: 10px;
      z-index: 5;
    }
    .screen-topbar-inner {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .micro-chip,
    .micro-btn {
      height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(12px);
    }
    .micro-chip {
      background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface-strong) 18%);
      color: var(--primary-strong);
    }
    .micro-btn {
      background: color-mix(in srgb, var(--surface-strong) 90%, transparent 10%);
      color: var(--text);
    }
    .picker-shell {
      position: relative;
    }
    .picker-btn {
      width: 100%;
      min-height: 54px;
      padding: 0 16px;
      border-radius: 18px;
      border: 1px solid var(--border-strong);
      background: linear-gradient(135deg, var(--surface-soft), color-mix(in srgb, var(--surface-strong) 62%, var(--surface-soft) 38%));
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 15px;
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
    }
    .picker-btn::after {
      content: "▾";
      font-size: 14px;
      color: var(--muted);
      flex: 0 0 auto;
    }
    .picker-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      display: grid;
      gap: 8px;
      padding: 10px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface-strong) 92%, transparent 8%);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      z-index: 8;
    }
    .picker-option {
      width: 100%;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid transparent;
      background: var(--surface-soft);
      color: var(--text);
      text-align: left;
      font-size: 14px;
      line-height: 1.5;
      font-weight: 700;
    }
    .picker-option small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }
    .picker-option.active {
      background: linear-gradient(135deg, var(--primary), var(--primary-strong));
      color: #fff;
      border-color: transparent;
    }
    .picker-option.active small { color: rgba(255,255,255,0.82); }
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 7px 11px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary-strong);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }
    .main { display: grid; gap: 18px; margin-top: 18px; }
    .panel {
      background: linear-gradient(180deg, var(--surface-strong), rgba(255,255,255,0.78));
    }
    body.dark-mode .panel {
      background: linear-gradient(180deg, var(--surface-strong), rgba(17,31,28,0.9));
    }
    .panel h2, .hero h1 { margin: 0; }
    .hero h1 {
      margin-top: 8px;
      font-size: clamp(26px, 5vw, 40px);
      line-height: 1.06;
      letter-spacing: -0.04em;
    }
    .panel h2 {
      font-size: 28px;
      line-height: 1.12;
      letter-spacing: -0.03em;
    }
    .auth-card h1 {
      margin: 14px 0 0;
      font-size: clamp(34px, 9vw, 60px);
      line-height: 1.04;
      letter-spacing: -0.05em;
    }
    .hero p, .panel p, .hint, .meta, .status {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.68;
    }
    .field { display: grid; gap: 8px; }
    .grid-3, .grid-2, .history { display: grid; gap: 14px; }
    .input, textarea, select {
      width: 100%;
      padding: 15px 16px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface-soft);
      color: var(--text);
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .input:focus, textarea:focus, select:focus {
      border-color: rgba(45,153,104,0.4);
      box-shadow: 0 0 0 4px rgba(45,153,104,0.12);
      background: var(--surface-strong);
    }
    textarea { min-height: 116px; resize: vertical; line-height: 1.7; }
    textarea:disabled, input:disabled, select:disabled {
      opacity: 1;
      background: color-mix(in srgb, var(--surface-soft) 84%, #cfd8d2 16%);
      color: color-mix(in srgb, var(--muted) 86%, #6f7a74 14%);
      border-style: dashed;
    }
    .btn, .ghost, .range-btn, .nav-btn, .secondary-btn, .tab {
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      padding: 9px 14px;
      box-shadow: var(--shadow-soft);
      font-weight: 700;
    }
    .primary {
      background: linear-gradient(135deg, var(--primary), var(--primary-strong));
      color: #fff;
      border-color: transparent;
      box-shadow: 0 16px 28px rgba(30, 122, 82, 0.22);
    }
    .ghost, .secondary-btn, .nav-btn, .range-btn, .tab {
      background: color-mix(in srgb, var(--surface-strong) 80%, var(--surface-soft) 20%);
    }
    .secondary-btn { padding-inline: 14px; }
    .full { width: 100%; }
    .empty, .empty-box {
      min-height: 116px;
      border: 1px dashed var(--border-strong);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 90%, white 10%), color-mix(in srgb, var(--surface-soft) 76%, white 24%));
      color: var(--muted);
    }
    .score-chip {
      padding: 9px 15px;
      border-radius: 999px;
      background: linear-gradient(135deg, #f7d269, #efb24d);
      color: #412a00;
      font-weight: 900;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
    }
    .status { min-height: 22px; padding-top: 4px; }
    .status.error { color: var(--warn); }
    .hidden { display: none !important; }
    .date-nav {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr) 88px;
      gap: 10px;
      align-items: center;
      margin-bottom: 14px;
    }
    .date-pill {
      padding: 10px 14px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface-soft) 55%, white 45%));
      text-align: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    }
    .date-pill strong {
      display: block;
      font-size: clamp(17px, 3.5vw, 22px);
      letter-spacing: -0.03em;
    }
    .date-pill small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; }
    .meal-card, .summary-card, .analysis-card, .feedback-card, .history-card, .inspector {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, var(--surface-strong), rgba(255,255,255,0.84));
      padding: 16px;
      box-shadow: var(--shadow-soft);
    }
    body.dark-mode .meal-card,
    body.dark-mode .summary-card,
    body.dark-mode .analysis-card,
    body.dark-mode .feedback-card,
    body.dark-mode .history-card,
    body.dark-mode .inspector {
      background: linear-gradient(180deg, var(--surface-strong), rgba(18,34,31,0.88));
    }
    .meal-card > .row:first-child,
    .analysis-card > .row:first-child,
    .feedback-card > .row:first-child {
      margin-bottom: 12px;
    }
    .meal-card strong,
    .analysis-card strong,
    .feedback-card strong,
    .summary-card strong,
    .history-card strong {
      letter-spacing: -0.02em;
    }
    .inspector {
      margin-bottom: 14px;
      background: linear-gradient(135deg, var(--primary-soft), transparent 70%), var(--surface-strong);
    }
    .history-meals { display: grid; gap: 10px; margin-top: 12px; }
    .meal-item {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-soft);
      padding: 12px;
      min-height: 92px;
    }
    .meal-item strong {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
      color: var(--muted);
    }
    .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .tag {
      display: inline-flex;
      align-items: center;
      padding: 8px 11px;
      border-radius: 999px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      font-size: 12px;
    }
    .history-score {
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary-strong);
      font-size: 12px;
      font-weight: 800;
    }
    .history-card {
      position: relative;
      overflow: hidden;
    }
    .history-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, var(--primary), transparent);
      opacity: 0.6;
    }
    .auth-wrap {
      min-height: calc(100vh - 54px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 0;
    }
    .auth-card {
      width: min(100%, 520px);
      padding: 26px 22px 22px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(244,251,246,0.92)),
        radial-gradient(circle at right top, rgba(45,153,104,0.12), transparent 38%);
    }
    body.dark-mode .auth-card {
      background:
        linear-gradient(135deg, rgba(17,31,28,0.98), rgba(20,36,33,0.94)),
        radial-gradient(circle at right top, rgba(101,208,140,0.12), transparent 42%);
    }
    .auth-card::after {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--accent), transparent 72%);
    }
    .auth-card p { margin: 14px 0 0; font-size: 15px; line-height: 1.84; max-width: 26em; }
    .auth-card .tab-row { margin: 22px 0 12px !important; padding: 4px; border-radius: 999px; background: var(--surface-soft); width: fit-content; }
    .auth-card .field label { font-size: 13px; font-weight: 800; }
    #authForm { grid-template-columns: 1fr !important; gap: 14px; }
    .tab { background: transparent; box-shadow: none; }
    .tab.active, .range-btn.active {
      background: linear-gradient(135deg, var(--primary), var(--primary-strong));
      color: #fff;
      border-color: transparent;
      box-shadow: 0 14px 24px rgba(30,122,82,0.18);
    }
    .analysis-content {
      white-space: pre-wrap;
      line-height: 1.9;
      margin-top: 10px;
      padding: 14px;
      border-radius: var(--radius-md);
      background: var(--surface-soft);
      min-height: 152px;
    }
    .summary-card {
      min-height: 168px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .section-head p { margin: 6px 0 0; max-width: 34em; }
    .auth-points {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .auth-point {
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--surface-soft);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    .metric-value {
      font-size: clamp(30px, 5vw, 42px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.04em;
      margin-top: 10px;
    }
    .summary-card .hint { font-size: 12px; }
    .toolbar { margin-bottom: 14px; }
    .nav-btn {
      min-width: 0;
      width: 88px;
      justify-content: center;
      display: inline-flex;
      padding-inline: 10px;
      white-space: nowrap;
    }
    input[type="range"] {
      width: 100%;
      margin-top: 14px;
      accent-color: var(--primary);
    }
    @media (min-width: 760px) {
      .main { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
      .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .history-meals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 759px) {
      .page { padding-inline: 12px; }
      .hero { padding: 16px 16px 14px; gap: 12px; }
      .panel, .auth-card { padding: 18px; }
      .screen-topbar { top: 8px; margin-bottom: 8px; }
      .screen-topbar-inner { width: 100%; justify-content: flex-end; }
      .date-nav { grid-template-columns: 74px minmax(0, 1fr) 74px; gap: 8px; }
      .date-pill { order: 0; padding: 9px 10px; }
      .date-pill strong { font-size: 16px; }
      .nav-btn { width: 74px; font-size: 13px; padding-inline: 6px; }
      .secondary-btn, .btn, .ghost { width: 100%; }
      .toolbar > * { flex: 1 1 calc(33.33% - 8px); justify-content: center; }
      .auth-card { width: 100%; }
      .auth-card .tab-row { width: 100%; }
      .auth-card .tab { flex: 1 1 0; text-align: center; }
    }