/* ==========================================================================
   base.css —— 设计令牌、重置、骨架布局、导航、动画基元
   浅色底 / 圆角卡片 / 柔和阴影 / 低饱和配色 / 单一主色 + 状态语义色
   ========================================================================== */

:root {
  /* 中性色（暖灰，全局统一，不混冷暖） */
  --bg: #f6f6f4;
  --bg-soft: #fbfbfa;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --surface-3: #ececeb;
  --line: #e6e5e1;
  --line-strong: #d8d7d2;
  --ink: #1b1b1a;
  --ink-2: #4a4a47;
  --ink-3: #78776f;
  --ink-4: #a3a29a;

  /* 主色（唯一强调色，低饱和靛青） */
  --accent: #3a63c8;
  --accent-ink: #2c4c9e;
  --accent-soft: #eaeffb;
  --accent-line: #c9d6f2;

  /* 状态 / 语义色 */
  --ok: #2f8f6a;
  --ok-soft: #e6f2ec;
  --warn: #c07a2c;
  --warn-soft: #f8eee0;
  --danger: #be4a44;
  --danger-soft: #f9e9e7;
  --info: #3a63c8;
  --info-soft: #eaeffb;

  /* 状态类型色（学习蓝 / 睡觉紫 / 游戏橙 / 空闲绿 / 自定义灰） */
  --t-study: #3a63c8;
  --t-study-soft: #eaeffb;
  --t-sleep: #7159b0;
  --t-sleep-soft: #eeebf8;
  --t-game: #c07a2c;
  --t-game-soft: #f8eee0;
  --t-free: #2f8f6a;
  --t-free-soft: #e6f2ec;
  --t-custom: #6c6b64;
  --t-custom-soft: #eeeeec;
  --t-default: #8b8a82;
  --t-default-soft: #f1f1ef;

  /* 圆角 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* 阴影：与背景同色系，宽而淡，不用发光 */
  --sh-1: 0 1px 2px rgba(27, 27, 26, .04), 0 1px 1px rgba(27, 27, 26, .03);
  --sh-2: 0 8px 24px -12px rgba(27, 27, 26, .12), 0 2px 6px -2px rgba(27, 27, 26, .05);
  --sh-3: 0 20px 44px -20px rgba(27, 27, 26, .18), 0 4px 12px -6px rgba(27, 27, 26, .07);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-7: 40px;
  --sp-8: 64px;

  /* 字号 */
  --fs-xs: 11.5px;
  --fs-sm: 13px;
  --fs-md: 14.5px;
  --fs-lg: 16.5px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;

  /* 动效 */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, .01, .2, 1);
  --dur-1: .16s;
  --dur-2: .28s;
  --dur-3: .5s;
  --dur-4: .8s;

  /* 层级 */
  --z-sticky: 30;
  --z-nav: 40;
  --z-fab: 45;
  --z-modal: 80;
  --z-toast: 100;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --container: 1400px;
}

/* 大屏（2K/超宽）放宽栅格，别把内容挤在中间留一大片空白 */
@media (min-width: 1700px) {
  :root { --container: 1620px; }
}
@media (min-width: 2200px) {
  :root { --container: 1840px; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 背景氛围：两团极淡的色晕，固定不动、不接收事件 */
body::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 70vh;
  background:
    radial-gradient(38% 55% at 18% 8%, rgba(58, 99, 200, .09), transparent 70%),
    radial-gradient(34% 48% at 82% 0%, rgba(47, 143, 106, .07), transparent 72%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 620; letter-spacing: -.02em; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* 图标默认尺寸：需要更大时用上下文规则覆盖（如 .empty__art .ic） */
.ic { width: 16px; height: 16px; flex-shrink: 0; }
/* hidden 属性必须能压过 .btn 等作者样式的 display */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

::selection { background: var(--accent-soft); }

/* 滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================ 布局骨架 ============================ */

.shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100dvh; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(246, 246, 244, .82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 64px;
}

.brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--ink) 0%, #3d3d3a 100%);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-2), var(--sh-inset);
}
.brand__mark svg { width: 18px; height: 18px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__title { font-size: var(--fs-md); font-weight: 640; letter-spacing: -.02em; }
.brand__sub { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 520;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.nav__link svg { width: 16px; height: 16px; opacity: .75; }
.nav__link:hover { color: var(--ink); background: rgba(27, 27, 26, .045); }
.nav__link:active { transform: scale(.97); }
.nav__link.is-active { color: var(--ink); background: var(--surface); box-shadow: var(--sh-1); }
.nav__link.is-active svg { opacity: 1; color: var(--accent); }

.topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-left: var(--sp-4);
  margin-left: var(--sp-2);
  border-left: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.clock { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-2); letter-spacing: -.02em; }

.main { flex: 1; padding: var(--sp-7) 0 var(--sp-8); }

/* 页面标题区 */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.page-head__title { font-size: var(--fs-2xl); font-weight: 640; letter-spacing: -.03em; }
.page-head__sub { margin-top: 6px; color: var(--ink-3); font-size: var(--fs-md); max-width: 62ch; }
.page-head__actions { display: flex; align-items: center; gap: var(--sp-2); }

.eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  font-weight: 600;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-7) 0 var(--sp-4);
}
.section-head__title { font-size: var(--fs-lg); font-weight: 620; letter-spacing: -.02em; }
.section-head__hint { font-size: var(--fs-sm); color: var(--ink-3); }

/* ============================ 通用工具 ============================ */

.grid { display: grid; gap: var(--sp-5); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hidden { display: none !important; }
.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;
}
.spacer { flex: 1; }

/* ============================ 动画基元 ============================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translate3d(28px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes slideInTop {
  from { opacity: 0; transform: translate3d(0, -18px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(.9); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes softPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.86); }
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58, 99, 200, .28); }
  70% { box-shadow: 0 0 0 10px rgba(58, 99, 200, 0); }
}
@keyframes tick {
  0% { transform: translateY(-6px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes drawCheck {
  from { stroke-dashoffset: 26; }
  to { stroke-dashoffset: 0; }
}
@keyframes strikeOut {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes barGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.anim-fade-up { animation: fadeUp var(--dur-3) var(--ease) both; }
.anim-fade-in { animation: fadeIn var(--dur-3) var(--ease) both; }
.anim-slide-right { animation: slideInRight var(--dur-3) var(--ease) both; }
.anim-slide-top { animation: slideInTop var(--dur-3) var(--ease) both; }
.anim-pop { animation: popIn var(--dur-3) var(--ease) both; }

/* 依次入场：父级加 .stagger，子级自动使用 --i 作为延迟 */
.stagger > * { animation: fadeUp var(--dur-3) var(--ease) both; animation-delay: calc(var(--i, 0) * 65ms); }
.stagger--fast > * { animation-delay: calc(var(--i, 0) * 38ms); }

/* 视图切换 */
.view { animation: fadeIn var(--dur-2) var(--ease) both; }
.view.is-leaving { animation: fadeIn var(--dur-1) var(--ease) reverse both; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================ 响应式 ============================ */

@media (max-width: 1080px) {
  .nav__link span { display: none; }
  .nav__link { padding: 9px; }
  .nav__link.is-active span { display: inline; }
}

@media (max-width: 860px) {
  .container { padding: 0 var(--sp-4); }
  /* 顶栏的 backdrop-filter 会让固定定位的底部导航以顶栏为参照，移动端改为不透明底色 */
  .topbar {
    background: #f7f7f5;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .topbar__inner { min-height: 58px; gap: var(--sp-3); }
  .brand__sub { display: none; }
  .main { padding: var(--sp-5) 0 var(--sp-7); }
  .page-head { margin-bottom: var(--sp-5); }
  .page-head__title { font-size: var(--fs-xl); }
  .topbar__meta { display: none; }

  /* 移动端：底部导航条 */
  .nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-nav);
    margin: 0;
    padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
    gap: 0;
    justify-content: space-between;
    background: rgba(251, 251, 250, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .nav__link {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px;
    font-size: var(--fs-xs);
    border-radius: var(--r-sm);
  }
  .nav__link span { display: inline; }
  .nav__link svg { width: 19px; height: 19px; }
  .nav__link.is-active { background: transparent; box-shadow: none; color: var(--accent-ink); }
  .shell { padding-bottom: 68px; }
}