/* 第 9 轮：按竞品实测定稿的密度、稳定的首页引用行与确认卡参数浮层。 */
:root[data-g20271-chulian] {
  --text-md: 14px;
  --body-line: 22px;
  --secondary-line: 18px;
  --button-line: 20px;
  --button-small-line: 18px;
  --page-title-size: 24px;
  --page-title-line: 32px;
  --home-title-size: 28px;
  --home-title-line: 36px;

  --btn-h-sm: 28px;
  --btn-h-md: 32px;
  --btn-h-lg: 36px;
  --input-h-sm: 28px;
  --input-h-md: 32px;
  --input-h-lg: 36px;
  --seg-h: 28px;
  --tab-h: 34px;
  --nav-icon-size: 18px;
  --button-icon-size: 16px;
  --icon-btn-sm: 28px;
  --icon-btn-md: 32px;
  --icon-btn-lg: 36px;

  --topbar-h: 52px;
  --rail-w: 64px;
  --rail-item-h: 44px;
  --card-copy-pad: 12px;
  --panel-pad: 16px;
  --card-radius: 12px;
  --grid-gap: 12px;
  --home-card-w: 224px;
  --project-card-w: 208px;
  --resource-card-w: 176px;
  --media-card-h: 176px;
  --card-copy-h: 64px;
  --card-media-h: 110px;
  --list-row-h: 48px;
  --list-row-gap: 2px;
  --list-row-pad-y: 4px;
  --home-content-max: 1120px;
  --home-content-min-h: 544px;
  --home-composer-max: 960px;
  --composer-collapsed-h: 56px;
  --section-gap: 24px;
  --section-gap-large: 32px;
  --params-popover-w: 400px;
}

body { font-size: var(--text-md); line-height: var(--body-line); }
button, input, textarea { line-height: var(--body-line); }
button { min-width: 28px; min-height: 28px; }

/* 外壳与导航 */
.brand-mark svg { width: 22px; height: 22px; }
.brand-word { font-size: 16px; }
.topbar-title { font-size: var(--text-md); line-height: var(--body-line); }
.credit-pill { height: var(--btn-h-md); line-height: var(--button-line); }
.rail { gap: var(--list-row-gap); padding: var(--s2) var(--s1); }
.rail-item {
  height: var(--rail-item-h);
  min-height: var(--rail-item-h);
  gap: 2px;
  padding: 2px;
  border-radius: var(--card-radius);
  line-height: var(--secondary-line);
}
.rail-item svg { width: var(--nav-icon-size); height: var(--nav-icon-size); }

/* 三档控件；多行输入器和主控外框另行计算。 */
.btn {
  min-height: var(--btn-h-md);
  height: var(--btn-h-md);
  padding-inline: var(--s3);
  font-size: var(--text-sm);
  line-height: var(--button-line);
}
.btn.small {
  min-height: var(--btn-h-sm);
  height: var(--btn-h-sm);
  font-size: var(--text-xs);
  line-height: var(--button-small-line);
}
.btn.primary, .btn.spend, .guide-next, .r7-oneclick-submit {
  min-height: var(--btn-h-lg);
  height: var(--btn-h-lg);
  line-height: var(--button-line);
}
.btn svg, .tool-btn svg, .icon-btn svg, .send-button svg, .choice svg,
.r7-menu-links svg, .card-more svg, .new-project-plus svg, .new-asset-plus svg {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
}
.icon-btn { width: var(--icon-btn-md); height: var(--icon-btn-md); }
.icon-btn.small { width: var(--icon-btn-sm); height: var(--icon-btn-sm); }
.send-button { width: var(--icon-btn-lg); height: var(--icon-btn-lg); }
.card-more { width: var(--icon-btn-sm); height: var(--icon-btn-sm); }
.new-project-plus, .new-asset-plus { width: var(--icon-btn-lg); height: var(--icon-btn-lg); }
.tool-btn {
  height: var(--btn-h-md);
  min-height: var(--btn-h-md);
  font-size: var(--text-sm);
  line-height: var(--button-line);
}
.choice, .history-filter {
  min-height: var(--btn-h-sm);
  height: var(--btn-h-sm);
  font-size: var(--text-xs);
  line-height: var(--button-small-line);
}
.search-field { height: var(--input-h-md); }
.search-field input { font-size: var(--text-sm); line-height: var(--button-line); }
.r7-search { height: var(--input-h-lg); }
.r7-search input { font-size: var(--text-md); line-height: var(--body-line); }
.r7-field input, .r7-suffix { height: var(--input-h-lg); }
.r7-suffix input { height: calc(var(--input-h-lg) - 2px); }
.r7-budget-row input { height: var(--input-h-md); }
.r7-spec-btn { min-height: var(--input-h-md); height: var(--input-h-md); }
.seg > button {
  min-height: var(--seg-h);
  height: var(--seg-h);
  font-size: var(--text-sm);
  line-height: var(--button-line);
}
.home-tabs > button { min-height: var(--tab-h); height: var(--tab-h); }
.r7-script-source-tabs { height: var(--btn-h-lg); }
.r7-script-source-tabs button { height: var(--btn-h-lg); font-size: var(--text-md); line-height: var(--body-line); }
.r7-novel-reading-tabs > button { height: var(--btn-h-md); min-height: var(--btn-h-md); }

/* 标题、次要文字与页面区块 */
.r7-home { padding-top: var(--section-gap-large); }
.r7-home .home-content { min-height: var(--home-content-min-h); }
.r7-home .home-hero h1 { margin-bottom: var(--s4); }
.r7-home .home-tabs { margin: 0 auto; }
.r7-home .home-composer-zone { margin-top: var(--section-gap); }
.r7-page { padding: var(--section-gap) var(--section-gap) var(--s12); }
.r7-page.r7-library-page { max-width: none; margin: 0; }
.r7-page-head { margin-bottom: var(--section-gap); }
.r7-page-head h1, .project-content-head h1 {
  font-size: var(--page-title-size);
  line-height: var(--page-title-line);
}
.r7-library-layout { gap: var(--section-gap); }
.r7-settings-layout { gap: var(--section-gap-large); }
.r7-recent, .home-recent { margin-top: var(--section-gap); }
.r7-recharge-card, .r7-ledger { margin-top: var(--section-gap); }
.project-content-head { margin-bottom: var(--section-gap); }
.project-content-head p { line-height: var(--secondary-line); }
.chat-content { gap: var(--section-gap); padding: var(--section-gap); }
.section-head h2 { line-height: var(--body-line); }
.section-head .section-meta, .text-button, .history-count,
.r7-project-copy > span, .r7-resource-copy > span, .r7-cover-empty small,
.r7-settings-foot, .r7-credit-hero span, .r7-credit-hero small,
.r7-credit-note, .r7-amount span, .r7-flow-note, .r7-card-kicker,
.r7-budget-row, .r7-flow-lead, .r7-field, .r7-mode-foot,
.r7-script-loaded, .r7-script-upload-line, .creation-kind, .creation-meta,
.history-item-meta, .project-card-meta, .episode-project, .episode-state {
  line-height: var(--secondary-line);
}

/* 常规面板 16px 内边距；普通卡片 12px 圆角。 */
.confirmation-card, .r7-setting-card, .r7-credit-hero, .r7-recharge-card,
.r7-ledger, .r7-oneclick-panel, .r7-script-source-card, .r7-flow-body {
  padding: var(--panel-pad);
}
.r7-flow-head, .r7-flow-progress, .r7-flow-foot { padding-inline: var(--panel-pad); }
.r7-flow-head { min-height: 64px; padding-block: var(--panel-pad); }
.r7-flow-progress { padding-top: var(--panel-pad); }
.r7-flow-foot { min-height: 64px; padding-block: var(--s3); }
.creation-card, .project-card, .project-home-card, .episode-card, .asset-card,
.r7-project-card, .r7-resource-card, .r7-setting-card, .r7-credit-hero,
.r7-recharge-card, .r7-ledger, .confirmation-card, .result-card, .steps-card,
.r7-script-source-card, .r7-script-result-card, .r7-novel-text-card,
.r7-flow-source, .r7-mode-card, .r7-style-card, .recent-episodes {
  border-radius: var(--card-radius);
}
.r7-avatar-menu { border-radius: var(--r-panel); }
.r7-avatar-menu .r7-recharge { height: var(--btn-h-sm); min-height: var(--btn-h-sm); font-size: var(--text-xs); line-height: var(--secondary-line); }

/* 固定宽度轨道自动增减；网格容器使用全部可用内容宽度。 */
.recent-creations {
  grid-template-columns: repeat(auto-fill, var(--home-card-w));
  gap: var(--grid-gap);
}
.r7-project-grid {
  grid-template-columns: repeat(auto-fill, var(--project-card-w));
  gap: var(--grid-gap);
}
.r7-resource-grid {
  grid-template-columns: repeat(auto-fill, var(--resource-card-w));
  gap: var(--grid-gap);
}
.r7-home .quick-cards {
  grid-template-columns: repeat(auto-fill, var(--project-card-w));
  gap: var(--grid-gap);
}
.r7-home .home-card-wrap { margin-top: var(--section-gap); }

/* 176px 媒体卡：110px 完整封面 + 64px 两行文字 + 2px 边框。 */
.creation-card, .r7-project-card, .r7-resource-card, .project-home-card {
  height: var(--media-card-h);
  border-radius: var(--card-radius);
}
.r7-project-card, .r7-resource-card { display: flex; flex-direction: column; }
.creation-art, .r7-project-cover, .r7-resource-cover, .project-home-cover {
  display: block;
  flex: none;
  width: 100%;
  height: var(--card-media-h);
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--surface-2);
}
.creation-art > svg, .r7-project-cover > svg, .r7-resource-cover > svg,
.project-home-cover > svg {
  width: 100%;
  height: 100%;
}
.creation-copy, .r7-project-copy, .r7-resource-copy, .project-home-copy {
  display: block;
  flex: none;
  min-width: 0;
  height: var(--card-copy-h);
  padding: var(--card-copy-pad);
  overflow: hidden;
}
.creation-card .creation-art + .creation-copy { padding: var(--card-copy-pad); }
.creation-card .creation-copy > strong, .r7-project-copy > div,
.r7-resource-copy > strong, .project-home-copy > strong {
  height: var(--body-line);
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--body-line);
  font-weight: 550;
}
.creation-card .creation-copy > strong, .r7-resource-copy > strong,
.project-home-copy > strong, .r7-project-copy > div > strong {
  display: block;
  min-width: 0;
  padding-inline: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creation-kind, .r7-project-copy > span, .r7-resource-copy > span,
.project-home-copy > span {
  display: block;
  height: var(--secondary-line);
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--secondary-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r7-project-copy > div { display: flex; align-items: center; gap: var(--s2); }
.r7-project-copy > div > strong { flex: 1; }
.r7-mode-chip { padding-block: 0; line-height: var(--secondary-line); }
.text-cover { padding: var(--card-copy-pad); }
.text-cover::after { background-size: auto var(--body-line); }
.text-cover > strong { margin-top: var(--s1); font-size: 20px; line-height: 26px; }
.text-cover > p { margin-top: var(--s1); font-size: var(--text-xs); line-height: var(--secondary-line); }

/* 双行列表：48px 行高、2px 行距、4px 纵向内边距。 */
.history-item {
  height: var(--list-row-h);
  min-height: var(--list-row-h);
  margin: 0 0 var(--list-row-gap);
  padding: var(--list-row-pad-y) var(--s2);
  align-items: center;
}
.history-group .history-item:last-child { margin-bottom: 0; }
.history-item-title { font-size: var(--text-md); line-height: var(--body-line); }
.history-item-meta { margin-top: 0; font-size: var(--text-xs); line-height: var(--secondary-line); }
.history-group h3 { margin-top: var(--s2); line-height: var(--secondary-line); }
.recent-episode {
  min-height: var(--list-row-h);
  height: var(--list-row-h);
  padding-block: var(--list-row-pad-y);
}

/* 首页输入器：收起仍为 56px；引用行固定在框内上沿，不覆盖页签。 */
.r7-home .home-composer-wrap { width: 100%; max-width: var(--home-composer-max); margin-inline: auto; }
.home-page .composer { max-width: var(--home-composer-max); }
.home-page .composer.is-collapsed {
  width: 100%;
  height: var(--composer-collapsed-h);
  min-height: var(--composer-collapsed-h);
  max-height: var(--composer-collapsed-h);
}
.composer.is-collapsed {
  height: var(--composer-collapsed-h);
  min-height: var(--composer-collapsed-h);
  max-height: var(--composer-collapsed-h);
}
.home-page .composer:not(.is-collapsed) {
  height: var(--composer-min-h);
  min-height: var(--composer-min-h);
  max-height: var(--composer-min-h);
  padding: 44px var(--s4) var(--s2);
}
.home-page .composer-main { min-height: 28px; }
.home-page .composer textarea { min-height: var(--body-line); line-height: var(--body-line); }
.home-page .composer-toolbar { min-height: var(--btn-h-md); padding-top: var(--s1); }
.home-hero { position: relative; z-index: 13; }
.home-page .composer-attachments {
  top: 6px;
  bottom: auto;
  left: var(--s3);
  right: var(--s3);
  max-height: 32px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.attachment-chip { flex: none; padding: 0 4px 0 var(--s2); line-height: var(--secondary-line); }
.attachment-chip button, .selection-summary button,
.composer-ref-thumb button, .param-ref-item .ref-remove {
  width: var(--icon-btn-sm);
  height: var(--icon-btn-sm);
  min-width: var(--icon-btn-sm);
  min-height: var(--icon-btn-sm);
}
.skill-suggestions-list { padding-top: var(--s3); }
.skill-pill { min-height: var(--btn-h-sm); height: var(--btn-h-sm); line-height: var(--secondary-line); }

/* 确认卡摘要一行；参数在独立顶层浮层内更新。 */
.quote-row { gap: var(--s3); line-height: var(--body-line); }
.quote-row > span { flex: none; }
.quote-row strong { min-width: 0; }
.quote-row .quote-param-summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.confirmation-actions { margin-top: var(--s4); }
#confirmation-params-root { position: fixed; inset: 0; z-index: 10005; pointer-events: none; }
.r9-params-popover {
  display: flex;
  flex-direction: column;
  width: min(var(--params-popover-w), calc(100vw - 24px));
  height: min(620px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-panel);
  pointer-events: auto;
}
.r9-params-popover .params-header { flex: none; min-height: 48px; padding: 0 var(--panel-pad); }
.r9-params-popover .params-header h2 { font-size: var(--text-md); line-height: var(--body-line); }
.r9-params-popover .params-scroll {
  flex: 1;
  min-height: 0;
  display: block;
  overflow-y: auto;
  padding: 0 var(--panel-pad);
  scrollbar-gutter: stable;
}
.r9-params-popover .param-section { padding-block: var(--panel-pad); }
.r9-params-popover .params-footer { flex: none; padding: var(--panel-pad); }
.r9-params-popover .params-footer .btn { display: none; }
.r9-params-popover .params-quote { margin: 0; }
.r9-params-popover[hidden] { display: none !important; }

@media (max-width: 1100px) {
  .r7-page { padding-inline: var(--section-gap); }
}

@media (max-width: 700px) {
  :root[data-g20271-chulian] { --home-title-size: 30px; --home-title-line: 38px; }
  .r7-page { padding: var(--section-gap) var(--s4) var(--s12); }
  .recent-creations, .r7-project-grid, .r7-resource-grid, .r7-home .quick-cards {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .home-page .composer:not(.is-collapsed) { padding-inline: var(--s3); }
  .r9-params-popover { width: calc(100vw - 24px); }
}