/* =============================================================================
 * RakuTool Design System — Component Library
 * -----------------------------------------------------------------------------
 * 依赖：rt-design-tokens.css（必须在其之前或经由下方 @import 引入）
 * 顺序：按全站使用频率从高到低排列（见 COMPONENTS.md 的频率盘点）。
 * 所有取值一律使用 var(--rt-*)，禁止写死色值 / 尺寸。
 * 命名：BEM-lite（rt-block / rt-block__element / rt-block--modifier），
 *      与 header 的 rt- 前缀一致，避免与页面局部样式冲突。
 * ========================================================================== */
@import url("./rt-design-tokens.css");

/* 组件统一盒模型 */
[class^="rt-"] { box-sizing: border-box; }

/* -----------------------------------------------------------------------------
 * 1. rt-section  — 内容卡片容器  (覆盖 73/76 页：.content-section / .faq-section)
 * -------------------------------------------------------------------------- */
.rt-section {
  background: var(--rt-color-surface);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-6);
  margin-bottom: var(--rt-space-6);
  box-shadow: var(--rt-shadow-card);
}
.rt-section__title { font-size: 20px; margin-bottom: var(--rt-space-4); color: var(--rt-color-text); }

/* -----------------------------------------------------------------------------
 * 2. rt-related / rt-tool-link — 相关工具卡片 + 链接芯片  (73/76 页)
 * -------------------------------------------------------------------------- */
.rt-related {
  background: var(--rt-color-surface);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-6);
  margin-bottom: var(--rt-space-6);
  box-shadow: var(--rt-shadow-card);
}
.rt-related__title { font-size: 20px; margin-bottom: var(--rt-space-4); color: var(--rt-color-text); }
.rt-tool-links { display: flex; flex-wrap: wrap; gap: var(--rt-space-3); }
.rt-tool-link {
  display: inline-block; padding: 10px 16px;
  background: var(--rt-color-surface-blue-50); color: var(--rt-color-primary-strong);
  text-decoration: none; border-radius: var(--rt-radius-sm); font-size: 14px;
  border: 1px solid var(--rt-color-surface-blue-border);
  transition: background var(--rt-duration-fast), color var(--rt-duration-fast),
              border-color var(--rt-duration-fast), transform var(--rt-duration-fast);
}
.rt-tool-link:hover {
  background: var(--rt-color-primary); border-color: var(--rt-color-primary);
  color: var(--rt-color-surface); transform: translateY(-1px);
}

/* -----------------------------------------------------------------------------
 * 3. rt-result — 结果展示  (67/76 页：.result / .result-* / .calculator-result)
 * -------------------------------------------------------------------------- */
.rt-result {
  background: var(--rt-color-surface);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-4);
  margin-top: var(--rt-space-4);
  box-shadow: var(--rt-shadow-card);
}
.rt-result__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--rt-space-3);
  padding: var(--rt-space-2) 0; border-bottom: 1px solid var(--rt-color-divider);
}
.rt-result__row:last-child { border-bottom: none; }
.rt-result__label { color: var(--rt-color-text-secondary); }
.rt-result__value { font-weight: 700; color: var(--rt-color-primary-strong); }
.rt-result__unit { font-size: 12px; color: var(--rt-color-text-tertiary); margin-left: 4px; }

/* -----------------------------------------------------------------------------
 * 4. rt-field / rt-input / rt-textarea / rt-select — 表单字段  (62/76 页, input 217)
 * -------------------------------------------------------------------------- */
.rt-field { margin-bottom: var(--rt-space-5); }
.rt-field__label { display: block; margin-bottom: var(--rt-space-2); font-size: 14px; font-weight: 600; color: var(--rt-color-text); }
.rt-field__hint { margin-top: var(--rt-space-1); font-size: 12px; color: var(--rt-color-text-tertiary); }
.rt-input, .rt-textarea, .rt-select {
  width: 100%; padding: 12px;
  border: 1px solid var(--rt-color-border-strong); border-radius: var(--rt-radius-sm);
  font-size: 16px; font-family: inherit; line-height: 1.5;
  background: var(--rt-color-surface); color: var(--rt-color-text);
  transition: border-color var(--rt-duration-fast), box-shadow var(--rt-duration-fast);
}
.rt-input:focus, .rt-textarea:focus, .rt-select:focus {
  outline: none; border-color: var(--rt-color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, .15);
}
.rt-input::placeholder, .rt-textarea::placeholder { color: var(--rt-color-neutral-500); }
.rt-textarea { min-height: 150px; resize: vertical; }
.rt-select { cursor: pointer; }

/* -----------------------------------------------------------------------------
 * 5. rt-btn — 按钮  (26/76 页, <button> 248)  + 变体
 * -------------------------------------------------------------------------- */
.rt-btn {
  display: inline-block; padding: 12px 24px;
  background: var(--rt-color-primary); color: #fff; border: none;
  border-radius: var(--rt-radius-sm); font-size: 16px; font-family: inherit; line-height: 1.4;
  cursor: pointer; min-width: 120px; text-align: center; text-decoration: none;
  transition: background var(--rt-duration-fast), transform var(--rt-duration-fast);
}
.rt-btn:hover { background: var(--rt-color-primary-hover); }
.rt-btn:active { transform: scale(.98); }
.rt-btn--secondary { background: var(--rt-color-neutral-600); }
.rt-btn--secondary:hover { background: var(--rt-color-neutral-700); }
.rt-btn--ghost { background: transparent; color: var(--rt-color-primary-strong); border: 1px solid var(--rt-color-surface-blue-border); }
.rt-btn--ghost:hover { background: var(--rt-color-surface-blue-100); }
.rt-btn--copy { background: var(--rt-color-success); min-width: 0; padding: 6px 12px; font-size: 14px; }
.rt-btn--copy:hover { background: var(--rt-color-success-text); }
.rt-btn--sm { min-width: 0; padding: 6px 12px; font-size: 14px; }
.rt-btn--block { display: block; width: 100%; }

/* -----------------------------------------------------------------------------
 * 6. rt-tabs — 选项卡  (39/76 页：.tabs / .tab / .tab-content / .active)
 * -------------------------------------------------------------------------- */
.rt-tabs { display: flex; flex-wrap: wrap; gap: var(--rt-space-1); margin-bottom: var(--rt-space-6); border-bottom: 1px solid var(--rt-color-border-strong); }
.rt-tab {
  padding: 12px 24px; cursor: pointer; border: none; background: none; font: inherit; font-size: 15px;
  color: var(--rt-color-text-secondary); border-bottom: 2px solid transparent;
  transition: color var(--rt-duration-fast), border-color var(--rt-duration-fast);
}
.rt-tab:hover { color: var(--rt-color-primary-strong); }
.rt-tab.is-active { color: var(--rt-color-primary); border-bottom-color: var(--rt-color-primary); font-weight: 600; }
.rt-tab-panel { display: none; }
.rt-tab-panel.is-active { display: block; }

/* -----------------------------------------------------------------------------
 * 7. rt-actions — 按钮行容器  (25/76 页：.actions)
 * -------------------------------------------------------------------------- */
.rt-actions { display: flex; gap: var(--rt-space-2); margin-top: var(--rt-space-4); flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
 * 8. rt-detail — 键值明细列表  (8/76 页：.detail-*)
 * -------------------------------------------------------------------------- */
.rt-detail { background: var(--rt-color-surface); border-radius: var(--rt-radius-lg); padding: var(--rt-space-4); box-shadow: var(--rt-shadow-card-soft); }
.rt-detail__row { display: flex; justify-content: space-between; gap: var(--rt-space-3); padding: 10px 0; border-bottom: 1px solid var(--rt-color-divider); }
.rt-detail__row:last-child { border-bottom: none; }
.rt-detail__label { color: var(--rt-color-text-secondary); }
.rt-detail__value { font-weight: 500; color: var(--rt-color-text); }

/* -----------------------------------------------------------------------------
 * 9. rt-stat — 指标卡  (7/76 页：.stat-*)
 * -------------------------------------------------------------------------- */
.rt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--rt-space-4); margin-bottom: var(--rt-space-6); }
.rt-stat { text-align: center; padding: var(--rt-space-4); background: var(--rt-color-surface); border-radius: var(--rt-radius-lg); box-shadow: var(--rt-shadow-card-soft); }
.rt-stat__value { font-size: 28px; font-weight: 700; color: var(--rt-color-primary); }
.rt-stat__label { color: var(--rt-color-text-secondary); font-size: 12px; margin-bottom: var(--rt-space-2); }
.rt-stat__unit { font-size: 12px; color: var(--rt-color-text-tertiary); }

/* -----------------------------------------------------------------------------
 * 10. rt-alert — 提示框  (6/76 页：.info-box)  + 语义变体
 * -------------------------------------------------------------------------- */
.rt-alert {
  margin-top: var(--rt-space-6); padding: var(--rt-space-4);
  border-radius: var(--rt-radius-md); border-left: 4px solid var(--rt-color-info-border);
  background: var(--rt-color-info-bg); color: var(--rt-color-info-text); font-size: 14px;
}
.rt-alert__title { font-size: 16px; margin-bottom: var(--rt-space-2); font-weight: 600; }
.rt-alert--success { border-left-color: var(--rt-color-success-border); background: var(--rt-color-success-bg); color: var(--rt-color-success-text); }
.rt-alert--warning { border-left-color: var(--rt-color-warning-border); background: var(--rt-color-warning-bg); color: var(--rt-color-warning-text); }
.rt-alert--danger  { border-left-color: var(--rt-color-danger-border);  background: var(--rt-color-danger-bg);  color: var(--rt-color-danger-text); }

/* -----------------------------------------------------------------------------
 * 11. rt-chip — 样本/筛选芯片  (9/76 页：.sample-chip / .sample-chips)
 * -------------------------------------------------------------------------- */
.rt-chips { display: flex; flex-wrap: wrap; gap: var(--rt-space-2); }
.rt-chip {
  display: inline-block; padding: 8px 16px; background: var(--rt-color-surface);
  border-radius: var(--rt-radius-pill); cursor: pointer; font-size: 14px;
  border: 1px solid var(--rt-color-border-strong); color: var(--rt-color-text);
  transition: all var(--rt-duration-fast);
}
.rt-chip:hover { background: var(--rt-color-surface-blue-100); border-color: var(--rt-color-surface-blue-border); color: var(--rt-color-primary-strong); }
.rt-chip--active { background: var(--rt-color-primary); border-color: var(--rt-color-primary); color: #fff; }

/* -----------------------------------------------------------------------------
 * 12. rt-radio — 单选  (10/76 页, radio 30)
 * -------------------------------------------------------------------------- */
.rt-radio-group { display: flex; gap: var(--rt-space-4); margin-bottom: var(--rt-space-4); flex-wrap: wrap; }
.rt-radio { display: inline-flex; align-items: center; gap: var(--rt-space-1); cursor: pointer; font-size: 15px; }
.rt-radio input { accent-color: var(--rt-color-primary); width: 16px; height: 16px; }

/* -----------------------------------------------------------------------------
 * 13. rt-checkbox — 多选  (checkbox 14)
 * -------------------------------------------------------------------------- */
.rt-checkbox-group { display: flex; flex-wrap: wrap; gap: var(--rt-space-4); margin-bottom: var(--rt-space-4); }
.rt-checkbox { display: inline-flex; align-items: center; gap: var(--rt-space-1); cursor: pointer; font-size: 15px; }
.rt-checkbox input { accent-color: var(--rt-color-primary); width: 16px; height: 16px; }

/* -----------------------------------------------------------------------------
 * 14. rt-meter / rt-score — 评分与进度条  (5/76 页：.meter-* / .score-*)
 * -------------------------------------------------------------------------- */
.rt-meter { margin-bottom: var(--rt-space-3); }
.rt-meter__label { text-align: center; font-weight: 500; margin-bottom: var(--rt-space-2); color: var(--rt-color-text-secondary); }
.rt-meter__bar { height: 24px; background: var(--rt-color-neutral-200); border-radius: var(--rt-radius-md); overflow: hidden; }
.rt-meter__fill { height: 100%; background: var(--rt-color-success); border-radius: var(--rt-radius-md); transition: width var(--rt-duration-slow) var(--rt-ease-out); }
.rt-score { text-align: center; }
.rt-score__value { font-size: 48px; font-weight: 700; color: var(--rt-color-success); line-height: 1.1; }
.rt-score__label { font-size: 14px; color: var(--rt-color-text-secondary); }

/* 14.1 评分分级（data-grade 属性承载等级，原 .<grade> 类修饰符已解耦为行为属性） */
/* 配色统一：easy/excellent=成功绿，good=轻绿，normal=琥珀，hard/poor=警告橙，bad/very-hard=危险红 */
.rt-meter__fill[data-grade="excellent"], .rt-meter__fill[data-grade="easy"]      { background: var(--rt-color-success); }
.rt-meter__fill[data-grade="good"]                                 { background: var(--rt-color-grade-good); }
.rt-meter__fill[data-grade="normal"]                               { background: var(--rt-color-grade-normal); }
.rt-meter__fill[data-grade="poor"], .rt-meter__fill[data-grade="hard"]           { background: var(--rt-color-warning); }
.rt-meter__fill[data-grade="bad"],  .rt-meter__fill[data-grade="very-hard"]      { background: var(--rt-color-danger); }

.rt-meter__label[data-grade="excellent"], .rt-meter__label[data-grade="easy"]    { color: var(--rt-color-success); }
.rt-meter__label[data-grade="good"]                                { color: var(--rt-color-grade-good); }
.rt-meter__label[data-grade="normal"]                              { color: var(--rt-color-grade-normal); }
.rt-meter__label[data-grade="poor"], .rt-meter__label[data-grade="hard"]         { color: var(--rt-color-warning); }
.rt-meter__label[data-grade="bad"],  .rt-meter__label[data-grade="very-hard"]    { color: var(--rt-color-danger); }

.rt-score__value[data-grade="excellent"], .rt-score__value[data-grade="easy"]    { color: var(--rt-color-success); }
.rt-score__value[data-grade="good"]                                { color: var(--rt-color-grade-good); }
.rt-score__value[data-grade="normal"]                              { color: var(--rt-color-grade-normal); }
.rt-score__value[data-grade="poor"], .rt-score__value[data-grade="hard"]         { color: var(--rt-color-warning); }
.rt-score__value[data-grade="bad"],  .rt-score__value[data-grade="very-hard"]    { color: var(--rt-color-danger); }

/* 14.2 评分圆（seo-text-diagnosis 专用 .score-circle） */
.rt-score__circle {
  width: 120px; height: 120px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700;
}
.rt-score__circle[data-grade="excellent"] { background: var(--rt-color-success-bg);   color: var(--rt-color-success); }
.rt-score__circle[data-grade="good"]      { background: var(--rt-color-grade-good-bg); color: var(--rt-color-grade-good); }
.rt-score__circle[data-grade="normal"]    { background: var(--rt-color-grade-normal-bg); color: var(--rt-color-grade-normal); }
.rt-score__circle[data-grade="poor"]      { background: var(--rt-color-warning-bg);   color: var(--rt-color-warning-text); }
.rt-score__circle[data-grade="bad"]       { background: var(--rt-color-danger-bg);     color: var(--rt-color-danger); }

/* -----------------------------------------------------------------------------
 * 15. rt-table — 表格  (9/76 页)
 * -------------------------------------------------------------------------- */
.rt-table-wrap { overflow-x: auto; margin-bottom: var(--rt-space-6); }
.rt-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--rt-color-surface); border-radius: var(--rt-radius-lg); overflow: hidden; box-shadow: var(--rt-shadow-card-soft); }
.rt-table th, .rt-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--rt-color-divider); }
.rt-table th { background: var(--rt-color-surface-blue-50); color: var(--rt-color-primary-strong); font-weight: 600; font-size: 13px; }
.rt-table tr:last-child td { border-bottom: none; }

/* -----------------------------------------------------------------------------
 * 16. rt-faq — 常见问题  (73/76 页：.faq-section，列表型)
 * -------------------------------------------------------------------------- */
.rt-faq { background: var(--rt-color-surface); border-radius: var(--rt-radius-lg); padding: var(--rt-space-6); margin-bottom: var(--rt-space-6); box-shadow: var(--rt-shadow-card); }
.rt-faq__title { font-size: 20px; margin-bottom: var(--rt-space-4); color: var(--rt-color-text); }
.rt-faq__item { margin-bottom: var(--rt-space-4); }
.rt-faq__item:last-child { margin-bottom: 0; }
.rt-faq__q { font-weight: 600; color: var(--rt-color-text); margin-bottom: var(--rt-space-1); }
.rt-faq__a { color: var(--rt-color-text-secondary); font-size: 14px; }

/* -----------------------------------------------------------------------------
 * 移动端：全站统一 600px 断点
 * -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .rt-section, .rt-related, .rt-faq { padding: var(--rt-space-4); }
  .rt-btn { width: 100%; }
  .rt-tabs { gap: 0; }
  .rt-tab { padding: 10px 14px; font-size: 14px; }
}

/* =============================================================================
 * 17. 嵌套 / 分级兼容规则（接入存量页面用）
 * -----------------------------------------------------------------------------
 * 存量页面把 class 属性改为 rt- 前缀后，以下规则保证「容器内部元素」视觉
 * 与旧版一致：section/related/faq 的 h2/h3/ul/li/dl/dt/dd、result 子项与
 * .price/highlight 行、result-grid 布局、alert 内部、detail 标题、radio label、
 * 以及移动端 result-grid 单列。全部取自原页面/legacy 的真实声明，仅换 token。
 * ========================================================================== */

/* 17.1 容器内部排版（section / related / faq） */
.rt-section h2, .rt-related h2, .rt-faq h2 { font-size: 20px; margin-bottom: var(--rt-space-4); color: var(--rt-color-text); }
.rt-section h3 { font-size: 16px; margin: 16px 0 8px; color: var(--rt-color-text); }
.rt-section ul { margin-left: 20px; margin-bottom: var(--rt-space-4); }
.rt-section li { margin-bottom: var(--rt-space-2); }
.rt-section p { margin-bottom: var(--rt-space-4); }
.rt-faq dl { margin: 0; }
.rt-faq dt { font-weight: 600; color: var(--rt-color-text); margin-top: var(--rt-space-4); }
.rt-faq dd { margin-left: 0; color: var(--rt-color-text-secondary); padding-left: 20px; }

/* 17.2 结果区内部（result / result-item / calculator-result 兼容） */
.rt-result h2 { font-size: 18px; margin-bottom: var(--rt-space-3); color: var(--rt-color-text); }
.rt-result p { margin-bottom: var(--rt-space-2); }
.rt-result ul { list-style: none; margin-top: var(--rt-space-4); }
.rt-result li { margin-bottom: var(--rt-space-2); padding: var(--rt-space-2); background: var(--rt-color-surface); border-radius: var(--rt-radius-sm); }
.rt-result textarea { background: var(--rt-color-surface); }
.rt-result .price { font-size: 18px; font-weight: 700; color: var(--rt-color-primary); }
.rt-result__row.highlight { grid-column: 1 / -1; background: var(--rt-color-surface-blue-50); }
.rt-result__row.highlight .rt-result__value { color: var(--rt-color-danger); font-size: 36px; }

/* 17.3 结果网格布局（.result-grid 兼容） */
.rt-result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: var(--rt-space-4); }

/* 17.4 提示框内部（info-box 兼容） */
.rt-alert h3 { font-size: 16px; margin-bottom: var(--rt-space-2); color: var(--rt-color-warning-text); }
.rt-alert p { color: var(--rt-color-text-secondary); font-size: 14px; line-height: 1.8; }
.rt-alert ul { margin: 8px 0 0 20px; color: var(--rt-color-text-secondary); font-size: 14px; }
.rt-alert li { margin-bottom: var(--rt-space-1); }

/* 17.5 明细标题（detail-section 兼容） */
.rt-detail h3 { font-size: 16px; margin-bottom: var(--rt-space-3); color: var(--rt-color-text); }

/* 17.6 单选组内部（radio-group 兼容） */
.rt-radio-group label { display: inline-flex; align-items: center; gap: var(--rt-space-1); cursor: pointer; font-weight: 400; margin-bottom: 0; font-size: 15px; }
.rt-radio-group input { accent-color: var(--rt-color-primary); width: 16px; height: 16px; }

/* 17.7 移动端：结果网格单列 */
@media (max-width: 600px) {
  .rt-result-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
 * 18. BASE LAYER — 基础层（原 rt-legacy.css 的「必需规则」并入，legacy 已删除）
 * -----------------------------------------------------------------------------
 * 覆盖各页裸标签 input/textarea/select/button/label（页面大量裸用，无组件类），
 * 以及通用工具类与表格占位。全部使用 var(--rt-*)，与组件同源。
 * ========================================================================== */
input, textarea, select {
  width: 100%; padding: 12px;
  border: 1px solid var(--rt-color-border-strong); border-radius: var(--rt-radius-sm);
  font-size: 16px; font-family: inherit; line-height: 1.5;
  background: var(--rt-color-surface); color: var(--rt-color-text);
  box-sizing: border-box;
  transition: border-color var(--rt-duration-fast), box-shadow var(--rt-duration-fast);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--rt-color-primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, .15);
}
input::placeholder, textarea::placeholder { color: var(--rt-color-neutral-500); }
textarea { min-height: 150px; resize: vertical; }
select { cursor: pointer; }

button {
  background: var(--rt-color-primary); color: #fff; border: none;
  padding: 12px 24px; border-radius: var(--rt-radius-sm); font-size: 16px;
  font-family: inherit; line-height: 1.4; cursor: pointer;
  transition: background var(--rt-duration-fast), transform var(--rt-duration-fast);
}
button:hover { background: var(--rt-color-primary-hover); }
button:active { transform: scale(.98); }

label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: var(--rt-color-text); }

/* 18.1 通用工具类（来自 base.html，原名保留以维持 HTML 兼容） */
.description { color: var(--rt-color-text-secondary); margin-bottom: var(--rt-space-6); font-size: 14px; }
.ad { margin-top: var(--rt-space-6); padding: var(--rt-space-4); background: #fafafa; border-radius: var(--rt-radius-sm); text-align: center; min-height: 100px; display: flex; align-items: center; justify-content: center; color: var(--rt-color-text-tertiary); font-size: 12px; }
.empty { color: var(--rt-color-text-tertiary); text-align: center; padding: 32px; }

/* 18.2 表格：仅对显式 .rt-table 生效（裸 <table> 保持原样，避免破坏既有布局） */
.rt-table, .rt-table-wrap { box-sizing: border-box; }