/* ============================================================================
 * 家庭饮食管理系统 (Beta0.261111) - 独立样式与四级字体排版控制系统 (styles.css)
 * 说明：统一管理全局字号层级、卡片圆角间距、移动端安全区及滚动条样式。
 * ============================================================================ */

:root {
  --font-lv1-hero: 14px;       /* 第1级：全天核心千卡、KPI大字 */
  --font-lv2-title: 12px;      /* 第2级：卡片标题、食材名、输入框正文 */
  --font-lv3-meta: 11px;       /* 第3级：辅助说明、克重明细、字段标签 */
  --font-lv4-badge: 10px;      /* 第4级：微型徽章、分类角标、百分比 */
  --card-radius: 1rem;         /* 统一卡片圆角 (16px) */
  --card-padding: 0.625rem;    /* 紧凑卡片内边距 (10px) */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html, body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

input, select, textarea, button, a {
  touch-action: manipulation;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hidden {
  display: none !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

/* 移动端全屏自适应视图 */
@media (max-width: 640px) {
  #main-app-view {
    padding: 0 !important;
    max-width: 100% !important;
  }
  #mobile-Pane > div {
    max-width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #mobile-Pane > div > div:first-child {
    display: none !important;
  }
  #m-phone-screen {
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
}