/* ═══════════════════════════════════════════════════════════════════
   OneUp UI · v2「原生」设计系统
   ───────────────────────────────────────────────────────────────────
   北极星: iOS 自带日历。目标不是"像 iOS", 是"就是一个原生 App"。

   第一性原理(v2, 每条向 iOS 日历对齐):
   1. 克制即高级 —— 没有纹理、没有边框、几乎没有投影;层级全靠字体和留白
   2. 一个主色 —— 全 App 只有一个 tint, 用在"可交互"和"今天"上, 绝不当背景刷
   3. 比例即美学 —— Apple 字阶(34/28/22/20/17/15/13/12), 8pt 网格, 44pt 行高,
      16px 页边距, 10px 连续圆角; 禁止出现刻度之外的数字
   4. 触感真实 —— 按下有即时高亮(systemGray4), 松手即回; 无弹跳杂技
   5. 分隔用发丝 —— 0.5px hairline, 且从文字处内缩(不顶边), 图标行内缩 52px
   6. 状态四态 —— 空/载/错/成, 一个都不能少
   7. 尊重系统 —— 深色模式、安全区、动态字体族、减弱动效
   8. 中文排版 —— 正文 17px/1.45, 标题收紧到 1.2; 中文标点

   换 tint: 只改 --u-tint 一个值(OneUp 赤陶 / 日历红 #FF3B30 / 系统蓝 #007AFF)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 令牌 ──────────────────────────────────────────────────── */
:root {
  /* iOS 系统色板(light) */
  --u-bg:        #F2F2F7;                    /* systemGroupedBackground */
  --u-surface:   #FFFFFF;                    /* 分组卡面 */
  --u-fill:      rgba(118,118,128,.12);      /* 输入框/分段控件底 */
  --u-fill-act:  #D1D1D6;                    /* 按下高亮(systemGray4) */
  --u-sep:       rgba(60,60,67,.29);         /* 发丝分隔线 */

  --u-label:     #000000;                    /* 主文字 */
  --u-label2:    rgba(60,60,67,.60);         /* 次文字 */
  --u-label3:    rgba(60,60,67,.30);         /* 占位/弱 */

  /* 唯一主色: OneUp 赤陶(与 iOS 日历红同族)。换品牌只动这两行 */
  --u-tint:      #C0613B;
  --u-tint-soft: rgba(192,97,59,.12);

  /* 语义色 = iOS 系统色(不自造) */
  --u-red:    #FF3B30;  --u-green:  #34C759;
  --u-orange: #FF9500;  --u-teal:   #30B0C7;

  /* 字体: SF/苹方优先 */
  --u-font: -apple-system, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif;
  --u-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Apple 字阶(HIG) */
  --u-fs-large:  34px;   /* Large Title  */
  --u-fs-t1:     28px;   /* Title 1      */
  --u-fs-t2:     22px;   /* Title 2      */
  --u-fs-t3:     20px;   /* Title 3      */
  --u-fs-body:   17px;   /* Body / Headline(加粗) */
  --u-fs-sub:    15px;   /* Subheadline  */
  --u-fs-foot:   13px;   /* Footnote     */
  --u-fs-cap:    12px;   /* Caption      */

  /* 8pt 网格 */
  --u-s1: 4px; --u-s2: 8px; --u-s3: 12px; --u-s4: 16px;
  --u-s5: 24px; --u-s6: 32px; --u-s7: 48px;

  --u-r: 10px;                                /* 分组卡圆角(iOS inset grouped) */
  --u-r-btn: 12px;                            /* 大按钮圆角 */
  --u-r-full: 999px;

  --u-ease: cubic-bezier(.32,.72,0,1);        /* iOS 出场曲线 */
  --u-t-fast: 150ms; --u-t-mid: 250ms; --u-t-slow: 350ms;

  --u-tapmin: 44px;
  --u-nav-h: 50px;                            /* iOS tabbar 49pt */
  --u-inset: 16px;                            /* 系统页边距 */
  --u-safe-b: env(safe-area-inset-bottom, 0px);
}
[data-theme="auto"] { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
/* 组件级明暗差异也走令牌(改主题只动令牌块, 组件规则永远只有一份) */
:root { --u-seg-act: #FFFFFF; --u-bubble-ai: #FFFFFF; }
/* ⚠️ 深色令牌有两份(手动 dark / auto 跟系统), 改值两处同步 */
[data-theme="dark"] {
  --u-bg: #000000; --u-surface: #1C1C1E;
  --u-fill: rgba(118,118,128,.24); --u-fill-act: #3A3A3C;
  --u-sep: rgba(84,84,88,.60);
  --u-label: #FFFFFF; --u-label2: rgba(235,235,245,.60); --u-label3: rgba(235,235,245,.30);
  --u-tint: #D97B52; --u-tint-soft: rgba(217,123,82,.18);
  --u-seg-act: #636366; --u-bubble-ai: #26252A;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --u-bg: #000000; --u-surface: #1C1C1E;
    --u-fill: rgba(118,118,128,.24); --u-fill-act: #3A3A3C;
    --u-sep: rgba(84,84,88,.60);
    --u-label: #FFFFFF; --u-label2: rgba(235,235,245,.60); --u-label3: rgba(235,235,245,.30);
    --u-tint: #D97B52; --u-tint-soft: rgba(217,123,82,.18);
    --u-seg-act: #636366; --u-bubble-ai: #26252A;
  }
}

/* ── 2. 基础 ─────────────────────────────────────────────────── */
.u-app, .u-app * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* hidden 属性必须赢过组件自己的 display(否则 .u-tabbar 等带 display 的组件 hidden 失效) */
.u-app [hidden], .u-app[hidden] { display: none !important; }
.u-app {
  font-family: var(--u-font); font-size: var(--u-fs-body); line-height: 1.45;
  color: var(--u-label); background: var(--u-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  .u-app *, .u-app *::before, .u-app *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* 排版角色(不是"大中小", 是 iOS 的语义角色) */
.u-largetitle { font: 700 var(--u-fs-large)/1.2 var(--u-font); letter-spacing: -.4px; }
.u-title2     { font: 700 var(--u-fs-t2)/1.25 var(--u-font); }
.u-title3     { font: 600 var(--u-fs-t3)/1.25 var(--u-font); }
.u-headline   { font: 600 var(--u-fs-body)/1.3 var(--u-font); }
.u-subhead    { font: 400 var(--u-fs-sub)/1.4 var(--u-font); color: var(--u-label2); }
.u-footnote   { font: 400 var(--u-fs-foot)/1.4 var(--u-font); color: var(--u-label2); }
.u-caption    { font: 400 var(--u-fs-cap)/1.35 var(--u-font); color: var(--u-label3); }

/* ── 3. 组件 ─────────────────────────────────────────────────── */

/* 分组列表(iOS inset grouped —— 本系统的核心组件) */
.u-group-h {
  padding: var(--u-s5) var(--u-inset) var(--u-s2) calc(var(--u-inset) * 2);
  font: 400 var(--u-fs-foot)/1.3 var(--u-font); color: var(--u-label2);
}
.u-list { margin: 0 var(--u-inset); background: var(--u-surface); border-radius: var(--u-r); overflow: hidden; }
.u-row {
  display: flex; align-items: center; gap: var(--u-s3); width: 100%;
  min-height: var(--u-tapmin); padding: 10px var(--u-inset);
  background: transparent; border: 0; text-align: left; cursor: pointer;
  font: 400 var(--u-fs-body)/1.35 var(--u-font); color: var(--u-label);
  transition: background var(--u-t-fast);
  position: relative;
}
.u-row:active { background: var(--u-fill-act); transition: none; }
.u-row + .u-row::before {              /* 发丝分隔线: 内缩, 有图标时对齐文字 */
  content: ""; position: absolute; top: 0; right: 0; left: var(--u-inset);
  height: .5px; background: var(--u-sep);
}
.u-list--icons .u-row + .u-row::before { left: 56px; }
.u-row__ic { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; border-radius: 7px; }
.u-row__main { flex: 1; min-width: 0; }
.u-row__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-row__sub { display: block; font-size: var(--u-fs-foot); color: var(--u-label2); margin-top: 1px; }
.u-row__aside { flex: none; font-size: var(--u-fs-body); color: var(--u-label2); }
.u-row__arrow { flex: none; color: var(--u-label3); font-weight: 600; font-family: var(--u-font); }

/* 按钮: 主按钮=tint 实心大圆角; 文字按钮=iOS 默认样式(纯 tint 字) */
.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 0 var(--u-s5); width: auto;
  font: 600 var(--u-fs-body)/1 var(--u-font);
  background: var(--u-tint); color: #fff;
  border: 0; border-radius: var(--u-r-btn); cursor: pointer; user-select: none;
  transition: opacity var(--u-t-fast);
}
.u-btn:active { opacity: .75; }
.u-btn:disabled { opacity: .4; cursor: default; }
.u-btn--text { background: transparent; color: var(--u-tint); min-height: var(--u-tapmin); padding: 0 var(--u-s2); }
.u-btn--gray { background: var(--u-fill); color: var(--u-tint); }
.u-btn--danger { background: transparent; color: var(--u-red); min-height: var(--u-tapmin); }
.u-btn--sm { min-height: 32px; padding: 0 var(--u-s3); font-size: var(--u-fs-sub); border-radius: 8px; }

/* 输入(iOS 表单风: 无边框, 填充底) */
.u-input, .u-textarea, .u-select {
  width: 100%; min-height: var(--u-tapmin); padding: 10px var(--u-s3);
  font: 400 var(--u-fs-body)/1.4 var(--u-font); color: var(--u-label);
  background: var(--u-fill); border: 0; border-radius: var(--u-r); outline: none;
  transition: box-shadow var(--u-t-fast);
}
.u-input:focus, .u-textarea:focus, .u-select:focus { box-shadow: 0 0 0 2px var(--u-tint); }
.u-input::placeholder, .u-textarea::placeholder { color: var(--u-label3); }

/* 分段控件(iOS Segmented) */
.u-seg { display: inline-flex; padding: 2px; gap: 0; background: var(--u-fill); border-radius: 9px; }
.u-seg__opt {
  min-height: 30px; padding: 0 var(--u-s4); border: 0; border-radius: 7px;
  background: transparent; font: 500 var(--u-fs-foot)/1 var(--u-font); color: var(--u-label);
  cursor: pointer; transition: background var(--u-t-fast);
}
.u-seg__opt.is-active { background: var(--u-seg-act); box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 600; }

/* 开关(iOS Switch) */
.u-switch { position: relative; width: 51px; height: 31px; appearance: none; -webkit-appearance: none;
  background: var(--u-fill); border-radius: var(--u-r-full); cursor: pointer; transition: background var(--u-t-mid); border: 0; }
.u-switch:checked { background: var(--u-green); }
.u-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15); transition: transform var(--u-t-mid) var(--u-ease); }
.u-switch:checked::after { transform: translateX(20px); }

/* 徽标/日历圆点(iOS 日历语言: 圆点即事件) */
.u-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: var(--u-r-full); font: 600 var(--u-fs-cap)/1.4 var(--u-font);
  background: var(--u-tint-soft); color: var(--u-tint); }
.u-chip--ok { background: rgba(52,199,89,.15); color: #248A3D; }
.u-chip--warn { background: rgba(255,149,0,.15); color: #C93400; }
.u-chip--danger { background: rgba(255,59,48,.12); color: var(--u-red); }
.u-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--u-tint); }

/* 聊天气泡(iMessage 语言) */
.u-bubble { max-width: 78%; padding: 8px 14px; border-radius: 18px; font-size: var(--u-fs-body); line-height: 1.4; }
.u-bubble--me { margin-left: auto; background: var(--u-tint); color: #fff; border-bottom-right-radius: 5px; }
.u-bubble--ai { margin-right: auto; background: var(--u-bubble-ai); border-bottom-left-radius: 5px; }

/* 确认卡(写操作闸; iOS 风 = 白卡 + 语义排版, 无花哨) */
.u-confirm { margin: 0 var(--u-inset); background: var(--u-surface); border-radius: var(--u-r); padding: var(--u-s4); }
.u-confirm__title { font: 600 var(--u-fs-body)/1.35 var(--u-font); margin-bottom: var(--u-s1); }
.u-confirm__actions { display: flex; gap: var(--u-s2); margin-top: var(--u-s3); }
.u-confirm__actions .u-btn { flex: 1; min-height: 44px; }

/* 四态 */
.u-empty { text-align: center; padding: var(--u-s7) var(--u-s5); color: var(--u-label2); }
.u-empty__ic { font-size: 48px; display: block; margin-bottom: var(--u-s3); opacity: .8; }
.u-empty__hint { font-size: var(--u-fs-foot); color: var(--u-label3); margin-top: var(--u-s1); }
.u-skeleton { border-radius: 6px; background: linear-gradient(90deg, var(--u-fill) 25%, rgba(118,118,128,.06) 50%, var(--u-fill) 75%);
  background-size: 200% 100%; animation: u-shimmer 1.1s infinite; color: transparent !important; }
@keyframes u-shimmer { to { background-position: -200% 0; } }
.u-note { margin: 0 var(--u-inset); padding: 10px var(--u-s3); border-radius: var(--u-r); font-size: var(--u-fs-sub); background: var(--u-surface); }
.u-note--ok { color: #248A3D; } .u-note--warn { color: #C93400; } .u-note--danger { color: var(--u-red); }

/* 底部标签栏(iOS TabBar: 49pt + 毛玻璃 + 发丝) */
.u-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; height: calc(var(--u-nav-h) + var(--u-safe-b)); padding-bottom: var(--u-safe-b);
  background: color-mix(in srgb, var(--u-bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-top: .5px solid var(--u-sep); }
.u-tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; background: transparent; cursor: pointer;
  font: 500 10px/1.2 var(--u-font); color: var(--u-label2); }
.u-tabbar__item.is-active { color: var(--u-tint); }
.u-tabbar__ic { font-size: 22px; line-height: 1; }

/* 顶栏(iOS NavBar: 毛玻璃 + 居中标题 或 Large Title 滚动态) */
.u-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; height: 48px;
  background: color-mix(in srgb, var(--u-bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: .5px solid transparent;                 /* 滚动后 JS 加 .is-scrolled 显示发丝 */
  font: 600 var(--u-fs-body)/1 var(--u-font); }
.u-topbar.is-scrolled { border-bottom-color: var(--u-sep); }
.u-content { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* 防滚动链传给 body 触发 iOS 橡皮筋卡死 */
  padding: 56px 0 calc(var(--u-nav-h) + var(--u-safe-b) + var(--u-s4)); }
.u-content > .u-largetitle { padding: var(--u-s2) var(--u-inset) var(--u-s2); }

/* 工具 */
.u-stack > * + * { margin-top: var(--u-s3); }
.u-hstack { display: flex; align-items: center; gap: var(--u-s2); }
.u-spacer { flex: 1; }
.u-inset-x { padding-left: var(--u-inset); padding-right: var(--u-inset); }