:root {
  color-scheme: light dark;
  --bg: #f7f9fb;
  --surface: #ffffff;
  --ink: #17201c;
  --muted: #65716c;
  --line: #dfe7e2;
  --primary: #1f7a5a;
  --primary-strong: #145f45;
  --coral: #dd6b52;
  --gain-soft: #c66052;
  --loss-soft: #4e8b6d;
  --gold: #d69f36;
  --chart-loss: #4f9479;
  --chart-gain: #bf756a;
  --chart-selected: #547985;
  --chart-selected-soft: rgba(84, 121, 133, 0.16);
  --chart-prediction: #8c7fd0;
  --chart-prediction-soft: rgba(140, 127, 208, 0.16);
  --chart-prediction-glow: rgba(140, 127, 208, 0.28);
  --chart-grid: #e7efea;
  --chart-axis: #d6e1db;
  --chart-empty: rgba(79, 148, 121, 0.24);
  --calendar-loss: #72a990;
  --calendar-gain: #d28b80;
  --calendar-neutral: #e7eee9;
  --calendar-selected: #264f40;
  --calendar-selected-bg: #e9f3ee;
  --log-accent: #6f8b7d;
  --food-accent: #8b6f4e;
  --food-accent-soft: #fbf4e8;
  --shadow: 0 18px 50px rgba(25, 42, 35, 0.11);
  --safe-bg: #edf6f1;
  --page-bg:
    radial-gradient(120% 68% at 0% 0%, rgba(31, 122, 90, 0.16) 0%, rgba(31, 122, 90, 0.08) 38%, rgba(31, 122, 90, 0) 70%),
    radial-gradient(95% 58% at 100% 0%, rgba(221, 107, 82, 0.08) 0%, rgba(221, 107, 82, 0) 64%),
    linear-gradient(180deg, var(--safe-bg) 0px, #f1f7f4 170px, var(--bg) 430px);
  --pull-distance: 0px;
  --pull-rotation: 0deg;
  --page-edge-spring-y: 0px;
  --app-viewport-width: 100vw;
  --bottom-safe-area: env(safe-area-inset-bottom, 0px);
  --bottom-tabs-height: 64px;
  --bottom-tabs-total-height: calc(var(--bottom-tabs-height) + var(--bottom-safe-area));
  --bottom-tabs-rendered-height: var(--bottom-tabs-total-height);
  --content-top-gap: max(18px, calc(env(safe-area-inset-top, 0px) + 10px));
  --content-bottom-gap: calc(48px + var(--bottom-safe-area));
  --modal-edge-gap: 20px;
  --modal-safe-top-gap: max(var(--modal-edge-gap), calc(env(safe-area-inset-top, 0px) + 14px));
  --modal-safe-right-gap: max(var(--modal-edge-gap), calc(env(safe-area-inset-right, 0px) + 14px));
  --modal-safe-bottom-gap: max(var(--modal-edge-gap), calc(env(safe-area-inset-bottom, 0px) + 14px));
  --modal-safe-left-gap: max(var(--modal-edge-gap), calc(env(safe-area-inset-left, 0px) + 14px));
}

* {
  box-sizing: border-box;
}

html,
body {
  -webkit-user-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-drag: none;
  user-select: none;
}

.form-message,
.community-alias,
.community-card-mood,
.community-detail-mood,
.community-comment-bubble,
.community-comment-bubble p,
.history-mood,
.ranking-info,
.policy-content,
.settings-option-button,
.settings-option-button span,
.settings-option-button strong,
.settings-option-button em,
.settings-status-pill,
.record-entry-button,
.ai-advice-button,
.apple-login-entry,
.huawei-login-entry,
.passkey-login-entry {
  overflow-wrap: anywhere;
  word-break: break-word;
}

button,
a,
span,
strong,
em,
small {
  min-width: 0;
}

html {
  min-height: 100%;
  background-color: var(--safe-bg);
  background-image: var(--page-bg);
  overscroll-behavior-y: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.replay-modal-panel iframe::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background: transparent;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior-y: none;
  scrollbar-width: none;
}

html[data-theme^="glass-"] {
  color-scheme: light dark;
  --bg: #f7fbff;
  --surface: rgba(255, 255, 255, 0.58);
  --ink: #172029;
  --muted: #667480;
  --line: rgba(156, 185, 198, 0.24);
  --primary: #4b9fb2;
  --primary-strong: #2f7280;
  --coral: #d886b5;
  --gain-soft: #d98a9e;
  --loss-soft: #64a9bd;
  --gold: #d4aa66;
  --chart-loss: #67aebe;
  --chart-gain: #d98da3;
  --chart-selected: #7797c7;
  --chart-selected-soft: rgba(143, 169, 212, 0.18);
  --chart-prediction: #8d83d8;
  --chart-prediction-soft: rgba(141, 131, 216, 0.18);
  --chart-prediction-glow: rgba(141, 131, 216, 0.28);
  --chart-grid: rgba(154, 188, 202, 0.2);
  --chart-axis: rgba(128, 163, 181, 0.26);
  --chart-empty: rgba(103, 174, 190, 0.2);
  --calorie-gold: #a97724;
  --calorie-gold-soft: rgba(169, 119, 36, 0.13);
  --calendar-loss: #69b7cf;
  --calendar-gain: #df8ca6;
  --calendar-neutral: rgba(255, 255, 255, 0.46);
  --calendar-selected: #5688a7;
  --calendar-selected-bg: rgba(255, 255, 255, 0.18);
  --log-accent: #8a9fc8;
  --food-accent: #b58bd0;
  --food-accent-soft: rgba(246, 236, 255, 0.58);
  --shadow: 0 26px 74px rgba(73, 95, 112, 0.18);
  --safe-bg: #eef7fb;
  --glass-fill: rgba(255, 255, 255, 0.52);
  --glass-fill-strong: rgba(255, 255, 255, 0.72);
  --glass-stroke: rgba(255, 255, 255, 0.72);
  --glass-stroke-cool: rgba(123, 198, 220, 0.2);
  --glass-inner-line: rgba(255, 255, 255, 0.44);
  --glass-shadow: 0 28px 78px rgba(80, 102, 119, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  --glass-shadow-soft: 0 16px 42px rgba(80, 102, 119, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --glass-glow-a: rgba(255, 224, 247, 0.38);
  --glass-glow-b: rgba(188, 244, 255, 0.44);
  --glass-button-glow-a: rgba(255, 217, 244, 0.28);
  --glass-button-glow-b: rgba(184, 238, 255, 0.36);
  --glass-avatar-glow: rgba(255, 219, 246, 0.34);
  --glass-panel-glow-a: rgba(255, 218, 246, 0.3);
  --glass-panel-glow-b: rgba(183, 238, 255, 0.36);
  --glass-active-gradient: linear-gradient(90deg, #dba9e9, #85d8ec);
  --glass-active-shadow: rgba(123, 198, 220, 0.32);
  --page-bg:
    radial-gradient(72% 44% at 16% 8%, rgba(255, 194, 232, 0.42) 0%, rgba(255, 194, 232, 0) 66%),
    radial-gradient(70% 50% at 88% 10%, rgba(128, 217, 235, 0.52) 0%, rgba(128, 217, 235, 0) 68%),
    radial-gradient(82% 58% at 50% 92%, rgba(174, 162, 239, 0.24) 0%, rgba(174, 162, 239, 0) 72%),
    linear-gradient(180deg, #f9fbff 0%, #edf8fa 45%, #f8fbff 100%);
}

html[data-theme^="glass-"] .app-shell {
  width: min(1120px, calc(100% - 28px));
}

html[data-theme^="glass-"] .login-panel,
html[data-theme^="glass-"] .history-section,
html[data-theme^="glass-"] .community-share-panel,
html[data-theme^="glass-"] .community-content-tabs,
html[data-theme^="glass-"] .community-card,
html[data-theme^="glass-"] .ranking-periods,
html[data-theme^="glass-"] .ranking-item,
html[data-theme^="glass-"] .account-profile-card,
html[data-theme^="glass-"] .account-binding-card,
html[data-theme^="glass-"] .passkey-card,
html[data-theme^="glass-"] .native-health-card,
html[data-theme^="glass-"] .native-health-switch,
html[data-theme^="glass-"] .chart-card,
html[data-theme^="glass-"] .calendar-card,
html[data-theme^="glass-"] .timeline-card,
html[data-theme^="glass-"] .record-card,
html[data-theme^="glass-"] .food-history-card,
html[data-theme^="glass-"] .capture-panel,
html[data-theme^="glass-"] .food-record-panel {
  border-color: var(--glass-stroke);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
    radial-gradient(120% 120% at 0% 0%, var(--glass-glow-a), rgba(255, 255, 255, 0) 46%),
    radial-gradient(120% 110% at 100% 16%, var(--glass-glow-b), rgba(255, 255, 255, 0) 50%);
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: blur(26px) saturate(1.24);
  backdrop-filter: blur(26px) saturate(1.24);
}

html[data-theme^="glass-"] .food-record-panel {
  border-color: rgba(255, 255, 255, 0.48);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme^="glass-"] .login-panel,
html[data-theme^="glass-"] .community-share-panel,
html[data-theme^="glass-"] .community-card,
html[data-theme^="glass-"] .history-section {
  box-shadow: var(--glass-shadow);
}

html[data-theme^="glass-"] .login-copy h1,
html[data-theme^="glass-"] .topbar h1,
html[data-theme^="glass-"] .settings-group h2,
html[data-theme^="glass-"] .community-ranking h2 {
  color: rgba(20, 32, 40, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme^="glass-"] .eyebrow,
html[data-theme^="glass-"] .settings-kicker,
html[data-theme^="glass-"] .community-ranking-kicker {
  color: #5c94a8;
}

html[data-theme^="glass-"] button,
html[data-theme^="glass-"] .apple-login-entry,
html[data-theme^="glass-"] .huawei-login-entry,
html[data-theme^="glass-"] .qq-login-entry,
html[data-theme^="glass-"] .passkey-login-entry,
html[data-theme^="glass-"] .test-login-entry,
html[data-theme^="glass-"] .record-entry-button,
html[data-theme^="glass-"] .ai-summary-button,
html[data-theme^="glass-"] .replay-launch-button,
html[data-theme^="glass-"] .settings-option-button {
  border-color: rgba(255, 255, 255, 0.66);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.36)),
    radial-gradient(120% 120% at 0% 0%, var(--glass-button-glow-a), rgba(255, 255, 255, 0) 54%);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 8px 24px rgba(81, 107, 126, 0.11);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

html[data-theme^="glass-"] button:hover:not(:disabled),
html[data-theme^="glass-"] button:focus-visible,
html[data-theme^="glass-"] .apple-login-entry:hover:not(:disabled),
html[data-theme^="glass-"] .apple-login-entry:focus-visible,
html[data-theme^="glass-"] .huawei-login-entry:hover:not(:disabled),
html[data-theme^="glass-"] .huawei-login-entry:focus-visible,
html[data-theme^="glass-"] .qq-login-entry:hover,
html[data-theme^="glass-"] .qq-login-entry:focus-visible,
html[data-theme^="glass-"] .passkey-login-entry:hover:not(:disabled),
html[data-theme^="glass-"] .passkey-login-entry:focus-visible,
html[data-theme^="glass-"] .test-login-entry:hover:not(:disabled),
html[data-theme^="glass-"] .test-login-entry:focus-visible {
  border-color: rgba(255, 255, 255, 0.86);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.46)),
    radial-gradient(120% 110% at 100% 0%, var(--glass-button-glow-b), rgba(255, 255, 255, 0) 58%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 13px 32px rgba(81, 107, 126, 0.15);
}

html[data-theme^="glass-"] button:active:not(:disabled),
html[data-theme^="glass-"] .apple-login-entry:active:not(:disabled),
html[data-theme^="glass-"] .huawei-login-entry:active:not(:disabled),
html[data-theme^="glass-"] .qq-login-entry:active,
html[data-theme^="glass-"] .passkey-login-entry:active:not(:disabled),
html[data-theme^="glass-"] .test-login-entry:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 8px rgba(117, 144, 160, 0.13), 0 5px 16px rgba(81, 107, 126, 0.11);
}

html[data-theme^="glass-"] .community-card:hover,
html[data-theme^="glass-"] .community-card:focus-visible,
html[data-theme^="glass-"] .ranking-item:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 30px 82px rgba(80, 102, 119, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme^="glass-"] .profile-avatar,
html[data-theme^="glass-"] .settings-account-avatar,
html[data-theme^="glass-"] .community-member-avatar,
html[data-theme^="glass-"] .ranking-avatar,
html[data-theme^="glass-"] .community-detail-avatar,
html[data-theme^="glass-"] .community-comment-avatar {
  border-color: rgba(255, 255, 255, 0.7);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(229, 246, 250, 0.42)),
    radial-gradient(120% 120% at 12% 0%, var(--glass-avatar-glow), rgba(255, 255, 255, 0) 54%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 28px rgba(77, 104, 122, 0.12);
}

html[data-theme^="glass-"] .community-weight-mini,
html[data-theme^="glass-"] .weight-chart,
html[data-theme^="glass-"] .calendar-grid,
html[data-theme^="glass-"] .native-health-grid,
html[data-theme^="glass-"] .ai-summary-output {
  border-color: rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22)),
    radial-gradient(100% 120% at 100% 0%, rgba(170, 230, 244, 0.24), rgba(255, 255, 255, 0) 56%);
}

html[data-theme^="glass-"] .community-card .community-weight-mini {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme^="glass-"] .chart-section {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme^="glass-"] .bottom-tabs {
  border: 0;
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0) 0%, rgba(248, 252, 255, 0.38) 24%, rgba(255, 255, 255, 0.66) 100%),
    radial-gradient(80% 120% at 14% 0%, rgba(255, 218, 246, 0.22), rgba(255, 255, 255, 0) 62%),
    radial-gradient(80% 120% at 90% 0%, rgba(183, 238, 255, 0.24), rgba(255, 255, 255, 0) 64%);
  box-shadow: none;
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}

html[data-theme^="glass-"] .bottom-tabs::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 18px;
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0), rgba(248, 252, 255, 0.38) 68%, rgba(255, 255, 255, 0.62)),
    radial-gradient(80% 120% at 18% 100%, rgba(255, 218, 246, 0.16), rgba(255, 255, 255, 0) 66%),
    radial-gradient(80% 120% at 88% 100%, rgba(183, 238, 255, 0.18), rgba(255, 255, 255, 0) 66%);
  content: "";
  pointer-events: none;
}

html[data-theme^="glass-"] .bottom-tab,
html[data-theme^="glass-"] .bottom-tab:hover:not(:disabled),
html[data-theme^="glass-"] .bottom-tab:focus-visible,
html[data-theme^="glass-"] .bottom-tab:active:not(:disabled),
html[data-theme^="glass-"] .bottom-tab.is-active,
html[data-theme^="glass-"] .bottom-tab.is-active:hover:not(:disabled),
html[data-theme^="glass-"] .bottom-tab.is-active:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme^="glass-"] .bottom-tab.is-active {
  color: #397b8d;
}

html[data-theme^="glass-"] .bottom-tab.is-active::before {
  display: none;
}

html[data-theme^="glass-"] .profile-avatar.has-image,
html[data-theme^="glass-"] .settings-account-avatar.has-image,
html[data-theme^="glass-"] .community-detail-avatar.has-image,
html[data-theme^="glass-"] .community-comment-avatar.has-image {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(229, 246, 250, 0.24)),
    radial-gradient(120% 120% at 12% 0%, var(--glass-avatar-glow), rgba(255, 255, 255, 0) 54%);
}

html[data-theme^="glass-"] .community-detail-panel,
html[data-theme^="glass-"] .community-comments-panel,
html[data-theme^="glass-"] .ai-summary-panel,
html[data-theme^="glass-"] .policy-panel,
html[data-theme^="glass-"] .privacy-consent-dialog,
html[data-theme^="glass-"] .profile-edit-dialog,
html[data-theme^="glass-"] .confirmation-dialog,
html[data-theme^="glass-"] .feedback-dialog,
html[data-theme^="glass-"] .replay-modal-panel {
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(245, 251, 255, 0.58)),
    radial-gradient(120% 80% at 4% 0%, var(--glass-panel-glow-a), rgba(255, 255, 255, 0) 58%),
    radial-gradient(110% 90% at 100% 0%, var(--glass-panel-glow-b), rgba(255, 255, 255, 0) 58%);
  box-shadow: 0 34px 100px rgba(69, 88, 105, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(30px) saturate(1.28);
  backdrop-filter: blur(30px) saturate(1.28);
}

html[data-theme^="glass-"] .community-detail-backdrop.is-open,
html[data-theme^="glass-"] .community-comments-backdrop.is-open,
html[data-theme^="glass-"] .replay-modal-backdrop.is-open {
  background: rgba(230, 241, 246, 0.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  backdrop-filter: blur(10px) saturate(1.12);
}

html[data-theme^="glass-"] input,
html[data-theme^="glass-"] textarea,
html[data-theme^="glass-"] select {
  border-color: rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme^="glass-"] input:focus,
html[data-theme^="glass-"] textarea:focus,
html[data-theme^="glass-"] select:focus {
  border-color: rgba(119, 189, 210, 0.54);
  box-shadow: 0 0 0 4px rgba(138, 207, 226, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  html[data-theme^="glass-"] {
    color-scheme: dark;
    --bg: #111925;
    --surface: rgba(20, 30, 42, 0.72);
    --ink: #f2f8fb;
    --muted: #a7b6c3;
    --line: rgba(255, 255, 255, 0.14);
    --primary: #83d3e5;
    --primary-strong: #b9eef8;
    --coral: #eca1c6;
    --gain-soft: #d987a1;
    --loss-soft: #68bdd2;
    --gold: #e0b56e;
    --chart-loss: #75c3d5;
    --chart-gain: #df8fa8;
    --chart-selected: #a6c9f3;
    --chart-selected-soft: rgba(166, 201, 243, 0.16);
    --chart-prediction: #c6b8ff;
    --chart-prediction-soft: rgba(198, 184, 255, 0.18);
    --chart-prediction-glow: rgba(198, 184, 255, 0.24);
    --chart-grid: rgba(174, 210, 222, 0.16);
    --chart-axis: rgba(191, 223, 234, 0.2);
    --chart-empty: rgba(117, 195, 213, 0.18);
    --calorie-gold: #d8a85b;
    --calorie-gold-soft: rgba(216, 168, 91, 0.14);
    --calendar-loss: #7dc5d8;
    --calendar-gain: #e39aad;
    --calendar-neutral: rgba(255, 255, 255, 0.08);
    --calendar-selected: #bdefff;
    --calendar-selected-bg: rgba(189, 239, 255, 0.08);
    --log-accent: #aebdf0;
    --food-accent: #c8a8ea;
    --food-accent-soft: rgba(80, 98, 135, 0.26);
    --shadow: 0 28px 78px rgba(0, 0, 0, 0.28);
    --safe-bg: #101823;
    --glass-fill: rgba(21, 32, 45, 0.68);
    --glass-fill-strong: rgba(29, 43, 58, 0.78);
    --glass-stroke: rgba(255, 255, 255, 0.18);
    --glass-stroke-cool: rgba(132, 218, 238, 0.2);
    --glass-inner-line: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 32px 88px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.13);
    --glass-shadow-soft: 0 18px 54px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --glass-glow-a: rgba(216, 134, 181, 0.16);
    --glass-glow-b: rgba(75, 159, 178, 0.2);
    --glass-button-glow-a: rgba(216, 134, 181, 0.12);
    --glass-button-glow-b: rgba(111, 207, 226, 0.18);
    --glass-avatar-glow: rgba(216, 134, 181, 0.16);
    --glass-panel-glow-a: rgba(216, 134, 181, 0.12);
    --glass-panel-glow-b: rgba(111, 207, 226, 0.16);
    --glass-active-gradient: linear-gradient(90deg, #de9bd8, #86d7ea);
    --glass-active-shadow: rgba(71, 180, 207, 0.22);
    --page-bg:
      radial-gradient(70% 42% at 12% 8%, rgba(167, 52, 108, 0.28) 0%, rgba(167, 52, 108, 0) 66%),
      radial-gradient(78% 54% at 90% 6%, rgba(54, 150, 177, 0.26) 0%, rgba(54, 150, 177, 0) 68%),
      radial-gradient(82% 58% at 56% 96%, rgba(86, 119, 183, 0.16) 0%, rgba(86, 119, 183, 0) 72%),
      linear-gradient(180deg, #121724 0%, #111d2a 46%, #0e1722 100%);
  }

  html[data-theme^="glass-"],
  html[data-theme^="glass-"] body {
    background-color: var(--safe-bg);
  }

  html[data-theme^="glass-"] .login-panel,
  html[data-theme^="glass-"] .history-section,
  html[data-theme^="glass-"] .community-share-panel,
  html[data-theme^="glass-"] .community-content-tabs,
  html[data-theme^="glass-"] .community-card,
  html[data-theme^="glass-"] .ranking-periods,
  html[data-theme^="glass-"] .ranking-item,
  html[data-theme^="glass-"] .account-profile-card,
  html[data-theme^="glass-"] .account-binding-card,
  html[data-theme^="glass-"] .passkey-card,
  html[data-theme^="glass-"] .native-health-card,
  html[data-theme^="glass-"] .native-health-switch,
  html[data-theme^="glass-"] .chart-card,
  html[data-theme^="glass-"] .calendar-card,
  html[data-theme^="glass-"] .timeline-card,
  html[data-theme^="glass-"] .record-card,
  html[data-theme^="glass-"] .food-history-card,
  html[data-theme^="glass-"] .capture-panel,
  html[data-theme^="glass-"] .food-record-panel {
    border-color: var(--glass-stroke);
    background:
      linear-gradient(145deg, rgba(28, 40, 54, 0.76), rgba(16, 25, 36, 0.48)),
      radial-gradient(120% 120% at 0% 0%, var(--glass-glow-a), rgba(16, 25, 36, 0) 48%),
      radial-gradient(120% 110% at 100% 16%, var(--glass-glow-b), rgba(16, 25, 36, 0) 52%);
    box-shadow: var(--glass-shadow-soft);
  }

  html[data-theme^="glass-"] .food-record-panel,
  html[data-theme^="glass-"] .chart-section {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-theme^="glass-"] .login-copy h1,
  html[data-theme^="glass-"] .topbar h1,
  html[data-theme^="glass-"] .settings-group h2,
  html[data-theme^="glass-"] .community-ranking h2 {
    color: rgba(245, 250, 253, 0.96);
    text-shadow: none;
  }

  html[data-theme^="glass-"] .eyebrow,
  html[data-theme^="glass-"] .settings-kicker,
  html[data-theme^="glass-"] .community-ranking-kicker {
    color: #8dd8e8;
  }

  html[data-theme^="glass-"] button,
  html[data-theme^="glass-"] .huawei-login-entry,
  html[data-theme^="glass-"] .qq-login-entry,
  html[data-theme^="glass-"] .passkey-login-entry,
  html[data-theme^="glass-"] .test-login-entry,
  html[data-theme^="glass-"] .record-entry-button,
  html[data-theme^="glass-"] .ai-summary-button,
  html[data-theme^="glass-"] .replay-launch-button,
  html[data-theme^="glass-"] .settings-option-button {
    border-color: rgba(255, 255, 255, 0.17);
    background:
      linear-gradient(145deg, rgba(32, 45, 59, 0.74), rgba(19, 29, 41, 0.5)),
      radial-gradient(120% 120% at 0% 0%, var(--glass-button-glow-a), rgba(19, 29, 41, 0) 54%);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px rgba(0, 0, 0, 0.18);
  }

  html[data-theme^="glass-"] button:hover:not(:disabled),
  html[data-theme^="glass-"] button:focus-visible,
  html[data-theme^="glass-"] .huawei-login-entry:hover:not(:disabled),
  html[data-theme^="glass-"] .huawei-login-entry:focus-visible,
  html[data-theme^="glass-"] .qq-login-entry:hover,
  html[data-theme^="glass-"] .qq-login-entry:focus-visible,
  html[data-theme^="glass-"] .passkey-login-entry:hover:not(:disabled),
  html[data-theme^="glass-"] .passkey-login-entry:focus-visible,
  html[data-theme^="glass-"] .test-login-entry:hover:not(:disabled),
  html[data-theme^="glass-"] .test-login-entry:focus-visible {
    border-color: rgba(189, 239, 255, 0.34);
    background:
      linear-gradient(145deg, rgba(42, 58, 74, 0.78), rgba(24, 35, 48, 0.58)),
      radial-gradient(120% 110% at 100% 0%, var(--glass-button-glow-b), rgba(24, 35, 48, 0) 58%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 34px rgba(0, 0, 0, 0.24);
  }

  html[data-theme^="glass-"] button:active:not(:disabled),
  html[data-theme^="glass-"] .huawei-login-entry:active:not(:disabled),
  html[data-theme^="glass-"] .qq-login-entry:active,
  html[data-theme^="glass-"] .passkey-login-entry:active:not(:disabled),
  html[data-theme^="glass-"] .test-login-entry:active:not(:disabled) {
    background: rgba(26, 39, 53, 0.78);
    color: var(--ink);
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.18);
  }

  html[data-theme^="glass-"] .profile-avatar,
  html[data-theme^="glass-"] .settings-account-avatar,
  html[data-theme^="glass-"] .community-member-avatar,
  html[data-theme^="glass-"] .ranking-avatar,
  html[data-theme^="glass-"] .community-detail-avatar,
  html[data-theme^="glass-"] .community-comment-avatar {
    border-color: rgba(255, 255, 255, 0.22);
    background:
      linear-gradient(145deg, rgba(36, 50, 64, 0.76), rgba(20, 30, 42, 0.46)),
      radial-gradient(120% 120% at 12% 0%, var(--glass-avatar-glow), rgba(20, 30, 42, 0) 54%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 34px rgba(0, 0, 0, 0.18);
  }

  html[data-theme^="glass-"] .community-weight-mini,
  html[data-theme^="glass-"] .weight-chart,
  html[data-theme^="glass-"] .calendar-grid,
  html[data-theme^="glass-"] .native-health-grid,
  html[data-theme^="glass-"] .ai-summary-output {
    border-color: rgba(255, 255, 255, 0.14);
    background:
      linear-gradient(145deg, rgba(27, 39, 53, 0.58), rgba(16, 24, 35, 0.34)),
      radial-gradient(100% 120% at 100% 0%, rgba(104, 203, 226, 0.12), rgba(16, 24, 35, 0) 56%);
  }

  html[data-theme^="glass-"] .bottom-tabs {
    background:
      linear-gradient(180deg, rgba(16, 24, 35, 0) 0%, rgba(15, 23, 34, 0.52) 24%, rgba(13, 20, 30, 0.82) 100%),
      radial-gradient(80% 120% at 14% 0%, rgba(216, 134, 181, 0.14), rgba(13, 20, 30, 0) 62%),
      radial-gradient(80% 120% at 90% 0%, rgba(104, 203, 226, 0.16), rgba(13, 20, 30, 0) 64%);
  }

  html[data-theme^="glass-"] .bottom-tabs::before {
    background:
      linear-gradient(180deg, rgba(16, 24, 35, 0), rgba(15, 23, 34, 0.34) 68%, rgba(13, 20, 30, 0.58)),
      radial-gradient(80% 120% at 18% 100%, rgba(216, 134, 181, 0.08), rgba(13, 20, 30, 0) 66%),
      radial-gradient(80% 120% at 88% 100%, rgba(104, 203, 226, 0.1), rgba(13, 20, 30, 0) 66%);
  }

  html[data-theme^="glass-"] .bottom-tab.is-active {
    color: #9eddea;
  }

  html[data-theme^="glass-"] .community-detail-panel,
  html[data-theme^="glass-"] .community-comments-panel,
  html[data-theme^="glass-"] .ai-summary-panel,
  html[data-theme^="glass-"] .policy-panel,
  html[data-theme^="glass-"] .privacy-consent-dialog,
  html[data-theme^="glass-"] .profile-edit-dialog,
  html[data-theme^="glass-"] .confirmation-dialog,
  html[data-theme^="glass-"] .feedback-dialog,
  html[data-theme^="glass-"] .replay-modal-panel {
    border-color: rgba(255, 255, 255, 0.18);
    background:
      linear-gradient(145deg, rgba(29, 41, 55, 0.84), rgba(16, 25, 36, 0.68)),
      radial-gradient(120% 80% at 4% 0%, var(--glass-panel-glow-a), rgba(16, 25, 36, 0) 58%),
      radial-gradient(110% 90% at 100% 0%, var(--glass-panel-glow-b), rgba(16, 25, 36, 0) 58%);
    box-shadow: 0 36px 104px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  }

  html[data-theme^="glass-"] .community-detail-backdrop.is-open,
  html[data-theme^="glass-"] .community-comments-backdrop.is-open,
  html[data-theme^="glass-"] .replay-modal-backdrop.is-open {
    background: rgba(8, 13, 19, 0.12);
  }

  html[data-theme^="glass-"] input,
  html[data-theme^="glass-"] textarea,
  html[data-theme^="glass-"] select {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(19, 29, 41, 0.68);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  html[data-theme^="glass-"] input::placeholder,
  html[data-theme^="glass-"] textarea::placeholder {
    color: rgba(221, 232, 239, 0.48);
  }

  html[data-theme^="glass-"] input:focus,
  html[data-theme^="glass-"] textarea:focus,
  html[data-theme^="glass-"] select:focus {
    border-color: rgba(139, 218, 236, 0.42);
    box-shadow: 0 0 0 4px rgba(93, 188, 214, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  html[data-theme^="glass-"] .site-footer,
  html[data-theme^="glass-"] .lead,
  html[data-theme^="glass-"] .form-message {
    color: var(--muted);
  }

  html[data-theme^="glass-"] .form-message.success {
    color: #9eddea;
  }

  html[data-theme^="glass-"] .form-message.error {
    color: #ff9fb5;
  }
}

html[data-theme^="glass-"] .account-profile-card,
html[data-theme^="glass-"] .account-binding-card,
html[data-theme^="glass-"] .account-binding-icon,
html[data-theme^="glass-"] .account-profile-readonly,
html[data-theme^="glass-"] .passkey-card,
html[data-theme^="glass-"] .native-health-card,
html[data-theme^="glass-"] .native-health-switch,
html[data-theme^="glass-"] .native-health-json {
  border-color: rgba(255, 255, 255, 0.54);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22)),
    radial-gradient(90% 110% at 100% 0%, rgba(188, 244, 255, 0.18), rgba(255, 255, 255, 0) 58%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 10px 24px rgba(80, 102, 119, 0.08);
}

html[data-theme^="glass-"] .native-health-switch:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.28)),
    radial-gradient(90% 110% at 100% 0%, rgba(188, 244, 255, 0.22), rgba(255, 255, 255, 0) 58%);
}

html[data-theme^="glass-"] .settings-content {
  border-top: 0;
}

html[data-theme^="glass-"] .settings-panel {
  gap: 14px;
}

html[data-theme^="glass-"] .settings-group {
  border-bottom: 0;
}

html[data-theme^="glass-"] .settings-option-button {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme^="glass-"] .settings-option-button:hover:not(:disabled),
html[data-theme^="glass-"] .settings-option-button:focus-visible {
  border-color: rgba(126, 197, 217, 0.24);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

html[data-theme^="glass-"] .settings-option-button:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

body.community-consent-open,
body.privacy-consent-open,
body.passkey-prompt-open,
body.policy-open,
body.confirmation-open,
body.feedback-open,
body.food-selection-open,
body.manual-food-open,
body.ai-summary-open,
body.notification-open,
body.community-comments-open,
body.community-detail-open,
body.replay-modal-open {
  overflow: hidden;
}

.pull-refresh {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  z-index: 1200;
  min-height: 38px;
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(31, 122, 90, 0.14);
  border-radius: 999px;
  padding: 0 13px 0 9px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary-strong);
  box-shadow: 0 10px 28px rgba(25, 42, 35, 0.14);
  font-size: 13px;
  font-weight: 760;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 18px)) scale(0.94);
  transition: opacity 140ms ease, transform 180ms ease, visibility 0ms linear 180ms;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pull-refresh-icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(var(--pull-rotation));
  transform-origin: center;
}

body.is-pulling .pull-refresh,
body.is-refreshing .pull-refresh {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 140ms ease, transform 180ms ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.is-pull-ready .pull-refresh {
  border-color: rgba(31, 122, 90, 0.28);
  box-shadow: 0 12px 32px rgba(25, 42, 35, 0.18);
}

body.is-refreshing .pull-refresh-icon {
  animation: pull-refresh-spin 700ms linear infinite;
}

@keyframes pull-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

html[data-environment="test"] body::before {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  border: 1px solid rgba(20, 95, 69, 0.24);
  border-radius: 6px;
  padding: 5px 8px;
  background: #dff3e8;
  color: #145f45;
  content: "TEST";
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  pointer-events: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
label,
[role="button"],
[role="tab"],
.share-switch,
.apple-login-entry,
.huawei-login-entry,
.qq-login-entry,
.account-bind-button,
.test-login-entry,
.timeline-panel input[type="range"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  background: var(--primary);
  color: #fff;
  font-weight: 760;
  cursor: pointer;
  white-space: nowrap;
  background-clip: padding-box;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

button:hover:not(:disabled) {
  background: var(--primary-strong);
  box-shadow: 0 10px 24px rgba(31, 122, 90, 0.18);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  box-shadow: 0 5px 14px rgba(31, 122, 90, 0.14);
  transform: translateY(0) scale(0.985);
}

button:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible {
  outline: 2px solid rgba(31, 122, 90, 0.24);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

textarea {
  min-height: 112px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.55;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(31, 122, 90, 0.12);
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 720;
}

.app-shell {
  width: min(1180px, calc(100% - 32px));
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: var(--content-top-gap) 0 var(--content-bottom-gap);
  transform: translateY(var(--page-edge-spring-y, 0px));
  transition: transform 180ms ease;
  will-change: transform;
}

html.is-page-edge-spring-dragging .app-shell {
  transition: none;
}

html.is-page-edge-spring-releasing .app-shell {
  transition: transform 520ms cubic-bezier(0.22, 0.84, 0.28, 1);
}

.edge-spring-target > * {
  transform: translateY(var(--edge-spring-y, 0px));
  transition: transform 520ms cubic-bezier(0.22, 0.84, 0.28, 1);
  will-change: transform;
}

.edge-spring-target.is-edge-spring-dragging > * {
  transition: none;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}