/* ==========================================================================
   Liquid Glass · Components
   依赖：liquid-glass.tokens.css（必须先引入）
   规格来源：DESIGN-SPEC.md §6
   ========================================================================== */

/* --------------------------------------------------------------------------
   布局容器
   -------------------------------------------------------------------------- */
.app {
  position: relative;
  z-index: 1;
  max-width: 420px;          /* 手机视口宽度，方便预览 iOS 观感 */
  margin: 0 auto;
  padding: 0 var(--sp-4) 120px;
}

.section-title {
  margin: var(--sp-8) var(--sp-2) var(--sp-3);
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}

.large-title {
  margin: var(--sp-6) var(--sp-2) var(--sp-2);
  font-size: var(--fs-largeTitle);
  line-height: var(--lh-largeTitle);
  font-weight: var(--fw-largeTitle);
  letter-spacing: -.02em;
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   顶部导航栏（thin，仅底部两角圆角，吸顶）
   -------------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: 52px;
  padding: 0 var(--sp-4);
  margin: 0 calc(var(--sp-4) * -1);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.navbar__title {
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  font-weight: var(--fw-headline);
  color: var(--c-text);
}
.navbar__actions { display: flex; align-items: center; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 50px;
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-accent-text);
  background: var(--c-accent);
  box-shadow: 0 4px 14px rgba(10, 132, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: transform var(--dur-fast) ease-out, background var(--dur-normal) var(--ease-standard);
}
.btn:hover { background: var(--c-accent-hover); }
.btn:active { transform: scale(.97); }

/* 玻璃按钮（次要操作） */
.btn-glass {
  height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--glass-tint-thin);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 2px 8px var(--glass-shadow-1);
  color: var(--c-text);
  font-weight: 500;
  transition: transform var(--dur-fast) ease-out, background var(--dur-normal) var(--ease-standard);
}
.btn-glass:active { transform: scale(.97); background: var(--c-fill-primary); }

/* 圆形图标按钮 */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass-tint-thin);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 2px 8px var(--glass-shadow-1);
  color: var(--c-text);
  font-size: 16px;
  cursor: pointer;
  transition: transform var(--dur-fast) ease-out, background var(--dur-normal) var(--ease-standard);
}
.icon-btn:active { transform: scale(.94); }

/* --------------------------------------------------------------------------
   卡片
   -------------------------------------------------------------------------- */
.card {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.card__title {
  font-size: var(--fs-title3);
  line-height: var(--lh-title3);
  font-weight: var(--fw-title3);
  color: var(--c-text);
}
.card__sub {
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  color: var(--c-text-secondary);
}

/* 数据网格（统计卡） */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.stat { padding: var(--sp-4); border-radius: var(--r-md); }
.stat__value {
  font-size: var(--fs-title2);
  line-height: var(--lh-title2);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-text);
}
.stat__label {
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  color: var(--c-text-tertiary);
}
.stat__delta { font-size: var(--fs-caption); font-weight: 600; }

/* --------------------------------------------------------------------------
   分段控件 Segmented Control
   -------------------------------------------------------------------------- */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  height: 36px;
  padding: 2px;
  border-radius: var(--r-sm);
}
.segmented__item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-subhead);
  font-weight: 500;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: color var(--dur-normal) var(--ease-standard),
              background 260ms var(--ease-standard),
              box-shadow 260ms var(--ease-standard);
}
.segmented__item.is-active {
  background: rgba(255, 255, 255, .92);
  color: var(--c-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), inset 0 .5px 0 rgba(255, 255, 255, .9);
}
[data-theme="dark"] .segmented__item.is-active { background: rgba(255, 255, 255, .16); }

/* --------------------------------------------------------------------------
   列表行
   -------------------------------------------------------------------------- */
.list { border-radius: var(--r-lg); overflow: hidden; }
.list__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  position: relative;
}
.list__row + .list__row::before {
  content: "";
  position: absolute;
  top: 0; left: var(--sp-4); right: 0;
  height: .5px;
  background: var(--c-separator);
}
.list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  font-size: 15px;
  flex: none;
}
.list__text { flex: 1; min-width: 0; }
.list__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
}
.list__hint {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-tertiary);
}
.list__value { font-size: var(--fs-subhead); color: var(--c-text-tertiary); }
.chevron { color: var(--c-text-quaternary); font-size: 14px; }

/* --------------------------------------------------------------------------
   开关 Switch（31 × 51）
   -------------------------------------------------------------------------- */
.switch {
  position: relative;
  width: 51px;
  height: 31px;
  flex: none;
  border: 0;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--glass-tint-thin);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 .5px var(--c-separator), inset 0 1px 0 var(--glass-highlight);
  cursor: pointer;
  transition: background var(--dur-slow) var(--ease-standard);
}
.switch::after {                      /* 旋钮：纯白实色，不属于玻璃 */
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.switch.is-on { background: var(--c-green); }
.switch.is-on::after { transform: translateX(20px); }

/* --------------------------------------------------------------------------
   滑块 Slider（轨 4px，thumb 28px）
   -------------------------------------------------------------------------- */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-fill-primary);
  box-shadow: inset 0 0 0 .5px var(--c-separator);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  margin-top: -12px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .06);
  transition: transform var(--dur-fast) ease-out;
}
.slider::-webkit-slider-thumb:active { transform: scale(1.08); }
.slider::-moz-range-track {
  height: 4px; border-radius: var(--r-pill); background: var(--c-fill-primary);
}
.slider::-moz-range-thumb {
  width: 28px; height: 28px; border: 0; border-radius: var(--r-pill);
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------------
   输入框
   -------------------------------------------------------------------------- */
.input {
  width: 100%;
  height: 44px;
  padding: 0 var(--sp-4);
  border: 0;
  outline: none;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--c-text);
  background: var(--glass-tint-thin);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 .5px var(--c-separator), inset 0 1px 0 var(--glass-highlight);
  transition: box-shadow var(--dur-normal) var(--ease-standard);
}
.input::placeholder { color: var(--c-text-tertiary); }
.input:focus { box-shadow: inset 0 0 0 1.5px var(--c-accent), inset 0 1px 0 var(--glass-highlight); }

/* --------------------------------------------------------------------------
   徽章 / 标签
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  line-height: 1;
  font-weight: 600;
  color: #fff;
  background: var(--c-accent);
}
.badge--glass {
  height: 24px;
  color: var(--c-text-secondary);
  background: var(--glass-tint-thin);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 .5px var(--c-separator);
}

/* --------------------------------------------------------------------------
   底部浮动 TabBar（thin，64px 高）
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 64px;
  padding: 0 var(--sp-3);
  width: min(420px, calc(100vw - 32px));
  border-radius: var(--r-2xl);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  color: var(--c-text-tertiary);
  cursor: pointer;
  transition: color var(--dur-normal) var(--ease-standard), transform var(--dur-fast) ease-out;
}
.tabbar__item svg { width: 24px; height: 24px; }
.tabbar__item.is-active { color: var(--c-accent); }
.tabbar__item:active { transform: scale(.92); }

/* --------------------------------------------------------------------------
   Sheet 底部弹窗（thick）
   -------------------------------------------------------------------------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-sheet) var(--ease-standard);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  width: min(420px, 100%);
  padding: var(--sp-3) var(--sp-5) var(--sp-8);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease-standard);
}
.sheet-backdrop.is-open .sheet { transform: translateY(0); }
.sheet__grabber {
  width: 36px; height: 5px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-text-quaternary);
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 12px);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-footnote);
  font-weight: 500;
  color: var(--c-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   材料剖面示意（用于主题文档说明）
   -------------------------------------------------------------------------- */
.material-stack { display: grid; gap: var(--sp-2); }
.material-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--c-text-secondary);
}
.material-chip {
  width: 56px; height: 32px;
  border-radius: var(--r-xs);
  flex: none;
}