/*
 * Porcelain Ink
 *
 * Final brand skin for the selected asymmetric “瓷白墨青” icon. The existing
 * product layout and interaction model stay intact; this file only replaces
 * color, material, elevation and the login presentation. It is intentionally
 * loaded last so legacy glass-theme selectors remain useful for layout while
 * their pink/cyan visual treatment is neutralised here.
 */

html[data-theme="glass-porcelain-ink"] {
  color-scheme: light;
  --bg: #f4f6f3;
  --surface: #ffffff;
  --ink: #10272c;
  --muted: #52676b;
  --line: #d6deda;
  --primary: #24545c;
  --primary-strong: #1d464d;
  --coral: #9a6657;
  --gain-soft: #a6533f;
  --loss-soft: #176d75;
  --gold: #936b32;
  /* Semantic data palette: decrease, increase and prediction stay distinct. */
  --chart-loss: #176d75;
  --chart-gain: #a6533f;
  --chart-plan: #176d75;
  --chart-neutral: #748487;
  --chart-selected: #31565b;
  --chart-selected-soft: rgba(49, 86, 91, 0.13);
  --chart-prediction: #6553a3;
  --chart-prediction-soft: rgba(101, 83, 163, 0.13);
  --chart-prediction-glow: transparent;
  --chart-grid: rgba(82, 103, 107, 0.12);
  --chart-axis: rgba(82, 103, 107, 0.2);
  --chart-empty: rgba(77, 121, 125, 0.16);
  --calorie-gold: #936b32;
  --calorie-gold-soft: rgba(147, 107, 50, 0.12);
  --calendar-loss: #176d75;
  --calendar-gain: #a6533f;
  --calendar-neutral: #eaf0ed;
  --calendar-selected: #24545c;
  --calendar-selected-bg: #dcebe7;
  --calendar-mix-surface: #f4f6f3;
  --calendar-text: #10272c;
  --log-accent: #59798c;
  --food-accent: #936b32;
  --food-accent-soft: #f5eedf;
  --safe-bg: #f4f6f3;
  --shadow: 0 8px 24px rgba(16, 39, 44, 0.08);
  --glass-fill: #ffffff;
  --glass-fill-strong: #ffffff;
  --glass-stroke: #d6deda;
  --glass-stroke-cool: #d6deda;
  --glass-inner-line: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 8px 24px rgba(16, 39, 44, 0.08);
  --glass-shadow-soft: none;
  --glass-glow-a: transparent;
  --glass-glow-b: transparent;
  --glass-button-glow-a: transparent;
  --glass-button-glow-b: transparent;
  --glass-avatar-glow: transparent;
  --glass-panel-glow-a: transparent;
  --glass-panel-glow-b: transparent;
  --glass-active-gradient: linear-gradient(90deg, #31565b, #4d797d);
  --glass-active-shadow: rgba(49, 86, 91, 0.16);
  --page-bg: linear-gradient(180deg, #f4f6f3 0%, #f7f9f6 100%);
}

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

html[data-theme="glass-porcelain-ink"] body::after {
  background: none;
}

/* Matte surfaces replace the legacy glass material without changing layout. */
html[data-theme="glass-porcelain-ink"] :is(
  .history-section,
  .community-share-panel,
  .community-content-tabs,
  .community-card,
  .ranking-periods,
  .ranking-item,
  .account-management-entry,
  .account-profile-card,
  .account-binding-card,
  .passkey-card,
  .native-health-card,
  .native-health-switch,
  .native-health-json,
  .chart-card,
  .calendar-card,
  .timeline-card,
  .record-card,
  .food-history-card,
  .capture-panel,
  .food-record-panel,
  .weight-calendar,
  .weight-goal-chart,
  .notification-panel
) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] :is(
  .community-detail-panel,
  .community-comments-panel,
  .ai-summary-panel,
  .policy-panel,
  .privacy-consent-dialog,
  .passkey-prompt-dialog,
  .profile-edit-dialog,
  .confirmation-dialog,
  .action-confirm-dialog,
  .feedback-dialog,
  .food-selection-dialog,
  .manual-food-dialog,
  .quick-weight-dialog,
  .replay-modal-panel,
  .image-preview-panel
) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 52px rgba(16, 39, 44, 0.16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] :is(
  .community-detail-backdrop,
  .community-comments-backdrop,
  .ai-summary-backdrop,
  .policy-backdrop,
  .privacy-consent-backdrop,
  .passkey-prompt-backdrop,
  .profile-edit-backdrop,
  .confirmation-backdrop,
  .feedback-backdrop,
  .food-selection-backdrop,
  .manual-food-backdrop,
  .quick-weight-backdrop,
  .replay-modal-backdrop,
  .image-preview-backdrop
).is-open {
  background: rgba(14, 23, 25, 0.48);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] :is(input, textarea, select) {
  border-color: var(--line);
  background: #eaf0ed;
  color: var(--ink);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"] :is(input, textarea, select):focus {
  border-color: #3a7780;
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(58, 119, 128, 0.16);
}

html[data-theme="glass-porcelain-ink"] :is(
  .profile-avatar,
  .settings-account-avatar,
  .community-member-avatar,
  .ranking-avatar,
  .community-detail-avatar,
  .community-comment-avatar
) {
  border-color: var(--line);
  background: #eaf0ed;
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"] .bottom-tabs {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(16, 39, 44, 0.09);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
  backdrop-filter: blur(12px) saturate(1.02);
}

html[data-theme="glass-porcelain-ink"] .bottom-tabs::before {
  background: linear-gradient(180deg, rgba(244, 246, 243, 0), rgba(244, 246, 243, 0.82));
}

html[data-theme="glass-porcelain-ink"] .bottom-tab.is-active {
  color: #24545c;
}

html[data-theme="glass-porcelain-ink"] .bottom-tab.is-active::after {
  background: #24545c;
}

html[data-theme="glass-porcelain-ink"] :is(.topbar-icon-button, .notification-bell) {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] :is(
  .record-entry-button,
  .replay-launch-button,
  .ai-advice-button,
  .settings-option-button,
  .account-profile-item,
  .account-management-entry
) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] :is(
  .secondary-button,
  .ghost-button,
  .profile-action-button,
  .history-toggle-button,
  .settings-back-button,
  .settings-logout-button,
  .food-selection-manual-button,
  .modal-icon-button,
  .notification-mark-read,
  .notification-close,
  .community-detail-close,
  .community-comments-close,
  .ai-summary-close,
  .image-preview-close,
  .document-link
) {
  border-color: var(--line);
  background: #eaf0ed;
  color: var(--primary-strong);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] :is(
  .community-content-tab.is-active,
  .ranking-period.is-active,
  .capture-mode-tab.is-active
) {
  border-color: #b9c7c2;
  background: #dcebe7;
  color: #1d464d;
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"] :is(
  .today-record-button,
  .record-submit-button,
  #captureButton,
  #saveQuickWeightButton,
  #acceptFullModeButton,
  #startPasskeyPromptButton,
  #acceptCommunityShareButton,
  #submitFeedbackButton,
  #applyFoodSelectionButton,
  #submitManualFoodButton
) {
  border-color: #24545c;
  background: #24545c;
  color: #f9f9f7;
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"] :is(
  .today-record-button,
  .record-submit-button,
  #captureButton,
  #saveQuickWeightButton,
  #acceptFullModeButton,
  #startPasskeyPromptButton,
  #acceptCommunityShareButton,
  #submitFeedbackButton,
  #applyFoodSelectionButton,
  #submitManualFoodButton
):hover:not(:disabled),
html[data-theme="glass-porcelain-ink"] :is(
  .today-record-button,
  .record-submit-button,
  #captureButton,
  #saveQuickWeightButton,
  #acceptFullModeButton,
  #startPasskeyPromptButton,
  #acceptCommunityShareButton,
  #submitFeedbackButton,
  #applyFoodSelectionButton,
  #submitManualFoodButton
):focus-visible {
  border-color: #1d464d;
  background: #1d464d;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(58, 119, 128, 0.16);
}

html[data-theme="glass-porcelain-ink"] .mobile-today-overview {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(128deg, #1e474f 0%, #315f67 56%, #769899 100%);
  color: #f9f9f7;
  box-shadow: 0 8px 24px rgba(16, 39, 44, 0.12);
}

html[data-theme="glass-porcelain-ink"] .mobile-today-overview :is(
  .today-overview-kicker,
  .today-record-status,
  .today-primary-metric span,
  .today-primary-metric strong,
  .today-primary-metric small,
  .today-secondary-metric span,
  .today-secondary-metric strong,
  .today-secondary-metric small,
  .today-insight
) {
  color: #f9f9f7;
}

/* The overview shell is dark, while its inset cards are porcelain in light mode. */
@media (prefers-color-scheme: light) {
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview #todayRecordStatus {
    border: 1px solid rgba(16, 39, 44, 0.12);
    background: rgba(249, 251, 248, 0.94);
    color: #24545c;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview #todayRecordStatus[data-tone="pending"] {
    border-color: rgba(125, 91, 38, 0.18);
    background: #f5eee2;
    color: #7d5b26;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview :is(
    .today-primary-metric,
    .today-secondary-metric
  ) {
    border-color: rgba(16, 39, 44, 0.12);
    background: rgba(249, 251, 248, 0.9);
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview :is(
    .today-primary-metric span,
    .today-primary-metric small,
    .today-secondary-metric span,
    .today-secondary-metric small
  ) {
    color: #52676b;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview :is(
    .today-primary-metric strong,
    .today-secondary-metric strong
  ) {
    color: #10272c;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview #todayInsightText {
    border-left-color: #4d797d;
    background: rgba(249, 251, 248, 0.9);
    color: #52676b;
  }
}

html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric strong[data-tone="down"] {
  color: var(--chart-loss);
}

html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric strong[data-tone="up"] {
  color: var(--chart-gain);
}

/* Keep magnitude shading, but give up/down days separate hue and border channels. */
html[data-theme="glass-porcelain-ink"] .calendar-day.is-up {
  --calendar-direction: var(--calendar-gain);
}

html[data-theme="glass-porcelain-ink"] .calendar-day.is-down {
  --calendar-direction: var(--calendar-loss);
}

html[data-theme="glass-porcelain-ink"] :is(.calendar-day, button.calendar-day):is(.is-up, .is-down),
html[data-theme="glass-porcelain-ink"] button.calendar-day:is(.is-up, .is-down):is(:hover, :focus-visible, :active) {
  border-color: color-mix(in srgb, var(--calendar-direction) 72%, transparent);
  background: color-mix(in srgb, var(--day-color) 72%, var(--calendar-mix-surface));
  color: var(--calendar-text);
  box-shadow: inset 0 -2px 0 var(--calendar-direction);
}

html[data-theme="glass-porcelain-ink"] .calendar-day:is(.is-up, .is-down).is-selected,
html[data-theme="glass-porcelain-ink"] button.calendar-day:is(.is-up, .is-down).is-selected:is(:hover, :focus-visible, :active) {
  border-color: var(--calendar-direction);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--calendar-direction) 20%, transparent),
    inset 0 -2px 0 var(--calendar-direction);
}

/* A planned loss is not an increase: keep it on the decrease hue. */
html[data-theme="glass-porcelain-ink"] .goal-chart-metric::before {
  border-top-color: var(--chart-plan);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-metric.is-trend::before {
  border-top-color: var(--chart-prediction);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-line.is-plan {
  stroke: var(--chart-plan);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-point.is-target circle {
  fill: var(--chart-plan);
}

html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-record-button {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(249, 249, 247, 0.96);
  color: #24545c;
}

html[data-theme="glass-porcelain-ink"] .ai-advice-button {
  border-color: rgba(98, 93, 142, 0.22);
  background: #f4f2f8;
}

html[data-theme="glass-porcelain-ink"] :is(.camera-stage, .camera-preview-shell) {
  background: #102f35;
}

html[data-theme="glass-porcelain-ink"] :is(.camera-guide, .camera-head-guide) {
  border-color: rgba(249, 249, 247, 0.76);
  color: #dcebe7;
}

/* Login follows the approved visual: icon-led, quiet, and without a glass card. */
html[data-theme="glass-porcelain-ink"] .login-view {
  width: min(100%, 460px);
  min-height: calc(100dvh - 150px);
  margin: 0 auto;
  display: grid;
  align-content: center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 28px;
  padding: 34px 0 22px;
}

html[data-theme="glass-porcelain-ink"] .login-copy {
  display: grid;
  justify-items: center;
  text-align: center;
}

html[data-theme="glass-porcelain-ink"] .login-copy::before {
  display: none;
}

html[data-theme="glass-porcelain-ink"] .login-brand-icon {
  width: clamp(142px, 32vw, 176px);
  height: auto;
  display: block;
  margin-bottom: 30px;
  border-radius: 25%;
  box-shadow: 0 18px 38px rgba(16, 39, 44, 0.15);
}

html[data-theme="glass-porcelain-ink"] .login-copy h1 {
  margin: 0;
  color: #10272c;
  font-size: clamp(31px, 7vw, 40px);
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: -0.045em;
  text-shadow: none;
}

html[data-theme="glass-porcelain-ink"] .login-subtitle {
  margin: 12px 0 0;
  color: #52676b;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

html[data-theme="glass-porcelain-ink"] :is(.login-panel, .qq-only-login-panel) {
  width: 100%;
  max-width: 390px;
  min-height: 0;
  justify-self: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] .login-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html[data-theme="glass-porcelain-ink"] .login-options :is(
  .passkey-login-entry,
  .huawei-login-entry,
  .qq-login-entry,
  .test-login-entry
) {
  min-height: 52px;
  border-radius: 14px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 650;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] .login-options :is(.apple-login-entry, .passkey-login-entry, .test-login-entry) {
  grid-column: 1 / -1;
}

html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry,
html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry:visited,
html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry:focus,
html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry:focus-visible,
html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry:hover:not(:disabled) {
  border: 1px solid #24545c;
  background: #24545c;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry,
html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry:focus,
html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry:focus-visible,
html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry:hover:not(:disabled),
html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry[aria-busy="true"] {
  border: 1px solid #b9c7c2;
  background: #ffffff;
  color: #24545c;
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"] .login-options :is(.qq-login-entry, .huawei-login-entry),
html[data-theme="glass-porcelain-ink"] .login-options :is(.qq-login-entry, .huawei-login-entry):hover,
html[data-theme="glass-porcelain-ink"] .login-options :is(.qq-login-entry, .huawei-login-entry):focus-visible {
  border: 1px solid #d6deda;
  background: #fafcfa;
  color: #52676b;
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"] .login-options .passkey-icon {
  color: #24545c;
}

html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry {
  border-color: #24545c !important;
  background: #24545c !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry {
  border-color: #b9c7c2 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #24545c !important;
  box-shadow: none !important;
}

html[data-theme="glass-porcelain-ink"] .login-options :is(.qq-login-entry, .huawei-login-entry) {
  border-color: #d6deda !important;
  background: #fafcfa !important;
  background-image: none !important;
  color: #52676b !important;
  box-shadow: none !important;
}

html[data-theme="glass-porcelain-ink"] #loginMessage {
  grid-column: 1;
  width: min(100%, 390px);
  justify-self: center;
  margin: -14px 0 0;
  color: #5f7074;
  font-size: 13px;
  text-align: center;
}

html[data-theme="glass-porcelain-ink"] .site-footer {
  border-top-color: #d6deda;
  color: #5f7074;
}

html[data-theme="glass-porcelain-ink"] .pull-refresh {
  border-color: #d6deda;
  background: #ffffff;
  background-image: none;
  color: #24545c;
  box-shadow: 0 8px 24px rgba(16, 39, 44, 0.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] body :is(
  .history-section,
  .community-share-panel,
  .community-card,
  .ranking-item,
  .account-management-entry,
  .account-profile-card,
  .account-binding-card,
  .passkey-card,
  .native-health-card,
  .settings-option-button,
  .chart-card,
  .calendar-card,
  .timeline-card,
  .record-card,
  .food-history-card,
  .capture-panel,
  .weight-calendar,
  .weight-goal-chart
) {
  box-shadow: none !important;
}

@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
  html[data-theme="glass-porcelain-ink"] {
    --bg: #f4f6f3;
    --surface: #ffffff;
    --ink: #10272c;
    --muted: #52676b;
    --line: #d6deda;
    --primary: #24545c;
    --primary-strong: #1d464d;
    --coral: #9a6657;
    --gain-soft: #a6533f;
    --loss-soft: #176d75;
    --safe-bg: #f4f6f3;
    --shadow: none;
    --glass-fill: #ffffff;
    --glass-fill-strong: #ffffff;
    --glass-stroke: #d6deda;
    --glass-shadow: none;
    --glass-shadow-soft: none;
    --mobile-canvas: #f4f6f3;
    --mobile-surface: #ffffff;
    --mobile-surface-solid: #ffffff;
    --mobile-surface-raised: #fafcfa;
    --mobile-surface-subtle: #eaf0ed;
    --mobile-control: #eaf0ed;
    --mobile-control-pressed: #dce5e1;
    --mobile-ink: #10272c;
    --mobile-ink-soft: #344d52;
    --mobile-muted: #52676b;
    --mobile-faint: #5f7074;
    --mobile-line: #d6deda;
    --mobile-line-strong: #b9c7c2;
    --mobile-primary: #24545c;
    --mobile-primary-strong: #1d464d;
    --mobile-primary-soft: #dcebe7;
    --mobile-primary-wash: rgba(36, 84, 92, 0.1);
    --mobile-rose: #9a6657;
    --mobile-rose-soft: #f3eae6;
    --mobile-danger: #a45b61;
    --mobile-danger-soft: #f6e9ea;
    --mobile-success: #3f735d;
    --mobile-success-soft: #e6f0eb;
    --mobile-warning: #936b32;
    --mobile-warning-soft: #f5eedf;
    --mobile-overlay: rgba(14, 23, 25, 0.56);
    --mobile-shadow-card: none;
    --mobile-shadow-raised: 0 8px 24px rgba(16, 39, 44, 0.08);
    --mobile-shadow-nav: 0 10px 30px rgba(16, 39, 44, 0.09);
    --mobile-tracking-surface: #ffffff;
    --mobile-tracking-surface-raised: #fafcfa;
    --mobile-tracking-surface-soft: #eaf0ed;
    --mobile-tracking-ink: #10272c;
    --mobile-tracking-muted: #52676b;
    --mobile-tracking-line: rgba(82, 103, 107, 0.16);
    --mobile-tracking-primary: #24545c;
    --mobile-tracking-primary-strong: #1d464d;
    --mobile-tracking-primary-soft: #dcebe7;
    --mobile-tracking-rose: #9a6657;
    --mobile-tracking-violet: #625d8e;
    --mobile-tracking-shadow: none;
    --mobile-tracking-shadow-raised: 0 8px 24px rgba(16, 39, 44, 0.08);
    --mobile-ui-surface: #ffffff;
    --mobile-ui-surface-soft: #eaf0ed;
    --mobile-ui-surface-raised: #fafcfa;
    --mobile-ui-border: rgba(82, 103, 107, 0.16);
    --mobile-ui-border-strong: #b9c7c2;
    --mobile-ui-text: #10272c;
    --mobile-ui-muted: #52676b;
    --mobile-ui-faint: #5f7074;
    --mobile-ui-accent: #24545c;
    --mobile-ui-accent-soft: #dcebe7;
    --mobile-ui-danger: #a45b61;
    --mobile-ui-danger-soft: #f6e9ea;
    --mobile-ui-shadow: none;
    --mobile-ui-sheet-shadow: 0 -18px 52px rgba(16, 39, 44, 0.14);
  }

  html[data-theme="glass-porcelain-ink"] .login-view {
    min-height: calc(100dvh - var(--mobile-safe-top) - 112px);
    gap: 24px;
    padding: clamp(18px, 4.5vh, 42px) 0 12px;
  }

  html[data-theme="glass-porcelain-ink"] .login-brand-icon {
    width: clamp(132px, 40vw, 164px);
    margin-bottom: 26px;
  }

  html[data-theme="glass-porcelain-ink"] .login-copy h1 {
    font-size: clamp(30px, 9vw, 38px);
  }

  html[data-theme="glass-porcelain-ink"] .login-options {
    gap: 9px;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="glass-porcelain-ink"] {
    color-scheme: dark;
    --bg: #0e1719;
    --surface: #152124;
    --ink: #f2f6f4;
    --muted: #b7c4c1;
    --line: #314448;
    --primary: #7db7b9;
    --primary-strong: #a5cfca;
    --coral: #c39486;
    --gain-soft: #f0a07e;
    --loss-soft: #67c3c2;
    --gold: #d1a767;
    --chart-loss: #67c3c2;
    --chart-gain: #f0a07e;
    --chart-plan: #67c3c2;
    --chart-neutral: #8fa09e;
    --chart-selected: #a5cfca;
    --chart-selected-soft: rgba(165, 207, 202, 0.14);
    --chart-prediction: #b5a5f2;
    --chart-prediction-soft: rgba(181, 165, 242, 0.14);
    --chart-grid: rgba(183, 196, 193, 0.12);
    --chart-axis: rgba(183, 196, 193, 0.2);
    --chart-empty: rgba(121, 179, 182, 0.16);
    --calorie-gold: #d1a767;
    --calorie-gold-soft: rgba(209, 167, 103, 0.13);
    --calendar-loss: #347b7d;
    --calendar-gain: #8c594a;
    --calendar-neutral: #203035;
    --calendar-selected: #a5cfca;
    --calendar-selected-bg: #203d41;
    --calendar-mix-surface: #152124;
    --calendar-text: #f2f6f4;
    --log-accent: #8eafbf;
    --food-accent: #d1a767;
    --food-accent-soft: #302918;
    --safe-bg: #0e1719;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --glass-fill: #152124;
    --glass-fill-strong: #1b2a2e;
    --glass-stroke: #314448;
    --glass-stroke-cool: #314448;
    --glass-inner-line: rgba(255, 255, 255, 0.04);
    --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    --glass-shadow-soft: none;
    --glass-active-gradient: linear-gradient(90deg, #31565b, #4d797d);
    --page-bg: linear-gradient(180deg, #0e1719 0%, #111d20 100%);
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview #todayRecordStatus {
    border: 1px solid rgba(165, 207, 202, 0.18);
    background: #203035;
    color: #a5cfca;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview #todayRecordStatus[data-tone="pending"] {
    border-color: rgba(209, 167, 103, 0.2);
    background: #302918;
    color: #d1a767;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview :is(
    .today-primary-metric,
    .today-secondary-metric
  ) {
    border-color: rgba(183, 196, 193, 0.16);
    background: rgba(8, 21, 30, 0.58);
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview :is(
    .today-primary-metric span,
    .today-primary-metric small,
    .today-secondary-metric span,
    .today-secondary-metric small
  ) {
    color: #b7c4c1;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview :is(
    .today-primary-metric strong,
    .today-secondary-metric strong
  ) {
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview #todayInsightText {
    border-left-color: #67c3c2;
    background: rgba(8, 21, 30, 0.58);
    color: #d6e0dd;
  }

  html[data-theme="glass-porcelain-ink"] :is(
    .history-section,
    .community-share-panel,
    .community-content-tabs,
    .community-card,
    .ranking-periods,
    .ranking-item,
    .account-management-entry,
    .account-profile-card,
    .account-binding-card,
    .passkey-card,
    .native-health-card,
    .native-health-switch,
    .native-health-json,
    .chart-card,
    .calendar-card,
    .timeline-card,
    .record-card,
    .food-history-card,
    .capture-panel,
    .food-record-panel,
    .weight-calendar,
    .weight-goal-chart,
    .notification-panel
  ) {
    border-color: #314448;
    background: #152124;
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] :is(
    .community-detail-panel,
    .community-comments-panel,
    .ai-summary-panel,
    .policy-panel,
    .privacy-consent-dialog,
    .passkey-prompt-dialog,
    .profile-edit-dialog,
    .confirmation-dialog,
    .action-confirm-dialog,
    .feedback-dialog,
    .food-selection-dialog,
    .manual-food-dialog,
    .quick-weight-dialog,
    .replay-modal-panel,
    .image-preview-panel
  ) {
    border-color: #314448;
    background: #152124;
    color: #f2f6f4;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
  }

  html[data-theme="glass-porcelain-ink"] :is(input, textarea, select) {
    border-color: #314448;
    background: #203035;
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] :is(input, textarea, select):focus {
    border-color: #9dd7d1;
    background: #1b2a2e;
    box-shadow: 0 0 0 3px rgba(157, 215, 209, 0.14);
  }

  html[data-theme="glass-porcelain-ink"] :is(
    .profile-avatar,
    .settings-account-avatar,
    .community-member-avatar,
    .ranking-avatar,
    .community-detail-avatar,
    .community-comment-avatar
  ) {
    border-color: #314448;
    background: #203035;
  }

  html[data-theme="glass-porcelain-ink"] .bottom-tabs {
    border-color: #314448;
    background: rgba(21, 33, 36, 0.96);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  }

  html[data-theme="glass-porcelain-ink"] .bottom-tabs::before {
    background: linear-gradient(180deg, rgba(14, 23, 25, 0), rgba(14, 23, 25, 0.84));
  }

  html[data-theme="glass-porcelain-ink"] .bottom-tab.is-active {
    color: #a5cfca;
  }

  html[data-theme="glass-porcelain-ink"] :is(
    .record-entry-button,
    .replay-launch-button,
    .settings-option-button,
    .account-profile-item,
    .account-management-entry
  ) {
    border-color: #314448;
    background: #152124;
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] :is(
    .secondary-button,
    .ghost-button,
    .profile-action-button,
    .history-toggle-button,
    .settings-back-button,
    .settings-logout-button,
    .food-selection-manual-button,
    .modal-icon-button,
    .notification-mark-read,
    .notification-close,
    .community-detail-close,
    .community-comments-close,
    .ai-summary-close,
    .image-preview-close,
    .document-link
  ) {
    border-color: #314448;
    background: #203035;
    color: #b7c4c1;
  }

  html[data-theme="glass-porcelain-ink"] :is(
    .today-record-button,
    .record-submit-button,
    #captureButton,
    #saveQuickWeightButton,
    #acceptFullModeButton,
    #startPasskeyPromptButton,
    #acceptCommunityShareButton,
    #submitFeedbackButton,
    #applyFoodSelectionButton,
    #submitManualFoodButton
  ) {
    border-color: #7db7b9;
    background: #7db7b9;
    color: #0e1719;
  }

  html[data-theme="glass-porcelain-ink"] .ai-advice-button {
    border-color: rgba(158, 152, 204, 0.24);
    background: #24243a;
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] .login-copy h1 {
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] .login-subtitle,
  html[data-theme="glass-porcelain-ink"] #loginMessage {
    color: #b7c4c1;
  }

  html[data-theme="glass-porcelain-ink"] .login-brand-icon {
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.42);
  }

  html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry,
  html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry:visited,
  html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry:focus,
  html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry:focus-visible,
  html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry:hover:not(:disabled) {
    border-color: #7db7b9;
    background: #7db7b9;
    color: #0e1719;
  }

  html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry,
  html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry:focus,
  html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry:focus-visible,
  html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry:hover:not(:disabled),
  html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry[aria-busy="true"] {
    border-color: #466066;
    background: #152124;
    color: #a5cfca;
  }

  html[data-theme="glass-porcelain-ink"] .login-options :is(.qq-login-entry, .huawei-login-entry),
  html[data-theme="glass-porcelain-ink"] .login-options :is(.qq-login-entry, .huawei-login-entry):hover,
  html[data-theme="glass-porcelain-ink"] .login-options :is(.qq-login-entry, .huawei-login-entry):focus-visible {
    border-color: #314448;
    background: #1b2a2e;
    color: #b7c4c1;
  }

  html[data-theme="glass-porcelain-ink"] .login-options .apple-login-entry {
    border-color: #7db7b9 !important;
    background: #7db7b9 !important;
    background-image: none !important;
    color: #0e1719 !important;
    box-shadow: none !important;
  }

  html[data-theme="glass-porcelain-ink"] .login-options .passkey-login-entry {
    border-color: #466066 !important;
    background: #152124 !important;
    background-image: none !important;
    color: #a5cfca !important;
    box-shadow: none !important;
  }

  html[data-theme="glass-porcelain-ink"] .login-options :is(.qq-login-entry, .huawei-login-entry) {
    border-color: #314448 !important;
    background: #1b2a2e !important;
    background-image: none !important;
    color: #b7c4c1 !important;
    box-shadow: none !important;
  }

  html[data-theme="glass-porcelain-ink"] .site-footer {
    border-top-color: #314448;
    color: #899a97;
  }

  html[data-theme="glass-porcelain-ink"] .pull-refresh {
    border-color: #314448;
    background: #152124;
    background-image: none;
    color: #a5cfca;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  }

  html[data-theme="glass-porcelain-ink"] {
    --mobile-canvas: #0e1719;
    --mobile-surface: #152124;
    --mobile-surface-solid: #152124;
    --mobile-surface-raised: #1b2a2e;
    --mobile-surface-subtle: #203035;
    --mobile-control: #203035;
    --mobile-control-pressed: #294047;
    --mobile-ink: #f2f6f4;
    --mobile-ink-soft: #d6e0dd;
    --mobile-muted: #b7c4c1;
    --mobile-faint: #899a97;
    --mobile-line: #314448;
    --mobile-line-strong: #466066;
    --mobile-primary: #7db7b9;
    --mobile-primary-strong: #a5cfca;
    --mobile-primary-soft: #203d41;
    --mobile-primary-wash: rgba(125, 183, 185, 0.12);
    --mobile-rose: #c39486;
    --mobile-rose-soft: #352723;
    --mobile-danger: #e1a0a4;
    --mobile-danger-soft: #321f26;
    --mobile-success: #82b69c;
    --mobile-success-soft: #193128;
    --mobile-warning: #d1a767;
    --mobile-warning-soft: #302918;
    --mobile-overlay: rgba(0, 6, 8, 0.72);
    --mobile-shadow-card: none;
    --mobile-shadow-raised: 0 12px 34px rgba(0, 0, 0, 0.24);
    --mobile-shadow-nav: 0 14px 38px rgba(0, 0, 0, 0.32);
    --mobile-tracking-surface: #152124;
    --mobile-tracking-surface-raised: #1b2a2e;
    --mobile-tracking-surface-soft: #203035;
    --mobile-tracking-ink: #f2f6f4;
    --mobile-tracking-muted: #b7c4c1;
    --mobile-tracking-line: rgba(183, 196, 193, 0.16);
    --mobile-tracking-primary: #7db7b9;
    --mobile-tracking-primary-strong: #a5cfca;
    --mobile-tracking-primary-soft: #203d41;
    --mobile-tracking-rose: #c39486;
    --mobile-tracking-violet: #9e98cc;
    --mobile-tracking-shadow: none;
    --mobile-tracking-shadow-raised: 0 12px 34px rgba(0, 0, 0, 0.24);
    --mobile-ui-surface: #152124;
    --mobile-ui-surface-soft: #203035;
    --mobile-ui-surface-raised: #1b2a2e;
    --mobile-ui-border: rgba(183, 196, 193, 0.16);
    --mobile-ui-border-strong: #466066;
    --mobile-ui-text: #f2f6f4;
    --mobile-ui-muted: #b7c4c1;
    --mobile-ui-faint: #899a97;
    --mobile-ui-accent: #7db7b9;
    --mobile-ui-accent-soft: #203d41;
    --mobile-ui-danger: #e1a0a4;
    --mobile-ui-danger-soft: #321f26;
    --mobile-ui-shadow: none;
    --mobile-ui-sheet-shadow: 0 -22px 64px rgba(0, 0, 0, 0.46);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass-porcelain-ink"] *,
  html[data-theme="glass-porcelain-ink"] *::before,
  html[data-theme="glass-porcelain-ink"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Core-screen refinement: keep the product structure, align controls with Porcelain Ink. */
html[data-theme="glass-porcelain-ink"] .login-view {
  gap: 0;
}

html[data-theme="glass-porcelain-ink"] :is(.login-panel, .qq-only-login-panel) {
  margin-top: clamp(44px, 7dvh, 64px);
}

html[data-theme="glass-porcelain-ink"] .login-options {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

html[data-theme="glass-porcelain-ink"] .login-options :is(
  .apple-login-entry,
  .passkey-login-entry,
  .huawei-login-entry,
  .qq-login-entry,
  .test-login-entry
) {
  grid-column: 1;
  min-height: 54px;
  border-radius: 14px;
  font-size: 15px;
}

html[data-theme="glass-porcelain-ink"] .login-options :is(
  .passkey-login-entry,
  .huawei-login-entry,
  .qq-login-entry,
  .test-login-entry
),
html[data-theme="glass-porcelain-ink"] .login-options :is(
  .passkey-login-entry,
  .huawei-login-entry,
  .qq-login-entry,
  .test-login-entry
):is(:hover, :focus, :focus-visible, :active) {
  border-color: #24545c !important;
  background: transparent !important;
  background-image: none !important;
  color: #24545c !important;
  box-shadow: none !important;
}

html[data-theme="glass-porcelain-ink"] .login-options :is(
  .apple-login-entry,
  .passkey-login-entry,
  .huawei-login-entry,
  .qq-login-entry,
  .test-login-entry
):focus-visible {
  outline: 3px solid rgba(36, 84, 92, 0.62);
  outline-offset: 2px;
}

html[data-theme="glass-porcelain-ink"] .apple-login-mark svg {
  fill: currentColor;
}

html[data-theme="glass-porcelain-ink"] #loginMessage {
  margin: 14px 0 0;
}

html[data-theme="glass-porcelain-ink"] #loginMessage:empty {
  display: none;
}

html[data-theme="glass-porcelain-ink"] body .login-view:not(.hidden) ~ .site-footer .footer-policy-link {
  display: none;
}

html[data-theme="glass-porcelain-ink"] body :is(
  .dashboard,
  .community-view,
  .settings-view
) > .topbar > .topbar-actions :is(
  .topbar-icon-button,
  .notification-bell
),
html[data-theme="glass-porcelain-ink"] body :is(
  .dashboard,
  .community-view,
  .settings-view
) > .topbar > .topbar-actions :is(
  .topbar-icon-button,
  .notification-bell
):hover:not(:disabled),
html[data-theme="glass-porcelain-ink"] body :is(
  .dashboard,
  .community-view,
  .settings-view
) > .topbar > .topbar-actions :is(
  .topbar-icon-button,
  .notification-bell
):focus-visible {
  border-color: transparent;
  background: transparent;
  color: #24545c;
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"] body :is(
  .dashboard,
  .community-view,
  .settings-view
) > .topbar > .topbar-actions :is(
  .topbar-icon-button,
  .notification-bell
):focus-visible {
  outline: 3px solid rgba(36, 84, 92, 0.62);
  outline-offset: 1px;
}

html[data-theme="glass-porcelain-ink"] .notification-bell-dot {
  border-color: var(--surface);
  background: #a65358;
}

html[data-theme="glass-porcelain-ink"] .share-switch-track {
  background: #d6deda;
  box-shadow: inset 0 0 0 1px #b9c7c2;
}

html[data-theme="glass-porcelain-ink"] .share-switch-track span {
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(16, 39, 44, 0.18);
}

html[data-theme="glass-porcelain-ink"] .share-switch input:checked + .share-switch-track {
  background: #24545c;
  box-shadow: inset 0 0 0 1px #24545c;
}

html[data-theme="glass-porcelain-ink"] .share-switch input:checked + .share-switch-track + .share-switch-text {
  color: #24545c;
}

html[data-theme="glass-porcelain-ink"] .share-switch input:focus-visible + .share-switch-track {
  outline: 3px solid rgba(36, 84, 92, 0.62);
  outline-offset: 2px;
}

html[data-theme="glass-porcelain-ink"] .share-switch-text {
  color: #52676b;
}

html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button,
html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button:is(:hover, :focus-visible, :active) {
  border-color: rgba(36, 84, 92, 0.17);
  background: linear-gradient(135deg, #eef4f1 0%, #f8faf7 100%);
  color: #10272c;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button small {
  color: #24545c;
}

html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button strong {
  color: #10272c;
}

html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button em {
  color: #52676b;
}

html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-action {
  border-color: transparent;
  background: #dcebe7;
  color: #1d464d;
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"] .camera-head-guide {
  color: #dcebe7;
  filter: none;
}

html[data-theme="glass-porcelain-ink"] .camera-head-guide .camera-guide-axis {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.15;
  stroke-dasharray: 5 7;
  opacity: 0.78;
}

@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0;
    border: 1px solid #d6deda;
    border-radius: 22px;
    padding: 18px 18px 16px 28px;
    background: #ffffff;
    color: #10272c;
    box-shadow: 0 8px 24px rgba(16, 39, 44, 0.06);
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: auto;
    left: 0;
    width: 18px;
    height: 104px;
    border-radius: 22px 0 70% 0;
    background: #24545c;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview > * {
    position: relative;
    z-index: 1;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-overview-heading {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-metric-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview :is(
    .today-primary-metric,
    .today-secondary-metric
  ) {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-primary-metric {
    padding: 0 8px 16px;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-primary-metric > span {
    display: block;
    margin: 0 0 6px;
    color: #52676b;
    font-size: 12px;
    font-weight: 650;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-primary-metric strong {
    color: #10272c;
    font-size: clamp(42px, 12.5vw, 52px);
    font-weight: 720;
    line-height: 0.96;
    letter-spacing: -0.055em;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-primary-metric > small {
    margin-left: 6px;
    color: #52676b;
    font-size: 12px;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    border-top: 1px solid #d6deda;
    padding: 13px 8px 14px;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric > span {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 4px;
    color: #52676b;
    font-size: 10px;
    font-weight: 650;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric > strong {
    grid-column: 1;
    grid-row: 2;
    display: block;
    color: #10272c;
    font-size: 18px;
    line-height: 1.1;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric > small {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin: 0;
    border-left: 1px solid #d6deda;
    padding: 0 0 0 16px;
    color: #52676b;
    font-size: 10px;
    line-height: 1.4;
    -webkit-line-clamp: initial;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-insight {
    display: none;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-quick-actions {
    display: block;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-record-button,
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-record-button:is(:hover, :focus-visible, :active) {
    min-height: 50px;
    display: flex;
    justify-content: center;
    border: 1px solid #24545c;
    border-radius: 12px;
    padding: 10px 16px;
    background: #24545c;
    color: #ffffff;
    box-shadow: none;
    text-align: center;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-record-button-icon,
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-record-button small {
    display: none;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-record-button > span:last-child {
    width: 100%;
    text-align: center;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-record-button strong {
    color: inherit;
    font-size: 14px;
    font-weight: 720;
  }

  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone :is(
    .record-entry-button,
    .replay-launch-button
  ),
  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone :is(
    .record-entry-button,
    .replay-launch-button
  ):is(:hover, :focus-visible, :active) {
    border-color: #d6deda;
    background: #ffffff;
    color: #10272c;
    box-shadow: none;
  }

  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone :is(
    .record-entry-icon,
    .replay-entry-icon
  ) {
    background: transparent;
    color: #24545c;
  }

  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone :is(
    .record-entry-button,
    .replay-launch-button
  ) :is(.action-label, span:last-child) {
    color: #10272c;
  }

  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone .replay-entry-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
  }

  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone .replay-entry-icon svg path {
    fill: none;
    stroke: currentColor;
  }

  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone .replay-launch-button:disabled {
    opacity: 0.58;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="glass-porcelain-ink"] .login-options :is(
    .passkey-login-entry,
    .huawei-login-entry,
    .qq-login-entry,
    .test-login-entry
  ),
  html[data-theme="glass-porcelain-ink"] .login-options :is(
    .passkey-login-entry,
    .huawei-login-entry,
    .qq-login-entry,
    .test-login-entry
  ):is(:hover, :focus, :focus-visible, :active) {
    border-color: #7db7b9 !important;
    background: transparent !important;
    color: #a5cfca !important;
  }

  html[data-theme="glass-porcelain-ink"] body :is(
    .dashboard,
    .community-view,
    .settings-view
  ) > .topbar > .topbar-actions :is(
    .topbar-icon-button,
    .notification-bell
  ),
  html[data-theme="glass-porcelain-ink"] body :is(
    .dashboard,
    .community-view,
    .settings-view
  ) > .topbar > .topbar-actions :is(
    .topbar-icon-button,
    .notification-bell
  ):hover:not(:disabled),
  html[data-theme="glass-porcelain-ink"] body :is(
    .dashboard,
    .community-view,
    .settings-view
  ) > .topbar > .topbar-actions :is(
    .topbar-icon-button,
    .notification-bell
  ):focus-visible {
    color: #a5cfca;
  }

  html[data-theme="glass-porcelain-ink"] .login-options :is(
    .apple-login-entry,
    .passkey-login-entry,
    .huawei-login-entry,
    .qq-login-entry,
    .test-login-entry
  ):focus-visible,
  html[data-theme="glass-porcelain-ink"] body :is(
    .dashboard,
    .community-view,
    .settings-view
  ) > .topbar > .topbar-actions :is(
    .topbar-icon-button,
    .notification-bell
  ):focus-visible,
  html[data-theme="glass-porcelain-ink"] .share-switch input:focus-visible + .share-switch-track {
    outline-color: rgba(125, 183, 185, 0.62);
  }

  html[data-theme="glass-porcelain-ink"] .notification-bell-dot {
    border-color: #152124;
    background: #c87b80;
  }

  html[data-theme="glass-porcelain-ink"] .share-switch-track {
    background: #203035;
    box-shadow: inset 0 0 0 1px #466066;
  }

  html[data-theme="glass-porcelain-ink"] .share-switch-track span {
    background: #d6e0dd;
  }

  html[data-theme="glass-porcelain-ink"] .share-switch input:checked + .share-switch-track {
    background: #7db7b9;
    box-shadow: inset 0 0 0 1px #7db7b9;
  }

  html[data-theme="glass-porcelain-ink"] .share-switch input:checked + .share-switch-track span {
    background: #0e1719;
  }

  html[data-theme="glass-porcelain-ink"] .share-switch input:checked + .share-switch-track + .share-switch-text {
    color: #a5cfca;
  }

  html[data-theme="glass-porcelain-ink"] .share-switch-text {
    color: #b7c4c1;
  }

  html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button,
  html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button:is(:hover, :focus-visible, :active) {
    border-color: rgba(125, 183, 185, 0.2);
    background: linear-gradient(135deg, #1b2a2e 0%, #182629 100%);
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button small {
    color: #7db7b9;
  }

  html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button strong {
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-button em {
    color: #b7c4c1;
  }

  html[data-theme="glass-porcelain-ink"] .history-section .ai-advice-action {
    background: #203d41;
    color: #a5cfca;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 1024px),
  (prefers-color-scheme: dark) and (max-width: 1366px) and (any-pointer: coarse) {
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview {
    border-color: #314448;
    background: #152124;
    color: #f2f6f4;
    box-shadow: none;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview::before {
    background: #7db7b9;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-primary-metric > span,
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-primary-metric > small,
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric > span,
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric > small {
    color: #b7c4c1;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-primary-metric strong,
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric > strong {
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric {
    border-top-color: #314448;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-secondary-metric > small {
    border-left-color: #314448;
  }

  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-record-button,
  html[data-theme="glass-porcelain-ink"] .mobile-today-overview .today-record-button:is(:hover, :focus-visible, :active) {
    border-color: #7db7b9;
    background: #7db7b9;
    color: #0e1719;
  }

  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone :is(
    .record-entry-button,
    .replay-launch-button
  ),
  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone :is(
    .record-entry-button,
    .replay-launch-button
  ):is(:hover, :focus-visible, :active) {
    border-color: #314448;
    background: #1b2a2e;
    color: #f2f6f4;
  }

  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone :is(
    .record-entry-icon,
    .replay-entry-icon
  ) {
    background: transparent;
    color: #a5cfca;
  }

  html[data-theme="glass-porcelain-ink"] .dashboard .action-zone :is(
    .record-entry-button,
    .replay-launch-button
  ) :is(.action-label, span:last-child) {
    color: #f2f6f4;
  }
}