/* ============================================================
   无感计划 v2.0 — Style Sheet
   ============================================================ */

:root {
  --bg:      #171823;
  --bg2:     #202132;
  --bg3:     #2a2b3d;
  --bg4:     #36374c;
  --surface: #252638;

  --border:  rgba(255,255,255,0.11);   /* 稍微提亮，让分割线可见 */
  --border2: rgba(255,255,255,0.18);

  --text:    #f4f3fb;
  /* Wider ramp: secondary reads calmer on lists (Linear / rauno) */
  --text2:   #a4a6bf;
  --text3:   #65677e;

  --accent:       #6fb0e0;
  --accent-light: rgba(111,176,224,0.14);
  --accent-glow:  rgba(111,176,224,0.18);

  --danger:       #ef5350;
  --danger-light: rgba(239,83,80,0.12);

  --radius:    16px;
  --radius-lg: 22px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --nav-h:     54px;
  --header-h:  64px;
  --app-height: 100vh;
  --viewport-overscan-bottom: 0px;
  --viewport-offset-top: 0px;
  --keyboard-offset: 0px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --tr: 0.2s cubic-bezier(0.4,0,0.2,1);
  --tr-slow: 0.32s cubic-bezier(0.4,0,0.2,1);
  --tr-fast: 0.14s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-tab: 0.26s cubic-bezier(0.25, 0.82, 0.25, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-nav: cubic-bezier(0.22, 1, 0.36, 1);
  /* Sliding drawers / sheets: slightly slower settle than taps (Linear-smooth, not stiff) */
  --ease-slide: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-slide: 0.38s;
  --font-title: 17px;
  --font-body: 15px;
  --font-callout: 14px;
  --font-footnote: 13px;
  --font-caption: 12px;
  --font-caption-2: 11px;
  --weight-title: 700;
  --weight-body-strong: 600;
  --weight-caption: 560;
  --tracking-title: -.02em;
  /* Layout primitives (shadcn-style density) */
  --pad-page: 16px;
  --sheet-header-px: 18px;
  --sheet-header-py: 12px;
  --fab-icon: #111;  /* 夜间：黑色图标 */
  /* Apple-like material system: quiet depth, consistent surfaces. */
  --material-base: color-mix(in srgb, var(--bg2) 82%, rgba(255,255,255,0.06));
  --material-raised: color-mix(in srgb, var(--surface) 90%, rgba(255,255,255,0.08));
  --material-bar: rgba(32, 33, 50, 0.74);
  --material-field: color-mix(in srgb, var(--bg3) 78%, transparent);
  --separator: color-mix(in srgb, var(--border) 64%, transparent);
  --separator-soft: color-mix(in srgb, var(--border) 38%, transparent);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.035) inset, 0 8px 22px rgba(8, 9, 16, 0.12);
  --shadow-float: 0 16px 42px rgba(8, 9, 16, 0.18);
  --shadow-sheet-up: 0 -8px 34px rgba(8, 9, 16, 0.16);
  --shadow-drawer-side: -10px 0 34px rgba(8, 9, 16, 0.14);
  --shadow-overlay: 0 16px 42px rgba(0, 0, 0, 0.22);
  --overlay-scrim: rgba(8, 9, 18, 0.42);
  --focus-ring: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
}

body.light {
  --shadow-card: 0 1px 0 rgba(255,255,255,0.82) inset, 0 7px 18px rgba(22, 25, 45, 0.055);
  --shadow-float: 0 18px 46px rgba(22, 25, 45, 0.10);
  --shadow-sheet-up: 0 -10px 34px rgba(22, 25, 45, 0.075);
  --shadow-drawer-side: -10px 0 34px rgba(22, 25, 45, 0.07);
  --shadow-overlay: 0 16px 42px rgba(20, 25, 55, 0.10);
  --overlay-scrim: rgba(20, 22, 40, 0.28);
  --bg:      #f6f5fb;
  --bg2:     #efedf6;
  --bg3:     #e8e6f0;
  --bg4:     #dcdae7;
  --surface: #ffffff;
  --border:  rgba(75,78,120,0.105);
  --text:    #14142a;
  --text2:   #44486a;
  --text3:   #8e91ae;
  --danger:  #d63031;
  --danger-light: rgba(214,48,49,0.09);
  --fab-icon: #fff;  /* 日间：白色图标 */
  --material-base: rgba(255, 255, 255, 0.72);
  --material-raised: rgba(255, 255, 255, 0.92);
  --material-bar: rgba(255, 255, 255, 0.76);
  --material-field: rgba(255, 255, 255, 0.78);
  --separator: rgba(75,78,120,0.11);
  --separator-soft: rgba(75,78,120,0.065);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  height: 100%;
  min-height: 100%;
  width: 100%;
  background: #171823;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
html:has(body.light) {
  background: #f4f4f8;
}
/* WebView 阶段不再绘制第二张启动图；这些颜色只给历史 boot/snapshot
   状态兜底，正常启动只使用 iOS 的 apple-touch-startup-image。 */
html:has(body.boot-conceal),
html:has(body.snapshot-mask),
html:has(body.boot-revealing) {
  background-color: #f7f2eb !important;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, system-ui, sans-serif;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, var(--surface) 2%) 0%, var(--bg) min(22vh, 280px));
  color: var(--text);
  font-size: var(--font-body);
  line-height: 1.45;
  height: 100%;
  min-height: calc(var(--app-height) + var(--viewport-overscan-bottom));
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .3s, color .3s;
}

/* 历史 boot/snapshot 状态兜底；新版 HTML 不再带 boot-conceal。 */
body.boot-conceal,
body.snapshot-mask,
body.boot-revealing {
  background-color: transparent !important;
  background-image: none !important;
}
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; outline: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font: inherit; color: inherit; outline: none; background: var(--material-field); border: 1px solid var(--separator); border-radius: var(--radius-sm); }
input::placeholder, textarea::placeholder { color: var(--text3); }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* ── Launch Splash ──
   WebView 阶段不再绘制第二张启动图；启动画面只交给 iOS 的
   apple-touch-startup-image，Web 第一帧直接显示应用。 */
.app-splash {
  display: none !important;
}
body.snapshot-mask::before {
  content: "";
  position: fixed;
  inset: -2px 0 calc(-1 * (var(--viewport-overscan-bottom) + var(--nav-h) + var(--safe-bottom) + 96px)) 0;
  z-index: 2147483000;
  pointer-events: none;
  background: #f7f2eb;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
body.boot-conceal #app,
body.boot-conceal .auth-gate,
body.boot-conceal .modal-overlay,
body.boot-conceal .toast,
body.snapshot-mask #app,
body.snapshot-mask .auth-gate,
body.snapshot-mask .modal-overlay,
body.snapshot-mask .toast {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}
/* .bottom-nav 走 display:none 而不是 visibility:hidden —— visibility:hidden 下
   backdrop-filter 仍然参与合成，且高度仍然依赖 --safe-bottom / --vob 在启动
   早期跳变，可能从 splash 缝隙透到屏幕底部。display:none 直接踢出渲染树。 */
body.boot-conceal .bottom-nav,
body.snapshot-mask .bottom-nav {
  display: none !important;
}
body.boot-revealing #app,
body.boot-revealing .auth-gate,
body.boot-revealing .modal-overlay,
body.boot-revealing .toast {
  opacity: 0;
  transition: opacity .36s var(--ease-nav, cubic-bezier(0.22, 1, 0.36, 1)) !important;
}
body.boot-revealing.boot-revealed #app,
body.boot-revealing.boot-revealed .auth-gate.open,
body.boot-revealing.boot-revealed .modal-overlay.open,
body.boot-revealing.boot-revealed .toast.show {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tr: 0.05s;
    --tr-slow: 0.05s;
    --tr-fast: 0.05s;
    --tr-tab: 0.05s;
    --duration-slide: 0.06s;
  }
  .page {
    transform: none !important;
  }
  .app-splash {
    transition-duration: 0.08s;
  }
}