/* ios.css — 全站共用的 iOS 风格设计令牌与组件
 *
 * 取值对齐 Apple HIG 的系统色 / 字号阶梯 / 圆角与间距:
 *   · 颜色: systemBlue/Red/Green… + label/separator/fill 的浅深两套
 *   · 字号: Large Title 34 / Title 22 / Headline 17 semibold / Body 17 /
 *           Subhead 15 / Footnote 13 / Caption 12·11,配 iOS 的负字距
 *   · 材质: 导航栏与 tab bar 用 backdrop-filter 做半透明模糊(iOS 的 material)
 *   · 列表: Settings 那种 inset grouped —— 圆角分组、分隔线从内容左边起、右侧 chevron
 *
 * ⚠ 涨跌色沿用 A 股习惯: --up 红(涨) / --down 绿(跌),只是把色值换成 iOS
 *   systemRed / systemGreen 的观感,语义千万别对调。
 *
 * 旧变量名(--bg/--card/--text/--sub/--line/--accent/--up/--down/--warn)全部保留
 * 并指向新色值,所以各页原有 CSS 不用重写也能立刻变成 iOS 观感。
 */

:root {
  /* ---- iOS 系统色(浅色) ---- */
  --ios-blue:#007AFF;  --ios-green:#34C759; --ios-red:#FF3B30;
  --ios-orange:#FF9500; --ios-purple:#AF52DE; --ios-indigo:#5856D6;
  --ios-teal:#30B0C7;  --ios-yellow:#FFCC00; --ios-pink:#FF2D55;
  --ios-brown:#A2845E;

  /* ---- 背景层级 ---- */
  --bg:#F2F2F7;                    /* systemGroupedBackground */
  --card:#FFFFFF;                  /* secondarySystemGroupedBackground */
  --card-2:#F2F2F7;                /* 卡内嵌区块 */
  --fill:rgba(120,120,128,.12);    /* 输入框/次级填充 */
  --fill-2:rgba(120,120,128,.08);
  --material:rgba(249,249,249,.82);/* 导航栏/tab bar 材质 */
  --sheet:#F2F2F7;                 /* 底部弹层(浅色下与页面同层即可) */

  /* ---- 文字 ---- */
  --text:#000000;
  --sub:rgba(60,60,67,.6);         /* secondaryLabel */
  --sub-2:rgba(60,60,67,.3);       /* tertiaryLabel */
  --line:rgba(60,60,67,.18);       /* separator */
  --line-solid:#C6C6C8;            /* opaqueSeparator */

  /* ---- 语义色 ---- */
  --accent:var(--ios-blue);
  --up:#FF3B30;                    /* 涨(A股红) */
  --down:#34C759;                  /* 跌(A股绿) */
  --warn:var(--ios-orange);
  --gold:#B25000;
  --purple:var(--ios-purple);

  /* ---- 圆角 ---- */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:980px;

  /* ---- 阴影 ---- */
  --shadow-card:0 1px 2px rgba(0,0,0,.04);
  --shadow-sheet:0 -2px 24px rgba(0,0,0,.18);
  --shadow-pop:0 8px 30px rgba(0,0,0,.12);

  /* ---- 尺寸 ---- */
  --tabh:50px;                     /* tab bar 内容高(不含安全区) */
  --row-h:44px;                    /* iOS 最小可点高度 */
  --gutter:16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ios-blue:#0A84FF; --ios-green:#30D158; --ios-red:#FF453A;
    --ios-orange:#FF9F0A; --ios-purple:#BF5AF2; --ios-indigo:#5E5CE6;
    --ios-teal:#40C8E0; --ios-yellow:#FFD60A; --ios-pink:#FF375F;
    --ios-brown:#AC8E68;

    --bg:#000000;
    --card:#1C1C1E;
    --card-2:#2C2C2E;
    --fill:rgba(120,120,128,.24);
    --fill-2:rgba(120,120,128,.16);
    --material:rgba(30,30,32,.8);
    --sheet:#1C1C1E;               /* 深色下弹层要比纯黑页面高一层,否则糊在一起 */

    --text:#FFFFFF;
    --sub:rgba(235,235,245,.6);
    --sub-2:rgba(235,235,245,.3);
    --line:rgba(84,84,88,.6);
    --line-solid:#38383A;

    --up:#FF453A;
    --down:#30D158;
    --gold:#FF9F0A;

    --shadow-card:none;
    --shadow-sheet:0 -2px 24px rgba(0,0,0,.5);
    --shadow-pop:0 8px 30px rgba(0,0,0,.5);
  }
}

/* ============================================================
   基础
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  background:var(--bg);
  color:var(--text);
  font:17px/1.294 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",
       "Helvetica Neue",Helvetica,sans-serif;
  letter-spacing:-.022em;                 /* iOS Body 的字距 */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important; }
button, input, select, textarea { font-family:inherit; letter-spacing:inherit; }
button { cursor:pointer; }
a { color:var(--accent); }

/* 字号阶梯(需要时直接用) */
.ios-large-title { font-size:34px; line-height:1.206; font-weight:700; letter-spacing:-.026em; }
.ios-title2 { font-size:22px; line-height:1.273; font-weight:700; letter-spacing:-.026em; }
.ios-title3 { font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-.024em; }
.ios-headline { font-size:17px; line-height:1.294; font-weight:600; letter-spacing:-.022em; }
.ios-subhead { font-size:15px; line-height:1.333; letter-spacing:-.016em; }
.ios-footnote { font-size:13px; line-height:1.385; letter-spacing:-.006em; }
.ios-caption { font-size:12px; line-height:1.333; }
.ios-caption2 { font-size:11px; line-height:1.182; letter-spacing:.006em; }

/* ============================================================
   导航栏(sticky + 材质模糊)
   ============================================================ */
.nav {
  position:sticky; top:0; z-index:20;
  background:var(--material);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid transparent;
  transition:border-color .2s;
  padding:calc(env(safe-area-inset-top) + 8px) var(--gutter) 8px;
}
.nav-bar { display:flex; align-items:center; gap:8px; min-height:36px; }
.nav-title { font-size:17px; font-weight:600; letter-spacing:-.022em; }
/* iOS 的大标题折叠: 内容里的 Large Title 滚出视野后,导航栏标题才淡入,
   同时才出现那条 hairline。JS 用 IntersectionObserver 切 .scrolled。 */
.nav.collapsing .nav-title { opacity:0; transition:opacity .2s; }
.nav.collapsing.scrolled .nav-title { opacity:1; }
.nav.scrolled { border-bottom-color:var(--line); }
/* 大标题(内容顶部,iOS 的 Large Title 布局) */
.nav-large { font-size:34px; font-weight:700; letter-spacing:-.026em; line-height:1.2; }
.nav-sub { font-size:13px; color:var(--sub); letter-spacing:-.006em; }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:14px; }

/* 返回按钮: iOS 的「‹ 文字」纯文字样式 */
.nav-back {
  display:inline-flex; align-items:center; gap:1px;
  color:var(--accent); text-decoration:none; font-size:17px; letter-spacing:-.022em;
  background:none; border:none; padding:0; margin-right:2px; flex:none;
}
.nav-back::before { content:"‹"; font-size:26px; line-height:1; font-weight:400; margin-top:-2px; }

/* 导航栏里的文字按钮(iOS 不用描边按钮) */
.nav-btn {
  background:none; border:none; color:var(--accent);
  font-size:17px; letter-spacing:-.022em; padding:0; flex:none;
}
.nav-btn.sm { font-size:15px; }
.nav-btn:disabled { color:var(--sub-2); }

/* ============================================================
   分组列表(Settings 风格)
   ============================================================ */
.list {
  background:var(--card);
  border-radius:var(--r-lg);
  margin:0 0 22px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.list-title {
  font-size:13px; color:var(--sub); letter-spacing:-.006em;
  padding:0 var(--gutter) 7px; margin-top:2px;
}
.list-note { font-size:13px; color:var(--sub); padding:0 var(--gutter); margin:-14px 0 22px; line-height:1.45; }

.row {
  display:flex; align-items:center; gap:12px;
  min-height:var(--row-h); padding:11px var(--gutter) 11px 0;
  margin-left:var(--gutter);                 /* 分隔线从内容左边起 —— iOS 的关键细节 */
  border-bottom:.5px solid var(--line);
  color:inherit; text-decoration:none; width:calc(100% - var(--gutter));
  background:none; border-left:none; border-right:none; border-top:none;
  text-align:left; font-size:17px; letter-spacing:-.022em;
}
.row:last-child { border-bottom:none; }
.row:active { background:var(--fill-2); }
.row-tx { flex:1; min-width:0; }
.row-t { display:block; font-size:17px; letter-spacing:-.022em; }
.row-d { display:block; font-size:13px; color:var(--sub); margin-top:2px; letter-spacing:-.006em; }
.row-v { color:var(--sub); font-size:17px; flex:none; }        /* 右侧值 */
.row.danger .row-t, .row.destructive { color:var(--up); }
.row.center { justify-content:center; }
.row.center .row-t { color:var(--accent); }

/* 右侧 chevron(iOS 是细的小尖角,别做粗) */
.chev { flex:none; width:7px; height:12px; color:var(--sub-2); }
.chev::after {
  content:""; display:block; width:6px; height:6px; margin-top:3px;
  border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor;
  transform:rotate(-45deg);
}

/* Settings 那种圆角方形图标砖 */
.icon-tile {
  flex:none; width:29px; height:29px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:#fff; background:var(--ios-blue);
}
.icon-tile.blue{background:var(--ios-blue)} .icon-tile.green{background:var(--ios-green)}
.icon-tile.red{background:var(--ios-red)} .icon-tile.orange{background:var(--ios-orange)}
.icon-tile.purple{background:var(--ios-purple)} .icon-tile.indigo{background:var(--ios-indigo)}
.icon-tile.teal{background:var(--ios-teal)} .icon-tile.gray{background:#8E8E93}
.icon-tile.brown{background:var(--ios-brown)} .icon-tile.pink{background:var(--ios-pink)}

/* ============================================================
   卡片(非列表内容)
   ============================================================ */
.card {
  background:var(--card); border-radius:var(--r-lg);
  padding:14px var(--gutter); margin-bottom:10px; box-shadow:var(--shadow-card);
}
.card-inset { background:var(--card-2); border-radius:var(--r-md); padding:10px 12px; }

/* ============================================================
   分段控件(Segmented Control)
   ============================================================ */
.seg {
  display:flex; background:var(--fill); border-radius:9px; padding:2px; gap:2px;
}
.seg button {
  flex:1; border:none; background:none; color:var(--text);
  font-size:13px; font-weight:600; letter-spacing:-.006em;
  padding:6px 10px; border-radius:7px; white-space:nowrap;
  transition:background .18s, box-shadow .18s;
}
.seg button.on {
  background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  .seg button.on { background:#636366; box-shadow:none; }
}

/* ============================================================
   按钮
   ============================================================ */
.btn {                                   /* 主按钮: 实心大圆角 */
  display:block; width:100%; border:none; border-radius:var(--r-lg);
  background:var(--accent); color:#fff;
  font-size:17px; font-weight:600; letter-spacing:-.022em; padding:15px;
  transition:opacity .15s;
}
.btn:active { opacity:.82; }
.btn:disabled { opacity:.45; }
.btn.tinted { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.btn.destructive { background:var(--up); }

.btn-sm {                                /* 小胶囊按钮(工具条用) */
  border:none; border-radius:var(--r-pill); background:var(--fill);
  color:var(--accent); font-size:15px; font-weight:500; letter-spacing:-.016em;
  padding:7px 14px; transition:opacity .15s;
}
.btn-sm:active { opacity:.7; }
.btn-sm.filled { background:var(--accent); color:#fff; font-weight:600; }
.btn-sm.gray { color:var(--text); }
.btn-sm:disabled { opacity:.45; }

/* ============================================================
   表单(分组列表里的输入行)
   ============================================================ */
.field { display:flex; align-items:center; gap:10px; min-height:var(--row-h);
  padding:8px var(--gutter) 8px 0; margin-left:var(--gutter);
  border-bottom:.5px solid var(--line); width:calc(100% - var(--gutter)); }
.field:last-child { border-bottom:none; }
.field-label { flex:0 0 92px; font-size:17px; letter-spacing:-.022em; }
.field input, .field select {
  flex:1; min-width:0; border:none; background:none; color:var(--text);
  font-size:17px; letter-spacing:-.022em; padding:6px 0; outline:none; width:100%;
}
.field input::placeholder { color:var(--sub-2); }
.field select { -webkit-appearance:none; appearance:none; color:var(--sub); text-align:right;
  padding-right:16px; background:none; }

/* 独立输入框(登录页那种) */
.input-group { background:var(--card); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.input-row { display:flex; align-items:center; min-height:48px; padding:0 var(--gutter);
  border-bottom:.5px solid var(--line); }
.input-row:last-child { border-bottom:none; }
.input-row input { flex:1; border:none; background:none; color:var(--text);
  font-size:17px; letter-spacing:-.022em; padding:14px 0; outline:none; }
.input-row input::placeholder { color:var(--sub-2); }

/* iOS 开关 */
.switch { position:relative; display:inline-block; width:51px; height:31px; flex:none; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; z-index:1; }
.switch i { position:absolute; inset:0; background:var(--fill); border-radius:var(--r-pill);
  transition:background .25s; display:block; }
.switch i::after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px;
  background:#fff; border-radius:50%; box-shadow:0 3px 8px rgba(0,0,0,.15); transition:transform .25s; }
.switch input:checked + i { background:var(--ios-green); }
.switch input:checked + i::after { transform:translateX(20px); }

/* iOS 滑杆 */
input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:28px; background:none;
}
input[type=range]::-webkit-slider-runnable-track {
  height:4px; border-radius:2px; background:var(--fill);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.04); margin-top:-11px;
}
input[type=range]::-moz-range-track { height:4px; border-radius:2px; background:var(--fill); }
input[type=range]::-moz-range-thumb { width:26px; height:26px; border:none; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.22); }

/* ============================================================
   Tab bar(底部,材质模糊)
   ============================================================ */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:var(--material);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar .t {
  flex:1; border:none; background:none; color:var(--sub);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 0 4px; font-size:10px; letter-spacing:.01em; font-weight:500;
}
.tabbar .t svg { width:26px; height:26px; display:block; }
.tabbar .t.on { color:var(--accent); }

/* ============================================================
   Sheet(底部弹层,带 grabber)
   ============================================================ */
.mask { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; opacity:0;
  transition:opacity .3s; pointer-events:none; }
.mask.on { opacity:1; pointer-events:auto; }
.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  background:var(--sheet); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-sheet);
  padding:0 var(--gutter) calc(env(safe-area-inset-bottom) + 20px);
  transform:translateY(101%); transition:transform .34s cubic-bezier(.32,.72,0,1);
  max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.sheet.open { transform:translateY(0); }
.sheet::before {                          /* grabber */
  content:""; display:block; width:36px; height:5px; border-radius:3px;
  background:var(--sub-2); margin:8px auto 6px;
}
.sheet h3 { font-size:20px; font-weight:600; letter-spacing:-.024em; text-align:center; margin:2px 0 16px; }
/* 弹层里的分组要比弹层底色再高一层 */
@media (prefers-color-scheme: dark) { .sheet .list { background:var(--card-2); } }

/* ============================================================
   其它
   ============================================================ */
.hint { font-size:13px; color:var(--sub); line-height:1.5; letter-spacing:-.006em; }
.empty { text-align:center; color:var(--sub); padding:44px var(--gutter) 30px; font-size:15px; letter-spacing:-.016em; }
.empty.tight { padding:22px var(--gutter); font-size:13px; }

/* 状态条(iOS 用浅底 + 同色文字,不描边) */
.banner { border-radius:var(--r-md); padding:10px 12px; font-size:13px; line-height:1.45;
  letter-spacing:-.006em; margin-top:8px; }
.banner.red { background:color-mix(in srgb, var(--up) 12%, transparent); color:var(--up); }
.banner.green { background:color-mix(in srgb, var(--down) 14%, transparent); color:var(--down); }
.banner.orange { background:color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn); }
.banner.blue { background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); }

/* 药丸标签 */
.pill { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px;
  border-radius:var(--r-pill); letter-spacing:0; vertical-align:1px; }
.pill.blue { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.pill.red { background:color-mix(in srgb, var(--up) 14%, transparent); color:var(--up); }
.pill.green { background:color-mix(in srgb, var(--down) 16%, transparent); color:var(--down); }
.pill.orange { background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.pill.gray { background:var(--fill); color:var(--sub); }

/* 数字统一等宽,表格不跳动 */
.tnum { font-variant-numeric:tabular-nums; }

/* 加载态 */
.loading { text-align:center; color:var(--sub); padding:40px 0; font-size:15px; }
.spin { display:inline-block; width:18px; height:18px; border:2px solid var(--fill);
  border-top-color:var(--accent); border-radius:50%; animation:iosspin .8s linear infinite;
  vertical-align:-4px; margin-right:8px; }
@keyframes iosspin { to { transform:rotate(360deg); } }

/* Toast */
.toast { position:fixed; left:50%; transform:translateX(-50%) translateY(6px);
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 26px);
  background:rgba(0,0,0,.78); color:#fff; font-size:15px; letter-spacing:-.016em;
  padding:11px 18px; border-radius:var(--r-pill); z-index:60; opacity:0;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity .25s, transform .25s; pointer-events:none; max-width:76%; text-align:center; }
.toast.on { opacity:1; transform:translateX(-50%) translateY(0); }