/* ============================================================
   无感空间 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:       #7c6fe0;
  --accent-light: rgba(124,111,224,0.14);
  --accent-glow:  rgba(124,111,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:     70px;
  --header-h:  64px;
  --app-height: 100vh;
  --viewport-overscan-bottom: 0px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 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;
  /* 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(245, 244, 250, 0.82);
  --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;
}
body {
  font-family: -apple-system,'SF Pro Display','PingFang SC','Helvetica Neue',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);
  height: 100%;
  min-height: calc(var(--app-height) + var(--viewport-overscan-bottom));
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
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 ── */
.app-splash {
  position: fixed;
  inset: 0 0 calc(-1 * var(--viewport-overscan-bottom)) 0;
  height: calc(var(--app-height) + var(--viewport-overscan-bottom));
  z-index: 900;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #f7f2eb;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.38s var(--ease-nav, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0.38s var(--ease-nav, cubic-bezier(0.22, 1, 0.36, 1));
}
.app-splash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app-splash.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@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;
  }
}