/*
 * base.css — 泰坦云设计令牌与共享版式类（tt-*）。
 * 浅色 Claude Design System：页面底 #f5f5f3、侧栏 #f9f9f7、白卡片（1px 环 + 轻阴影）、单一陶土强调 #d97757。
 * 只有浅色主题。修饰符写成 `--`（.tt-card--hover），子元素写成 `-`（.tt-stat-value）。组件见 classic.css。
 * 令牌只在这里定义；其他样式表一律引用令牌（字号用 font: var(--t-*)，图标尺寸用 var(--icon-*)），由 test/typography.test.mjs 守卫。
 */

:root {
  color-scheme: light;

  /* 中性灰阶（尽量用下面的语义令牌） */
  --gray-50: #f6f6f4;
  --gray-100: #f3f3f0;
  --gray-200: #e6e5e0;
  --gray-300: #d1d1d6;
  --gray-400: #a1a1a6; /* 白底仅 2.6:1：只用于占位符、图标、分隔，文字用 --text-3 */
  --gray-500: #8e8e93;
  --gray-600: #636366;
  --gray-700: #3a3a3c;
  --gray-800: #2c2c2e;
  --gray-900: #151515;

  /* 主色：陶土。--primary 用于按钮底色、选中、进度、描边、图标；文字用 --primary-text（陶土本身在白底上不到 4.5:1） */
  --primary: #d97757;
  --primary-hover: #cd7350;
  --primary-active: #c96a48;
  --primary-soft: #fbf3ef;
  --primary-soft-hover: #f8e9e2;
  --primary-rgb: 217, 119, 87;
  --primary-text: #9a3412;
  --primary-text-hover: #7a341c;
  --on-primary: #ffffff; /* 危险色底上的白字；主按钮字用 --text-1，不用白字 */
  --focus-ring: 0 0 0 1.5px var(--primary);

  /* 陶土浅光：只做装饰（主视觉柔光），不做文字 */
  --sky: #e8b49a;
  --sky-rgb: 232, 180, 154;

  /* 琥珀：只给大奖 / 最高奖的图形强调（图标、角标底），不用于正文 */
  --accent: #ff9500;
  --accent-soft: #fff4e5;

  /* 状态：纯色用于圆点 / 图标 / 描边，*-text 用于文字，*-soft 用于浅底，*-rgb 只用于淡描边 */
  --success: #34c759;
  --success-text: #1c7733;
  --success-soft: #e9f8ee;
  --success-rgb: 52, 199, 89;
  --warning: #ff9500;
  --warning-text: #a84b00;
  --warning-soft: #fff4e5;
  --warning-rgb: 255, 149, 0;
  --danger: #d70015;
  --danger-text: #c9001a;
  --danger-soft: #ffedec;
  --danger-rgb: 215, 0, 21;

  /* 表面：页面底 #f5f5f3，侧栏 #f9f9f7，卡片 / 浮层白。#f9f9f7 不用作页面底 */
  --bg-page: #f5f5f3;
  --bg-card: #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #f3f3f0;
  --bg-chrome: #f9f9f7;
  --bg-frost: #f7f6f3;
  --control-fill: #f0efec;
  --control-fill-hover: #e7e6e1;
  --hover-overlay: rgba(0, 0, 0, 0.04);
  --press-overlay: rgba(0, 0, 0, 0.07);
  --nav-hover: rgba(0, 0, 0, 0.03);
  --nav-active: #f8e9e2;
  --selected-fill: #fbf3ef;
  --segment-track: rgba(0, 0, 0, 0.06);
  --row-hover: #f6f6f4;
  --table-head: #f3f3f0;
  --mask: rgba(0, 0, 0, 0.4);

  /* 文字三层 + 占位符（占位符不做文字）。文字令牌不用 #8a8a8a，也不用陶土 */
  --text-1: #151515;
  --text-2: #525252;
  --text-3: #68686d;
  --placeholder: #a1a1a6;

  /* 描边：发丝线 hsla 0.10 / 强 0.20。宽度见 --hairline（2x 为 0.5px，3x 为 1px/3） */
  --border: hsla(0, 0%, 8%, 0.10);
  --border-strong: hsla(0, 0%, 8%, 0.20);
  --border-subtle: hsla(0, 0%, 8%, 0.10);
  --hairline: 1px;

  /* 渐变：只给主视觉（tt-hero-card、认证页左栏）；禁止用于按钮和卡片 */
  --grad-hero: linear-gradient(135deg, #fbf3ef 0%, #f7f6f3 60%, #ffffff 100%);

  /* 圆角：控件 4 / 6 / 8，面板 10，卡片 12，弹窗 16；胶囊只给圆点、头像、徽标 */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-inner: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-hero: 16px;
  --radius-full: 9999px;

  /* 阴影：卡片是 1px 环加轻阴影；e4 是弹窗的 popover 双环投影 */
  --shadow-e1: 0 0 0 1px hsla(0, 0%, 8%, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --shadow-e2: 0 0 0 1px hsla(0, 0%, 8%, 0.10), 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-e3: 0 0 0 1px hsla(0, 0%, 8%, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.12);
  --shadow-e4: inset 0 0 0 0 transparent, 0 0 0 1px hsla(0, 0%, 8%, 0.10), 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-thumb: inset 0 0 0 0.5px hsla(0, 0%, 8%, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --ring-selected: 0 0 0 1.5px var(--primary);
  --ring-focus: inset 0 0 0 1.5px var(--primary);

  /* 布局与尺寸（4px 网格）。门户正文最大宽 1120；公共页容器 1200。按钮阶梯写在组件类上 */
  --container: 1320px;
  --container-md: 1040px;
  --container-narrow: 760px;
  --content-max: 1120px;
  --gutter: 16px;
  --header-h: 64px;
  --section-y: 56px;
  --section-y-lg: 72px;
  --grid-gap: 16px;
  --page-pad-x: 32px;
  --page-pad-top: 28px;
  --page-pad-bottom: 40px;
  --card-pad: 24px;
  --section-gap: 20px;
  --control-h-sm: 28px;
  --control-h-md: 32px;
  --control-h-lg: 40px;
  --input-h: 36px;
  --input-h-lg: 44px;
  --row-h: 48px;
  --row-h-dense: 40px;
  --sidebar-w: 232px;
  --sidebar-rail-w: 64px;
  --toolbar-h: 56px;
  --nav-item-h: 36px;

  /* 图标尺寸：tt-icon 是 1em SVG，靠父级 font-size 定尺寸。只给图标用，不能拿来定文字字号 */
  --icon-14: 14px;
  --icon-16: 16px;
  --icon-18: 18px;
  --icon-20: 20px;
  --icon-22: 22px;
  --icon-24: 24px;
  --icon-28: 28px;
  --icon-32: 32px;
  --icon-40: 40px;

  /* 字体：系统字体栈（macOS 西文 SF + 中文苹方；Windows 西文 Segoe UI + 中文微软雅黑）。
     不用 system-ui：Windows 上它随系统语言变化，同一页面的西文在不同机器上字体不同。
     等宽字体只给编码（订单号、邀请码、订阅链接） */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* 字阶（对齐 app AppTextStyles 桌面档）：档位 12 / 14 / 16 / 20 / 24 / 28，11 只给徽标数字；行高取偶数像素。
     字重只用 400 / 500 / 600，700 只在 display / hero-title / brand 令牌里（微软雅黑只有 400 / 700，550–900 会塌成 700）。
     用法：font: var(--t-title); 颜色另写；stat* / micro 后面加 font-variant-numeric: tabular-nums */
  --t-display: 700 48px/56px var(--font-sans); /* 只给公共页主视觉大标题 */
  --t-display-small: 700 36px/44px var(--font-sans); /* 公共页次级主视觉 */
  --t-page-title: 600 28px/36px var(--font-sans);
  --t-hero-title: 700 24px/32px var(--font-sans); /* 只给 tt-hero-card */
  --t-dialog-title: 600 20px/28px var(--font-sans);
  --t-nav-title: 600 20px/28px var(--font-sans);
  --t-headline: 600 20px/28px var(--font-sans); /* web 补充：卡内二级大标题、文章 h2 */
  --t-title: 600 16px/22px var(--font-sans);
  --t-lead: 400 16px/24px var(--font-sans);
  --t-prose: 400 16px/28px var(--font-sans); /* web 补充：长文正文 */
  --t-body: 400 14px/22px var(--font-sans);
  --t-body-secondary: 400 14px/22px var(--font-sans);
  --t-body-strong: 500 14px/22px var(--font-sans);
  --t-caption: 400 12px/18px var(--font-sans);
  --t-label: 600 12px/16px var(--font-sans);
  --t-eyebrow: 600 12px/16px var(--font-sans);
  --t-micro: 600 11px/14px var(--font-sans); /* 只给徽标数字和「大奖」角标 */
  --t-stat-large: 600 28px/36px var(--font-sans);
  --t-stat-large-unit: 500 16px/22px var(--font-sans);
  --t-stat: 600 20px/28px var(--font-sans);
  --t-stat-unit: 500 14px/20px var(--font-sans);
  --t-button: 600 14px/20px var(--font-sans);
  --t-button-large: 600 16px/22px var(--font-sans);
  --t-input: 400 14px/20px var(--font-sans);
  --t-input-large: 400 16px/22px var(--font-sans);
  --t-control: 500 14px/20px var(--font-sans);
  --t-tab-label: 500 12px/16px var(--font-sans);
  --t-brand-small: 700 16px/22px var(--font-sans);
  --t-brand-large: 700 28px/36px var(--font-sans);

  /* 动效：60ms 按压，120ms 几何，300ms 面板。不用 70ms */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: 60ms;
  --dur: 120ms;
  --dur-slow: 300ms;

  /* 移动端：安全区、App 外壳尺寸、视口高度（--vh 在支持时取 dvh；--vvh / --kb 由 lib/viewport.js 按可视视口写入） */
  --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);
  --appbar-h: 52px;
  --tabbar-h: 56px;
  --sheet-radius: var(--radius-xl);
  --vh: 100vh;
}
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-y: 80px;
    --section-y-lg: 112px;
    --grid-gap: 20px;
  }
}
@media (min-width: 1280px) {
  :root { --gutter: 32px; }
}
/* 手机：字阶与桌面同值（只缩小公共页 display 两档），控件保持原来的手机尺寸，不重排 */
@media (max-width: 768px) {
  :root {
    --card-pad: 20px;
    --section-gap: 16px;
    --control-h-sm: 32px;
    --control-h-md: 40px;
    --control-h-lg: 48px;
    --input-h: 44px;
    --input-h-lg: 48px;
    --t-display: 700 40px/48px var(--font-sans);
    --t-display-small: 700 28px/36px var(--font-sans);
  }
}

/* 发丝线：1px，2x 为 0.5px，3x 为 calc(1px / 3)。只用于单向分隔，卡片外环仍是 1px */
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  :root { --hairline: 0.5px; }
}
@media (min-resolution: 3dppx), (-webkit-min-device-pixel-ratio: 3) {
  :root { --hairline: calc(1px / 3); }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 仅供屏幕阅读器读取的视觉隐藏文本 */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text-1);
  background: var(--bg-page);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
/* 触控：去掉双击缩放等待，点击立即响应 */
a,
button,
input,
select,
textarea,
label,
summary,
[role='button'] { touch-action: manipulation; }
.modal,
.offcanvas-body { overscroll-behavior: contain; }

a {
  color: var(--primary-text);
  text-decoration: none;
}
a:hover { color: var(--primary-text-hover); }

::selection { background: rgba(var(--primary-rgb), 0.18); }

:focus-visible {
  outline: 1.5px solid var(--primary);
  outline-offset: 2px;
}

/* 细滚动条只给鼠标设备；触屏保持系统默认的浮动滚动条 */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* 横向滑动条：标签条、筛选条等。隐藏滚动条，末端渐隐提示可继续滑动（遮罩只取 alpha） */
.tt-scroll-x {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tt-scroll-x::-webkit-scrollbar { display: none; }
.tt-scroll-x > * { flex: none; scroll-snap-align: start; }

/* 减少动效：全站统一关闭过渡与动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 登录态入口：两种入口都预渲染，由 <html class="tt-logged-in">（首帧前脚本设置）决定显示哪个 */
.tt-logged-in .tt-guest-only,
html:not(.tt-logged-in) .tt-user-only { display: none !important; }

/* ---------- 字阶工具类：与 --t-* 一一对应，带上默认颜色；stat / micro 自带等宽数字 ---------- */
.tt-t-display { font: var(--t-display); color: var(--text-1); }
.tt-t-display-small { font: var(--t-display-small); color: var(--text-1); }
.tt-t-page-title { font: var(--t-page-title); color: var(--text-1); }
.tt-t-hero-title { font: var(--t-hero-title); color: var(--text-1); }
.tt-t-dialog-title { font: var(--t-dialog-title); color: var(--text-1); }
.tt-t-nav-title { font: var(--t-nav-title); color: var(--text-1); }
.tt-t-headline { font: var(--t-headline); color: var(--text-1); }
.tt-t-title { font: var(--t-title); color: var(--text-1); }
.tt-t-lead { font: var(--t-lead); color: var(--text-2); }
.tt-t-prose { font: var(--t-prose); color: var(--text-1); }
.tt-t-body { font: var(--t-body); color: var(--text-1); }
.tt-t-body-secondary { font: var(--t-body-secondary); color: var(--text-2); }
.tt-t-body-strong { font: var(--t-body-strong); color: var(--text-1); }
.tt-t-caption { font: var(--t-caption); color: var(--text-3); }
.tt-t-label { font: var(--t-label); color: var(--text-2); }
.tt-t-eyebrow { font: var(--t-eyebrow); color: var(--text-3); }
.tt-t-micro { font: var(--t-micro); font-variant-numeric: tabular-nums; }
.tt-t-stat-large { font: var(--t-stat-large); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text-1); }
.tt-t-stat-large-unit { font: var(--t-stat-large-unit); color: var(--text-2); }
.tt-t-stat { font: var(--t-stat); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text-1); }
.tt-t-stat-unit { font: var(--t-stat-unit); color: var(--text-2); }
.tt-t-button { font: var(--t-button); }
.tt-t-button-large { font: var(--t-button-large); }
.tt-t-input { font: var(--t-input); color: var(--text-1); }
.tt-t-input-large { font: var(--t-input-large); color: var(--text-1); }
.tt-t-control { font: var(--t-control); color: var(--text-1); }
.tt-t-tab-label { font: var(--t-tab-label); }
.tt-t-brand-small { font: var(--t-brand-small); letter-spacing: -0.01em; color: var(--text-1); }
.tt-t-brand-large { font: var(--t-brand-large); letter-spacing: -0.01em; color: var(--text-1); }

/* ---------- 容器与区块 ---------- */
.tt-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tt-container--md { max-width: calc(var(--container-md) + var(--gutter) * 2); }
.tt-container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.tt-section { padding-block: var(--section-y); }
.tt-section--lg { padding-block: var(--section-y-lg); }
.tt-section--tight { padding-block: calc(var(--section-y) / 2); }
.tt-section--frost { background: var(--bg-frost); }
.tt-section--line { border-top: 0; box-shadow: inset 0 var(--hairline) 0 var(--border); }

/* ---------- 网格：1 列 → 2 列（≥768）→ 6 列（≥1024，子项默认占 1/3） ---------- */
.tt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 768px) {
  .tt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-grid > .tt-span-4,
  .tt-grid > .tt-span-all { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .tt-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tt-grid > * { grid-column: span 2; }
  .tt-grid > .tt-span-3 { grid-column: span 3; }
  .tt-grid > .tt-span-4 { grid-column: span 4; }
  .tt-grid > .tt-span-all { grid-column: 1 / -1; }
  /* 等分变体：--2 两列、--4 四列 */
  .tt-grid--2 > * { grid-column: span 3; }
  .tt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tt-grid--4 > * { grid-column: span 1; }
}

/* 左右分栏：窄栏 + 宽栏（≥1024 时 5 : 7） */
.tt-split {
  display: grid;
  gap: calc(var(--grid-gap) * 2);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1024px) {
  .tt-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .tt-split--center { align-items: center; }
}

/* ---------- 标题与正文：层级靠字号和颜色，不靠加粗 ---------- */
.tt-display,
.tt-h1,
.tt-h2,
.tt-h3 {
  margin: 0;
  color: var(--text-1);
  text-wrap: balance;
}
.tt-display { font: var(--t-display); }
.tt-h1 { font: var(--t-display-small); }
.tt-h2 { font: var(--t-page-title); }
.tt-h3 { font: var(--t-title); }
.tt-lead {
  margin: 0;
  max-width: 60ch;
  color: var(--text-2);
  font: var(--t-lead);
}
.tt-small { font: var(--t-caption); color: var(--text-3); }
.tt-muted { color: var(--text-3); }

/* 眉题：12/600 三级色，中文不加字距、不大写 */
.tt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font: var(--t-eyebrow);
}

/* 标题强调词：陶土文字色 */
.tt-accent { color: var(--primary-text); }

/* 等宽数字 / 编码。!important：同一元素上页面规则的 font 简写会重置这两项 */
.tt-num { font-variant-numeric: tabular-nums !important; }
.tt-mono {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

.tt-link {
  color: var(--primary-text);
  text-decoration: none;
  text-underline-offset: 3px;
}
.tt-link:hover {
  color: var(--primary-text-hover);
  text-decoration: underline;
}
.tt-link--muted { color: var(--text-3); }
.tt-link--muted:hover { color: var(--text-1); text-decoration: none; }

/* ---------- 页头区块：眉题 + 标题 + 导语 + 操作（公共页、门户页通用） ---------- */
.tt-page-head {
  display: grid;
  gap: 12px;
  padding-block: 40px 32px;
}
.tt-page-head > .tt-lead { margin-top: 4px; }
.tt-page-head-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.tt-page-head--center { justify-items: center; text-align: center; }
.tt-page-head--center > .tt-lead { margin-inline: auto; }
.tt-page-head--compact { padding-block: 0 24px; gap: 8px; }
@media (min-width: 768px) {
  .tt-page-head { padding-block: 72px 48px; }
  .tt-page-head--compact { padding-block: 0 28px; }
}

/* 区块标题：眉题 + 标题 + 说明，左对齐 */
.tt-section-head {
  display: grid;
  gap: 10px;
  max-width: 720px;
  margin-bottom: 32px;
}
.tt-section-head--center { margin-inline: auto; justify-items: center; text-align: center; }
@media (min-width: 768px) {
  .tt-section-head { margin-bottom: 48px; }
}

/* ---------- 卡片：白底、圆角 12、1px 环 + 轻阴影 e1；可点卡片悬停 e2，选中加 1.5px 陶土环 ---------- */
.tt-card {
  position: relative;
  background: var(--bg-card);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-e1);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tt-card--pad { padding: var(--card-pad); }
.tt-card--pad-lg { padding: 24px; }
@media (min-width: 768px) {
  .tt-card--pad-lg { padding: 32px; }
}
.tt-card--frost { background: var(--bg-frost); }
.tt-card.is-selected { box-shadow: var(--ring-selected), var(--shadow-e1); }
.tt-card--feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: var(--card-pad);
}
@media (hover: hover) {
  .tt-card--hover:hover { box-shadow: var(--shadow-e2); }
  .tt-card--hover.is-selected:hover { box-shadow: var(--ring-selected), var(--shadow-e2); }
}
@media (hover: none) {
  .tt-card--hover:active { background-color: var(--gray-50); }
}
a.tt-card { display: block; color: inherit; }
a.tt-card:hover { color: inherit; }
.tt-card-title { margin: 0 0 6px; color: var(--text-1); font: var(--t-title); }
.tt-card-text { margin: 0; color: var(--text-2); font: var(--t-body-secondary); }

/* 卡片头：可选 40 插图 + 标题 + 右侧操作；头部下面不加分隔线，靠间距区分 */
.tt-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-bottom: 16px;
}
.tt-card-head > .tt-card-title { margin: 0; min-width: 0; }
.tt-card-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
}

/* 卡内浅底容器 */
.tt-sunken {
  padding: 16px;
  border-radius: var(--radius-inner);
  background: var(--bg-sunken);
}

/* ---------- 数据块：大号等宽数字 + 说明 ---------- */
.tt-stat { display: grid; gap: 4px; }
.tt-stat-value {
  color: var(--text-1);
  font: var(--t-stat-large);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tt-stat-value small { margin-left: 4px; color: var(--text-2); font: var(--t-stat-large-unit); }
.tt-stat-label { color: var(--text-3); font: var(--t-caption); }

/* ---------- 列表（inset grouped）：白卡、行高 ≥48，分隔线从文字起点缩进 ---------- */
.tt-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-e1);
}
.tt-list > li { position: relative; }
.tt-list > li + li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: var(--hairline);
  background: transparent;
  box-shadow: inset 0 var(--hairline) 0 var(--border);
  pointer-events: none;
}
/* 行首带 32 图标块（或 28 插图）的列表：分隔线让到文字起点 */
.tt-list--icons > li + li::before { left: 60px; }
.tt-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--row-h);
  padding: 12px 16px;
  color: var(--text-1);
  font: var(--t-body);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
a.tt-list-item:hover { background: var(--hover-overlay); color: var(--text-1); }
a.tt-list-item:active { background: var(--press-overlay); }
.tt-list-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--text-2);
  font-size: var(--icon-18);
}
.tt-list-item-main { flex: 1; min-width: 0; }
.tt-list-item-meta { color: var(--text-3); font: var(--t-caption); white-space: nowrap; }
.tt-list-item--link::after {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  margin: 0 2px 0 4px;
  border-top: 1.5px solid var(--gray-400);
  border-right: 1.5px solid var(--gray-400);
  transform: rotate(45deg);
}

/* ---------- 吸顶头部：内缩悬浮条（公共页）。门户 / 认证页可直接复用 ---------- */
.tt-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  width: 100%;
  padding: calc(10px + var(--safe-top)) calc(var(--gutter) + var(--safe-right)) 0 calc(var(--gutter) + var(--safe-left));
}
.tt-topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--container);
  min-height: 56px;
  margin-inline: auto;
  padding: 0 10px 0 16px;
  border: 0;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-e1);
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .tt-topbar-inner {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
  }
}
.tt-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font: var(--t-control);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tt-nav-link:hover { color: var(--text-1); background: var(--hover-overlay); }
.tt-nav-link.is-active,
.tt-nav-link[aria-current='page'] { color: var(--primary-text); font-weight: 600; }

/* 品牌：Logo + 字标 */
.tt-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--text-1);
  text-decoration: none;
  flex: none;
}
.tt-brand:hover { color: var(--text-1); }
.tt-brand-mark { display: block; width: 30px; height: 30px; flex: none; }
.tt-brand-name { font: var(--t-brand-small); letter-spacing: -0.01em; }

/* ---------- 图标块：浅陶土底 + 陶土图标 ---------- */
.tt-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--icon-20);
}
.tt-icon-tile--lg { width: 52px; height: 52px; border-radius: var(--radius-inner); font-size: var(--icon-24); }
.tt-icon-tile--round { border-radius: var(--radius-full); }

/* ---------- 文章正文 ---------- */
.tt-prose {
  color: var(--text-1);
  font: var(--t-prose);
}
.tt-prose > :first-child { margin-top: 0; }
.tt-prose h2 {
  margin: 40px 0 12px;
  color: var(--text-1);
  font: var(--t-headline);
}
.tt-prose h3 {
  margin: 28px 0 8px;
  color: var(--text-1);
  font: var(--t-title);
}
.tt-prose p,
.tt-prose ul,
.tt-prose ol,
.tt-prose blockquote,
.tt-prose table { margin: 0 0 16px; }
.tt-prose ul,
.tt-prose ol { padding-left: 1.25em; }
.tt-prose ul { list-style: disc; }
.tt-prose ol { list-style: decimal; }
.tt-prose li { margin-bottom: 6px; }
.tt-prose li::marker { color: var(--text-3); }
.tt-prose strong { color: var(--text-1); font-weight: 600; }
.tt-prose a { overflow-wrap: anywhere; color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--primary-rgb), 0.35); }
.tt-prose a:hover { text-decoration-color: currentColor; }
.tt-prose code {
  overflow-wrap: anywhere;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  color: var(--text-1);
  font: var(--t-body);
  font-family: var(--font-mono);
}
.tt-prose blockquote {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  color: var(--text-2);
}
.tt-prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--t-body);
}
.tt-prose th,
.tt-prose td {
  padding: 10px 12px;
  border-bottom: 0;
  box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--border);
  text-align: left;
}
.tt-prose th { color: var(--text-2); font: var(--t-label); background: var(--bg-sunken); border-bottom: 0; box-shadow: none; }
.tt-prose th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.tt-prose th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tt-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.tt-prose hr { margin: 32px 0; border: 0; height: var(--hairline); background: transparent; box-shadow: inset 0 var(--hairline) 0 var(--border); }