/* ============================================================
   Yolai · 设计基座
   极简 / 大圆角 / 弥散阴影 / 单一强调色（莫兰迪蓝）
   ============================================================ */

/* ---------- 全站默认字体（网站字体.ttf → assets/font/yolai.ttf） ---------- */
@font-face {
  font-family: 'Yolai';
  src: url('../font/yolai.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, li, figure { margin: 0; }
ul { list-style: none; padding: 0; }
img { display: block; max-width: 100%; }

button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
input { font: inherit; color: inherit; border: 0; background: none; outline: 0; width: 100%; min-width: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

:root {
  /* 色彩：纯白底 + 炭黑灰阶 + 单一强调色 */
  --white: #FFFFFF;
  --page: #F5F6F8;
  --ink: #15171A;
  --ink-2: #5B6067;
  --ink-3: #9AA0A8;
  --ink-4: #C4C8CE;
  --gray-2: #8E8E93;        /* Apple 灰辅助文字 */
  --line: #ECEEF1;
  --fill: #F3F4F6;
  --fill-2: #EAEDF1;
  --accent: #3E63DD;
  --accent-ink: #2C4CBD;
  --accent-soft: #EDF1FD;
  --danger: #C8473F;

  /* 语义面 / 玻璃 / 强调色上的文字 —— 夜间主题只换这些变量，不动组件 */
  --surface-2: #F6F7F9;        /* 次级面：渐变起点、占位块 */
  --surface-3: #E9ECF1;        /* 次级面：渐变终点 */
  --rail: #F0F1F4;             /* 轨道 / 分隔条 */
  --glass: rgba(255, 255, 255, .88);     /* 底栏 */
  --glass-2: rgba(255, 255, 255, .78);   /* 顶栏 */
  --glass-3: rgba(255, 255, 255, .97);   /* 浮层 */
  --scrim: rgba(255, 255, 255, .74);     /* 切页加载层 */
  --on-accent: #FFFFFF;                  /* 强调色上的文字 */
  --accent-lock: #B4C3F0;                /* 强调色按钮的锁定态 */
  --shadow-accent: rgba(62, 99, 221, .9);

  /* 全站字体栈：默认系统字体，选「Yolai 字体」时由 settings.js 覆盖 */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  /* 圆角 */
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;

  /* 弥散微阴影，不用硬边框 */
  --sh-card: 0 1px 2px rgba(18, 22, 31, .04), 0 12px 28px -18px rgba(18, 22, 31, .18);
  --sh-pop: 0 2px 6px rgba(18, 22, 31, .06), 0 22px 48px -24px rgba(18, 22, 31, .30);
  --sh-float: 0 18px 44px -20px rgba(18, 22, 31, .28);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --app: 460px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   夜间主题：只覆盖变量
   底色偏黑灰、文字与强调色转黄，组件不用改一行
   ============================================================ */
html[data-theme="dark"] {
  --white: #171A20;            /* 卡片 / 页面面 */
  --page: #0D0F13;             /* 最外层 */
  --ink: #F3EDE0;              /* 主文字：暖米白 */
  --ink-2: #BBB4A6;
  --ink-3: #8B857A;
  --ink-4: #615C53;
  --gray-2: #9A9487;
  --line: #262A32;
  --fill: #1F232A;
  --fill-2: #292E37;
  --accent: #F0C24B;           /* 黄 */
  --accent-ink: #D8A936;
  --accent-soft: rgba(240, 194, 75, .15);
  --danger: #E07A72;

  --surface-2: #1E222A;
  --surface-3: #272C35;
  --rail: #2A2F38;
  --glass: rgba(20, 23, 29, .86);
  --glass-2: rgba(20, 23, 29, .8);
  --glass-3: rgba(24, 27, 34, .97);
  --scrim: rgba(13, 15, 19, .8);
  --on-accent: #1B1508;
  --accent-lock: rgba(240, 194, 75, .3);
  --shadow-accent: rgba(240, 194, 75, .38);

  --sh-card: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 30px -18px rgba(0, 0, 0, .72);
  --sh-pop: 0 2px 8px rgba(0, 0, 0, .55), 0 22px 48px -24px rgba(0, 0, 0, .85);
  --sh-float: 0 18px 44px -22px rgba(0, 0, 0, .85);

  color-scheme: dark;
}

html, body { height: 100%; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: calc(15px * var(--fs, 1));
  line-height: 1.5;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ---------- App 外壳：移动端满屏，桌面端居中为一列 ---------- */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--app);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--white);
}

@media (min-width: 481px) {
  .app { box-shadow: 0 0 0 1px rgba(18, 22, 31, .05), 0 30px 70px -40px rgba(18, 22, 31, .35); }
}

/* ---------- 线性图标：统一线宽 ---------- */
.i {
  width: 22px; height: 22px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 胶囊标签 ---------- */
.pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500; line-height: 1;
  padding: 5px 8px; border-radius: 999px;
  background: var(--fill); color: var(--ink-3);
  letter-spacing: 0;
}
.pill--accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 18px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .18s var(--ease), background-color .18s var(--ease), opacity .18s;
}
.btn .i { width: 18px; height: 18px; }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -14px var(--shadow-accent); }
.btn--primary:active { background: var(--accent-ink); transform: scale(.99); }
.btn--ghost { background: var(--fill); color: var(--ink); }
.btn--ghost:active { background: var(--fill-2); transform: scale(.99); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.spinner {
  width: 17px; height: 17px; border-radius: 999px;
  border: 1.8px solid currentColor;
  border-top-color: transparent;
  opacity: .85;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 遮罩 ---------- */
.mask {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(17, 20, 28, .34);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.mask.is-on { opacity: 1; pointer-events: auto; }

/* ---------- 轻提示：角色提示气泡（白天 / 夜间两套图）----------
   原生页直接给 .toast 用；Tailwind 页给文字 span 套 .toast-chip，
   两者的气泡外观完全一致，白天浅色图 / 夜间深色图自动切换。
   文字槽的百分比是按内框量的：白天内框偏左下、夜间内框偏右。 */
.toast, .toast-chip {
  --w: min(160px, 41vw);
  width: var(--w);
  aspect-ratio: 1000 / 470;
  box-sizing: border-box;
  padding: calc(var(--w) * .2139) calc(var(--w) * .08) calc(var(--w) * .0494) calc(var(--w) * .055);
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  background: url('../img/hint-day.png') center / 100% 100% no-repeat;
  font-size: calc(var(--w) * .042);
  font-weight: 600; line-height: 1.45; letter-spacing: -.01em;
  color: #3A4060;
}
html[data-theme="dark"] .toast,
html[data-theme="dark"] .toast-chip {
  aspect-ratio: 1000 / 415;
  padding: calc(var(--w) * .1951) calc(var(--w) * .04) calc(var(--w) * .0498) calc(var(--w) * .17);
  background-image: url('../img/hint-night.png');
}

.toast {
  position: absolute; left: 50%; bottom: calc(92px + var(--safe-b)); z-index: 40;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 18px) scale(.82);
  transform-origin: 50% 100%;
  transition: opacity .2s ease, transform .2s cubic-bezier(.4, 0, .9, .6);
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition: opacity .16s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* Tailwind 页的 .toast-chip：由父级 #toast 的 is-on 触发弹性放大 */
.toast-chip {
  transform: translateY(14px) scale(.8);
  transform-origin: 50% 100%;
  transition: transform .22s cubic-bezier(.4, 0, .9, .6);
}
#toast.is-on .toast-chip {
  transform: none;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 页面切换过渡 ---------- */
html.is-entering .app { animation: appEnter .26s var(--ease) both; }
html.is-leaving .app {
  animation: appLeave .18s var(--ease) both;
  pointer-events: none;
}
@keyframes appEnter {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: none; }
}
@keyframes appLeave {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-6px) scale(.996); }
}

/* ---------- 页面切换的加载层 ----------
   每次切页 / 首次进入都会盖一层白雾 + 转圈，模拟一次接口往返。
   真正接后端时用 PageFX.ready() 结束它，见 pagefx.js 顶部说明 */
.pagefx-load {
  position: absolute; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
  opacity: 0;
  transition: opacity .26s var(--ease);
  pointer-events: none;
}
.pagefx-load.is-on { opacity: 1; pointer-events: auto; }
.pagefx-load.is-instant { transition: none; }

.pagefx-load__ring {
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: pfxSpin .72s linear infinite;
}
@keyframes pfxSpin { to { transform: rotate(360deg); } }

/* ---------- 无障碍 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 用户偏好（settings.js）----------
   低性能模式：关掉动画 / 过渡，等价于系统「减弱动态效果」 */
html[data-lowperf="1"] *,
html[data-lowperf="1"] *::before,
html[data-lowperf="1"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* 对比度：只套 .app / main，不碰 fixed 顶栏（filter 会把 fixed 变成相对定位） */
html[data-contrast="1"] .app,
html[data-contrast="1"] main {
  filter: var(--ctr-filter, none);
}

/* 滚动惯性：开启后给滚动容器更强的系统惯性（-webkit 旧机型走这条） */
html[data-inertia="1"] .feed,
html[data-inertia="1"] .pf-body,
html[data-inertia="1"] main {
  -webkit-overflow-scrolling: touch;
}

/* ---------- 夜间微调 ---------- */
html[data-theme="dark"] .mask { background: rgba(4, 6, 10, .52); }
html[data-theme="dark"] .notice__mask { background: rgba(4, 6, 10, .52); }
html[data-theme="dark"] .cover::after,
html[data-theme="dark"] .sheet__cover::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }

/* ---------- 主题切换：从按钮位置圆形扩散 ----------
   View Transitions 默认会做一次交叉淡入淡出，这里关掉，
   改由 theme.js 给 ::view-transition-new(root) 播 clip-path 圆形展开 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}