@charset "UTF-8";
/**
 * 英语兔 · demo.css — 示范站点的组件实现
 * 只消费 tokens.css / colors_and_type.css 里的变量与字阶，不引入任何新数值。
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/var(--yyt-type-body-02-line) var(--yyt-type-body-02-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: var(--yyt-container); margin: 0 auto; padding: 0 var(--yyt-space-6); }

/* ============ 导航 ============ */
.nav { border-bottom: 1px solid var(--border-1); background: var(--bg-1); }
.nav .container { display: flex; align-items: center; height: 64px; gap: var(--yyt-space-8); }
.nav .logo { display: flex; align-items: center; text-decoration: none; }
/* 32px = 与导航 CTA 按钮同高成组；64px 栏内上下各留 16px，4px 网格整倍数 */
.nav .logo img { height: 32px; width: auto; display: block; }
@media (max-width: 768px) { .nav .logo img { height: 24px; } }

/* ============ 品牌签名（D 版定稿 · 2026-07） ============ */
/* ① 页顶 4px 品牌绿线（报头传统） */
body::before { content: ""; display: block; height: 4px; background: var(--accent); }
/* ② Hero 主标题 display-04；③ 关键词品牌绿着色（每屏 ≤ 1 处，用 <em>） */
.hero h1 {
  font: var(--yyt-type-display-04-weight) var(--yyt-type-display-04-size)/var(--yyt-type-display-04-line) var(--yyt-type-display-04-font);
  letter-spacing: 0;
}
.hero h1 em { font-style: normal; color: var(--accent); }
/* ④ 区块标题一律衬线 display-01 */
.section > .container > h2 {
  font: var(--yyt-type-display-01-weight) var(--yyt-type-display-01-size)/var(--yyt-type-display-01-line) var(--yyt-type-display-01-font) !important;
  letter-spacing: 0 !important;
}
.nav .links { display: flex; gap: var(--yyt-space-6); margin-left: auto; }
.nav .links a {
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font);
  color: var(--fg-2); text-decoration: none; padding: var(--yyt-space-2) 0;
}
.nav .links a:hover { color: var(--fg-1); }
.nav .links a.active { color: var(--fg-1); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.nav a { white-space: nowrap; }
@media (max-width: 768px) {
  .nav .container { gap: var(--yyt-space-4); }
  .nav .links { gap: var(--yyt-space-4); }
  .nav .btn { display: none; }
}

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border: none; border-radius: var(--yyt-radius-md);
  font: 500 var(--yyt-type-body-02-size)/1 var(--yyt-font-sans);
  cursor: pointer; text-decoration: none;
  transition: background var(--yyt-duration-fast) var(--yyt-ease-out), transform 100ms var(--yyt-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-sm { height: 32px; padding: 0 12px; font-size: var(--yyt-type-body-01-size); border-radius: 6px; }
.btn-lg { height: 48px; padding: 0 24px; }

.btn-primary { background: var(--fg-1); color: var(--fg-inverse); }
.btn-primary:hover { background: var(--yyt-color-brand-black-hover); }
.btn-primary:active { background: var(--yyt-color-brand-black-active); }
.btn-brand { background: var(--accent); color: var(--accent-on); }
.btn-brand:hover { background: var(--accent-hover); }
.btn-brand:active { background: var(--accent-active); }
.btn-secondary { background: var(--bg-1); color: var(--fg-1); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-2); }
.btn-ghost { background: transparent; color: var(--fg-1); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-danger { background: var(--error); color: var(--fg-inverse); }
.btn-danger:hover { background: var(--yyt-color-error-hover); }
.btn-danger:active { background: var(--yyt-color-error-active); }
.btn[disabled] { background: var(--bg-3); color: var(--fg-muted); cursor: not-allowed; transform: none; }

/* ============ 卡片 ============ */
.card {
  background: var(--bg-1); border: 1px solid var(--border-1);
  border-radius: var(--yyt-radius-lg); padding: var(--yyt-space-6);
  box-shadow: var(--yyt-shadow-card);
  transition: box-shadow 200ms var(--yyt-ease-out), transform 200ms var(--yyt-ease-out);
}
.card:hover { box-shadow: var(--yyt-shadow-card-hover); transform: translateY(-2px); }
.card.hl { border-left: 4px solid var(--accent); }
.card h3 { font: var(--yyt-type-heading-02-weight) var(--yyt-type-heading-02-size)/var(--yyt-type-heading-02-line) var(--yyt-type-heading-02-font); margin: 0 0 var(--yyt-space-2); }
.card p { font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font); color: var(--fg-2); margin: 0; }
.card .meta { display: flex; gap: var(--yyt-space-2); margin-top: var(--yyt-space-4); align-items: center; }

/* ============ 输入 ============ */
.field { display: flex; flex-direction: column; gap: var(--yyt-space-1); }
.field label { font: 500 var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font); }
.field .help {
  font: var(--yyt-type-label-01-weight) var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking); color: var(--fg-3);
}
.field .help.err { color: var(--error); }
.input {
  height: 40px; border: 1px solid var(--border-2); border-radius: var(--yyt-radius-md);
  padding: 0 12px; background: var(--bg-1); color: var(--fg-1); width: 100%;
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/1 var(--yyt-type-body-02-font);
  transition: border-color var(--yyt-duration-fast) var(--yyt-ease-out), box-shadow var(--yyt-duration-fast) var(--yyt-ease-out);
}
.input::placeholder { color: var(--fg-muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102, 153, 62, .15); }
.input.err { border-color: var(--error); }
.input.err:focus { box-shadow: 0 0 0 3px rgba(234, 51, 35, .12); }
.input[disabled] { background: var(--bg-2); color: var(--fg-disabled); cursor: not-allowed; }

/* ============ 标签 / 徽章 ============ */
.tag {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--yyt-radius-full);
  font: 700 var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking);
}
.tag-success { background: var(--yyt-color-success-subtle); color: #3d6b1f; }
.tag-warning { background: var(--yyt-color-warning-subtle); color: #8a4a10; }
.tag-error   { background: var(--yyt-color-error-subtle); color: #a01a10; }
.tag-info    { background: var(--yyt-color-info-subtle); color: #255a5b; }
.tag-neutral { background: var(--bg-inverse); color: var(--fg-inverse); }

/* ============ 提示条 ============ */
.alert {
  display: flex; gap: var(--yyt-space-3); align-items: baseline;
  padding: var(--yyt-space-3) var(--yyt-space-4); border-radius: var(--yyt-radius-md);
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font);
}
.alert b { flex-shrink: 0; }
.alert-success { background: var(--yyt-color-success-subtle); border-left: 3px solid var(--success); }
.alert-warning { background: var(--yyt-color-warning-subtle); border-left: 3px solid var(--warning); }
.alert-error   { background: var(--yyt-color-error-subtle);   border-left: 3px solid var(--error); }
.alert-info    { background: var(--yyt-color-info-subtle);    border-left: 3px solid var(--info); }

/* ============ 区块节奏 ============ */
.hero { padding: var(--yyt-space-24) 0 var(--yyt-space-20); text-align: center; }
.hero h1 { margin: 0; }
.hero .sub { color: var(--fg-2); margin: var(--yyt-space-6) auto 0; max-width: var(--yyt-measure); }
.hero .actions { margin-top: var(--yyt-space-8); display: flex; gap: var(--yyt-space-3); justify-content: center; }

.section { padding: var(--yyt-space-20) 0; }
.section.alt { background: var(--bg-2); }
.section > .container > h2 {
  font: var(--yyt-type-heading-03-weight) var(--yyt-type-heading-03-size)/var(--yyt-type-heading-03-line) var(--yyt-type-heading-03-font);
  margin: 0 0 var(--yyt-space-2);
}
.section .section-sub { color: var(--fg-3); margin: 0 0 var(--yyt-space-8); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--yyt-space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--yyt-space-6); }
@media (max-width: 768px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  /* 窄屏字阶整档降档（display-04 → display-02），不做自由缩放 */
  .hero h1 {
    font-size: var(--yyt-type-display-02-size);
    line-height: var(--yyt-type-display-02-line);
  }
  .hero { padding: var(--yyt-space-16) 0 var(--yyt-space-12); }
  .section { padding: var(--yyt-space-12) 0; }
}

/* ============ 表格 ============ */
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font: 700 var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking); text-transform: uppercase; color: var(--fg-3);
  border-bottom: 2px solid var(--border-strong); padding: var(--yyt-space-2) var(--yyt-space-3);
}
table.data td {
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font);
  border-bottom: 1px solid var(--border-1); padding: var(--yyt-space-3);
  vertical-align: top;
}

/* ============ 测验 ============ */
.quiz { border: 1px solid var(--border-1); border-radius: var(--yyt-radius-lg); padding: var(--yyt-space-6); background: var(--bg-1); }
.quiz .q { font: var(--yyt-type-heading-01-weight) var(--yyt-type-heading-01-size)/var(--yyt-type-heading-01-line) var(--yyt-type-heading-01-font); margin: 0 0 var(--yyt-space-4); }
.quiz .opts { display: flex; flex-direction: column; gap: var(--yyt-space-2); }
.quiz button.opt {
  text-align: left; background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--yyt-radius-md);
  padding: var(--yyt-space-3) var(--yyt-space-4); cursor: pointer;
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/var(--yyt-type-body-02-line) var(--yyt-type-body-02-font);
  transition: border-color var(--yyt-duration-fast) var(--yyt-ease-out), background var(--yyt-duration-fast) var(--yyt-ease-out);
}
.quiz button.opt:hover { background: var(--bg-2); }
.quiz button.opt.right { border-color: var(--success); background: var(--yyt-color-success-subtle); }
.quiz button.opt.wrong { border-color: var(--error); background: var(--yyt-color-error-subtle); }
.quiz .verdict { margin: var(--yyt-space-4) 0 0; font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font); }

/* ============ 面包屑 ============ */
.crumbs {
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font);
  color: var(--fg-3); padding: var(--yyt-space-4) 0;
}
.crumbs a { color: var(--fg-3); text-decoration: none; }
.crumbs a:hover { color: var(--fg-1); }
.crumbs .sep { margin: 0 var(--yyt-space-2); color: var(--fg-muted); }

/* ============ 组件库布局（侧边栏文档站式） ============ */
.lib { display: grid; grid-template-columns: 200px 1fr; gap: var(--yyt-space-12); padding: var(--yyt-space-12) 0 var(--yyt-space-16); }
.lib-side { position: sticky; top: var(--yyt-space-6); align-self: start; }
.lib-side .group {
  font: 700 var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking); text-transform: uppercase;
  color: var(--fg-3); margin: var(--yyt-space-6) 0 var(--yyt-space-2);
}
.lib-side .group:first-child { margin-top: 0; }
.lib-side a {
  display: block; padding: var(--yyt-space-2) var(--yyt-space-3);
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font);
  color: var(--fg-2); text-decoration: none; border-left: 2px solid transparent;
}
.lib-side a:hover { color: var(--fg-1); background: var(--bg-2); }
.lib-side a.active { color: var(--fg-1); font-weight: 700; border-left-color: var(--accent); background: var(--bg-2); }
.lib-main > h1 { font: var(--yyt-type-display-01-weight) var(--yyt-type-display-01-size)/var(--yyt-type-display-01-line) var(--yyt-type-display-01-font); letter-spacing: 0; margin: 0 0 var(--yyt-space-2); }
.lib-main > .intro { color: var(--fg-2); margin: 0 0 var(--yyt-space-10); max-width: var(--yyt-measure); }
.demo-block { margin-bottom: var(--yyt-space-12); }
.demo-block > h2 {
  font: var(--yyt-type-heading-02-weight) var(--yyt-type-heading-02-size)/var(--yyt-type-heading-02-line) var(--yyt-type-heading-02-font);
  margin: 0 0 var(--yyt-space-1); padding-top: var(--yyt-space-4);
}
.demo-block > .desc {
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font);
  color: var(--fg-3); margin: 0 0 var(--yyt-space-4); max-width: var(--yyt-measure);
}
.stage {
  border: 1px solid var(--border-1); border-radius: var(--yyt-radius-md);
  padding: var(--yyt-space-6); background: var(--bg-1);
}
.stage + .stage { margin-top: var(--yyt-space-3); }
.stage.gray { background: var(--bg-2); }
.row { display: flex; gap: var(--yyt-space-3); flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--yyt-space-3); }
@media (max-width: 768px) { .lib { grid-template-columns: 1fr; } .lib-side { position: static; } }

/* ============ 表单扩展 ============ */
.select {
  height: 40px; width: 100%; border: 1px solid var(--border-2); border-radius: var(--yyt-radius-md);
  padding: 0 36px 0 12px; background-color: var(--bg-1); color: var(--fg-1);
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/1 var(--yyt-type-body-02-font);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237A7A7A' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102, 153, 62, .15); }
.textarea {
  width: 100%; min-height: 96px; border: 1px solid var(--border-2); border-radius: var(--yyt-radius-md);
  padding: var(--yyt-space-2) 12px; background: var(--bg-1); color: var(--fg-1); resize: vertical;
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/var(--yyt-type-body-02-line) var(--yyt-type-body-02-font);
}
.textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102, 153, 62, .15); }
.check, .radio {
  display: flex; align-items: center; gap: var(--yyt-space-2); cursor: pointer;
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/var(--yyt-type-body-02-line) var(--yyt-type-body-02-font);
}
.check input, .radio input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.check input:focus-visible, .radio input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--yyt-space-2); cursor: pointer;
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/var(--yyt-type-body-02-line) var(--yyt-type-body-02-font); }
.switch input { position: absolute; opacity: 0; width: 40px; height: 24px; margin: 0; cursor: pointer; }
.switch .track {
  width: 40px; height: 24px; border-radius: var(--yyt-radius-full); background: var(--yyt-color-neutral-200);
  transition: background var(--yyt-duration-fast) var(--yyt-ease-out); flex-shrink: 0; position: relative;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--yyt-shadow-card);
  transition: transform var(--yyt-duration-fast) var(--yyt-ease-out);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: var(--focus-ring); }

/* ============ 数据展示 ============ */
.stat { padding: var(--yyt-space-4) 0; }
.stat .num {
  font: 900 var(--yyt-type-display-01-size)/var(--yyt-type-display-01-line) var(--yyt-font-serif);
  letter-spacing: 0;
}
.stat .num em { font-style: normal; color: var(--accent); }
.stat .cap {
  font: var(--yyt-type-label-01-weight) var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking); color: var(--fg-3); margin-top: var(--yyt-space-1);
}
.progress { height: 8px; border-radius: var(--yyt-radius-full); background: var(--bg-3); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.progress.orange > i { background: var(--accent-2); }
.progress-row { display: flex; align-items: center; gap: var(--yyt-space-4); }
.progress-row .plabel { flex: 0 0 96px; font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font); }
.progress-row .progress { flex: 1; }
.progress-row .pval { flex: 0 0 48px; text-align: right; font: 700 var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--bg-inverse); color: var(--fg-inverse);
  font: 700 var(--yyt-type-body-01-size)/1 var(--yyt-font-sans); flex-shrink: 0;
}
.avatar.green { background: var(--accent); }
.avatar.sm { width: 32px; height: 32px; font-size: var(--yyt-type-label-01-size); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--yyt-space-6) var(--yyt-space-6); border-left: 2px solid var(--border-1); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bg-1); border: 2px solid var(--yyt-color-neutral-400);
}
.timeline li.done::before { background: var(--accent); border-color: var(--accent); }
.timeline .t-title { font: 700 var(--yyt-type-body-02-size)/var(--yyt-type-body-02-line) var(--yyt-font-sans); }
.timeline .t-meta {
  font: var(--yyt-type-label-01-weight) var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking); color: var(--fg-3);
}
.accordion { border-top: 1px solid var(--border-1); }
.accordion details { border-bottom: 1px solid var(--border-1); }
.accordion summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: var(--yyt-space-4) 0;
  font: var(--yyt-type-heading-01-weight) var(--yyt-type-heading-01-size)/var(--yyt-type-heading-01-line) var(--yyt-type-heading-01-font);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font: 400 20px/1 var(--yyt-font-sans); color: var(--fg-3); }
.accordion details[open] summary::after { content: "\2212"; }
.accordion .a-body { padding: 0 0 var(--yyt-space-4); color: var(--fg-2); max-width: var(--yyt-measure); }

/* ============ 反馈扩展 ============ */
dialog.modal {
  border: none; border-radius: var(--yyt-radius-xl); padding: var(--yyt-space-6);
  box-shadow: var(--yyt-shadow-modal); max-width: 420px; width: calc(100% - 48px);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, .4); }
dialog.modal h3 { font: var(--yyt-type-heading-02-weight) var(--yyt-type-heading-02-size)/var(--yyt-type-heading-02-line) var(--yyt-type-heading-02-font); margin: 0 0 var(--yyt-space-2); }
dialog.modal p { font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font); color: var(--fg-2); margin: 0 0 var(--yyt-space-6); }
dialog.modal .actions { display: flex; gap: var(--yyt-space-3); justify-content: flex-end; }
.toast {
  position: fixed; left: 50%; bottom: var(--yyt-space-8); transform: translateX(-50%) translateY(8px);
  background: var(--bg-inverse); color: var(--fg-inverse);
  padding: var(--yyt-space-3) var(--yyt-space-6); border-radius: var(--yyt-radius-md);
  box-shadow: var(--yyt-shadow-modal); z-index: var(--yyt-z-toast);
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font);
  opacity: 0; pointer-events: none;
  transition: opacity var(--yyt-duration-base) var(--yyt-ease-out), transform var(--yyt-duration-base) var(--yyt-ease-out);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.empty { text-align: center; padding: var(--yyt-space-12) var(--yyt-space-6); }
.empty .glyph {
  width: 64px; height: 64px; border-radius: 50%; background: var(--bg-2);
  display: inline-flex; align-items: center; justify-content: center;
  font: 900 24px/1 var(--yyt-font-serif); color: var(--fg-muted); margin-bottom: var(--yyt-space-4);
}
.empty h4 { font: var(--yyt-type-heading-01-weight) var(--yyt-type-heading-01-size)/var(--yyt-type-heading-01-line) var(--yyt-type-heading-01-font); margin: 0 0 var(--yyt-space-1); }
.empty p { font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font); color: var(--fg-3); margin: 0 0 var(--yyt-space-6); }
.skeleton { display: flex; flex-direction: column; gap: var(--yyt-space-3); }
.skeleton i { display: block; height: 12px; border-radius: var(--yyt-radius-sm); background: var(--bg-3); }
.skeleton i.lg { height: 24px; width: 40%; }
.skeleton i.w60 { width: 60%; }
.skeleton i.w80 { width: 80%; }

/* ============ 导航组件 ============ */
.tabs { display: flex; gap: var(--yyt-space-6); border-bottom: 1px solid var(--border-1); }
.tabs button, .tabs a {
  background: none; border: none; cursor: pointer; text-decoration: none;
  padding: var(--yyt-space-3) 0; color: var(--fg-2);
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/var(--yyt-type-body-02-line) var(--yyt-type-body-02-font);
  box-shadow: inset 0 -2px 0 transparent;
}
.tabs .active { color: var(--fg-1); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.tabs button:hover, .tabs a:hover { color: var(--fg-1); }
.chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--yyt-space-4);
  border-radius: var(--yyt-radius-full); border: 1px solid var(--border-2); background: var(--bg-1);
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1 var(--yyt-type-body-01-font);
  color: var(--fg-2); cursor: pointer;
}
.chip:hover { border-color: var(--fg-1); color: var(--fg-1); }
.chip.active { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--fg-inverse); font-weight: 700; }
.pagination { display: flex; gap: var(--yyt-space-2); align-items: center; }
.pagination button {
  min-width: 32px; height: 32px; padding: 0 var(--yyt-space-2); border: 1px solid var(--border-2);
  border-radius: 6px; background: var(--bg-1); cursor: pointer; color: var(--fg-2);
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1 var(--yyt-type-body-01-font);
}
.pagination button:hover { border-color: var(--fg-1); color: var(--fg-1); }
.pagination button.current { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--fg-inverse); font-weight: 700; }
.pagination button[disabled] { color: var(--fg-disabled); cursor: not-allowed; border-color: var(--border-1); }
.steps { display: flex; align-items: flex-start; }
.steps .step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.steps .step:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; left: calc(50% + 24px); right: calc(-50% + 24px);
  height: 2px; background: var(--border-1);
}
.steps .step.done:not(:last-child)::after { background: var(--accent); }
.steps .dot {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 var(--yyt-type-body-01-size)/1 var(--yyt-font-sans);
  background: var(--bg-2); color: var(--fg-3); border: 1px solid var(--border-2); z-index: 1;
}
.steps .done .dot { background: var(--accent); border-color: var(--accent); color: var(--fg-inverse); }
.steps .current .dot { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--fg-inverse); }
.steps .slabel { margin-top: var(--yyt-space-2); font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font); color: var(--fg-2); }
.steps .current .slabel { color: var(--fg-1); font-weight: 700; }

/* ============ 定价 ============ */
.price-card { display: flex; flex-direction: column; }
.price-card .tier {
  font: 700 var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking); text-transform: uppercase; color: var(--fg-3);
}
.price-card .price { margin: var(--yyt-space-3) 0; }
.price-card .price .amount {
  font: 900 var(--yyt-type-display-02-size)/1 var(--yyt-font-serif); letter-spacing: 0;
}
.price-card .price .per { font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1 var(--yyt-type-body-01-font); color: var(--fg-3); }
.price-card ul { list-style: none; margin: 0 0 var(--yyt-space-6); padding: 0; flex: 1; }
.price-card li {
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font);
  padding: var(--yyt-space-2) 0; border-bottom: 1px solid var(--border-1);
}
.price-card li::before { content: "\2713"; color: var(--accent); font-weight: 700; margin-right: var(--yyt-space-2); }
.price-card li.no { color: var(--fg-muted); }
.price-card li.no::before { content: "\2014"; color: var(--fg-muted); }
.price-card.featured { border: 2px solid var(--border-strong); position: relative; }
.price-card.featured .flag {
  position: absolute; top: -12px; left: var(--yyt-space-6);
  background: var(--accent); color: var(--fg-inverse); padding: 2px 10px; border-radius: var(--yyt-radius-full);
  font: 700 var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking);
}

/* ============ 引用 ============ */
.quote {
  border-left: 4px solid var(--accent); padding: var(--yyt-space-2) 0 var(--yyt-space-2) var(--yyt-space-6);
  margin: 0;
}
/* 引用文字用 display-01 —— 衬线只允许出现在 ≥32px 的 display 档 */
.quote p { font: var(--yyt-type-display-01-weight) var(--yyt-type-display-01-size)/var(--yyt-type-display-01-line) var(--yyt-type-display-01-font); margin: 0 0 var(--yyt-space-3); letter-spacing: 0; }
.quote footer {
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font);
  color: var(--fg-3);
}

/* ============ 页脚 ============ */
.footer { background: var(--bg-inverse); color: var(--fg-inverse); margin-top: var(--yyt-space-24); }
.footer .container { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--yyt-space-10); padding-bottom: var(--yyt-space-10); }
.footer .logo { font: 900 1.25rem/1 var(--yyt-font-serif); }
.footer .fine {
  font: var(--yyt-type-label-01-weight) var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking); color: var(--yyt-color-neutral-400);
}

/* ================================================================
 * shadcn 对标补齐组件（D 风格 · 尽量用原生平台能力）
 * ================================================================ */

/* ---- KBD 键帽 ---- */
kbd.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: var(--yyt-radius-sm);
  background: var(--bg-1); color: var(--fg-2);
  font: 500 var(--yyt-type-code-01-size)/1 var(--yyt-font-mono);
}

/* ---- 分隔线 Separator ---- */
.separator { border: none; border-top: 1px solid var(--border-1); margin: var(--yyt-space-6) 0; }
.separator.v { border-top: none; border-left: 1px solid var(--border-1); margin: 0 var(--yyt-space-4); align-self: stretch; }

/* ---- 长宽比 Aspect Ratio ---- */
.ratio { position: relative; width: 100%; background: var(--bg-2); border-radius: var(--yyt-radius-md); overflow: hidden; }
.ratio.r-16-9 { aspect-ratio: 16 / 9; }
.ratio.r-1-1 { aspect-ratio: 1 / 1; }
.ratio.r-4-3 { aspect-ratio: 4 / 3; }
.ratio > .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted); font: 700 var(--yyt-type-label-01-size)/1 var(--yyt-font-mono); letter-spacing: .1em;
}

/* ================================================================
 * 高级输入
 * ================================================================ */

/* ---- 滑块 Slider（原生 input[type=range]）---- */
.slider { width: 100%; }
.slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 9999px;
  background: var(--bg-3); outline: none; margin: var(--yyt-space-3) 0;
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: var(--yyt-shadow-card); cursor: pointer;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 2px solid #fff; box-shadow: var(--yyt-shadow-card); cursor: pointer;
}
.slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.slider .srow { display: flex; justify-content: space-between; align-items: baseline; }
.slider .sval { font: 700 var(--yyt-type-body-01-size)/1 var(--yyt-font-mono); color: var(--accent); }

/* ---- 开关按钮 Toggle / Toggle Group ---- */
.toggle {
  display: inline-flex; align-items: center; gap: var(--yyt-space-2);
  height: var(--yyt-control-height-toggle); padding: 0 var(--yyt-space-3); border: 1px solid var(--border-2);
  border-radius: var(--yyt-radius-md); background: var(--bg-1); color: var(--fg-2); cursor: pointer;
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1 var(--yyt-type-body-01-font);
}
.toggle:hover { background: var(--bg-2); color: var(--fg-1); }
.toggle[aria-pressed="true"] { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--fg-inverse); }
.toggle-group { display: inline-flex; }
.toggle-group .toggle { border-radius: 0; margin-left: -1px; }
.toggle-group .toggle:first-child { border-radius: var(--yyt-radius-md) 0 0 var(--yyt-radius-md); margin-left: 0; }
.toggle-group .toggle:last-child { border-radius: 0 var(--yyt-radius-md) var(--yyt-radius-md) 0; }
.toggle-group .toggle[aria-pressed="true"] { position: relative; z-index: 1; }

/* ---- 分段控制 Segmented ---- */
.segmented { display: inline-flex; padding: 3px; background: var(--bg-3); border-radius: var(--yyt-radius-md); gap: 2px; }
.segmented button {
  border: none; background: none; cursor: pointer; padding: var(--yyt-space-1) var(--yyt-space-4);
  border-radius: calc(var(--yyt-radius-md) - 2px); color: var(--fg-2);
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1.6 var(--yyt-type-body-01-font);
}
.segmented button[aria-selected="true"] { background: var(--bg-1); color: var(--fg-1); font-weight: 700; box-shadow: var(--yyt-shadow-card); }

/* ---- 下拉容器（details 通用：dropdown / popover / combobox）---- */
.pop { position: relative; display: inline-block; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.pop[open] > summary { position: relative; z-index: 2; }
.pop-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--yyt-z-dropdown);
  min-width: var(--yyt-overlay-dropdown-min); background: var(--bg-1); border: 1px solid var(--border-2);
  border-radius: var(--yyt-radius-md); box-shadow: var(--yyt-shadow-modal); padding: var(--yyt-space-1);
}
.pop-panel.right { left: auto; right: 0; }
/* 点外部关闭：透明遮罩铺满视口 */
.pop[open]::before { content: ""; position: fixed; inset: 0; z-index: var(--yyt-z-sticky); }

/* 菜单项 */
.menu-item {
  display: flex; align-items: center; gap: var(--yyt-space-3); width: 100%;
  padding: var(--yyt-space-2) var(--yyt-space-3); border: none; background: none; cursor: pointer;
  border-radius: var(--yyt-radius-sm); color: var(--fg-1); text-align: left; text-decoration: none;
  font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1.4 var(--yyt-type-body-01-font);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--bg-2); outline: none; }
.menu-item .r { margin-left: auto; color: var(--fg-3); font-family: var(--yyt-font-mono); font-size: var(--yyt-type-code-01-size); }
.menu-item.danger { color: var(--error); }
.menu-item.danger:hover { background: var(--yyt-color-error-subtle); }
.menu-sep { height: 1px; background: var(--border-1); margin: var(--yyt-space-1) 0; }
.menu-label { padding: var(--yyt-space-2) var(--yyt-space-3) var(--yyt-space-1); font: 700 var(--yyt-type-label-01-size)/1 var(--yyt-type-label-01-font); letter-spacing: var(--yyt-type-label-01-tracking); text-transform: uppercase; color: var(--fg-3); }

/* 下拉触发钮的小三角 */
.caret { display: inline-block; transition: transform var(--yyt-duration-fast) var(--yyt-ease-out); }
.pop[open] .caret { transform: rotate(180deg); }

/* ---- 工具提示 Tooltip（纯 CSS hover/focus）---- */
.tip { position: relative; display: inline-flex; }
.tip > .tip-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--bg-inverse); color: var(--fg-inverse); padding: 4px 10px; border-radius: var(--yyt-radius-sm);
  font: var(--yyt-type-label-01-weight) var(--yyt-type-label-01-size)/1.4 var(--yyt-type-label-01-font);
  white-space: nowrap; opacity: 0; pointer-events: none; z-index: var(--yyt-z-tooltip);
  transition: opacity var(--yyt-duration-fast) var(--yyt-ease-out), transform var(--yyt-duration-fast) var(--yyt-ease-out);
}
.tip > .tip-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--bg-inverse);
}
.tip:hover > .tip-bubble, .tip:focus-within > .tip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- 悬浮卡 Hover Card ---- */
.hovercard { position: relative; display: inline-block; }
.hovercard > .hc-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--yyt-z-dropdown);
  width: 280px; background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--yyt-radius-lg);
  box-shadow: var(--yyt-shadow-modal); padding: var(--yyt-space-4);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--yyt-duration-base) var(--yyt-ease-out), transform var(--yyt-duration-base) var(--yyt-ease-out), visibility var(--yyt-duration-base);
}
.hovercard:hover > .hc-panel, .hovercard:focus-within > .hc-panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- 命令面板 Command（⌘K）---- */
dialog.cmdk {
  border: none; border-radius: var(--yyt-radius-lg); padding: 0; width: var(--yyt-overlay-command); max-width: calc(100% - 32px);
  box-shadow: var(--yyt-shadow-modal); margin-top: 12vh;
}
dialog.cmdk::backdrop { background: rgba(0,0,0,.4); }
.cmdk .cmd-input {
  width: 100%; border: none; border-bottom: 1px solid var(--border-1); padding: var(--yyt-space-4) var(--yyt-space-5);
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/1 var(--yyt-type-body-02-font); outline: none;
}
.cmdk .cmd-list { max-height: 320px; overflow-y: auto; padding: var(--yyt-space-2); }
.cmdk .menu-item .k { margin-left: auto; }
.cmdk .cmd-empty { padding: var(--yyt-space-8); text-align: center; color: var(--fg-3); font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1.5 var(--yyt-type-body-01-font); }

/* ---- 抽屉 Drawer / Sheet ---- */
dialog.drawer {
  border: none; padding: 0; height: 100vh; max-height: 100vh; margin: 0 0 0 auto;
  width: var(--yyt-overlay-drawer); max-width: calc(100% - 48px); box-shadow: var(--yyt-shadow-modal);
}
dialog.drawer::backdrop { background: rgba(0,0,0,.4); }
dialog.drawer .drawer-body { display: flex; flex-direction: column; height: 100%; }
dialog.drawer .drawer-head { display: flex; align-items: baseline; padding: var(--yyt-space-6) var(--yyt-space-6) var(--yyt-space-4); border-bottom: 1px solid var(--border-1); }
dialog.drawer .drawer-head h3 { font: var(--yyt-type-heading-02-weight) var(--yyt-type-heading-02-size)/var(--yyt-type-heading-02-line) var(--yyt-type-heading-02-font); margin: 0; }
dialog.drawer .drawer-head .x { margin-left: auto; border: none; background: none; cursor: pointer; font-size: 20px; color: var(--fg-3); line-height: 1; }
dialog.drawer .drawer-main { flex: 1; overflow-y: auto; padding: var(--yyt-space-6); }
dialog.drawer .drawer-foot { padding: var(--yyt-space-4) var(--yyt-space-6); border-top: 1px solid var(--border-1); display: flex; gap: var(--yyt-space-3); }

/* ---- 组合框 Combobox（复用 .pop）---- */
.combo-list { max-height: 220px; overflow-y: auto; }
.combo-search { margin: 0 0 var(--yyt-space-1); }
.combo-search input { width: 100%; border: none; border-bottom: 1px solid var(--border-1); padding: var(--yyt-space-2) var(--yyt-space-3); font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1 var(--yyt-type-body-01-font); outline: none; }
.menu-item .check { margin-left: auto; color: var(--accent); font-weight: 700; visibility: hidden; }
.menu-item[aria-selected="true"] .check { visibility: visible; }

/* ---- 验证码 Input OTP ---- */
.otp { display: inline-flex; gap: var(--yyt-space-2); }
.otp input {
  width: var(--yyt-otp-cell-w); height: var(--yyt-otp-cell-h); text-align: center; border: 1px solid var(--border-2); border-radius: var(--yyt-radius-md);
  font: 700 var(--yyt-type-heading-02-size)/1 var(--yyt-font-mono); color: var(--fg-1); background: var(--bg-1);
}
.otp input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102,153,62,.15); }

/* ---- 日历 / 日期选择 Calendar ---- */
.calendar { width: var(--yyt-overlay-calendar); border: 1px solid var(--border-2); border-radius: var(--yyt-radius-lg); padding: var(--yyt-space-4); background: var(--bg-1); }
.calendar .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--yyt-space-3); }
.calendar .cal-head .m { font: 700 var(--yyt-type-body-02-size)/1 var(--yyt-font-sans); }
.calendar .cal-head button { border: 1px solid var(--border-2); background: var(--bg-1); border-radius: var(--yyt-radius-sm); width: 28px; height: 28px; cursor: pointer; color: var(--fg-2); }
.calendar .cal-head button:hover { background: var(--bg-2); }
.calendar .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar .dow { text-align: center; font: 700 var(--yyt-type-label-01-size)/2 var(--yyt-type-label-01-font); color: var(--fg-3); }
.calendar .day { aspect-ratio: 1; border: none; background: none; cursor: pointer; border-radius: var(--yyt-radius-sm); color: var(--fg-1); font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1 var(--yyt-type-body-01-font); }
.calendar .day:hover { background: var(--bg-2); }
.calendar .day.muted { color: var(--fg-disabled); }
.calendar .day.today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--border-2); }
.calendar .day.selected { background: var(--accent); color: var(--fg-inverse); font-weight: 700; }

/* ================================================================
 * 媒体与展示
 * ================================================================ */

/* ---- 走马灯 Carousel（scroll-snap）---- */
.carousel { position: relative; }
.carousel .track {
  display: flex; gap: var(--yyt-space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: var(--yyt-space-2); scrollbar-width: none;
}
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .slide { flex: 0 0 100%; scroll-snap-align: start; }
.carousel .slide.third { flex-basis: calc((100% - 2 * var(--yyt-space-4)) / 3); }
.carousel .cbtn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-2);
  background: var(--bg-1); box-shadow: var(--yyt-shadow-card); cursor: pointer; color: var(--fg-1); font-size: 16px;
}
.carousel .cbtn:hover { background: var(--bg-2); }
.carousel .cbtn.prev { left: -12px; }
.carousel .cbtn.next { right: -12px; }
.carousel .dots { display: flex; gap: var(--yyt-space-2); justify-content: center; margin-top: var(--yyt-space-4); }
.carousel .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); }
.carousel .dots i.on { background: var(--accent); }

/* ---- 排序表格：表头可点 ---- */
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--fg-1); }
table.data th .arrow { color: var(--accent); font-size: 10px; }

/* ---- 迷你柱状图 Sparkline / Bar ---- */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.spark i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; }
.spark i.dim { background: var(--bg-3); }
.barchart { display: flex; flex-direction: column; gap: var(--yyt-space-3); }
.barchart .brow { display: flex; align-items: center; gap: var(--yyt-space-3); }
.barchart .blabel { flex: 0 0 72px; font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/1.4 var(--yyt-type-body-01-font); color: var(--fg-2); }
.barchart .btrack { flex: 1; height: 20px; background: var(--bg-2); border-radius: var(--yyt-radius-sm); overflow: hidden; }
.barchart .btrack > i { display: block; height: 100%; background: var(--accent); }
.barchart .btrack.orange > i { background: var(--accent-2); }
.barchart .bval { flex: 0 0 44px; text-align: right; font: 700 var(--yyt-type-body-01-size)/1.4 var(--yyt-font-mono); }