:root {
  color-scheme: light;
  --ink: #0f1120;
  --ink-soft: #575760;
  --forest: #0f1120;
  --forest-2: #3b4789;
  --mint: #eef0f8;
  --mint-2: #e2e6f3;
  --paper: #ffffff;
  --canvas: #fafbff;
  --line: #dfe2ec;
  --amber: #f0aa3c;
  --amber-soft: #fff5df;
  --danger: #b44a3b;
  --danger-soft: #fff0ed;
  --blue-soft: #eef1ff;
  --shadow: 0 24px 70px rgba(15, 17, 32, 0.13);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); }
body { min-width: 320px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
input, select { min-height: 42px; padding: 0 12px; }
textarea { min-height: 94px; padding: 12px; line-height: 1.6; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: #77a18f; box-shadow: 0 0 0 3px rgba(36, 92, 75, 0.11); }

.primary, .secondary, .text-button, .icon-button, .suggestion, .file-button {
  border: 0;
  border-radius: 10px;
  transition: transform 0.12s ease, background 0.16s ease, color 0.16s ease;
}
.primary { min-height: 40px; padding: 0 17px; background: var(--forest); color: #fff; font-weight: 700; }
.primary:hover:not(:disabled) { background: var(--forest-2); transform: translateY(-1px); }
.secondary { min-height: 40px; padding: 0 16px; color: var(--forest); background: var(--mint); font-weight: 700; }
.secondary:hover { background: var(--mint-2); }
.wide { width: 100%; }
.text-button { padding: 7px 10px; color: var(--forest-2); background: var(--mint); font-size: 13px; font-weight: 700; }
.text-button:hover { background: var(--mint-2); }
.icon-button { padding: 7px 10px; color: var(--ink-soft); background: transparent; }
.icon-button:hover { color: var(--forest); background: var(--mint); }
.eyebrow { margin: 0 0 5px; color: #76877f; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.muted { color: #839089; }

.auth-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: clamp(24px, 6vw, 96px);
  align-items: center;
  padding: clamp(28px, 7vw, 100px);
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,0.15), transparent 26%),
    linear-gradient(118deg, var(--forest) 0 56%, var(--canvas) 56% 100%);
}
.auth-card { max-width: 700px; color: #fff; }
.auth-brand { display: flex; gap: 22px; align-items: flex-start; }
.logo-mark { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 19px; background: var(--amber); color: #183429; font-size: 28px; font-weight: 900; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.logo-mark.small { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.auth-card .eyebrow { color: #a9c2b7; }
.auth-card h1 { margin: 0; max-width: 650px; font-size: clamp(34px, 4.5vw, 64px); line-height: 1.12; letter-spacing: -0.04em; }
.brand-subtitle { margin: 11px 0 0; color: #b7cfc5; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.auth-description { max-width: 620px; margin: 34px 0 22px 86px; color: #cfe0d8; font-size: 17px; line-height: 1.8; }
.service-pills { margin-left: 86px; display: flex; flex-wrap: wrap; gap: 9px; }
.service-pill { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 13px; }
.service-pill::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #8da098; }
.service-pill.ok::before { background: #67d6a4; }
.service-pill.warn::before { background: #f4bd62; }
.service-pill.bad::before { background: #f18d7d; }
.login-card { width: min(100%, 460px); justify-self: center; padding: 38px; display: grid; gap: 13px; background: rgba(255,255,255,0.96); border: 1px solid rgba(255,255,255,0.8); border-radius: 24px; box-shadow: var(--shadow); }
.login-card h2 { margin: 0 0 16px; font-size: 28px; }
.field-label { margin-top: 4px; font-size: 13px; font-weight: 700; }
.inline-error { padding: 10px 12px; border-radius: 9px; color: var(--danger); background: var(--danger-soft); font-size: 13px; }
.login-note { margin: 0; text-align: center; color: var(--ink-soft); font-size: 12px; }

.app-shell { height: 100vh; min-height: 0; display: grid; grid-template-columns: 278px minmax(0, 1fr); overflow: hidden; }
.sidebar { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 18px; padding: 22px 17px 18px; color: #fff; background: var(--forest); overflow: hidden; }
.brand-row { display: flex; align-items: center; gap: 12px; padding: 0 7px; }
.brand-row > div { min-width: 0; display: grid; gap: 2px; }
.brand-row strong { font-size: 17px; }
.brand-row span:not(.logo-mark) { max-width: 184px; color: #9fb8ad; font-size: 8.5px; line-height: 1.3; letter-spacing: 0.055em; text-transform: uppercase; }
.new-task-box { display: grid; gap: 8px; padding: 13px; border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; background: rgba(255,255,255,0.06); }
.new-task-box input { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.1); color: #fff; }
.new-task-box input::placeholder { color: #9fb8ad; }
.new-task-box .primary { background: var(--amber); color: #183429; }
.sidebar-section-title { padding: 0 8px; display: flex; justify-content: space-between; color: #9fb8ad; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.task-list { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 7px; padding-right: 2px; }
.task-list::-webkit-scrollbar { width: 5px; }
.task-list::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255,255,255,0.16); }
.task-item { width: 100%; padding: 12px; display: grid; gap: 7px; text-align: left; color: #dce9e3; border: 1px solid transparent; border-radius: 12px; background: transparent; }
.task-item:hover { background: rgba(255,255,255,0.07); }
.task-item.active { border-color: rgba(231,165,63,0.35); background: rgba(231,165,63,0.13); }
.task-item-title { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.task-item-meta { display: flex; justify-content: space-between; gap: 8px; color: #9fb8ad; font-size: 10px; }
.sidebar-empty { padding: 18px 10px; color: #9fb8ad; font-size: 13px; }
.sidebar-bottom { min-width: 0; display: grid; gap: 10px; }
.internal-footer { padding: 0 8px; display: grid; gap: 2px; color: #9fb8ad; }
.internal-footer strong { color: #dce9e3; font-size: 10px; letter-spacing: 0.04em; }
.internal-footer span { font-size: 7.5px; letter-spacing: 0.075em; text-transform: uppercase; }
.user-card { padding: 12px 8px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: #315e50; font-weight: 800; }
.user-card > div:nth-child(2) { display: grid; gap: 2px; }
.user-card strong { font-size: 13px; }
.user-card span { color: #9fb8ad; font-size: 10px; }
.user-card .icon-button { color: #b7c9c1; font-size: 12px; }

.main-area { min-width: 0; min-height: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.topbar { min-height: 88px; flex: 0 0 auto; padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(251,252,250,0.9); backdrop-filter: blur(10px); }
.topbar h1 { margin: 0; font-size: 23px; letter-spacing: -0.02em; }
.topbar-status { padding: 8px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #aab6b0; }
.status-dot.ok { background: #42aa78; box-shadow: 0 0 0 4px rgba(66,170,120,0.12); }
.status-dot.bad { background: var(--danger); }
.system-banner { margin: 18px 30px 0; padding: 13px 16px; display: flex; gap: 10px; align-items: baseline; border-radius: 12px; font-size: 13px; }
.system-banner.warn { color: #77501a; background: var(--amber-soft); border: 1px solid #f1d79f; }
.workspace-scroll { min-height: 0; flex: 1 1 auto; padding: 22px 30px 24px; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 26px rgba(23,63,52,0.04); }
.step { min-width: 0; padding: 13px 14px; display: flex; gap: 10px; align-items: center; text-align: left; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--ink-soft); }
.step:last-child { border-right: 0; }
.step:hover { background: #f7faf8; }
.step.active { color: var(--forest); background: var(--mint); }
.step-number { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #bdcac4; border-radius: 9px; font-size: 11px; font-weight: 900; }
.step.active .step-number { border-color: var(--forest); background: var(--forest); color: #fff; }
.step.complete:not(.active) .step-number { border-color: #74a18f; color: var(--forest-2); background: var(--mint); }
.result-step { border-right: 0; }
.result-step:not(.active) { background: #fbfcfb; }
.step > span:last-child { min-width: 0; display: grid; gap: 2px; }
.step strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.step small { color: #8a9791; font-size: 9px; }
.workspace-grid { min-height: 0; height: 100%; display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(340px, 0.66fr); gap: 20px; align-items: stretch; }
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 9px 28px rgba(23,63,52,0.045); }
.card-head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.card-head.compact { padding: 15px 16px; }
.card-head h2, .card-head h3 { margin: 0; }
.card-head h2 { font-size: 20px; }
.card-head h3 { font-size: 15px; }
.phase-badge, .readiness { padding: 6px 9px; border-radius: 999px; color: var(--forest-2); background: var(--mint); font-size: 10px; font-weight: 800; }
.readiness.bad { color: var(--danger); background: var(--danger-soft); }
.readiness.ok { color: #26724f; background: #e4f5eb; }

.conversation-card { min-height: 0; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; overflow: hidden; }
.phase-guidance { margin: 14px 18px 0; padding: 11px 13px; display: grid; gap: 3px; border-left: 3px solid var(--amber); border-radius: 4px 10px 10px 4px; background: #fff9ec; font-size: 12px; }
.phase-guidance span { color: var(--ink-soft); }
.messages { min-height: 0; max-height: none; padding: 20px; overflow: auto; display: grid; align-content: start; gap: 16px; }
.message-row { display: flex; gap: 10px; align-items: flex-start; }
.message-row.user { flex-direction: row-reverse; }
.message-avatar { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--forest); background: var(--mint); font-size: 10px; font-weight: 900; }
.message-row.user .message-avatar { color: #fff; background: var(--forest-2); }
.message-bubble { max-width: 82%; padding: 11px 13px; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 4px 14px 14px; background: #fff; font-size: 13px; line-height: 1.65; }
.message-row.user .message-bubble { border: 0; border-radius: 14px 4px 14px 14px; color: #fff; background: var(--forest-2); }
.message-row.failed .message-bubble { color: var(--danger); background: var(--danger-soft); }
.message-role { color: #7b8982; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.message-row.user .message-role { color: #cde0d8; }
.message-bubble > div { white-space: pre-wrap; }
.message-bubble small { opacity: 0.7; }
.attachment-card { width: min(360px, 100%); padding: 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid #cdded6; border-radius: 10px; color: var(--ink); background: #f7fbf9; text-align: left; }
.attachment-card:hover { border-color: #8eb9a6; background: #edf7f2; }
.attachment-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #2c7a5b; font-size: 13px; font-weight: 900; }
.attachment-meta { min-width: 0; display: grid; gap: 2px; }
.attachment-meta strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-meta small { color: #728079; font-size: 9px; }
.attachment-action { color: var(--forest); font-size: 10px; font-weight: 800; }
.message-row.user .attachment-card { border-color: rgba(255,255,255,0.34); color: #fff; background: rgba(255,255,255,0.1); }
.message-row.user .attachment-card:hover { background: rgba(255,255,255,0.17); }
.message-row.user .attachment-icon { color: var(--forest); background: #fff; }
.message-row.user .attachment-meta small, .message-row.user .attachment-action { color: #d9ebe3; }
.pending-card { margin: 0 18px 14px; padding: 14px; display: grid; gap: 12px; border: 1px solid #e7c27c; border-radius: 13px; background: #fffaf0; }
.pending-title { display: flex; justify-content: space-between; font-size: 12px; }
.pending-title span { color: #8b692d; font-weight: 800; }
.pending-actions { display: flex; justify-content: flex-end; gap: 8px; }
.suggestions { padding: 0 18px 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.suggestion { padding: 7px 10px; color: #596a62; background: #eef3f0; font-size: 11px; }
.suggestion:hover { color: var(--forest); background: var(--mint-2); }
.composer { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: #fff; }
.composer textarea { min-height: 84px; }
.composer-actions { margin-top: 9px; display: flex; align-items: center; gap: 9px; }
.composer-actions .primary { margin-left: auto; }
.file-button { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; color: var(--forest); background: var(--mint); font-size: 12px; font-weight: 700; cursor: pointer; }
.file-button input { display: none; }
.composer-tip { color: #9aa59f; font-size: 10px; }
.conversation-card.drag-over { outline: 3px solid rgba(205,145,42,0.55); outline-offset: -5px; }
.queued-files { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 7px; }
.queued-file { min-width: 0; padding: 6px 8px; display: grid; grid-template-columns: 24px minmax(70px, 1fr) auto 22px; gap: 6px; align-items: center; border: 1px solid #d8e4de; border-radius: 10px; background: #f3f8f5; font-size: 10px; }
.queued-file > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--forest); font-weight: 800; }
.queued-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queued-file small { color: var(--ink-soft); }
.queued-file button { width: 22px; height: 22px; padding: 0; border-radius: 7px; color: var(--danger); background: var(--danger-soft); }
.message-job-card { margin-top: 10px; padding: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px; border: 1px solid #c8ded3; border-radius: 12px; color: var(--ink); background: #f1f8f4; }
.message-job-card > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.message-job-card strong { font-size: 12px; }
.message-job-card small { color: var(--ink-soft); font-size: 10px; }
.message-job-card.infeasible, .message-job-card.failed { border-color: #ecc8c5; background: var(--danger-soft); }
.message-row.user .message-job-card { display: none; }

.inspector-stack { min-height: 0; padding-right: 4px; display: grid; align-content: start; gap: 14px; overflow-y: auto; scrollbar-gutter: stable; }
.preflight-card { overflow: hidden; }
.preflight-card.ready { border-color: #b9dac9; }
.stat-strip { padding: 12px 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; border-bottom: 1px solid var(--line); }
.stat-strip span { display: grid; gap: 2px; color: #7c8983; text-align: center; font-size: 9px; }
.stat-strip strong { color: var(--ink); font-size: 15px; }
.check-list { max-height: 240px; margin: 0; padding: 12px 15px; display: grid; gap: 8px; overflow: auto; list-style: none; }
.check-item { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: flex-start; }
.check-item > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: #8b692d; background: var(--amber-soft); font-size: 10px; font-weight: 900; }
.check-item.blocker > span { color: var(--danger); background: var(--danger-soft); }
.check-item > div { display: grid; gap: 2px; }
.check-item strong { font-size: 11px; line-height: 1.45; }
.check-item small { color: var(--ink-soft); font-size: 9px; line-height: 1.4; }
.success-copy { margin: 0; padding: 15px; color: #327b59; font-size: 12px; }
.solve-button { margin: 2px 15px 0; width: calc(100% - 30px); }
.solve-note { display: block; padding: 8px 15px 14px; color: #8a7560; font-size: 9px; line-height: 1.45; }
.solve-time-control { margin: 2px 15px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; }
.solve-time-control > span { font-size: 12px; font-weight: 800; }
.solve-time-control select { width: auto; min-width: 116px; }
.solve-time-control small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.config-card { overflow: hidden; }
.config-card-body > .summary-groups, .config-card-body > .structured-list, .config-card-body > .plain-list, .config-card-body > .empty-copy { margin: 0; padding: 13px 16px 16px; }
.summary-groups { display: grid; gap: 11px; }
.summary-groups > div { display: grid; gap: 5px; }
.summary-groups label, .structured-list > label { color: #7e8a84; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips span { padding: 4px 7px; border-radius: 7px; color: #36594b; background: var(--mint); font-size: 10px; }
.summary-line { display: flex !important; grid-template-columns: 1fr auto; align-items: center; color: var(--ink-soft); font-size: 11px; }
.summary-line strong { color: var(--ink); }
.structured-list { display: grid; gap: 7px; }
.structured-list > label:not(:first-child) { margin-top: 7px; }
.requirement-row, .teacher-row { padding: 8px 0; display: grid; gap: 2px; border-bottom: 1px dashed var(--line); }
.requirement-row strong, .teacher-row strong { font-size: 11px; }
.requirement-row span, .teacher-row span { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.plain-list { padding-left: 31px !important; display: grid; gap: 7px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.empty-copy { color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.job-row { padding: 11px 15px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: start; border-top: 1px solid var(--line); }
.job-state { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; background: var(--mint); color: var(--forest-2); font-size: 10px; font-weight: 900; }
.job-row.failed .job-state { color: var(--danger); background: var(--danger-soft); }
.job-row > div { min-width: 0; display: grid; gap: 2px; }
.job-row strong { font-size: 11px; }
.job-row small { color: #8a9791; font-size: 9px; }
.error-text { color: var(--danger) !important; overflow-wrap: anywhere; word-break: break-word; line-height: 1.4; }

.result-panel { overflow: hidden; }
.workspace-result { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.result-head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.result-head h2 { margin: 0 0 3px; font-size: 20px; }
.result-head > div:first-child > span { color: var(--ink-soft); font-size: 11px; }
.result-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.result-controls select { width: auto; min-width: 135px; }
.workspace-result .schedule-scroll { min-height: 0; flex: 1 1 auto; }
.schedule-scroll { overflow: auto; }
.schedule-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.schedule-table th, .schedule-table td { min-height: 74px; padding: 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.schedule-table th { width: 108px; color: var(--forest); background: var(--mint); font-size: 11px; }
.schedule-table thead th { height: 44px; }
.schedule-table td { height: 76px; background: #fff; font-size: 11px; }
.schedule-table td span { display: block; white-space: pre-line; line-height: 1.45; }
.schedule-table td span + span { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line); }
.result-empty-body { min-height: 0; flex: 1 1 auto; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--ink-soft); }
.result-empty-body strong { color: var(--ink); font-size: 17px; }
.result-empty-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; color: var(--forest); background: var(--mint-2); font-size: 28px; font-weight: 900; }

.empty-state { min-height: calc(100vh - 140px); display: grid; place-items: center; align-content: center; gap: 8px; padding: 40px; text-align: center; }
.empty-illustration { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 24px; color: var(--forest); background: var(--mint-2); font-size: 34px; }
.empty-state h2 { margin: 12px 0 0; }
.empty-state p { max-width: 500px; margin: 0; color: var(--ink-soft); line-height: 1.7; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; padding: 24px; display: grid; place-items: center; background: rgba(15,35,28,0.58); backdrop-filter: blur(5px); }
.editor-modal { width: min(760px, 100%); max-height: calc(100vh - 48px); padding: 22px; overflow: auto; border-radius: 20px; background: var(--paper); box-shadow: 0 28px 90px rgba(0,0,0,0.28); }
.editor-modal.large { width: min(1120px, 100%); }
.editor-modal.small { width: min(520px, 100%); }
.modal-head { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modal-head h2 { margin: 0; }
.editor-grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.editor-grid label, .editor-field { display: grid; gap: 7px; }
.editor-grid label > span, .editor-field > span { font-size: 12px; font-weight: 700; }
.editor-field { margin-top: 15px; }
.check-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.check-grid label { min-height: 38px; padding: 0 7px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 11px; }
.check-grid input { width: auto; min-height: 0; }
.tall { min-height: 145px; }
.toggle-line { margin-top: 14px; display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; }
.toggle-line input { width: auto; min-height: 0; }
.modal-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
.editor-help { color: var(--ink-soft); font-size: 12px; }
.matrix-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.matrix-table { width: 100%; min-width: 850px; border-collapse: separate; border-spacing: 0; background: #fff; }
.matrix-table th, .matrix-table td { padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix-table th { position: sticky; top: 0; z-index: 1; background: var(--mint); font-size: 11px; }
.matrix-table tbody th { left: 0; z-index: 2; min-width: 110px; }
.matrix-table th small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 8px; font-weight: 400; }
.matrix-table td { min-width: 135px; }
.matrix-table td input { min-height: 34px; font-size: 11px; }
.matrix-table td input + input { margin-top: 5px; }
.weight-list { display: grid; gap: 9px; }
.weight-row { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.weight-row > span { min-width: 0; display: grid; gap: 3px; }
.weight-row strong { font-size: 12px; line-height: 1.45; }
.weight-row small { color: var(--ink-soft); font-size: 9px; }
.weight-row input { width: 120px; flex: 0 0 auto; text-align: right; font-weight: 800; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; max-width: 420px; padding: 12px 16px; border-radius: 11px; color: #fff; background: #243d34; box-shadow: 0 16px 45px rgba(0,0,0,0.2); font-size: 12px; line-height: 1.5; }

@media (max-width: 1180px) {
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .main-area { height: auto; min-height: 100vh; overflow: visible; }
  .workspace-scroll { display: block; overflow: visible; }
  .workspace-grid { grid-template-columns: 1fr; }
  .conversation-card, .workspace-result { height: auto; min-height: 720px; }
  .messages { max-height: 480px; }
  .inspector-stack { padding-right: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .preflight-card, .jobs-card { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .auth-screen { grid-template-columns: 1fr; background: linear-gradient(180deg, var(--forest) 0 48%, var(--canvas) 48%); }
  .auth-description, .service-pills { margin-left: 0; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; grid-template-rows: auto auto auto; }
  .task-list, .sidebar-section-title { display: none; }
  .user-card { position: absolute; top: 15px; right: 14px; border: 0; }
  .user-card > div:not(.avatar) { display: none; }
  .topbar { padding: 16px 18px; }
  .workspace-scroll { padding: 16px 18px 30px; }
  .system-banner { margin: 14px 18px 0; align-items: flex-start; flex-direction: column; }
  .stepper { grid-template-columns: repeat(6, minmax(120px, 1fr)); overflow-x: auto; }
}

@media (max-width: 680px) {
  .auth-screen { padding: 24px 16px; }
  .auth-brand { gap: 13px; }
  .auth-card h1 { font-size: 33px; }
  .login-card { padding: 25px 20px; }
  .inspector-stack { grid-template-columns: 1fr; }
  .preflight-card, .jobs-card { grid-column: auto; }
  .conversation-card { min-height: 650px; }
  .message-bubble { max-width: 90%; }
  .composer-actions { flex-wrap: wrap; }
  .composer-tip { display: none; }
  .result-head { align-items: flex-start; flex-direction: column; }
  .result-controls { width: 100%; }
  .result-controls select { min-width: 0; width: 50%; }
  .editor-grid.two { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: repeat(4, 1fr); }
  .modal-backdrop { padding: 10px; }
}

/* Sites visual refresh: calm editorial workspace, existing behavior preserved. */
html { background: var(--canvas); }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 72% -10%, rgba(240, 170, 60, 0.09), transparent 28rem),
    var(--canvas);
}
::selection { color: #fff; background: var(--forest-2); }
button, input, textarea, select { letter-spacing: -0.005em; }
button { transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(240, 170, 60, 0.42);
  outline-offset: 2px;
}
input, textarea, select { border-color: #d7e0db; border-radius: 13px; background: rgba(255,255,255,0.94); }
input::placeholder, textarea::placeholder { color: #9aa7a1; }
.primary, .secondary, .text-button, .icon-button, .suggestion, .file-button { border-radius: 11px; }
.primary { background: linear-gradient(135deg, #174b3e, var(--forest)); box-shadow: 0 8px 20px rgba(18,60,50,0.16); }
.primary:hover:not(:disabled) { background: linear-gradient(135deg, #1f6654, #174b3e); box-shadow: 0 10px 24px rgba(18,60,50,0.22); }
.secondary, .file-button, .text-button { border: 1px solid rgba(31,102,84,0.08); }
.eyebrow { color: #788981; letter-spacing: 0.14em; }
.eyebrow-divider { padding: 0 5px; color: var(--amber); }

.auth-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.18fr) minmax(390px, 0.82fr);
  gap: clamp(42px, 7vw, 110px);
  background:
    radial-gradient(circle at 20% 18%, rgba(240,170,60,0.18), transparent 22rem),
    linear-gradient(112deg, #0d3129 0%, #164b3d 57%, #f3f1ea 57.1%, #f8f7f3 100%);
}
.auth-screen::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 330px;
  height: 330px;
  left: -100px;
  bottom: -120px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(255,255,255,0.025), 0 0 0 104px rgba(255,255,255,0.018);
}
.auth-card h1 { max-width: 720px; font-weight: 760; line-height: 1.08; }
.auth-description { color: #d3e1db; }
.service-pill { border: 1px solid rgba(255,255,255,0.09); backdrop-filter: blur(8px); }
.login-card { padding: 42px; border-color: rgba(255,255,255,0.7); border-radius: 28px; box-shadow: 0 30px 80px rgba(22,44,37,0.18); }
.login-card .primary { min-height: 48px; margin-top: 5px; }
.logo-mark { transform: rotate(-2deg); border-radius: 18px 18px 18px 6px; box-shadow: 0 12px 28px rgba(0,0,0,0.16); }

.app-shell { grid-template-columns: 268px minmax(0, 1fr); }
.sidebar {
  padding: 20px 15px 16px;
  gap: 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(240,170,60,0.11), transparent 16rem),
    linear-gradient(180deg, #123f34 0%, #0e342b 100%);
  border-right: 1px solid rgba(255,255,255,0.04);
  box-shadow: 18px 0 45px rgba(16,48,39,0.07);
}
.brand-row { min-height: 48px; }
.brand-row strong { font-size: 18px; letter-spacing: -0.02em; }
.brand-row span:not(.logo-mark) { color: #9fbcb0; letter-spacing: 0.13em; }
.new-task-box { padding: 11px; border-color: rgba(255,255,255,0.12); border-radius: 17px; background: rgba(255,255,255,0.055); box-shadow: inset 0 1px rgba(255,255,255,0.05); }
.new-task-box input { min-height: 40px; }
.new-task-box .primary { min-height: 38px; background: linear-gradient(135deg, #f5b64f, #e79a27); box-shadow: 0 8px 18px rgba(0,0,0,0.13); }
.new-task-box .primary:hover:not(:disabled) { background: linear-gradient(135deg, #ffc568, #f0aa3c); }
.task-list { gap: 6px; }
.task-item { position: relative; padding: 12px 11px; gap: 6px; border-radius: 13px; }
.task-item::before { content: ""; position: absolute; inset: 9px auto 9px 0; width: 3px; border-radius: 9px; background: transparent; }
.task-item:hover { background: rgba(255,255,255,0.065); }
.task-item.active { border-color: rgba(240,170,60,0.28); background: linear-gradient(90deg, rgba(240,170,60,0.16), rgba(255,255,255,0.055)); }
.task-item.active::before { background: var(--amber); }
.task-item-title-row { min-width: 0; display: flex; align-items: center; gap: 7px; }
.task-item-title { min-width: 0; flex: 1 1 auto; }
.task-template-badge { flex: 0 0 auto; padding: 3px 5px; border: 1px solid rgba(240,170,60,0.28); border-radius: 5px; color: #ffd58d; background: rgba(240,170,60,0.12); font-size: 8px; font-weight: 850; letter-spacing: 0.08em; }
.task-item-meta { color: #9bb5aa; }
.avatar { border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(145deg, #346a59, #245044); }

.topbar {
  min-height: 84px;
  padding: 17px 28px;
  border-bottom-color: rgba(25,40,34,0.075);
  background: rgba(250,249,245,0.86);
  box-shadow: 0 10px 30px rgba(24,47,39,0.035);
}
.topbar h1 { max-width: min(70vw, 930px); overflow: hidden; font-size: 24px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.topbar-status { padding: 8px 13px; border-color: rgba(31,102,84,0.12); background: rgba(255,255,255,0.8); box-shadow: 0 6px 18px rgba(24,47,39,0.04); }
.system-banner { margin: 14px 24px 0; }
.workspace-scroll { padding: 18px 24px 22px; }
.stepper { margin-bottom: 17px; border-color: rgba(31,72,59,0.11); border-radius: 17px; box-shadow: 0 12px 34px rgba(23,63,52,0.055); }
.step { min-height: 62px; padding: 11px 12px; gap: 9px; border-right-color: rgba(31,72,59,0.085); }
.step:hover { background: #f7faf8; }
.step.active { background: linear-gradient(135deg, #e7f2ec, #f3f8f5); box-shadow: inset 0 -3px var(--forest-2); }
.step-number { width: 29px; height: 29px; border-radius: 10px; }
.step.active .step-number { border-color: var(--forest); background: linear-gradient(145deg, #1e6653, #123c32); box-shadow: 0 5px 12px rgba(18,60,50,0.18); }
.step.complete:not(.active) .step-number { border-color: #9dbeb0; background: #edf6f1; }
.result-step:not(.active) { background: linear-gradient(135deg, #fcfdfc, #f7faf8); }
.step strong { font-size: 12px; }
.step small { font-size: 9px; }
.workspace-grid { grid-template-columns: minmax(0, 1.43fr) minmax(350px, 0.77fr); gap: 18px; }
.card { border-color: rgba(42,74,62,0.13); border-radius: 19px; background: var(--paper); box-shadow: 0 16px 44px rgba(23,63,52,0.055); }
.card-head { padding: 17px 19px; border-bottom-color: rgba(42,74,62,0.1); }
.card-head.compact { padding: 14px 15px; }
.card-head h2 { font-size: 21px; letter-spacing: -0.025em; }
.card-head h3 { font-size: 15px; letter-spacing: -0.015em; }
.phase-badge, .readiness { padding: 6px 10px; border: 1px solid rgba(31,102,84,0.08); }

.conversation-card { background: #fffefb; }
.phase-guidance { margin: 12px 16px 0; padding: 11px 13px; border-left-width: 0; border-radius: 12px; background: linear-gradient(135deg, #fff7e7, #fffbf3); box-shadow: inset 3px 0 var(--amber); }
.messages { padding: 20px 18px 22px; gap: 18px; background: linear-gradient(180deg, rgba(246,248,245,0.7), rgba(255,254,251,0.2)); scrollbar-gutter: stable; }
.messages::-webkit-scrollbar, .inspector-stack::-webkit-scrollbar { width: 7px; }
.messages::-webkit-scrollbar-thumb, .inspector-stack::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #c6d2cc; background-clip: padding-box; }
.message-row { gap: 11px; }
.message-avatar { width: 32px; height: 32px; border: 1px solid rgba(31,102,84,0.08); border-radius: 11px; box-shadow: 0 5px 14px rgba(31,102,84,0.08); }
.message-row.user .message-avatar { border-color: rgba(255,255,255,0.14); background: linear-gradient(145deg, #2b7561, #174b3e); }
.message-bubble { max-width: 78%; padding: 12px 14px; border-color: rgba(42,74,62,0.13); border-radius: 5px 16px 16px; background: rgba(255,255,255,0.96); box-shadow: 0 7px 22px rgba(25,48,40,0.055); font-size: 13px; line-height: 1.7; }
.message-row.user .message-bubble { border: 1px solid rgba(255,255,255,0.08); border-radius: 16px 5px 16px 16px; background: linear-gradient(145deg, #226653, #16483c); box-shadow: 0 8px 24px rgba(18,60,50,0.16); }
.message-role { letter-spacing: 0.08em; }
.attachment-card { border-radius: 12px; background: #f3f8f5; }
.attachment-icon { border-radius: 10px; background: linear-gradient(145deg, #318166, #1d644f); }
.pending-card { border-radius: 15px; box-shadow: 0 8px 24px rgba(177,123,35,0.08); }
.suggestions { padding: 10px 16px 11px; border-top: 1px solid rgba(42,74,62,0.08); background: #fffefb; }
.suggestion { border: 1px solid #e5ebe7; background: #f5f7f5; }
.suggestion:hover { border-color: #bed4ca; }
.composer { padding: 13px 16px 16px; border-top-color: rgba(42,74,62,0.12); background: #fffefb; box-shadow: 0 -12px 30px rgba(23,63,52,0.035); }
.composer textarea { min-height: 82px; border-color: #d5dfda; background: #fff; box-shadow: inset 0 1px 2px rgba(20,45,36,0.025); }
.composer-actions { margin-top: 10px; }
.composer .primary { min-height: 39px; padding-inline: 20px; }

.inspector-stack { gap: 13px; padding-right: 5px; }
.preflight-card.ready { border-color: #afd2c1; box-shadow: 0 16px 44px rgba(31,102,84,0.07); }
.stat-strip { padding: 12px 14px; border-bottom-color: rgba(42,74,62,0.09); background: linear-gradient(180deg, rgba(237,245,241,0.55), transparent); }
.stat-strip span { font-size: 9px; }
.stat-strip strong { font-size: 17px; letter-spacing: -0.02em; }
.check-list { gap: 9px; }
.check-item > span { border-radius: 8px; }
.success-copy { padding: 14px 15px; }
.solve-button { min-height: 44px; margin-top: 3px; }
.config-card { transition: border-color 160ms ease, box-shadow 160ms ease; }
.config-card:hover { border-color: rgba(31,102,84,0.25); box-shadow: 0 18px 48px rgba(23,63,52,0.075); }
.config-card-body > .summary-groups, .config-card-body > .structured-list, .config-card-body > .plain-list, .config-card-body > .empty-copy { padding: 13px 15px 15px; }
.chips span { border: 1px solid rgba(31,102,84,0.055); border-radius: 8px; }
.job-row { border-top-color: rgba(42,74,62,0.09); }
.job-state { border-radius: 8px; }

.result-head { padding: 17px 19px; background: linear-gradient(180deg, rgba(237,245,241,0.48), transparent); }
.result-controls select { border-radius: 11px; background: #fff; }
.schedule-table { background: #fff; }
.schedule-table th { color: #174b3e; background: #edf5f1; }
.schedule-table thead th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px #dce4df; }
.schedule-table tbody th { position: sticky; left: 0; z-index: 2; }
.schedule-table td { background: #fffefb; }
.schedule-table tbody tr:hover td { background: #fffaf0; }

.modal-backdrop { background: rgba(12,35,28,0.64); }
.editor-modal { border: 1px solid rgba(255,255,255,0.5); border-radius: 24px; box-shadow: 0 34px 100px rgba(0,0,0,0.32); }
.modal-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.check-grid label { border-radius: 11px; }
.matrix-scroll { border-radius: 14px; }
.weight-row { border-radius: 13px; }
.compact-weight-group { padding: 12px; display: grid; gap: 8px; border: 1px solid #d5e3dc; border-radius: 14px; background: #f7faf8; }
.compact-weight-group > strong { font-size: 13px; }
.compact-weight-group > small { color: var(--ink-soft); font-size: 10.5px; line-height: 1.5; }
.toast { border: 1px solid rgba(255,255,255,0.1); border-radius: 13px; background: #193c31; box-shadow: 0 18px 55px rgba(0,0,0,0.24); }

@media (max-width: 1280px) and (min-width: 1181px) {
  .app-shell { grid-template-columns: 248px minmax(0, 1fr); }
  .workspace-scroll { padding-inline: 18px; }
  .workspace-grid { grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.75fr); gap: 15px; }
  .step { padding-inline: 9px; }
  .step-number { width: 27px; height: 27px; }
}

@media (max-width: 1180px) {
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .main-area { height: auto; min-height: 100vh; overflow: visible; }
  .workspace-scroll { display: block; overflow: visible; }
  .workspace-grid { gap: 16px; }
  .workspace-grid { grid-template-columns: 1fr; }
  .conversation-card, .workspace-result { min-height: 760px; }
  .messages { max-height: 520px; }
  .inspector-stack { gap: 12px; }
  .inspector-stack { padding-right: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .preflight-card, .jobs-card { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .auth-screen { grid-template-columns: minmax(0, 1fr); background: linear-gradient(180deg, #123c32 0 46%, #f5f4ef 46.1%); }
  .auth-description, .service-pills { margin-left: 0; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 15px; grid-template-rows: auto auto auto; border-radius: 0 0 20px 20px; }
  .task-list, .sidebar-section-title { display: none; }
  .user-card { position: absolute; top: 15px; right: 14px; border: 0; }
  .user-card > div:not(.avatar) { display: none; }
  .brand-row { padding-right: 118px; }
  .topbar { padding: 16px 18px; }
  .topbar h1 { max-width: 65vw; font-size: 21px; }
  .workspace-scroll { padding: 16px 18px 30px; }
  .system-banner { margin: 14px 18px 0; align-items: flex-start; flex-direction: column; }
  .stepper { margin-bottom: 15px; }
  .stepper { grid-template-columns: repeat(6, minmax(128px, 1fr)); overflow-x: auto; }
}

@media (max-width: 680px) {
  .auth-card h1 { font-size: 32px; }
  .login-card { border-radius: 22px; }
  .topbar { min-height: 76px; padding: 14px 16px; }
  .topbar h1 { max-width: 68vw; font-size: 18px; }
  .topbar-status { padding: 7px 9px; font-size: 10px; }
  .workspace-scroll { padding: 13px 12px 24px; }
  .stepper { border-radius: 14px; }
  .conversation-card { min-height: 680px; border-radius: 16px; }
  .inspector-stack { grid-template-columns: 1fr; }
  .preflight-card, .jobs-card { grid-column: auto; }
  .message-bubble { max-width: 88%; }
  .messages { padding-inline: 13px; }
  .composer, .suggestions { padding-inline: 13px; }
  .composer-actions .primary { width: 100%; margin-left: 0; }
  .composer-actions { align-items: stretch; flex-direction: column; }
  .queued-file { grid-template-columns: 24px minmax(0, 1fr) 22px; }
  .queued-file small { display: none; }
  .result-controls select { width: 100%; }
  .editor-modal { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Public landing page and product tour. */
.auth-screen {
  grid-template-columns: minmax(0, 1.14fr) minmax(360px, 0.7fr);
  grid-template-rows: auto auto;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding-block: clamp(42px, 6vw, 86px);
}
.auth-card, .login-card { align-self: center; }
.auth-keywords {
  margin: 0 0 20px 86px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.auth-keywords span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #e0ebe6;
  background: rgba(255,255,255,0.075);
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.developer-contact {
  margin: -4px 0 0;
  padding-top: 11px;
  text-align: center;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.developer-contact strong { color: var(--forest); letter-spacing: 0.035em; }
.auth-showcase {
  width: min(100%, 1180px);
  margin-top: clamp(10px, 2vw, 28px);
  padding: clamp(18px, 3vw, 30px);
  grid-column: 1 / -1;
  justify-self: center;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 28px;
  background: rgba(255,254,251,0.96);
  box-shadow: 0 30px 86px rgba(12,42,33,0.2);
}
.showcase-heading {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
}
.showcase-heading h2 { margin: 0; font-size: clamp(23px, 3vw, 36px); line-height: 1.18; letter-spacing: -0.035em; }
.showcase-heading > div > p:last-child { max-width: 760px; margin: 9px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.showcase-chapters { display: none; }
.showcase-count { flex: 0 0 auto; color: #84928b; font-size: 13px; letter-spacing: 0.08em; }
.showcase-count strong { color: var(--forest); font-size: 24px; }
.showcase-carousel { position: relative; border-radius: 21px; outline: none; }
.showcase-carousel:focus-visible { outline: 3px solid rgba(240,170,60,0.48); outline-offset: 5px; }
.showcase-stage { min-height: 0; overflow: hidden; border: 1px solid #cfdad5; border-radius: 20px; background: #edf2ef; box-shadow: 0 18px 48px rgba(18,60,50,0.13); }
.showcase-slide { display: none; margin: 0; background: #fff; }
.showcase-slide.active { display: grid; animation: showcase-fade 360ms ease-out; }
@keyframes showcase-fade { from { opacity: 0.35; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.showcase-image-link { display: block; overflow: hidden; color: inherit; background: #eef2f0; }
.showcase-image-frame { display: block; aspect-ratio: 1264 / 1000; overflow: hidden; }
.showcase-image-frame img { width: 100%; height: 100%; display: block; object-fit: contain; background: #eef2f0; }
.showcase-slide figcaption {
  padding: 16px 20px 18px;
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--line);
  background: linear-gradient(135deg, #fffefb, #f4f8f6);
}
.showcase-slide figcaption strong { color: var(--forest); font-size: 16px; }
.showcase-slide figcaption span { color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.showcase-arrow {
  position: absolute;
  top: calc(50% - 38px);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  color: #fff;
  background: rgba(11,48,38,0.82);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-size: 31px;
  line-height: 1;
  backdrop-filter: blur(8px);
}
.showcase-arrow:hover { background: var(--forest-2); transform: scale(1.04); }
.showcase-arrow.previous { left: 16px; }
.showcase-arrow.next { right: 16px; }
.showcase-dots { position: absolute; left: 50%; bottom: 87px; z-index: 2; display: flex; gap: 7px; transform: translateX(-50%); }
.showcase-dot { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(255,255,255,0.85); border-radius: 50%; background: rgba(14,57,46,0.38); box-shadow: 0 2px 7px rgba(0,0,0,0.14); }
.showcase-dot.active { width: 27px; border-radius: 999px; background: var(--amber); }
.showcase-loading {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  padding: 8px 11px;
  display: none;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  color: #fff;
  background: rgba(11,48,38,0.84);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  font-size: 11px;
  backdrop-filter: blur(8px);
}
.showcase-carousel.is-loading .showcase-loading { display: block; }
.showcase-enlarge { margin: 11px 2px 0; text-align: right; color: #829089; font-size: 11px; }
.landing-footer {
  width: min(100%, 1180px);
  grid-column: 1 / -1;
  justify-self: center;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #dce9e3;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(13,52,43,0.92);
  box-shadow: 0 18px 44px rgba(12,42,33,0.15);
}
.landing-footer > div { display: grid; gap: 2px; }
.landing-footer strong { color: #fff; font-size: 15px; }
.landing-footer span { color: #a9c2b7; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.landing-footer p { margin: 0; color: #c9dbd3; font-size: 11px; }
.seo-shell { min-height: 100vh; padding: 12vw; color: #fff; background: var(--forest); }
.seo-shell h1 { max-width: 800px; margin: 0 0 24px; font-size: clamp(36px, 6vw, 72px); }
.seo-shell p, .seo-shell li { max-width: 820px; font-size: 16px; line-height: 1.8; }

@media (min-width: 1440px) {
  .auth-screen {
    grid-template-columns: minmax(0, 920px) minmax(380px, 430px);
    grid-template-rows: auto auto auto;
    justify-content: center;
    column-gap: clamp(72px, 5vw, 104px);
    row-gap: 32px;
    padding: clamp(58px, 4vw, 82px) clamp(48px, 5vw, 104px) 48px;
    background:
      radial-gradient(circle at 24% 13%, rgba(240,170,60,0.16), transparent 23rem),
      linear-gradient(109deg, #0d3129 0%, #164b3d 64.4%, #f3f1ea 64.5%, #f8f7f3 100%);
  }
  .auth-card { max-width: 860px; justify-self: start; }
  .auth-card h1 { max-width: 760px; font-size: clamp(52px, 3.2vw, 66px); text-wrap: balance; }
  .auth-description { max-width: 700px; margin-top: 30px; }
  .login-card { width: 100%; max-width: 430px; justify-self: end; }
  .auth-showcase, .landing-footer { width: 100%; }
  .auth-showcase {
    margin-top: 0;
    padding: 30px 30px 18px;
    display: grid;
    grid-template-columns: minmax(350px, 0.38fr) minmax(0, 1fr);
    grid-template-areas:
      "heading carousel"
      "heading enlarge";
    column-gap: clamp(26px, 3vw, 46px);
    align-items: start;
  }
  .showcase-heading {
    grid-area: heading;
    align-self: stretch;
    margin: 0;
    padding: 6px 0 8px 3px;
    align-items: flex-start;
    flex-direction: column;
  }
  .showcase-heading h2 { max-width: 390px; font-size: clamp(30px, 1.8vw, 35px); text-wrap: balance; }
  .showcase-heading > div > p:last-child { max-width: 350px; }
  .showcase-chapters {
    width: 100%;
    margin-top: 25px;
    display: grid;
    gap: 8px;
  }
  .showcase-chapter {
    width: 100%;
    min-height: 48px;
    padding: 8px 11px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    text-align: left;
    color: #557067;
    border: 1px solid #dce7e1;
    border-radius: 12px;
    background: rgba(245,249,247,0.78);
  }
  .showcase-chapter:hover { color: var(--forest); border-color: #abc8bb; background: #edf5f1; }
  .showcase-chapter > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #71887e;
    border-radius: 9px;
    background: #e6efeb;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
  }
  .showcase-chapter strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .showcase-chapter.active { color: #fff; border-color: #174b3e; background: linear-gradient(135deg, #1f6654, #123c32); box-shadow: 0 10px 24px rgba(18,60,50,0.16); }
  .showcase-chapter.active > span { color: #173d32; background: var(--amber); }
  .showcase-count { margin-top: auto; padding-top: 24px; }
  .showcase-carousel { grid-area: carousel; min-width: 0; }
  .showcase-enlarge { grid-area: enlarge; }
}

@media (max-width: 900px) {
  .auth-screen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 28px;
    padding: 36px 20px 46px;
    background: linear-gradient(180deg, #123c32 0 610px, #f5f4ef 610.5px 100%);
  }
  .auth-card { width: min(100%, 720px); justify-self: center; }
  .auth-description, .auth-keywords, .service-pills { margin-left: 0; }
  .login-card { width: min(100%, 520px); }
  .auth-showcase { grid-column: auto; margin-top: 4px; border-color: var(--line); box-shadow: 0 20px 58px rgba(24,47,39,0.12); }
  .landing-footer { grid-column: auto; }
  .internal-footer { display: none; }
}

@media (max-width: 680px) {
  .auth-screen { gap: 23px; padding: 28px 14px 34px; background: linear-gradient(180deg, #123c32 0 600px, #f5f4ef 600.5px 100%); }
  .auth-brand { align-items: center; }
  .auth-brand .logo-mark { width: 52px; height: 52px; font-size: 23px; }
  .auth-card h1 { font-size: 31px; }
  .auth-description { margin-top: 23px; font-size: 15px; line-height: 1.7; }
  .auth-keywords { margin-bottom: 15px; }
  .auth-keywords span { font-size: 10px; }
  .login-card { padding: 27px 21px; }
  .auth-showcase { padding: 15px 11px 13px; border-radius: 20px; }
  .showcase-heading { margin: 0 4px 13px; align-items: flex-start; }
  .showcase-heading h2 { font-size: 23px; }
  .showcase-heading > div > p:last-child { font-size: 12px; }
  .showcase-count { display: none; }
  .showcase-stage { border-radius: 14px; }
  .showcase-slide figcaption { padding: 13px 14px 15px; }
  .showcase-slide figcaption strong { font-size: 14px; }
  .showcase-slide figcaption span { font-size: 11px; }
  .showcase-arrow { top: calc(50% - 47px); width: 38px; height: 38px; font-size: 25px; }
  .showcase-arrow.previous { left: 8px; }
  .showcase-arrow.next { right: 8px; }
  .showcase-dots { bottom: 83px; }
  .showcase-enlarge { margin-right: 4px; }
  .showcase-loading { top: 9px; right: 9px; }
  .landing-footer { padding: 15px 16px; align-items: flex-start; flex-direction: column; gap: 7px; border-radius: 15px; }
}

/* Important-information readability pass. Keep metadata subordinate. */
.task-item-title { font-size: 15px; line-height: 1.35; }
.task-item-meta { font-size: 11px; }
.task-template-badge { font-size: 9px; }

.step { min-height: 67px; }
.step strong { font-size: 13px; line-height: 1.25; }
.step small { font-size: 10px; line-height: 1.25; }
.step-number { font-size: 12px; }

.card-head h3 { font-size: 16px; }
.phase-badge, .readiness { font-size: 11px; }
.phase-guidance { font-size: 13px; line-height: 1.55; }
.message-bubble { font-size: 14px; line-height: 1.72; }
.message-role { font-size: 10px; }
.suggestion { font-size: 12px; }

.stat-strip span { font-size: 10px; line-height: 1.35; }
.stat-strip strong { font-size: 18px; }
.check-item strong { font-size: 12px; line-height: 1.55; }
.check-item small { font-size: 10px; line-height: 1.5; }
.success-copy { font-size: 13px; line-height: 1.55; }
.solve-note { font-size: 10px; line-height: 1.5; }

.summary-groups label, .structured-list > label { font-size: 10.5px; }
.chips span { padding: 5px 8px; font-size: 11.5px; line-height: 1.25; }
.summary-line { font-size: 12px; }
.requirement-row, .teacher-row { padding-block: 9px; gap: 4px; }
.requirement-row strong, .teacher-row strong { font-size: 12.5px; line-height: 1.4; }
.requirement-row span, .teacher-row span { font-size: 11.5px; line-height: 1.55; }
.plain-list { gap: 9px; font-size: 12px; line-height: 1.65; }
.empty-copy { font-size: 12px; line-height: 1.65; }

.job-row strong { font-size: 12.5px; }
.job-row small { font-size: 10px; }
.result-head > div:first-child > span { font-size: 12px; }
.schedule-table th, .schedule-table td { font-size: 12px; }

.editor-grid label > span, .editor-field > span { font-size: 13px; }
.check-grid label { font-size: 12px; }
.matrix-table th { font-size: 12px; }
.matrix-table th small { font-size: 9px; }
.matrix-table td input { font-size: 12px; }
.weight-row strong { font-size: 13px; }
.weight-row small { font-size: 10.5px; line-height: 1.45; }

/* Compact single-open accordion for the right-side configuration cards. */
.config-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.config-card.expanded { border-color: rgba(31,102,84,0.3); box-shadow: 0 18px 48px rgba(23,63,52,0.085); }
.card-head.compact.config-card-head {
  min-height: 48px;
  padding: 6px 8px;
  flex: 0 0 auto;
  gap: 8px;
}
.config-card-toggle {
  min-width: 0;
  min-height: 32px;
  flex: 1 1 auto;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  text-align: left;
  border: 0;
  border-radius: 9px;
  background: transparent;
}
.config-card-toggle:hover { background: var(--mint); }
.config-card-toggle:focus-visible { outline: 2px solid #77a18f; outline-offset: 1px; }
.config-card-chevron {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--forest-2);
  border: 1px solid #c9ddd4;
  border-radius: 8px;
  background: #f7fbf9;
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease;
}
.config-card.expanded .config-card-chevron { transform: rotate(90deg); background: var(--mint-2); }
.config-card-status {
  flex: 0 0 auto;
  padding: 3px 6px;
  color: #557067;
  border-radius: 999px;
  background: #edf4f0;
  font-size: 10px;
  font-weight: 800;
}
.config-card-title { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.config-card-head > .text-button { min-height: 30px; padding: 5px 8px; flex: 0 0 auto; font-size: 12px; }
.config-card-body {
  min-height: 0;
  max-height: 320px;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: #b8c8c0 transparent;
  scrollbar-width: thin;
}
.config-card-body[hidden] { display: none; }
.config-card-body::-webkit-scrollbar { width: 7px; }
.config-card-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #b8c8c0;
  background-clip: padding-box;
}

@media (min-width: 1181px) {
  .inspector-stack { display: flex; flex-direction: column; }
  .preflight-card, .jobs-card, .config-card.collapsed { flex: 0 0 auto; }
  .config-card.expanded { min-height: 220px; flex: 1 1 300px; }
  .config-card.expanded .config-card-body { max-height: none; }
}

@media (max-width: 1180px) {
  .inspector-stack { align-items: start; }
  .config-card { width: 100%; }
}

@media (max-width: 680px) {
  .task-item-title { font-size: 14px; }
  .message-bubble { font-size: 13.5px; }
  .step strong { font-size: 12.5px; }
  .step small { font-size: 9.5px; }
}

/* Authoritative six-step workflow: the right panel is the only stage navigation. */
.workspace-scroll { grid-template-rows: minmax(0, 1fr); }
.workflow-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.workflow-card.active { border-color: rgba(31,102,84,0.42); }
.workflow-card.expanded { box-shadow: 0 18px 48px rgba(23,63,52,0.085); }
.workflow-card.status-blocked, .workflow-card.status-failed { border-color: rgba(180,74,59,0.34); }
.workflow-card.status-running { border-color: rgba(38,101,126,0.35); }
.workflow-card-head {
  min-height: 56px;
  padding: 7px 8px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid transparent;
}
.workflow-card.expanded .workflow-card-head { border-bottom-color: var(--line); }
.workflow-card-toggle {
  min-width: 0;
  min-height: 40px;
  padding: 3px 4px;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
}
.workflow-card-toggle:hover { background: #f4f8f6; }
.workflow-card-toggle:focus-visible { outline: 2px solid #6c9986; outline-offset: 1px; }
.workflow-chevron {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--forest-2);
  border: 1px solid #c9ddd4;
  border-radius: 8px;
  background: #f7fbf9;
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease;
}
.workflow-card.expanded .workflow-chevron { transform: rotate(90deg); background: var(--mint-2); }
.workflow-step-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #6b541f;
  border: 1px solid #e7ca8a;
  border-radius: 10px;
  background: var(--amber-soft);
  font-size: 12px;
  font-weight: 900;
}
.workflow-card.status-configured .workflow-step-icon,
.workflow-card.status-success .workflow-step-icon {
  color: #1d6848;
  border-color: #aad1be;
  background: #e1f3e9;
}
.workflow-card.status-running .workflow-step-icon {
  color: #205f78;
  border-color: #b4d4df;
  background: #e8f4f8;
}
.workflow-card.status-blocked .workflow-step-icon,
.workflow-card.status-failed .workflow-step-icon {
  color: #9c3d31;
  border-color: #efc1ba;
  background: var(--danger-soft);
}
.workflow-card.status-ready .workflow-step-icon {
  color: var(--forest);
  border-color: #9fc6b5;
  background: var(--mint-2);
}
.workflow-card-copy { min-width: 0; display: grid; flex: 1 1 auto; gap: 1px; }
.workflow-card-copy small { color: #7f8d86; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; }
.workflow-card-copy strong { overflow: hidden; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.workflow-status {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: #6b541f;
  border: 1px solid #ead29d;
  border-radius: 999px;
  background: var(--amber-soft);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.workflow-status.status-configured, .workflow-status.status-success {
  color: #1d6848;
  border-color: #b6dbc9;
  background: #e4f5eb;
}
.workflow-status.status-running {
  color: #205f78;
  border-color: #bfdae4;
  background: #eaf5f8;
}
.workflow-status.status-blocked, .workflow-status.status-failed {
  color: #9c3d31;
  border-color: #efc7c0;
  background: var(--danger-soft);
}
.workflow-status.status-ready {
  color: var(--forest);
  border-color: #b3d3c5;
  background: var(--mint);
}
.workflow-card-head > .text-button { min-height: 31px; padding: 5px 8px; flex: 0 0 auto; font-size: 11px; }
.workflow-card-body {
  min-height: 0;
  max-height: 340px;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: #b8c8c0 transparent;
  scrollbar-width: thin;
}
.workflow-card-body[hidden] { display: none; }
.workflow-card-body::-webkit-scrollbar { width: 7px; }
.workflow-card-body::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #b8c8c0; background-clip: padding-box; }
.workflow-card-body > .summary-groups,
.workflow-card-body > .structured-list,
.workflow-card-body > .plain-list,
.workflow-card-body > .empty-copy { margin: 0; padding: 14px 15px 16px; }
.workflow-body-title { padding: 13px 15px 10px; display: grid; gap: 3px; }
.workflow-body-title strong { font-size: 13px; }
.workflow-body-title span { color: var(--ink-soft); font-size: 10px; }
.solve-workflow-body { padding: 14px 15px 16px; display: grid; gap: 12px; }
.solve-workflow-body p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.jobs-list > .empty-copy { margin: 0; padding: 15px; }
.job-row { align-items: center; }
.job-row.selected { background: #eef6f2; box-shadow: inset 3px 0 var(--forest-2); }
.job-actions { display: flex !important; align-items: center; justify-content: flex-end; gap: 5px !important; }
.job-actions .text-button { padding: 6px 8px; font-size: 10px; white-space: nowrap; }

@media (min-width: 1181px) {
  .workflow-card.collapsed { flex: 0 0 auto; }
  .workflow-card.expanded { min-height: 210px; flex: 1 1 300px; }
  .workflow-card.expanded .workflow-card-body { max-height: none; }
  .workflow-card[data-workflow-section="jobs"].expanded { min-height: 180px; }
}

@media (max-width: 1180px) {
  .workflow-card { width: 100%; }
  .workflow-card[data-workflow-section="jobs"] { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .workflow-card[data-workflow-section="jobs"] { grid-column: auto; }
  .workflow-card-head { padding-inline: 6px; gap: 5px; }
  .workflow-card-toggle { gap: 5px; }
  .workflow-chevron { width: 21px; height: 21px; }
  .workflow-step-icon { width: 28px; height: 28px; }
  .workflow-card-copy strong { font-size: 13px; }
  .workflow-status { padding-inline: 6px; font-size: 9.5px; }
  .workflow-card-head > .text-button { padding-inline: 6px; font-size: 10px; }
  .job-row { grid-template-columns: 24px minmax(0, 1fr); }
  .job-actions { grid-column: 2; justify-content: flex-start; }
}

/* PP's Blog-inspired navy theme: dark editorial chrome, cool-white content. */
body {
  background:
    radial-gradient(circle at 72% -10%, rgba(74, 88, 164, 0.09), transparent 28rem),
    var(--canvas);
}
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-color: rgba(72, 85, 156, 0.42);
}
input, textarea, select { border-color: #d8dce8; }
input::placeholder, textarea::placeholder { color: #9699a8; }
input:focus, textarea:focus, select:focus {
  border-color: #6874ad;
  box-shadow: 0 0 0 3px rgba(72, 85, 156, 0.12);
}
.primary {
  background: linear-gradient(135deg, #303b79, #0f1120);
  box-shadow: 0 8px 20px rgba(15, 17, 32, 0.17);
}
.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #43519b, #1b203f);
  box-shadow: 0 10px 24px rgba(15, 17, 32, 0.23);
}
.secondary, .file-button, .text-button {
  color: #33417f;
  border-color: rgba(57, 70, 137, 0.1);
  background: var(--mint);
}
.secondary:hover, .file-button:hover, .text-button:hover { background: var(--mint-2); }
.icon-button:hover { color: #27336f; background: var(--mint); }
.eyebrow { color: #737787; }
.muted { color: #858997; }

.auth-screen {
  background:
    radial-gradient(circle at 20% 18%, rgba(240, 170, 60, 0.15), transparent 22rem),
    radial-gradient(circle at 55% 6%, rgba(91, 105, 190, 0.2), transparent 28rem),
    linear-gradient(112deg, #0f1120 0%, #191e38 57%, #f4f5f9 57.1%, #fafbff 100%);
}
.logo-mark { color: #0f1120; }
.auth-card .eyebrow { color: #b3b7c9; }
.brand-subtitle { color: #c5c9d9; }
.auth-description { color: #d9dce8; }
.auth-keywords span { color: #eef0f7; }
.service-pill { background: rgba(255,255,255,0.075); }
.login-card {
  border-color: rgba(255,255,255,0.76);
  background: rgba(255,255,255,0.97);
  box-shadow: 0 30px 80px rgba(15,17,32,0.2);
}
.developer-contact strong { color: #242d63; }

.sidebar {
  background:
    radial-gradient(circle at 20% 0%, rgba(240,170,60,0.11), transparent 16rem),
    linear-gradient(180deg, #181c34 0%, #0f1120 100%);
  box-shadow: 18px 0 45px rgba(15,17,32,0.09);
}
.brand-row span:not(.logo-mark),
.sidebar-section-title,
.task-item-meta,
.sidebar-empty,
.internal-footer,
.user-card span { color: #aeb2c4; }
.internal-footer strong, .task-item { color: #e4e6ef; }
.new-task-box input::placeholder { color: #aeb2c4; }
.new-task-box .primary { color: #0f1120; }
.task-item.active {
  border-color: rgba(240,170,60,0.28);
  background: linear-gradient(90deg, rgba(240,170,60,0.15), rgba(255,255,255,0.045));
}
.avatar { background: linear-gradient(145deg, #3d477e, #282f5a); }
.user-card .icon-button { color: #c7cad8; }

.topbar {
  border-bottom-color: rgba(15,17,32,0.08);
  background: rgba(250,251,255,0.9);
  box-shadow: 0 10px 30px rgba(15,17,32,0.035);
}
.topbar-status { border-color: rgba(57,70,137,0.13); box-shadow: 0 6px 18px rgba(15,17,32,0.045); }
.stepper, .card { border-color: rgba(36,42,78,0.13); box-shadow: 0 14px 40px rgba(15,17,32,0.055); }
.step { border-right-color: rgba(36,42,78,0.09); }
.step:hover { background: #f6f7fb; }
.step.active { background: linear-gradient(135deg, #e9ecf8, #f5f6fb); }
.step.active .step-number {
  border-color: #2f3b79;
  background: linear-gradient(145deg, #46549a, #20264d);
  box-shadow: 0 5px 12px rgba(15,17,32,0.18);
}
.step.complete:not(.active) .step-number { color: #354381; border-color: #b8c0e0; background: #edf0fa; }
.result-step:not(.active) { background: linear-gradient(135deg, #fff, #f7f8fc); }
.card-head { border-bottom-color: rgba(36,42,78,0.1); }
.phase-badge, .readiness { color: #354381; border-color: rgba(57,70,137,0.1); background: #eef0f8; }

.conversation-card, .suggestions, .composer { background: #fff; }
.messages { background: linear-gradient(180deg, rgba(246,247,251,0.82), rgba(255,255,255,0.28)); }
.messages::-webkit-scrollbar-thumb,
.inspector-stack::-webkit-scrollbar-thumb,
.config-card-body::-webkit-scrollbar-thumb,
.workflow-card-body::-webkit-scrollbar-thumb { background: #c4c8d8; }
.message-avatar { color: #33417f; border-color: rgba(57,70,137,0.1); background: #eef0f8; box-shadow: 0 5px 14px rgba(15,17,32,0.07); }
.message-row.user .message-avatar { background: linear-gradient(145deg, #4a58a0, #28336b); }
.message-bubble { border-color: rgba(36,42,78,0.13); box-shadow: 0 7px 22px rgba(15,17,32,0.05); }
.message-row.user .message-bubble { background: linear-gradient(145deg, #36458a, #20264d); box-shadow: 0 8px 24px rgba(15,17,32,0.17); }
.message-row.user .message-role { color: #d9dcef; }
.attachment-card, .message-job-card { border-color: #d5d9e8; background: #f7f8fc; }
.attachment-card:hover { border-color: #aeb6d7; background: #eef1fa; }
.attachment-icon { background: linear-gradient(145deg, #5362aa, #33417f); }
.suggestion { color: #575760; border-color: #e2e4ec; background: #f5f6f9; }
.suggestion:hover { color: #2d3976; border-color: #c7cce1; background: #eef0f8; }
.composer, .suggestions { border-color: rgba(36,42,78,0.1); }
.composer { box-shadow: 0 -12px 30px rgba(15,17,32,0.03); }
.queued-file, .compact-weight-group { border-color: #d9dce8; background: #f7f8fc; }
.queued-file > span { background: #2d3976; }

.preflight-card.ready { border-color: #cbd1e9; box-shadow: 0 16px 44px rgba(57,70,137,0.06); }
.stat-strip, .result-head { background: linear-gradient(180deg, rgba(238,240,248,0.72), transparent); }
.config-card:hover, .config-card.expanded, .workflow-card.active { border-color: rgba(57,70,137,0.32); }
.config-card.expanded, .workflow-card.expanded { box-shadow: 0 18px 48px rgba(15,17,32,0.075); }
.config-card-toggle:hover, .workflow-card-toggle:hover { background: #f1f2f8; }
.config-card-toggle:focus-visible, .workflow-card-toggle:focus-visible { outline-color: #6874ad; }
.config-card-chevron, .workflow-chevron { color: #3b4789; border-color: #d1d5e4; background: #f8f9fc; }
.config-card-status { color: #4d5368; background: #f0f1f6; }
.chips span { color: #33417f; border-color: rgba(57,70,137,0.07); background: #eef0f8; }
.workflow-card.status-configured .workflow-step-icon,
.workflow-card.status-ready .workflow-step-icon {
  color: #34448c;
  border-color: #c4cae6;
  background: #edf0fa;
}
.workflow-status.status-configured,
.workflow-status.status-ready {
  color: #34448c;
  border-color: #cbd1ea;
  background: #eef0fa;
}
.schedule-table th { color: #29356f; background: #eef0f8; }
.schedule-table thead th { box-shadow: inset 0 -1px #dfe2ec; }
.schedule-table td { background: #fff; }
.schedule-table tbody tr:hover td { background: #fff9ed; }
.modal-backdrop { background: rgba(15,17,32,0.67); }
.toast { background: #171b32; }
.job-row.selected { background: #eef0f8; }

.auth-showcase {
  border-color: rgba(255,255,255,0.68);
  background: rgba(255,255,255,0.97);
  box-shadow: 0 30px 86px rgba(15,17,32,0.19);
}
.showcase-count, .showcase-enlarge { color: #7d8190; }
.showcase-count strong, .showcase-slide figcaption strong { color: #29356f; }
.showcase-stage { border-color: #d6d9e4; background: #eef0f5; box-shadow: 0 18px 48px rgba(15,17,32,0.13); }
.showcase-image-link, .showcase-image-frame img { background: #eef0f5; }
.showcase-slide figcaption { background: linear-gradient(135deg, #fff, #f5f6fa); }
.showcase-arrow, .showcase-loading { background: rgba(15,17,32,0.86); }
.showcase-dot { background: rgba(15,17,32,0.42); }
.landing-footer { color: #e2e4ed; background: rgba(15,17,32,0.94); box-shadow: 0 18px 44px rgba(15,17,32,0.17); }
.landing-footer span { color: #b5b9ca; }
.landing-footer p { color: #d1d4df; }
.seo-shell { background: #0f1120; }

@media (min-width: 1440px) {
  .auth-screen {
    background:
      radial-gradient(circle at 24% 13%, rgba(240,170,60,0.14), transparent 23rem),
      radial-gradient(circle at 52% 4%, rgba(91,105,190,0.2), transparent 30rem),
      linear-gradient(109deg, #0f1120 0%, #191e38 64.4%, #f4f5f9 64.5%, #fafbff 100%);
  }
  .showcase-chapter { color: #575760; border-color: #dfe2ec; background: rgba(247,248,252,0.86); }
  .showcase-chapter:hover { color: #29356f; border-color: #bcc3de; background: #eef0f8; }
  .showcase-chapter > span { color: #69708a; background: #e9ebf3; }
  .showcase-chapter.active { border-color: #29356f; background: linear-gradient(135deg, #43519b, #171b32); box-shadow: 0 10px 24px rgba(15,17,32,0.18); }
  .showcase-chapter.active > span { color: #0f1120; }
}

@media (max-width: 900px) {
  .auth-screen { background: linear-gradient(180deg, #0f1120 0 610px, #fafbff 610.5px 100%); }
  .auth-showcase { box-shadow: 0 20px 58px rgba(15,17,32,0.13); }
}

@media (max-width: 680px) {
  .auth-screen { background: linear-gradient(180deg, #0f1120 0 600px, #fafbff 600.5px 100%); }
}

/* Compact conversation title and contextual step help. */
.conversation-card { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.card-head.conversation-head {
  min-height: 56px;
  padding: 9px 14px;
  position: relative;
  overflow: visible;
}
.conversation-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.conversation-step-label {
  min-height: 24px;
  padding: 0 8px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #48569d, #20264d);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.conversation-ai-label {
  flex: 0 0 auto;
  color: #777b8c;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.13em;
}
.card-head .conversation-heading h2 {
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phase-help { position: relative; flex: 0 0 auto; }
.phase-help-button {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #cfd4e5;
  border-radius: 50%;
  color: #354381;
  background: #f6f7fb;
  box-shadow: 0 4px 12px rgba(15,17,32,0.06);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}
.phase-help-button:hover,
.phase-help-button.active {
  color: #fff;
  border-color: #354381;
  background: #354381;
}
.phase-help-button:focus-visible { outline: 3px solid rgba(72,85,156,0.28); outline-offset: 2px; }
.phase-help-popover {
  width: min(360px, calc(100vw - 64px));
  padding: 12px 14px;
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 4px;
  transform-origin: top right;
  border: 1px solid #e2d6bc;
  border-radius: 13px 4px 13px 13px;
  color: var(--ink);
  background: linear-gradient(135deg, #fff8e9, #fffdf8);
  box-shadow: 0 16px 38px rgba(15,17,32,0.16);
  animation: phase-help-expand 160ms ease-out;
  font-size: 12px;
  line-height: 1.55;
}
.phase-help-popover::before {
  width: 10px;
  height: 10px;
  position: absolute;
  top: -6px;
  right: 9px;
  transform: rotate(45deg);
  border-top: 1px solid #e2d6bc;
  border-left: 1px solid #e2d6bc;
  background: #fff9ed;
  content: "";
}
.phase-help-popover[hidden] { display: none; }
.phase-help-popover strong { font-size: 12px; }
.phase-help-popover span { color: var(--ink-soft); }

@keyframes phase-help-expand {
  from { opacity: 0; transform: translateY(-5px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 680px) {
  .card-head.conversation-head { min-height: 52px; padding: 8px 10px; gap: 8px; }
  .conversation-heading { gap: 6px; }
  .conversation-step-label { min-height: 22px; padding-inline: 7px; font-size: 8px; }
  .conversation-ai-label { font-size: 9px; letter-spacing: 0.08em; }
  .card-head .conversation-heading h2 { font-size: 16px; }
  .phase-help-button { width: 28px; height: 28px; }
  .phase-help-popover { width: min(330px, calc(100vw - 48px)); }
}