/*
 * 鸿途内容工厂 · UI theme
 *
 * This file owns visual decisions only. Existing files retain workflow state,
 * API behavior and component visibility rules, keeping the redesign isolated.
 */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  --font-sans: ui-sans-serif, "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;

  --ink: #333934;
  --ink-soft: #59625b;
  --muted: #757b76;
  --paper: #faf7f1;
  --surface: #ffffff;
  --surface-soft: #f3efe8;
  --surface-strong: #e9e3da;
  --line: #e5ded4;
  --line-strong: #cfc5b8;
  --accent: #b65a3e;
  --accent-dark: #91432f;
  --accent-soft: #fae9e2;
  --success: #35654a;
  --success-soft: #e5f0e8;
  --warning: #8a5a16;
  --warning-soft: #f7edd9;
  --danger: #9b3f3f;
  --danger-soft: #f7e8e6;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(52, 43, 33, .06), 0 8px 24px rgba(52, 43, 33, .04);
  --shadow-lg: 0 22px 64px rgba(52, 43, 33, .14);
  --focus-ring: 0 0 0 3px rgba(169, 71, 45, .2);
  --z-nav: 30;
  --z-action: 24;
  --z-modal: 100;
}

/* 2. Base --------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% -8%, rgba(182, 90, 62, .06), transparent 26rem),
    linear-gradient(180deg, #fffdf9 0, var(--paper) 34rem, #f6f2eb 100%);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(44, 48, 43, .14) .45px, transparent .45px);
  background-size: 5px 5px;
  content: "";
  opacity: .14;
  pointer-events: none;
}

::selection {
  color: var(--surface);
  background: var(--accent);
}

.page {
  min-height: 100dvh;
  padding: 34px 24px 80px;
}

.shell {
  width: min(1320px, 100%);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--z-modal) + 1);
  padding: 10px 14px;
  color: #fff;
  background: var(--ink);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.hidden {
  display: none !important;
}

.workbench-page {
  min-height: auto;
}

/* 3. Brand header and primary navigation ------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin: 0 0 24px;
  padding: 4px 0 18px 22px;
  border-bottom: 1px solid var(--line);
}

.hero::before {
  position: absolute;
  inset: 3px auto 19px 0;
  width: 5px;
  background: var(--accent);
  content: "";
}

.hero h1 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.14;
  text-wrap: balance;
}

.hero p {
  max-width: 34em;
  margin: 0 0 4px;
  color: var(--ink-soft);
  font-size: 14px;
  text-align: right;
}

.eyebrow {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.workbench-nav {
  position: sticky;
  top: 12px;
  z-index: var(--z-nav);
  gap: 4px;
  margin: 0;
  padding: 6px;
  overflow-x: auto;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(76, 62, 48, .09);
  backdrop-filter: blur(14px);
}

.workbench-nav a {
  min-height: 46px;
  padding: 0 14px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.workbench-nav a::before {
  margin-right: 7px;
  color: #a49d93;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.workbench-nav a[data-page-link="input"]::before { content: "01"; }
.workbench-nav a[data-page-link="strategy"]::before { content: "02"; }
.workbench-nav a[data-page-link="gate1"]::before { content: "03"; }
.workbench-nav a[data-page-link="kimi"]::before { content: "04"; }
.workbench-nav a[data-page-link="gate2"]::before { content: "05"; }
.workbench-nav a[data-page-link="final"]::before { content: "06"; }
.workbench-nav a[data-page-link="history"]::before { content: "07"; }

.workbench-nav a:hover {
  color: var(--ink);
  background: var(--surface-soft);
  box-shadow: none;
  transform: none;
}

.workbench-nav a.active,
.workbench-nav a.nav-current {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #efd1c6;
  box-shadow: none;
}

.workbench-nav a.active::before,
.workbench-nav a.nav-current::before {
  color: var(--accent);
}

.workbench-nav a.nav-locked,
.workflow-item.nav-locked,
.page-actions a.nav-locked {
  color: #606862;
  background: #fbfaf7;
  opacity: 1;
  cursor: not-allowed;
}

.workbench-nav a.nav-locked::before {
  color: #737a75;
}

.workflow-item.nav-locked b,
.workflow-item.nav-locked small {
  color: #606862;
}

.cloud-sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 2px 14px;
  padding: 6px 2px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
}

.cloud-sync-status::before {
  width: 7px;
  height: 7px;
  background: var(--warning);
  border-radius: 50%;
  content: "";
}

.cloud-sync-status.synced {
  color: var(--success);
  background: transparent;
  border: 0;
}

.cloud-sync-status.synced::before {
  background: var(--success);
}

/* 4. Workflow ----------------------------------------------------------- */
.workflow-panel {
  position: relative;
  display: grid;
  grid-template-columns: 108px repeat(6, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  margin: 0 0 24px;
  padding: 0;
  overflow-x: auto;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.workflow-title {
  margin: 0;
  padding: 14px 16px;
  color: var(--ink);
  border-right: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.35;
}

.workflow-item {
  position: relative;
  min-width: 138px;
  padding: 12px 10px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
}

.workflow-item:last-child {
  border-right: 0;
}

.workflow-item span {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  color: var(--ink-soft);
  background: var(--surface-strong);
  border-radius: 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.workflow-item b {
  font-size: 12px;
  font-weight: 650;
}

.workflow-item small {
  color: var(--muted);
  font-size: 11px;
}

.workflow-item.current,
.workflow-item.active {
  z-index: 1;
  background: var(--accent-soft);
  outline: 0;
  transform: none;
}

.workflow-item.current::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 3px;
  background: var(--accent);
  content: "";
}

.workflow-item.current span,
.workflow-item.active span {
  color: #fff;
  background: var(--accent);
}

.workflow-item.current small,
.workflow-item.active small {
  color: var(--ink-soft);
}

.workflow-item.done {
  background: transparent;
  border-color: var(--line);
}

.workflow-item.done span {
  color: #fff;
  background: var(--success);
}

/* 5. Shared surfaces, forms and actions -------------------------------- */
.card,
.history-sidebar,
.history-main {
  color: var(--ink);
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card {
  margin-top: 0;
  padding: clamp(20px, 2.5vw, 32px);
}

.card-title {
  margin: 0 0 18px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.section-head {
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.section-head .card-title {
  margin-bottom: 0;
}

label {
  margin: 18px 0 7px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
}

input,
textarea,
select {
  min-height: 46px;
  color: var(--ink);
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea {
  min-height: 120px;
}

input:hover,
textarea:hover,
select:hover {
  border-color: #9e9384;
}

input:focus,
textarea:focus,
select:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

input:disabled,
textarea:disabled,
select:disabled {
  color: var(--ink-soft);
  background: #eeeae2;
  border-color: var(--line);
}

button,
.route-button {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 650;
  touch-action: manipulation;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

button:hover,
.route-button:hover {
  transform: none;
}

button:active,
.route-button:active,
.page-actions a.nav-press {
  opacity: .82;
  transform: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.primary,
a.route-button.primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.primary:hover,
a.route-button.primary:hover {
  background: var(--accent-dark);
}

.secondary {
  color: #405047;
  background: #e5ece6;
  border: 1px solid #d3dfd5;
}

.secondary:hover {
  color: #33423a;
  background: #d9e4db;
}

.ghost,
a.route-button.ghost {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line);
}

.ghost:hover,
a.route-button.ghost:hover {
  background: var(--surface-strong);
}

.danger-ghost {
  color: var(--danger);
  background: transparent;
  border: 1px solid #dfbebb;
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

.notice {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  line-height: 1.55;
}

.notice.info {
  color: #47554b;
  background: #edf0ea;
  border-color: #d9dfd5;
}

.notice.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: #c7ddce;
}

.notice.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: #e4c0bc;
}

.progress-pill,
.status-badge,
.history-chip,
.history-tag,
.article-schedule-chip {
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.progress-pill {
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

/* 6. Input page --------------------------------------------------------- */
body.page-input #inputSection {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, .75fr);
  gap: 24px;
  min-height: 0;
}

/* Input page layout: each card owns a distinct grid area.
   Keep recent projects and the project form stacked in the main column;
   the API card stays in the side column. This avoids multiple cards sharing
   grid-row: 1 and visually overlapping. */
body.page-input #inputSection > .recent-projects-card {
  grid-column: 1;
  grid-row: 1;
}

body.page-input #inputSection > .card:not(.api-card):not(.recent-projects-card) {
  grid-column: 1;
  grid-row: 2;
}

body.page-input #inputSection > .api-card {
  position: sticky;
  top: 84px;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  padding: 22px;
  background: rgba(245, 241, 234, .92);
  box-shadow: none;
}

.api-card .card-title {
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
}

body.page-input .api-card .inline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.page-input .api-card .inline-row input {
  grid-column: 1 / -1;
  min-width: 0;
}

body.page-input .api-card .danger-ghost {
  grid-column: 1 / -1;
}

body.page-input #material {
  min-height: 240px;
}

body.page-input #analyzeBtn {
  min-width: 220px;
}

.article-count-control {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 16px 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.article-count-meta b {
  min-width: 64px;
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  min-height: 28px;
  accent-color: var(--accent);
}

/* 7. Strategy overview and Gate 1 -------------------------------------- */
.summary-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.summary-grid > div {
  grid-column: span 3;
  min-height: 100px;
  padding: 14px;
  background: var(--surface-soft);
  border: 0;
  border-radius: var(--radius-md);
}

.summary-grid > div:nth-child(1),
.summary-grid > div:nth-child(2) {
  grid-column: span 6;
}

.summary-grid > .publish-window-summary,
.summary-grid > .strategy-review-summary {
  grid-column: 1 / -1;
  min-height: 0;
}

.summary-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
}

.summary-grid strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.publish-window-days {
  gap: 6px;
}

.publish-day {
  border-radius: var(--radius-sm);
}

.strategy-day-tabs {
  top: 80px;
  margin: 16px 0;
  padding: 7px;
  background: rgba(235, 230, 220, .9);
  border-color: var(--line);
  border-radius: 12px;
}

.strategy-day-tab {
  min-height: 54px;
  color: var(--ink);
  background: rgba(255, 253, 248, .76);
  border-color: transparent;
  border-radius: 8px;
  box-shadow: none;
}

.strategy-day-tab.active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #e9c6b9;
}

.strategy-day-tab.approved:not(.active) {
  color: var(--success);
  background: var(--success-soft);
  border-color: #c7ddce;
}

.day-list {
  gap: 18px;
}

.day-card {
  padding: clamp(18px, 2.4vw, 28px);
  background: rgba(255, 255, 255, .72);
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.day-card-head {
  margin: -4px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.day-card-head b {
  font-family: var(--font-display);
  font-size: 19px;
}

.strategy-editor-grid,
.editor-grid {
  gap: 2px 16px;
}

.day-review-area,
.review-panel {
  margin-top: 22px;
  padding: 18px;
  background: var(--surface-soft);
  border: 0;
  border-radius: var(--radius-md);
}

body.page-gate1 #strategySection.route-page-active {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 0 22px;
}

body.page-gate1 #strategySection > .section-head,
body.page-gate1 #strategySection > .summary-grid,
body.page-gate1 #strategySection > .ai-collab-panel,
body.page-gate1 #strategySection > .notice {
  grid-column: 1 / -1;
}

body.page-gate1 #strategySection > .strategy-day-tabs {
  position: sticky;
  top: 78px;
  grid-column: 1;
  flex-direction: column;
  align-self: start;
  max-height: calc(100dvh - 104px);
  margin: 0;
  overflow-y: auto;
}

body.page-gate1 #strategySection > .strategy-day-tabs .strategy-day-tab {
  width: 100%;
  min-width: 0;
}

body.page-gate1 #strategySection > #strategyDays {
  grid-column: 2;
  min-width: 0;
}

.gate1-focus-bar {
  flex-direction: column;
  align-items: stretch;
}

/* 8. AI collaboration and content editor ------------------------------- */
.ai-collab-panel {
  padding: 18px;
  background: #eee8dd;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.collab-head {
  align-items: center;
}

.collab-head > b {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 17px;
}

.collab-stages {
  gap: 6px;
}

.collab-stage {
  min-width: 112px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.collab-stage b,
.collab-stage small {
  color: inherit;
}

.collab-stage.done {
  color: var(--success);
  background: var(--success-soft);
  border-color: #c8ddcf;
}

.collab-stage.warn {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: #e5d1a9;
}

.collab-stage.skip,
.collab-stage.pending {
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .46);
  opacity: 1;
}

.collab-details > summary {
  color: var(--accent-dark);
  font-weight: 650;
}

.collab-grid {
  gap: 10px;
}

.collab-grid section {
  background: rgba(255, 253, 248, .7);
  border-color: var(--line);
  border-radius: var(--radius-sm);
}

.content-toolbar {
  margin: 2px 0 14px;
  padding: 12px 0;
  border-color: var(--line);
}

.day-tabs {
  gap: 6px;
  scrollbar-width: none;
}

.day-tabs::-webkit-scrollbar {
  display: none;
}

.day-tab {
  min-height: 58px;
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.day-tab.active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #e9c6b9;
}

.day-tab.approved:not(.active) {
  color: var(--success);
  background: var(--success-soft);
}

.generation-progress,
.model-progress {
  background: var(--surface-soft);
  border-color: var(--line);
  border-radius: var(--radius-md);
}

.generation-progress-track {
  height: 7px;
  background: var(--surface-strong);
}

.generation-progress-bar,
.deepseek-progress .generation-progress-bar {
  background: var(--accent);
}

.empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, .34);
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
}

#contentEditor:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, .75fr);
  gap: 18px 22px;
  align-items: start;
}

#contentEditor > .strategy-sync-banner,
#contentEditor > .meta-line {
  grid-column: 1 / -1;
}

#contentEditor > .editor-grid {
  grid-column: 1;
  grid-row: 3 / span 2;
}

#contentEditor > .ai-collab-panel {
  grid-column: 2;
  grid-row: 3;
}

#contentEditor > .review-panel {
  position: sticky;
  top: 84px;
  grid-column: 2;
  grid-row: 4;
  margin-top: 0;
}

#contentBody {
  min-height: 480px;
  line-height: 1.8;
}

/* Page 4 is a reading-first workspace. Keep its information in one clear
 * vertical flow instead of compressing the AI trace into a narrow side rail. */
body.page-kimi #kimiSection {
  padding: clamp(22px, 2.7vw, 36px);
}

body.page-kimi #contentDayTabs {
  margin: 0 0 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

body.page-kimi .content-toolbar {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

body.page-kimi #contentEditor:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

body.page-kimi #contentEditor > * {
  grid-column: 1 !important;
  grid-row: auto !important;
}

body.page-kimi #contentEditor > .meta-line {
  margin: 0;
  padding: 10px 14px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.55;
}

body.page-kimi #contentEditor > .ai-collab-panel {
  margin: 0;
}

body.page-kimi .ai-collab-panel .collab-head {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

body.page-kimi .ai-collab-panel .collab-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

body.page-kimi .ai-collab-panel .collab-stage {
  min-width: 0;
}

body.page-kimi .ai-collab-panel .collab-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.page-kimi .ai-collab-panel .collab-grid section {
  padding: 16px;
}

body.page-kimi .editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.page-kimi .editor-grid > div {
  min-width: 0;
  padding: 16px;
  background: #fdfbf7;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

body.page-kimi .editor-grid > div:nth-child(-n + 4) {
  grid-column: 1 / -1;
}

body.page-kimi .editor-grid > div:nth-child(n + 5) {
  grid-column: auto;
}

body.page-kimi .editor-grid label {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 13px;
}

body.page-kimi #contentEditor input:disabled,
body.page-kimi #contentEditor textarea:disabled {
  color: #39443c;
  -webkit-text-fill-color: #39443c;
  background: #fff;
  border-color: #ddd6cc;
  opacity: 1;
  cursor: text;
}

body.page-kimi #contentTitle {
  min-height: 50px;
}

body.page-kimi #contentHook,
body.page-kimi #contentPainPoints {
  min-height: 132px;
}

body.page-kimi #contentBody {
  min-height: 440px;
  line-height: 1.85;
}

body.page-kimi #contentBusinessValue,
body.page-kimi #contentCta,
body.page-kimi #contentHashtags,
body.page-kimi #contentRiskFlags {
  min-height: 150px;
}

/* Gate 2 keeps the evidence full-width, then pairs the editable article with
 * one stable decision rail. This mirrors the actual review sequence. */
body.page-gate2 #kimiSection {
  padding: clamp(22px, 2.7vw, 36px);
}

body.page-gate2 #contentDayTabs {
  margin: 0 0 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

body.page-gate2 .content-toolbar {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

body.page-gate2 #contentEditor:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  gap: 18px 22px;
  align-items: start;
}

body.page-gate2 #contentEditor > .strategy-sync-banner,
body.page-gate2 #contentEditor > .meta-line,
body.page-gate2 #contentEditor > .ai-collab-panel {
  grid-column: 1 / -1;
  grid-row: auto;
}

body.page-gate2 #contentEditor > .meta-line {
  margin: 0;
  padding: 10px 14px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.55;
}

body.page-gate2 #contentEditor > .ai-collab-panel {
  margin: 0;
}

body.page-gate2 #contentEditor > .editor-grid {
  grid-column: 1;
  grid-row: auto;
}

body.page-gate2 #contentEditor > .review-panel {
  position: sticky;
  top: 84px;
  grid-column: 2;
  grid-row: auto;
  margin: 0;
  padding: 20px;
  background: #f6f2eb;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

body.page-gate2 .review-panel > label {
  margin-top: 0;
  color: var(--ink);
  font-size: 14px;
}

body.page-gate2 #contentFeedback {
  min-height: 170px;
  background: #fff;
}

body.page-gate2 .review-panel .button-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

body.page-gate2 .review-panel .button-row button {
  width: 100%;
}

body.page-gate2 .editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.page-gate2 .editor-grid > div {
  min-width: 0;
  padding: 16px;
  background: #fdfbf7;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

body.page-gate2 .editor-grid > div:nth-child(-n + 4) {
  grid-column: 1 / -1;
}

body.page-gate2 .editor-grid > div:nth-child(n + 5) {
  grid-column: auto;
}

body.page-gate2 .editor-grid label {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 13px;
}

body.page-gate2 #contentTitle {
  min-height: 50px;
}

body.page-gate2 #contentHook,
body.page-gate2 #contentPainPoints {
  min-height: 132px;
}

body.page-gate2 #contentBody {
  min-height: 440px;
  line-height: 1.85;
}

body.page-gate2 #contentBusinessValue,
body.page-gate2 #contentCta,
body.page-gate2 #contentHashtags,
body.page-gate2 #contentRiskFlags {
  min-height: 150px;
}

.strategy-sync-banner {
  background: var(--warning-soft);
  border-color: #dfc58e;
  border-radius: var(--radius-md);
}

.strategy-diff-panel {
  background: rgba(255, 255, 255, .5);
  border-color: #dfc58e;
}

/* 9. Contextual page action -------------------------------------------- */
.page-actions {
  position: sticky;
  bottom: 16px;
  z-index: var(--z-action);
  margin-top: 22px;
}

.page-action-card {
  min-height: 72px;
  padding: 12px 14px 12px 20px;
  color: var(--ink);
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 42px rgba(76, 62, 48, .12);
  backdrop-filter: blur(14px);
}

.page-action-card > b {
  font-family: var(--font-display);
  font-size: 17px;
}

.page-action-card .ghost {
  color: var(--ink-soft);
  background: var(--surface-soft);
  border-color: var(--line);
}

/* 10. History ----------------------------------------------------------- */
.history-shell {
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.history-sidebar,
.history-main {
  padding: 22px;
}

.history-sidebar {
  top: 84px;
  max-height: calc(100dvh - 108px);
}

.history-project,
.history-article {
  background: transparent;
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.history-project:hover,
.history-article:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  transform: none;
}

.history-project.active,
.history-article.active {
  background: var(--accent-soft);
  border-color: #d7a696;
}

.history-viewer,
.history-field {
  background: rgba(255, 255, 255, .52);
  border-color: var(--line);
  border-radius: var(--radius-md);
}

/* 11. Schedule modal ---------------------------------------------------- */
.schedule-modal {
  z-index: var(--z-modal);
}

.schedule-backdrop {
  background: rgba(26, 28, 25, .54);
  backdrop-filter: blur(5px);
}

.schedule-dialog {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.schedule-dialog-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.schedule-dialog-head b {
  font-family: var(--font-display);
  font-size: 24px;
}

.schedule-day {
  background: rgba(255, 253, 248, .7);
  border-color: var(--line);
  border-radius: var(--radius-md);
}

.schedule-day-head span {
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
}

.schedule-card {
  background: #fff;
  border-color: var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.schedule-card:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.schedule-dialog-foot {
  border-color: var(--line);
}

/* 12. Responsive behavior ---------------------------------------------- */
@media (max-width: 1080px) {
  .workflow-panel {
    grid-template-columns: 96px repeat(6, 138px);
  }

  .summary-grid > div {
    grid-column: span 4;
  }

  .summary-grid > div:nth-child(1),
  .summary-grid > div:nth-child(2) {
    grid-column: span 6;
  }

  #contentEditor:not(.hidden) {
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
  }

  body.page-kimi #contentEditor:not(.hidden) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-kimi .ai-collab-panel .collab-head {
    grid-template-columns: 1fr;
  }

  body.page-kimi .ai-collab-panel .collab-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .page {
    padding: 22px 14px 64px;
  }

  .hero {
    display: block;
    padding-left: 18px;
  }

  .hero p {
    margin-top: 8px;
    text-align: left;
  }

  .workbench-nav {
    top: 8px;
  }

  body.page-input #inputSection {
    grid-template-columns: 1fr;
  }

  body.page-input #inputSection > .card,
  body.page-input #inputSection > .api-card {
    position: static;
    grid-column: 1;
  }

  body.page-input #inputSection > .recent-projects-card {
    grid-row: 1;
  }

  body.page-input #inputSection > .card:not(.api-card):not(.recent-projects-card) {
    grid-row: 2;
  }

  body.page-input #inputSection > .api-card {
    grid-row: 3;
  }

  body.page-gate1 #strategySection.route-page-active {
    display: block;
  }

  body.page-gate1 #strategySection > .strategy-day-tabs {
    position: sticky;
    top: 68px;
    z-index: 14;
    flex-direction: row;
    max-height: none;
    margin: 14px 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body.page-gate1 #strategySection > .strategy-day-tabs .strategy-day-tab {
    width: auto;
    min-width: 124px;
  }

  #contentEditor:not(.hidden) {
    display: block;
  }

  #contentEditor > .ai-collab-panel,
  #contentEditor > .review-panel {
    position: static;
    margin-top: 18px;
  }

  body.page-gate2 #contentEditor:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-gate2 #contentEditor > .strategy-sync-banner,
  body.page-gate2 #contentEditor > .meta-line,
  body.page-gate2 #contentEditor > .ai-collab-panel,
  body.page-gate2 #contentEditor > .editor-grid,
  body.page-gate2 #contentEditor > .review-panel {
    position: static;
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }

  .history-shell {
    grid-template-columns: 1fr;
  }

  .history-sidebar {
    position: static;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .page {
    padding: 16px 10px 48px;
  }

  .hero {
    margin-bottom: 16px;
  }

  .hero h1 {
    font-size: 31px;
  }

  .hero p {
    font-size: 13px;
  }

  .workbench-nav a {
    min-height: 44px;
    padding: 0 12px;
  }

  .workbench-nav a::before {
    display: none;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }

  .workflow-panel {
    grid-template-columns: repeat(6, 132px);
  }

  .workflow-title {
    display: none;
  }

  .workflow-item:first-of-type {
    border-left: 0;
  }

  .card,
  .history-sidebar,
  .history-main {
    padding: 18px 14px;
    border-radius: 14px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .summary-grid > div,
  .summary-grid > div:nth-child(1),
  .summary-grid > div:nth-child(2),
  .summary-grid > .publish-window-summary,
  .summary-grid > .strategy-review-summary {
    grid-column: 1;
  }

  .article-count-control {
    grid-template-columns: 1fr;
  }

  .article-count-meta {
    justify-content: flex-start;
  }

  body.page-input #analyzeBtn {
    width: 100%;
  }

  body.page-input .api-card .inline-row {
    grid-template-columns: 1fr;
  }

  body.page-input .api-card .inline-row input,
  body.page-input .api-card .danger-ghost {
    grid-column: 1;
  }

  .collab-stages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .collab-stage {
    min-width: 0;
  }

  body.page-kimi #kimiSection {
    padding: 18px 14px;
  }

  body.page-kimi .editor-grid,
  body.page-kimi .ai-collab-panel .collab-grid,
  body.page-gate2 .editor-grid {
    grid-template-columns: 1fr;
  }

  body.page-kimi .editor-grid > div,
  body.page-kimi .editor-grid > div:nth-child(n + 5),
  body.page-gate2 .editor-grid > div,
  body.page-gate2 .editor-grid > div:nth-child(n + 5) {
    grid-column: 1;
    padding: 14px;
  }

  body.page-kimi .ai-collab-panel .collab-stages {
    grid-template-columns: 1fr 1fr;
  }

  .page-action-card {
    align-items: stretch;
    padding: 14px;
  }

  .page-action-buttons {
    width: 100%;
  }

  .page-action-buttons .route-button {
    width: 100%;
  }

  .schedule-modal {
    padding: 8px;
  }

  .schedule-dialog {
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Content factory shell: return from a channel workbench to the channel homepage. */
.hero-home-link {
  align-self: end;
  justify-self: end;
  margin: 0 0 4px;
  padding: 7px 10px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.hero-home-link:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #e7c3b7;
}

@media (max-width: 720px) {
  .hero-home-link {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
  }
}

/* v0.7.4 · cloud workspace resume -------------------------------------- */
.history-project.active,
.history-article.active {
  color: var(--ink);
}

.history-project.active b,
.history-project.active small,
.history-project.active .history-project-id,
.history-article.active b,
.history-article.active small,
.history-article.active .history-article-title {
  color: inherit;
}

.recent-projects-card {
  padding: 22px;
}

.recent-projects-head {
  margin-bottom: 14px;
}

.recent-projects-head .card-title {
  margin-bottom: 4px;
}

.ghost-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
}

.ghost-link:hover {
  color: var(--accent-strong);
}

.recent-project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.recent-project-card {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.recent-project-card:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  transform: none;
}

.recent-project-card:disabled {
  opacity: .65;
  cursor: wait;
}

.recent-project-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.recent-project-copy b,
.recent-project-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-project-copy b {
  color: var(--ink);
  font-size: 14px;
}

.recent-project-copy small {
  color: var(--muted);
  font-size: 12px;
}

.recent-project-action {
  flex: none;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.recent-project-empty {
  padding: 16px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}

.cloud-resume-warning {
  margin-top: 10px;
}

.history-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 760px) {
  .recent-project-list { grid-template-columns: 1fr; }
  .history-header-actions { justify-content: flex-start; }
}

/* v0.8.4 · history readability + destructive project delete ---------------- */
.page-history .history-shell {
  grid-template-columns: minmax(360px, 400px) minmax(0, 1fr);
  gap: 22px;
}

.page-history .history-sidebar,
.page-history .history-main {
  padding: 24px;
}

.page-history .history-projects {
  gap: 14px;
  padding: 4px 6px 8px 0;
}

.history-project-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.history-project-card:hover {
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: 0 8px 24px rgba(37,32,27,.05);
}

.history-project-card.active {
  border-color: #d7a696;
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(215,166,150,.18) inset;
}

.history-project-open {
  min-width: 0;
  padding: 16px 14px 16px 17px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.history-project-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.55;
  letter-spacing: .01em;
}

.history-project-theme {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}

.history-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  align-items: center;
  margin-top: 10px;
  color: #8a837b;
  font-size: 11px;
  line-height: 1.45;
}

.history-project-meta .history-project-id {
  margin: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  font-size: 9.5px;
  opacity: .72;
}

.history-project-delete {
  align-self: center;
  margin-right: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #9a5548;
  font-size: 11px;
  cursor: pointer;
  opacity: .76;
  transition: .16s ease;
}

.history-project-card:hover .history-project-delete,
.history-project-card.active .history-project-delete {
  opacity: 1;
}

.history-project-delete:hover {
  border-color: #efc9bf;
  background: #fff5f2;
  color: #7d3f35;
}

.page-history .history-articles {
  gap: 14px;
  margin: 20px 0;
}

.page-history .history-article {
  min-height: 118px;
  padding: 16px 17px;
}

.page-history .history-article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
}

.page-history .history-article small {
  margin-top: 10px;
  line-height: 1.5;
}

button.danger {
  border: 1px solid #dfb1a5;
  background: #fff2ee;
  color: #8c4438;
}

button.danger:hover:not(:disabled) {
  border-color: #c98f80;
  background: #fbe4de;
  color: #71362d;
}

body.modal-open { overflow: hidden; }

.history-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.history-delete-modal.hidden { display: none; }

.history-delete-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(38,34,30,.46);
  backdrop-filter: blur(4px);
}

.history-delete-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid #ead9d3;
  border-radius: 22px;
  background: #fffdfb;
  box-shadow: 0 24px 70px rgba(45,37,31,.18);
}

.history-delete-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f6f1ed;
  color: #746b63;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.history-delete-kicker {
  color: #a45849;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
}

.history-delete-dialog h2 {
  margin: 7px 38px 8px 0;
  font-size: 24px;
}

.history-delete-dialog p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.history-delete-project-box {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.history-delete-project-box strong {
  line-height: 1.55;
}

.history-delete-project-box small {
  color: #8a837b;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}

.history-delete-warning,
.history-delete-error {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.6;
}

.history-delete-warning {
  background: #fff4ef;
  color: #88493d;
}

.history-delete-error {
  border: 1px solid #efc9bf;
  background: #fff7f4;
  color: #873f35;
}

.history-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 980px) {
  .page-history .history-shell { grid-template-columns: 1fr; }
  .page-history .history-sidebar { max-height: none; }
  .page-history .history-projects { max-height: 430px; }
}

@media (max-width: 560px) {
  .page-history .history-sidebar,
  .page-history .history-main { padding: 16px; }
  .history-project-card { min-height: 108px; }
  .history-project-open { padding: 14px 10px 14px 14px; }
  .history-project-delete { margin-right: 8px; }
  .history-delete-dialog { padding: 22px 18px; }
  .history-delete-actions { flex-direction: column-reverse; }
  .history-delete-actions button { width: 100%; }
}

/* v0.8.7 · mobile production UX pass ---------------------------------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 74px; }
  body { overflow-x: hidden; }
  .page {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: calc(44px + env(safe-area-inset-bottom));
  }
  .shell { width: 100%; min-width: 0; }

  .hero {
    position: relative;
    padding: 12px 2px 14px 14px;
    margin-bottom: 10px;
  }
  .hero::before { width: 4px; }
  .hero .eyebrow { font-size: 11px; line-height: 1.5; }
  .hero h1 { margin-top: 7px; font-size: clamp(25px, 8vw, 31px); line-height: 1.15; }
  .hero-home-link {
    justify-self: start;
    align-self: start;
    margin-top: 10px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .workbench-nav {
    position: sticky;
    top: 0;
    z-index: 42;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 -10px 8px;
    padding: 8px 10px 9px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: rgba(250, 248, 244, .96);
    backdrop-filter: blur(10px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .workbench-nav::-webkit-scrollbar,
  .workflow-panel::-webkit-scrollbar,
  .strategy-day-tabs::-webkit-scrollbar,
  #contentDayTabs::-webkit-scrollbar { display: none; }
  .workbench-nav a {
    flex: 0 0 auto;
    min-width: 108px;
    min-height: 44px;
    padding: 0 12px;
    scroll-snap-align: center;
    justify-content: center;
  }
  .workbench-nav a.nav-current,
  .workbench-nav a[aria-current="page"] { box-shadow: 0 0 0 1px rgba(176, 83, 57, .16) inset; }

  .cloud-sync-status {
    margin: 6px 2px 10px;
    min-height: 28px;
    padding: 5px 2px;
    white-space: normal;
    line-height: 1.45;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .workflow-panel {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    margin: 0 0 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .workflow-title { display: none; }
  .workflow-item {
    flex: 0 0 154px;
    min-height: 72px;
    padding: 12px 11px;
    scroll-snap-align: start;
  }
  .workflow-item b { font-size: 13px; }
  .workflow-item small { font-size: 11px; line-height: 1.35; }

  .card,
  .history-sidebar,
  .history-main,
  body.page-kimi #kimiSection {
    padding: 16px 13px;
    border-radius: 16px;
  }
  .card-title { font-size: 17px; }
  .section-head {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .section-head > :last-child { align-self: stretch; }

  label { line-height: 1.45; }
  input, textarea, select, button { max-width: 100%; }
  input, select, button { min-height: 44px; }
  textarea { line-height: 1.7; }
  #material, #requirements { min-height: 168px; }
  #contentBody { min-height: 360px; }
  .button-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .button-row > button,
  .button-row > a,
  .page-action-buttons > button,
  .page-action-buttons > a { width: 100%; }

  .recent-projects-card { padding: 16px 13px; }
  .recent-projects-head { align-items: flex-start; }
  .recent-projects-head .ghost-link { min-height: 40px; display: inline-flex; align-items: center; }
  .recent-project-card {
    min-height: 82px;
    align-items: flex-start;
    padding: 13px;
  }
  .recent-project-copy b,
  .recent-project-copy small {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .recent-project-copy b { -webkit-line-clamp: 2; line-height: 1.45; }
  .recent-project-copy small { -webkit-line-clamp: 2; line-height: 1.45; }
  .recent-project-action { padding-top: 2px; }

  .material-dropzone {
    padding: 15px;
    gap: 12px;
  }
  .material-dropzone button { width: 100%; align-self: stretch; }
  .material-item { padding: 12px; }
  .material-item button { width: 100%; align-self: stretch; }
  .material-file-line { align-items: flex-start; }

  .strategy-day-tabs,
  body.page-gate1 #strategySection > .strategy-day-tabs,
  #contentDayTabs {
    top: 60px;
    margin-left: -4px;
    margin-right: -4px;
    padding: 8px;
    gap: 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .strategy-day-tab {
    min-width: 118px;
    min-height: 52px;
    scroll-snap-align: center;
  }

  .ai-collab-panel { padding: 13px; }
  .collab-head { gap: 10px; }
  .collab-stages { grid-template-columns: 1fr 1fr; gap: 6px; }
  .collab-stage { min-height: 54px; padding: 8px; }
  .collab-grid section { padding: 11px; }

  .model-stage-rail {
    gap: 7px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .model-stage-step { min-width: 96px; min-height: 44px; scroll-snap-align: start; }

  body.page-gate1 #strategySection.route-page-active { padding: 16px 13px; }
  .gate1-focus-bar { padding: 13px; }

  body.page-gate2 #contentEditor > .review-panel,
  body.page-gate2 #contentEditor > .editor-grid,
  body.page-kimi #contentEditor > .editor-grid { min-width: 0; }
  body.page-gate2 .review-panel .button-row { display: grid; grid-template-columns: 1fr; }
  body.page-gate2 #contentFeedback { min-height: 128px; }
  .review-issue-list .review-issue { padding: 10px; line-height: 1.6; }
  .review-replacement span { overflow-wrap: anywhere; }

  .page-action-card { border-radius: 14px; }

  .page-history .history-shell { gap: 14px; }
  .page-history .history-sidebar,
  .page-history .history-main { padding: 16px 13px; }
  .history-toolbar { align-items: stretch; }
  .history-toolbar input { flex: 1 1 100%; min-width: 0; }
  .history-toolbar button { flex: 1; }
  .history-projects { max-height: none; overflow: visible; padding-right: 0; gap: 12px; }
  .history-project-card { min-height: 104px; border-radius: 14px; }
  .history-project-open { padding: 14px 11px 14px 14px; }
  .history-project-delete { min-width: 62px; min-height: 100%; }
  .history-project-title { font-size: 15px; line-height: 1.45; }
  .history-project-theme { line-height: 1.5; }
  .history-project-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
  .history-project-head { gap: 12px; }
  .history-project-head h2 { font-size: 20px; line-height: 1.3; }
  .history-header-actions { width: 100%; }
  .history-header-actions > button { flex: 1 1 100%; width: 100%; }
  .history-articles { gap: 9px; }
  .history-article { padding: 13px; }
  .history-content-title { font-size: 21px; }
  .history-field-value { padding: 12px; line-height: 1.75; overflow-wrap: anywhere; }
  .history-version-row { gap: 6px; }

  .schedule-dialog { max-height: calc(100dvh - 16px); padding: 15px; }
  .schedule-dialog-head b { font-size: 18px; }
  .schedule-day { min-height: auto; }
  .schedule-dropzone { min-height: 92px; }
}

@media (max-width: 430px) {
  .page { padding-left: 8px; padding-right: 8px; }
  .workbench-nav { margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
  .workbench-nav a { min-width: 102px; padding-left: 10px; padding-right: 10px; }
  .workflow-item { flex-basis: 146px; }
  .card,
  .history-sidebar,
  .history-main,
  body.page-kimi #kimiSection,
  body.page-gate1 #strategySection.route-page-active { padding-left: 12px; padding-right: 12px; }
  .collab-stages,
  body.page-kimi .ai-collab-panel .collab-stages { grid-template-columns: 1fr; }
  .history-project-card { grid-template-columns: minmax(0, 1fr) 58px; }
  .history-project-delete { padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .history-chip, .history-tag { max-width: 100%; white-space: normal; }
}