:root {
  --canvas: #f3f5f2;
  --surface: #ffffff;
  --surface-soft: #f8faf8;
  --ink: #1e2722;
  --muted: #66716a;
  --line: #d7ddd8;
  --line-strong: #b9c4bc;
  --accent: #356a58;
  --accent-dark: #254c3e;
  --accent-soft: #e4eee9;
  --gold: #9b6d34;
  --warning: #a75834;
  --warning-soft: #fbede5;
  --danger: #a53f3f;
  --danger-soft: #f9e8e8;
  --shadow: 0 12px 32px rgba(30, 39, 34, .08);
}

* { box-sizing: border-box; letter-spacing: 0; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 14px/1.6 "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select, input { min-height: 42px; }
button { cursor: pointer; }
button:disabled, textarea:disabled, select:disabled, input:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #d1a467; outline-offset: 2px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 24px; line-height: 1.25; font-weight: 650; }
h2 { margin-bottom: 0; font-size: 19px; line-height: 1.35; }

.lab { width: min(1380px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 28px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; }
.brand { display: inline-flex; align-items: center; min-width: 0; gap: 10px; color: inherit; text-decoration: none; }
.brand img { flex: 0 0 auto; border-radius: 7px; box-shadow: 0 5px 16px rgba(30, 39, 34, .13); }
.brand span, .brand strong, .brand small { display: block; min-width: 0; }
.brand strong { font-size: 16px; line-height: 1.4; }
.brand small { color: var(--muted); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-membership, .topbar-membership:hover { color: inherit; white-space: nowrap; }
.connection { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.connection i { width: 8px; height: 8px; border-radius: 50%; background: #9aa39d; }
.connection.is-online i { background: #4a896c; }
.connection.is-error i { background: var(--danger); }
.icon-button { display: inline-grid; place-items: center; width: 42px; min-height: 42px; border: 1px solid var(--line); border-radius: 5px; padding: 0; color: var(--muted); background: var(--surface); font-size: 20px; line-height: 1; }
.icon-button:hover { border-color: var(--line-strong); color: var(--ink); }
.mobile-only { display: none; }

.quota-strip { display: grid; grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr); gap: 26px; align-items: center; min-height: 88px; border: 1px solid var(--line); padding: 15px 18px; background: var(--surface); }
.quota-heading { min-width: 0; }
.quota-heading > div { display: flex; align-items: baseline; gap: 8px; }
.quota-heading strong { font-size: 14px; }
.quota-heading span, .quota-heading p { color: var(--muted); font-size: 11px; }
.quota-heading p { margin: 4px 0 0; overflow-wrap: anywhere; }
.quota-strip.is-warning { border-color: #d9a784; background: var(--warning-soft); }
.quota-strip.is-full { border-color: #d38a8a; background: var(--danger-soft); }
.quota-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quota-meters[hidden] { display: none; }
.quota-strip[data-state="unauthenticated"], .quota-strip[data-state="unavailable"] { grid-template-columns: minmax(0, 1fr); }
.quota-meter { min-width: 0; }
.quota-meter > span { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.quota-meter b, .quota-meter small { min-width: 0; font-size: 11px; }
.quota-meter small { color: var(--muted); overflow-wrap: anywhere; }
.quota-meter progress { display: block; width: 100%; height: 7px; border: 0; border-radius: 0; background: #e5e9e6; accent-color: var(--accent); }
.quota-meter progress::-webkit-progress-bar { background: #e5e9e6; }
.quota-meter progress::-webkit-progress-value { background: var(--accent); }
.quota-meter progress::-moz-progress-bar { background: var(--accent); }
.is-warning .quota-meter progress { accent-color: var(--warning); }
.is-warning .quota-meter progress::-webkit-progress-value { background: var(--warning); }
.is-warning .quota-meter progress::-moz-progress-bar { background: var(--warning); }
.is-full .quota-meter progress { accent-color: var(--danger); }
.is-full .quota-meter progress::-webkit-progress-value { background: var(--danger); }
.is-full .quota-meter progress::-moz-progress-bar { background: var(--danger); }

.domain-tabs { display: flex; align-items: stretch; min-height: 52px; margin-top: 14px; border: 1px solid var(--line); background: var(--surface); }
.domain-tab { position: relative; min-width: 116px; border: 0; border-right: 1px solid var(--line); padding: 10px 24px; color: var(--muted); background: transparent; font-size: 14px; font-weight: 650; }
.domain-tab:hover { color: var(--ink); background: var(--surface-soft); }
.domain-tab.is-active { color: var(--accent-dark); background: var(--accent-soft); }
.domain-tab.is-active::after { position: absolute; right: 20px; bottom: -1px; left: 20px; height: 3px; content: ""; background: var(--accent); }

.workspace { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 252px); min-height: calc(100dvh - 252px); margin-top: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.sidebar-backdrop { display: none; }
.work-panel[data-access-state="login"] .domain-panel,
.work-panel[data-access-state="expired"] .domain-panel { display: none; }
.work-panel[data-access-state="login"] .access-gate,
.work-panel[data-access-state="expired"] .access-gate { position: relative; inset: auto; min-height: 360px; height: 100%; padding: 32px 20px; background: var(--surface); }
.history-panel { position: relative; z-index: 3; min-width: 0; border-right: 1px solid var(--line); padding: 18px 14px; background: var(--surface-soft); }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.history-head strong, .history-head small { display: block; }
.history-head strong { font-size: 14px; }
.history-head small { color: var(--muted); font-size: 11px; }
.subject-row { margin-bottom: 10px; }
.subject-row label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.subject-row select { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 7px 9px; background: var(--surface); }
.history-list { display: grid; gap: 5px; margin: 12px 0; }
.history-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; min-height: 58px; border: 1px solid transparent; border-radius: 5px; background: transparent; }
.history-item:hover { border-color: var(--line); background: var(--surface); }
.history-item.is-active { border-color: #a9c5b9; background: var(--accent-soft); }
.history-select { min-width: 0; min-height: 56px; border: 0; padding: 8px 5px 8px 10px; text-align: left; background: transparent; }
.history-select strong, .history-select small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-select strong { font-size: 12px; }
.history-select small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.history-delete { width: 32px; min-height: 36px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 17px; }
.history-delete:hover { color: var(--danger); background: var(--danger-soft); }
.history-empty { margin: 26px 8px; color: var(--muted); font-size: 12px; text-align: center; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid transparent; border-radius: 5px; padding: 8px 14px; text-decoration: none; font-size: 12px; font-weight: 650; }
.button-primary { color: #fff; background: var(--accent); }
.button-primary:hover { background: var(--accent-dark); }
.button-outline { border-color: var(--line-strong); background: var(--surface); }
.button-outline:hover { border-color: var(--accent); color: var(--accent-dark); }
.button-quiet { min-height: 34px; border-color: transparent; padding: 5px 8px; color: var(--muted); background: transparent; }
.button-quiet:hover { color: var(--accent-dark); background: var(--accent-soft); }
.button-danger { color: #fff; background: var(--danger); }
.full { width: 100%; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.history-pager { border-top: 1px solid var(--line); padding-top: 9px; }

.work-panel { position: relative; min-width: 0; }
.domain-panel { min-width: 0; padding: 24px clamp(18px, 3vw, 42px) 20px; }
.domain-panel[hidden] { display: none; }
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 3px; color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.references-button span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--accent); font-size: 10px; }

.access-gate { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; min-height: 480px; padding: 36px; color: #1e2722; background: #f8faf8; isolation: isolate; }
.access-gate[hidden] { display: none; }
.access-gate > div { width: min(440px, 100%); min-width: 0; border-left: 3px solid #9b6d34; padding: 12px 0 12px 24px; }
.access-gate .eyebrow { color: #356a58; }
.access-gate h1 { margin-bottom: 10px; color: #1e2722; overflow-wrap: anywhere; }
.access-gate p:not(.eyebrow) { color: #526159; overflow-wrap: anywhere; }
.access-gate .button-primary { max-width: 100%; color: #fff; background: #356a58; white-space: normal; }
.access-gate .button-primary:hover { background: #254c3e; }

.conversation { min-height: 330px; max-height: calc(100vh - 430px); max-height: calc(100dvh - 430px); overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; scroll-behavior: smooth; }
.empty-state { display: grid; place-items: center; align-content: center; min-height: 260px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--ink); font-size: 15px; }
.empty-state p { max-width: 440px; margin: 5px 0 0; font-size: 12px; }
.message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; width: min(760px, 100%); margin-bottom: 20px; }
.message-user { margin-left: auto; grid-template-columns: minmax(0, 1fr) 34px; }
.message-avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface-soft); font-size: 11px; }
.message-user .message-avatar { grid-column: 2; color: #fff; border-color: var(--accent); background: var(--accent); }
.message-body { min-width: 0; border-left: 2px solid var(--line); padding: 4px 0 4px 12px; }
.message-user .message-body { grid-column: 1; grid-row: 1; border-right: 2px solid #96b7a9; border-left: 0; padding: 4px 12px 4px 0; text-align: right; }
.message-body p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.message-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 10px; }
.message-user .message-meta { justify-content: flex-end; }
.message-error .message-body { border-color: var(--danger); color: var(--danger); }
.knowledge-note { display: inline-flex; align-items: center; margin-top: 7px; color: var(--warning); font-size: 10px; }
.action-card { width: min(660px, calc(100% - 44px)); margin: -8px 0 20px 44px; border: 1px solid #cfb38a; padding: 14px; background: #fdf8ef; }
.action-card strong { display: block; margin-bottom: 4px; }
.action-card p { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.action-payload { display: grid; gap: 7px; margin: 10px 0; border-top: 1px solid #e2d2b8; border-bottom: 1px solid #e2d2b8; padding: 9px 0; }
.action-payload-row { min-width: 0; }
.action-payload-row b { display: block; margin-bottom: 2px; font-size: 10px; }
.action-payload-row p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.action-card .form-actions { margin-top: 0; }
.action-card .button { min-height: 44px; }
.action-card-actions { align-items: stretch; }
.action-card.is-editing { border-color: #b48c55; }
.action-editor { margin-top: 13px; border-top: 1px solid #e2d2b8; padding-top: 13px; }
.action-card .action-editor-title { margin-bottom: 10px; font-size: 12px; }
.action-edit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.action-edit-field { display: grid; min-width: 0; gap: 4px; color: var(--muted); font-size: 11px; }
.action-edit-field input, .action-edit-field select, .action-edit-natural textarea { display: block; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 10px; color: var(--ink); background: var(--surface); }
.action-edit-field input:focus, .action-edit-field select:focus, .action-edit-natural textarea:focus { border-color: var(--accent); }
.action-edit-details { margin-top: 10px; border-top: 1px solid #e2d2b8; border-bottom: 1px solid #e2d2b8; }
.action-edit-details summary { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 11px; font-weight: 650; cursor: pointer; }
.action-edit-details .action-edit-fields { padding: 0 0 10px; }
.action-edit-actions { margin-top: 10px !important; }
.action-edit-natural { margin-top: 12px; border-top: 1px solid #e2d2b8; padding-top: 12px; }
.action-edit-natural label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.action-edit-natural textarea { min-height: 76px; max-height: 180px; resize: vertical; }
.action-result { display: inline-flex; min-height: 44px; align-items: center; font-size: 11px; }
.action-card.is-resolved { border-color: var(--line); color: var(--muted); background: var(--surface-soft); }
.action-card.is-revised { border-left: 3px solid var(--accent); }
.clarification-card { margin-top: 12px; border: 1px solid #aac6ba; border-radius: 5px; padding: 12px; color: var(--ink); background: #f5faf7; text-align: left; }
.clarification-card.clarification-status-stale { border-color: #d9a784; background: var(--warning-soft); }
.clarification-card.is-historical, .clarification-card[data-interactive="false"] { border-color: var(--line); color: var(--muted); background: var(--surface-soft); }
.clarification-title { display: block; margin-bottom: 4px; font-size: 12px; }
.message-body .clarification-prompt { margin: 0; color: var(--ink); font-size: 12px; }
.clarification-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 6px; color: var(--muted); font-size: 10px; }
.clarification-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.clarification-option, .clarification-submit { min-height: 44px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 13px; color: var(--ink); background: var(--surface); font-size: 12px; font-weight: 650; }
.clarification-option:hover:not(:disabled), .clarification-submit:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.clarification-option:focus-visible, .clarification-submit:focus-visible, .clarification-integer input:focus-visible, .request-recovery button:focus-visible { outline: 3px solid rgba(57, 111, 88, .24); outline-offset: 2px; }
.clarification-option:disabled, .clarification-submit:disabled { cursor: not-allowed; opacity: .58; }
.clarification-integer { margin-top: 11px; }
.clarification-integer label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.clarification-integer-row { display: flex; align-items: stretch; gap: 8px; width: min(320px, 100%); }
.clarification-integer input { min-width: 0; min-height: 44px; flex: 1; border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 10px; color: var(--ink); background: var(--surface); }
.message-body .clarification-state { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.request-recovery { width: min(660px, calc(100% - 44px)); margin: -8px 0 20px 44px; border-left: 3px solid var(--warning); padding: 8px 0 8px 13px; }
.message-body .request-recovery { width: 100%; margin: 12px 0 0; }
.request-recovery strong { display: block; font-size: 12px; }
.request-recovery p { margin: 4px 0 9px; color: var(--muted); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-recovery .button { min-height: 44px; }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; margin-top: 14px; }
.composer textarea { width: 100%; min-height: 48px; max-height: 160px; border: 1px solid var(--line-strong); border-radius: 5px; padding: 11px 12px; background: var(--surface); resize: vertical; }
.composer textarea:focus { border-color: var(--accent); }
.send-button { width: 44px; min-height: 44px; align-self: end; border: 0; border-radius: 5px; color: #fff; background: var(--accent); font-size: 22px; }
.send-button:hover { background: var(--accent-dark); }
.form-status { min-height: 20px; margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.turn-pager { width: min(380px, 100%); margin: 8px auto 0; }

.profile-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 68px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.profile-summary strong { display: block; font-size: 13px; }
.profile-summary p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.profile-summary .profile-version { color: var(--gold); font-size: 11px; white-space: nowrap; }
.profile-summary .profile-modules { margin-top: 5px; color: var(--accent-dark); font-size: 11px; }
.workflow { border-bottom: 1px solid var(--line); padding: 13px 0 16px; }
.workflow summary { color: var(--ink); font-size: 13px; font-weight: 650; cursor: pointer; }
.workflow-form { margin-top: 13px; }
.workflow-form > label, .birth-grid label { display: block; color: var(--muted); font-size: 11px; }
.workflow-form textarea, .workflow-form input, .workflow-form select, .workflow-result textarea, .question-block input[type="text"], .question-block input[type="number"] { display: block; width: 100%; margin-top: 5px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; color: var(--ink); background: var(--surface); }
.workflow-form textarea, .workflow-result textarea { resize: vertical; }
.birth-grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr; gap: 10px; align-items: end; }
.birth-grid .check-field { display: flex; align-items: center; gap: 7px; min-height: 42px; border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; color: var(--ink); background: var(--surface); }
.check-field input { width: auto; min-height: 0; margin: 0; }
.bazi-module-fieldset { min-width: 0; margin: 13px 0 0; border: 0; padding: 0; }
.bazi-module-fieldset legend { margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.bazi-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.bazi-module-grid label { position: relative; display: block; min-width: 0; }
.bazi-module-grid input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; }
.bazi-module-grid span { display: grid; place-items: center; min-height: 42px; border: 1px solid var(--line); border-radius: 4px; padding: 7px 8px; color: var(--ink); background: var(--surface); font-size: 11px; text-align: center; overflow-wrap: anywhere; }
.bazi-module-grid input:checked + span { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.bazi-module-grid input:focus-visible + span { outline: 3px solid #d1a467; outline-offset: 2px; }
.bazi-module-grid input:disabled + span { opacity: .55; cursor: not-allowed; }
.profile-module-summaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.profile-module-summaries:empty { display: none; }
.profile-module-card { min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 10px; background: var(--surface-soft); }
.profile-module-card summary { cursor: pointer; font-size: 12px; overflow-wrap: anywhere; }
.profile-module-card p { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.bazi-cost-summary { min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; color: var(--muted); background: var(--surface-soft); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.bazi-cost-summary strong { color: var(--ink); }
.bazi-cost-summary p { margin: 4px 0; }
.bazi-cost-details { margin-top: 7px; }
.bazi-cost-details summary { cursor: pointer; color: var(--accent-dark); }
.bazi-conversation-cost { padding-inline: 2px; }
.request-progress { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.operation-progress { display: grid; width: min(520px, 100%); gap: 7px; margin: 3px 0 9px; color: var(--muted); font-size: 11px; }
.operation-progress-heading { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; }
.operation-progress-indicator { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(53, 106, 88, .12); animation: operation-progress-pulse 1.35s ease-in-out infinite; }
.operation-progress-label { min-width: 0; color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.operation-progress-elapsed { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.operation-progress-track { height: 3px; overflow: hidden; background: var(--line); }
.operation-progress-meter { display: block; width: 12%; height: 100%; background: var(--accent); transition: width .22s ease; }
.operation-progress-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.operation-progress-step { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-progress-step::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border: 1px solid var(--line-strong); border-radius: 50%; content: ""; vertical-align: 1px; }
.operation-progress-step.is-complete, .operation-progress-step.is-active { color: var(--ink); }
.operation-progress-step.is-complete::before { border-color: var(--accent); background: var(--accent); }
.operation-progress-step.is-active::before { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--surface); background: var(--accent); }
.operation-progress[data-state="complete"] .operation-progress-indicator { animation: none; box-shadow: none; }
.operation-progress[data-state="failed"] .operation-progress-indicator, .operation-progress-step.is-failed::before { border-color: var(--danger); background: var(--danger); box-shadow: none; animation: none; }
.operation-progress[data-state="failed"] .operation-progress-label, .operation-progress-step.is-failed { color: var(--danger); }
@keyframes operation-progress-pulse {
  0%, 100% { opacity: .48; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}
.profile-confirmed-claim { border-top: 1px solid var(--line); padding-top: 7px; }
.turn-references { display: block; margin-top: 8px; white-space: normal; text-align: left; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.workflow-result:empty { display: none; }
.workflow-card { margin-top: 14px; border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; }
.chart-confirmation-card { margin-top: 16px; padding: 16px; border: 1px solid var(--line, #d9d5cc); border-radius: 12px; background: var(--surface, #fffdf8); }
.chart-confirmation-card h3 { margin: 4px 0 8px; }
.chart-confirmation-card p { margin: 6px 0; }
.analysis-subject-note { margin: 0 0 6px; color: var(--muted, #6b665d); font-size: 0.88rem; }
.workflow-card h2 { font-size: 15px; }
.workflow-card > p { margin: 5px 0 0; color: var(--muted); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.candidate-sections { display: grid; gap: 8px; margin-top: 12px; }
.candidate-section { border-top: 1px solid var(--line); padding-top: 8px; }
.candidate-section strong { display: block; font-size: 11px; }
.candidate-section p { margin: 3px 0 0; color: var(--muted); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.question-list { display: grid; gap: 14px; margin-top: 12px; }
.question-block { min-width: 0; margin: 0; border: 0; border-top: 1px solid var(--line); padding: 10px 0 0; }
.question-block > strong, .question-block > .question-title { display: block; margin-bottom: 7px; padding: 0; font-size: 12px; font-weight: 600; line-height: 1.7; }
.question-description { margin-top: 8px; }
.question-description > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.question-description textarea { margin-top: 8px; }
.question-time-anchor { display: inline-block; margin: 0 0 8px; color: var(--gold); font-size: 10px; }
.question-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.question-sensitive { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.question-sensitive input { width: auto; min-height: 0; margin: 0; }
.question-measurement { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.option-list { display: flex; flex-wrap: wrap; gap: 7px; }
.option-list label { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; border: 1px solid var(--line); border-radius: 4px; padding: 6px 9px; font-size: 11px; }
.option-list input { min-height: 0; margin: 0; }
.timeline-list { display: grid; gap: 8px; }
.timeline-row { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(110px, .8fr) minmax(180px, 2fr) 36px; gap: 7px; align-items: start; }
.timeline-row input, .timeline-row textarea { min-width: 0; margin-top: 0; }
.timeline-row .timeline-remove { width: 36px; height: 36px; min-height: 36px; }
.timeline-add { margin-top: 8px; }
.refinement-form { border-top: 1px solid var(--line); padding-top: 12px; }
.refinement-form h3 { font-size: 13px; }
.bazi-hypothesis-list { display: grid; gap: 14px; margin-top: 13px; }
.bazi-hypothesis-item { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 5px; padding: 12px; background: var(--surface-soft); }
.bazi-hypothesis-heading { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; width: 100%; padding: 0; color: var(--ink); font-size: 12px; font-weight: 650; line-height: 1.55; overflow-wrap: anywhere; }
.bazi-hypothesis-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--accent); font-size: 10px; }
.bazi-time-scope { display: inline-flex; margin: 7px 0 0 32px; color: var(--gold); font-size: 10px; }
.bazi-verdicts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.bazi-verdicts label { position: relative; display: block; min-width: 0; }
.bazi-verdicts input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; }
.bazi-verdicts span { display: grid; place-items: center; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); background: var(--surface); font-size: 11px; font-weight: 650; }
.bazi-verdicts input:checked + span { border-color: var(--accent); color: #fff; background: var(--accent); }
.bazi-verdicts input:focus-visible + span { outline: 3px solid #d1a467; outline-offset: 2px; }
.bazi-supplement { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; }
.bazi-supplement[hidden] { display: none; }
.bazi-supplement textarea { min-height: 66px; margin-top: 5px; }
.bazi-calibration-error { color: var(--danger) !important; }
.bazi-save-preview { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: bazi-claim; }
.bazi-save-preview li { min-width: 0; border-top: 1px solid var(--line); padding: 9px 0 0 32px; counter-increment: bazi-claim; }
.bazi-save-preview li::before { float: left; width: 24px; height: 24px; margin-left: -32px; border: 1px solid var(--line-strong); border-radius: 50%; content: counter(bazi-claim); color: var(--muted); font-size: 10px; line-height: 22px; text-align: center; }
.bazi-save-preview p { margin: 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bazi-save-preview .bazi-time-scope { margin-left: 0; }
.bazi-preview-summary { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.bazi-module-suggestion { margin-top: 12px; border: 1px solid #cfb38a; border-radius: 5px; padding: 12px; color: var(--ink); background: #fdf8ef; text-align: left; }
.bazi-module-suggestion strong { display: block; font-size: 12px; }
.message-body .bazi-module-suggestion p { margin: 4px 0 10px; color: var(--muted); font-size: 11px; }
.profile-chat { margin-top: 18px; }
.profile-chat .conversation { min-height: 260px; max-height: 420px; }
.profile-chat.is-disabled { opacity: .58; }
.constitution-image-controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 11px; }
.constitution-image-controls input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.image-attach-button { cursor: pointer; color: var(--accent-dark); white-space: nowrap; }
.constitution-image-controls select { min-height: 30px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 4px 7px; background: var(--surface); color: inherit; }
.constitution-image-controls [data-constitution-image-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drawer { width: min(520px, calc(100% - 24px)); max-width: none; height: 100%; max-height: none; margin: 0 0 0 auto; border: 0; border-left: 1px solid var(--line); padding: 22px; color: var(--ink); background: var(--surface); box-shadow: -16px 0 40px rgba(30, 39, 34, .13); }
.drawer::backdrop, .confirm-dialog::backdrop { background: rgba(24, 31, 27, .42); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.reference-list { display: grid; gap: 0; margin-top: 8px; }
.reference-item { border-bottom: 1px solid var(--line); padding: 15px 0; }
.reference-item strong { display: block; overflow-wrap: anywhere; }
.reference-meta { margin: 3px 0 6px; color: var(--gold); font-size: 10px; }
.reference-item p { margin: 0; color: var(--muted); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-dialog { width: min(430px, calc(100% - 24px)); border: 1px solid var(--line); border-radius: 7px; padding: 22px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.confirm-dialog p { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.toast { position: fixed; z-index: 20; top: max(72px, calc(env(safe-area-inset-top) + 12px)); left: 50%; width: min(360px, calc(100% - 36px)); border-left: 3px solid var(--accent); padding: 11px 13px; color: #fff; background: #27342e; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, -10px); transition: opacity .16s ease, transform .16s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { border-left-color: #df7979; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; white-space: nowrap !important; }

@media (max-width: 920px) {
  .lab { width: min(100% - 20px, 760px); }
  .mobile-only { display: inline-grid; }
  .quota-strip { grid-template-columns: 1fr; gap: 12px; }
  .workspace { grid-template-columns: 1fr; min-height: calc(100dvh - 314px); }
  .history-panel { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, calc(100% - 48px)); z-index: 12; border-right: 1px solid var(--line); padding-top: max(18px, env(safe-area-inset-top)); box-shadow: var(--shadow); transform: translateX(-105%); transition: transform .2s ease; }
  .lab.is-sidebar-open .history-panel { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 11; width: 100%; height: 100%; border: 0; background: rgba(24, 31, 27, .4); }
  .lab.is-sidebar-open .sidebar-backdrop { display: block; }
  .birth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bazi-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conversation { max-height: calc(100dvh - 470px); }
}

@media (max-width: 600px) {
  .profile-module-summaries { grid-template-columns: minmax(0, 1fr); }
  .lab { width: 100%; padding: 0 0 max(16px, env(safe-area-inset-bottom)); }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto 42px 42px; gap: 7px 8px; min-height: 62px; padding: 8px 12px; }
  .brand { grid-column: 1 / 2; grid-row: 1; }
  .brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { display: contents; }
  .topbar-actions [data-h5-phone-binding] { grid-column: 1 / 3; grid-row: 2; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-membership { grid-column: 3 / 5; grid-row: 2; justify-self: end; min-height: 34px; padding: 5px 8px; }
  .connection { grid-column: 2; grid-row: 1; justify-self: end; }
  #sidebar-toggle { grid-column: 3; grid-row: 1; }
  #refresh-button { grid-column: 4; grid-row: 1; }
  .connection span { display: none; }
  .quota-strip { min-height: 0; border-right: 0; border-left: 0; padding: 11px 12px; }
  .quota-meters { gap: 9px; }
  .quota-meter > span { display: block; }
  .quota-meter small { display: block; white-space: nowrap; }
  .domain-tabs { position: sticky; top: 0; z-index: 7; margin-top: 8px; border-right: 0; border-left: 0; }
  .domain-tab { flex: 1; min-width: 0; padding: 9px 5px; }
  .workspace { margin-top: 8px; border-right: 0; border-left: 0; box-shadow: none; }
  .access-gate { padding: 28px 18px; }
  .access-gate > div { padding-left: 18px; }
  .domain-panel { padding: 18px 12px 14px; }
  .panel-heading { align-items: flex-start; }
  .panel-heading h1 { font-size: 21px; }
  .references-button { padding: 7px 9px; }
  .conversation { min-height: 300px; max-height: calc(100dvh - 455px); }
  .profile-chat .conversation { min-height: 260px; max-height: 360px; }
  .message { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; }
  .message-user { grid-template-columns: minmax(0, 1fr) 30px; }
  .message-avatar { width: 30px; height: 30px; }
  .operation-progress-heading { grid-template-columns: 9px minmax(0, 1fr); }
  .operation-progress-elapsed { grid-column: 2; }
  .operation-progress-steps { gap: 4px; font-size: 10px; }
  .action-card { width: calc(100% - 37px); margin-left: 37px; }
  .action-card-actions, .action-edit-actions, .action-edit-fields { display: grid; grid-template-columns: 1fr; width: 100%; }
  .action-card-actions .button, .action-edit-actions .button { width: 100%; }
  .request-recovery { width: calc(100% - 37px); margin-left: 37px; }
  .message-body .request-recovery { width: 100%; margin-left: 0; }
  .clarification-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clarification-option { width: 100%; padding-right: 8px; padding-left: 8px; white-space: normal; overflow-wrap: anywhere; }
  .clarification-integer-row { width: 100%; }
  .birth-grid { grid-template-columns: 1fr; }
  .bazi-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-row { grid-template-columns: 1fr 1fr 36px; }
  .timeline-row textarea { grid-column: 1 / -1; grid-row: 2; }
  .timeline-row .timeline-remove { grid-column: 3; grid-row: 1; }
  .bazi-hypothesis-item { padding: 10px; }
  .bazi-calibration-card .form-actions { display: grid; grid-template-columns: 1fr; }
  .bazi-calibration-card .form-actions .button { width: 100%; }
  .workflow-card { padding-left: 10px; }
  .drawer { width: min(100%, 520px); padding: 18px 14px; }
  .composer { grid-template-columns: minmax(0, 1fr) 42px; }
  .send-button { width: 42px; }
}

/* Immersive realm direction — the second Image2 concept translated into UI. */
:root {
  --void: #050b16;
  --night: #081323;
  --glass: rgba(10, 23, 40, .68);
  --glass-line: rgba(191, 214, 233, .2);
  --white-ink: #f4f0e8;
  --dim-ink: #aebac8;
  --ember: #ff7654;
  --ember-glow: rgba(255, 92, 49, .46);
  --jade: #55e5bd;
  --jade-glow: rgba(57, 219, 177, .38);
  --cosmic: #7184ff;
  --cosmic-glow: rgba(88, 108, 255, .42);
  --violet: #bd83ff;
}

html, body { background: var(--void); }
body { color: var(--white-ink); background: radial-gradient(ellipse at 50% -10%, #193351 0%, var(--void) 54%); }
.lab { width: min(1500px, calc(100% - 44px)); padding-bottom: 46px; }
.topbar { min-height: 76px; border-bottom: 1px solid rgba(182, 209, 231, .16); }
.brand strong { color: var(--white-ink); letter-spacing: .1em; }
.brand small, .connection, .quota-heading span, .quota-heading p { color: var(--dim-ink); }
.brand img { box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 28px rgba(78, 146, 209, .22); }
.icon-button, .button-outline { border-color: var(--glass-line); color: var(--white-ink); background: rgba(14, 29, 48, .56); }
.icon-button:hover, .button-outline:hover { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(34, 57, 84, .75); }
.quota-strip { border: 1px solid var(--glass-line); border-radius: 14px; background: rgba(9, 22, 38, .62); box-shadow: 0 18px 60px rgba(0,0,0,.24); }
.quota-heading strong, .quota-meter b { color: var(--white-ink); }
.quota-meter progress, .quota-meter progress::-webkit-progress-bar { background: rgba(184, 204, 219, .17); }
.domain-tabs { border-bottom-color: var(--glass-line); background: transparent; }
.domain-tab { color: #7f8d9f; }
.domain-tab:hover { color: #fff; background: rgba(33, 57, 83, .42); }
.domain-tab.is-active { color: #fff; background: rgba(28, 51, 76, .52); }
#tab-cureqi.is-active { color: #ffab8d; }
#tab-bazi.is-active { color: #a0f6da; }
#tab-constitution.is-active { color: #a9c2ff; }
.domain-tab.is-active::after { box-shadow: 0 0 18px currentColor; }
.workspace { border: 1px solid var(--glass-line); border-radius: 24px; overflow: hidden; background: rgba(5, 13, 25, .78); box-shadow: 0 28px 100px rgba(0,0,0,.4); }
.history-panel { border-right-color: var(--glass-line); color: var(--white-ink); background: rgba(4, 13, 25, .72); backdrop-filter: blur(18px); }
.history-head small, .subject-row label, .history-select small, .history-empty { color: var(--dim-ink); }
.history-item:hover { border-color: var(--glass-line); background: rgba(38, 64, 90, .4); }
.history-item.is-active { border-color: rgba(255, 121, 87, .52); color: #fff; background: rgba(100, 50, 50, .34); box-shadow: inset 3px 0 0 var(--ember), 0 0 24px rgba(255, 91, 54, .1); }
.history-select strong { color: inherit; }
.work-panel { background: #06101e; }
.domain-panel { color: var(--white-ink); }
.domain-panel[data-domain="cureqi"], .domain-panel[data-domain="bazi"], .domain-panel[data-domain="constitution"] { min-height: 760px; isolation: isolate; overflow: hidden; }
.domain-panel[data-domain="cureqi"] { background: radial-gradient(ellipse at 76% 4%, rgba(255, 103, 56, .4), transparent 30%), radial-gradient(ellipse at 10% 72%, rgba(137, 36, 34, .35), transparent 40%), linear-gradient(145deg, #100f1b 0%, #071222 58%, #100b15 100%); }
.domain-panel[data-domain="bazi"] { background: radial-gradient(ellipse at 74% 8%, rgba(60, 104, 255, .42), transparent 34%), radial-gradient(ellipse at 18% 92%, rgba(28, 67, 128, .5), transparent 46%), linear-gradient(145deg, #090d24 0%, #07162b 65%, #0c0b22 100%); }
.domain-panel[data-domain="constitution"] { background: radial-gradient(ellipse at 73% 8%, rgba(46, 219, 180, .36), transparent 34%), radial-gradient(ellipse at 16% 88%, rgba(20, 107, 120, .38), transparent 46%), linear-gradient(145deg, #061a22 0%, #071621 65%, #071e24 100%); }
.domain-panel[data-domain="cureqi"]::after, .domain-panel[data-domain="bazi"]::after, .domain-panel[data-domain="constitution"]::after { position: absolute; z-index: -1; top: -180px; right: -120px; width: 620px; height: 620px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; box-shadow: 0 0 0 36px rgba(255,255,255,.025), 0 0 0 72px rgba(255,255,255,.02), 0 0 100px rgba(255,255,255,.1); transform: rotate(18deg); }
.domain-panel[data-domain="cureqi"]::after { border-color: rgba(255, 151, 110, .35); box-shadow: 0 0 0 36px rgba(255, 126, 75, .08), 0 0 0 72px rgba(255, 126, 75, .045), 0 0 100px var(--ember-glow); }
.domain-panel[data-domain="bazi"]::after { border-color: rgba(137, 154, 255, .34); box-shadow: 0 0 0 36px rgba(94, 112, 255, .08), 0 0 0 72px rgba(94, 112, 255, .04), 0 0 100px var(--cosmic-glow); }
.domain-panel[data-domain="constitution"]::after { border-color: rgba(98, 255, 217, .3); box-shadow: 0 0 0 36px rgba(64, 235, 187, .08), 0 0 0 72px rgba(64, 235, 187, .04), 0 0 100px var(--jade-glow); }
.panel-heading, #panel-bazi .bazi-workspace-header { position: relative; z-index: 1; padding-top: 12px; }
.panel-heading h1, #panel-bazi .bazi-workspace-title h1 { color: #fff; font-size: clamp(30px, 4vw, 52px); letter-spacing: .08em; text-shadow: 0 4px 30px rgba(0,0,0,.55); }
.panel-lede, .bazi-workspace-context { color: #c4d0dc; font-size: 14px; }
.eyebrow { color: #d8b39c !important; letter-spacing: .2em; }
#panel-bazi .eyebrow { color: #aebaff !important; }
#panel-constitution .eyebrow { color: #9debd7 !important; }
.agent-quickstart { border: 1px solid rgba(255, 157, 112, .4); border-radius: 18px; background: linear-gradient(115deg, rgba(102, 34, 30, .7), rgba(28, 25, 42, .45)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 45px rgba(0,0,0,.25); backdrop-filter: blur(16px); }
.agent-quickstart-mark { color: #fff; background: linear-gradient(145deg, #ffab7e, #d64832); box-shadow: 0 0 30px var(--ember-glow); }
.agent-quickstart strong { color: #fff; font-size: 15px; }
.agent-quickstart p, .agent-signal { color: #c2cbd5; }
.signal-dot { background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.constitution-quickstart { border-color: rgba(95, 238, 202, .4); background: linear-gradient(115deg, rgba(16, 82, 86, .7), rgba(12, 33, 49, .52)); }
.constitution-quickstart .agent-quickstart-mark { background: linear-gradient(145deg, #7bffe0, #138f8b); box-shadow: 0 0 30px var(--jade-glow); }
.constitution-quickstart .signal-dot { background: var(--jade); box-shadow: 0 0 12px var(--jade); }
.conversation { border-color: rgba(190, 216, 235, .14); background: rgba(3, 10, 20, .28); }
.empty-state { color: #aebaca; }
.empty-state strong { color: #fff; font-size: 20px; letter-spacing: .08em; }
.empty-state p { color: #aebaca; }
.composer { border-color: rgba(191, 214, 233, .25); border-radius: 18px; background: rgba(7, 19, 34, .78); box-shadow: 0 15px 50px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
.composer textarea { color: #fff; }
.composer textarea::placeholder { color: #78889a; }
.send-button { background: linear-gradient(145deg, #ff9a6d, #d44535); box-shadow: 0 0 24px var(--ember-glow); }
.send-button:hover { background: #ff6a50; }
#panel-bazi .button-primary { color: #fff; background: linear-gradient(145deg, #7088ff, #3d50c6); box-shadow: 0 0 24px var(--cosmic-glow); }
#panel-bazi .button-primary:hover { background: #8295ff; }
#panel-bazi .bazi-confirmed-summary, #panel-bazi .bazi-chat-context, #panel-bazi .bazi-chat-body { border-color: rgba(144, 159, 255, .26); background: rgba(14, 25, 59, .58); }
#panel-bazi .bazi-module-card, #panel-bazi .profile-module-card { border-color: rgba(144, 159, 255, .24); background: rgba(14, 25, 59, .58); }
#panel-constitution .profile-summary, #panel-constitution .workflow, #panel-constitution .profile-chat { border-color: rgba(95, 238, 202, .24); background: rgba(5, 46, 53, .56); box-shadow: 0 18px 42px rgba(0,0,0,.2); }
#panel-constitution .workflow summary { color: #b4ffec; }
#panel-constitution .workflow-form textarea { color: #fff; border-color: rgba(95, 238, 202, .28); background: rgba(3, 25, 33, .7); }
#panel-constitution .button-primary { color: #03221f; background: linear-gradient(145deg, #83ffe2, #27b99b); box-shadow: 0 0 25px var(--jade-glow); }
#panel-constitution .button-primary:hover { background: #b0ffed; }
#panel-constitution .send-button { background: linear-gradient(145deg, #83ffe2, #139d8e); box-shadow: 0 0 24px var(--jade-glow); }

@media (max-width: 600px) {
  .lab { width: 100%; }
  .quota-strip { border-right: 0; border-left: 0; border-radius: 0; }
  .workspace { border-right: 0; border-left: 0; border-radius: 0; }
  .domain-panel[data-domain="cureqi"], .domain-panel[data-domain="bazi"], .domain-panel[data-domain="constitution"] { min-height: 720px; }
  .panel-heading, #panel-bazi .bazi-workspace-header { padding-top: 4px; }
  .panel-heading h1, #panel-bazi .bazi-workspace-title h1 { font-size: 32px; }
  .agent-quickstart { border-radius: 15px; }
}

@media (max-width: 380px) {
  .clarification-options { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .operation-progress-indicator { animation: none; }
}

/* Agent Lab visual system — translated from the Image2 pilot into production UI. */
:root {
  --paper: #f7f4ed;
  --paper-deep: #eee9df;
  --ink-soft: #49544f;
  --cureqi-accent: #b75e4a;
  --cureqi-soft: #f7e9e3;
  --bazi-accent: #39816c;
  --bazi-soft: #e2f0e9;
  --constitution-accent: #3d668c;
  --constitution-soft: #e5edf5;
}

body { background: var(--paper); }
.lab { width: min(1440px, calc(100% - 48px)); }
.topbar { min-height: 78px; border-bottom: 1px solid rgba(99, 108, 100, .18); }
.brand img { border-radius: 50%; }
.brand strong { letter-spacing: .04em; }
.brand small { letter-spacing: .08em; }
.quota-strip { margin-top: 16px; border-color: rgba(111, 117, 108, .2); border-radius: 16px; background: rgba(255, 253, 248, .72); box-shadow: 0 8px 26px rgba(55, 52, 42, .04); }
.domain-tabs { gap: 2px; margin-top: 18px; border: 0; border-bottom: 1px solid rgba(111, 117, 108, .22); background: transparent; }
.domain-tab { min-width: 124px; border: 0; border-radius: 11px 11px 0 0; padding: 13px 24px; color: #808881; background: transparent; letter-spacing: .08em; transition: background .18s ease, color .18s ease; }
.domain-tab:hover { background: rgba(255, 253, 248, .72); }
.domain-tab.is-active { color: var(--ink); background: rgba(255, 253, 248, .8); }
.domain-tab.is-active::after { right: 24px; left: 24px; height: 3px; border-radius: 3px; background: currentColor; }
#tab-cureqi.is-active { color: var(--cureqi-accent); }
#tab-bazi.is-active { color: var(--bazi-accent); }
#tab-constitution.is-active { color: var(--constitution-accent); }
.workspace { margin-top: 14px; border: 1px solid rgba(111, 117, 108, .2); border-radius: 22px; overflow: hidden; background: rgba(255, 253, 248, .78); box-shadow: 0 20px 60px rgba(55, 52, 42, .08); }
.history-panel { border-right-color: rgba(111, 117, 108, .16); background: rgba(250, 248, 242, .82); }
.work-panel { background: rgba(255, 253, 248, .55); }
.domain-panel[data-domain="cureqi"], .domain-panel[data-domain="constitution"], .domain-panel[data-domain="bazi"] { position: relative; }
.domain-panel[data-domain="cureqi"]::before, .domain-panel[data-domain="constitution"]::before, .domain-panel[data-domain="bazi"]::before { position: absolute; top: 0; right: 0; width: 210px; height: 150px; pointer-events: none; content: ""; opacity: .42; background: radial-gradient(circle at 75% 20%, rgba(183, 94, 74, .15), transparent 58%), linear-gradient(140deg, transparent 48%, rgba(80, 97, 91, .06) 49%, transparent 50%); }
.domain-panel[data-domain="bazi"]::before { background: radial-gradient(circle at 75% 20%, rgba(57, 129, 108, .15), transparent 58%), linear-gradient(140deg, transparent 48%, rgba(80, 97, 91, .06) 49%, transparent 50%); }
.domain-panel[data-domain="constitution"]::before { background: radial-gradient(circle at 75% 20%, rgba(61, 102, 140, .16), transparent 58%), linear-gradient(140deg, transparent 48%, rgba(80, 97, 91, .06) 49%, transparent 50%); }
.panel-heading { position: relative; z-index: 1; align-items: flex-start; margin-bottom: 18px; }
.panel-heading h1 { font-size: clamp(25px, 2.4vw, 34px); letter-spacing: .03em; }
.panel-lede { max-width: 510px; margin: 9px 0 0; color: var(--ink-soft); font-size: 13px; }
.eyebrow { letter-spacing: .14em; }
#panel-cureqi .eyebrow { color: var(--cureqi-accent); }
#panel-bazi .eyebrow { color: var(--bazi-accent); }
#panel-constitution .eyebrow { color: var(--constitution-accent); }
.agent-quickstart { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; border: 1px solid rgba(183, 94, 74, .2); border-radius: 15px; padding: 14px 16px; background: linear-gradient(105deg, rgba(247, 233, 227, .82), rgba(255, 253, 248, .58)); }
.agent-quickstart > div:first-child { display: flex; align-items: center; gap: 11px; }
.agent-quickstart-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--cureqi-accent); font-size: 18px; font-weight: 700; box-shadow: 0 5px 12px rgba(183, 94, 74, .22); }
.agent-quickstart strong { display: block; font-size: 13px; }
.agent-quickstart p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.agent-signal { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.signal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cureqi-accent); }
.constitution-quickstart { border-color: rgba(61, 102, 140, .2); background: linear-gradient(105deg, rgba(229, 237, 245, .9), rgba(255, 253, 248, .58)); }
.constitution-quickstart .agent-quickstart-mark { background: var(--constitution-accent); box-shadow: 0 5px 12px rgba(61, 102, 140, .22); }
.constitution-quickstart .signal-dot { background: var(--constitution-accent); }
.composer { position: relative; border: 1px solid rgba(111, 117, 108, .2); border-radius: 16px; padding: 7px; background: rgba(255, 253, 248, .85); box-shadow: 0 8px 20px rgba(55, 52, 42, .05); }
.composer textarea { border: 0; border-radius: 11px; background: transparent; padding: 11px 12px; }
.composer textarea:focus { box-shadow: inset 0 0 0 2px rgba(183, 94, 74, .28); }
.send-button { border-radius: 50%; background: var(--cureqi-accent); box-shadow: 0 5px 12px rgba(183, 94, 74, .2); }
#panel-bazi .bazi-workspace-header { position: relative; z-index: 1; }
#panel-bazi .panel-lede { margin-top: 6px; }
#panel-bazi .bazi-confirmed-summary, #panel-bazi .bazi-chat-context, #panel-bazi .bazi-chat-body, #panel-bazi .workflow { border-radius: 15px; }
#panel-bazi .bazi-primary-actions .button-primary, #panel-bazi .button-primary { background: var(--bazi-accent); }
#panel-bazi .bazi-primary-actions .button-primary:hover, #panel-bazi .button-primary:hover { background: #2d6857; }
#panel-constitution .profile-summary, #panel-constitution .workflow, #panel-constitution .profile-chat { position: relative; z-index: 1; border-color: rgba(61, 102, 140, .18); border-radius: 15px; background: rgba(255, 253, 248, .68); }
#panel-constitution .workflow { margin-top: 16px; padding: 17px 18px 19px; border: 1px solid rgba(61, 102, 140, .18); }
#panel-constitution .workflow summary { color: var(--constitution-accent); font-size: 14px; }
#panel-constitution .workflow-form textarea:focus { border-color: var(--constitution-accent); box-shadow: 0 0 0 3px rgba(61, 102, 140, .12); }
#panel-constitution .button-primary { background: var(--constitution-accent); }
#panel-constitution .button-primary:hover { background: #2e506f; }
#panel-constitution .profile-chat { margin-top: 18px; padding: 0 16px 16px; }
#panel-constitution .profile-chat .conversation { border-top: 0; }
#panel-constitution .send-button { background: var(--constitution-accent); box-shadow: 0 5px 12px rgba(61, 102, 140, .2); }
.conversation { background: rgba(255, 253, 248, .32); border-color: rgba(111, 117, 108, .16); }
.empty-state { padding: 34px 20px; }
.empty-state strong { font-size: 17px; letter-spacing: .03em; }
.empty-state p { max-width: 450px; line-height: 1.8; }

@media (max-width: 600px) {
  .lab { width: 100%; }
  .topbar { border-bottom: 0; }
  .domain-tabs { margin-top: 7px; }
  .domain-tab { min-width: 0; padding: 10px 5px; letter-spacing: .03em; }
  .workspace { border-radius: 0; }
  .panel-heading h1 { font-size: 24px; }
  .panel-lede { max-width: 260px; font-size: 12px; }
  .agent-quickstart { align-items: flex-start; flex-direction: column; gap: 9px; border-radius: 13px; padding: 12px; }
  .agent-signal { white-space: normal; }
  .agent-quickstart-mark { width: 36px; height: 36px; font-size: 16px; }
  #panel-constitution .workflow { padding: 14px 12px 16px; }
  #panel-constitution .profile-chat { padding: 0 10px 12px; }
}

/* Final immersive override: keep the realm treatment last in the cascade. */
html, body { background: #050b16 !important; }
body { color: #f4f0e8 !important; background: radial-gradient(ellipse at 50% -10%, #193351 0%, #050b16 54%) !important; }
.lab { width: min(1500px, calc(100% - 44px)); }
.topbar { border-bottom-color: rgba(182,209,231,.16); }
.brand strong, .panel-heading h1, #panel-bazi .bazi-workspace-title h1 { color: #f4f0e8; }
.brand small, .connection, .quota-heading span, .quota-heading p { color: #aebac8; }
.quota-strip { border-color: rgba(191,214,233,.2); border-radius: 14px; background: rgba(9,22,38,.62); box-shadow: 0 18px 60px rgba(0,0,0,.24); }
.domain-tabs { border-bottom-color: rgba(191,214,233,.2); }
.domain-tab { color: #7f8d9f; }
.domain-tab.is-active { color: #fff; background: rgba(28,51,76,.52); }
.domain-tab.is-active::after { box-shadow: 0 0 18px currentColor; }
.workspace { border-color: rgba(191,214,233,.2); border-radius: 24px; background: rgba(5,13,25,.78); box-shadow: 0 28px 100px rgba(0,0,0,.4); }
.history-panel { border-right-color: rgba(191,214,233,.2); background: rgba(4,13,25,.72); }
.work-panel { background: #06101e; }
.domain-panel[data-domain="cureqi"], .domain-panel[data-domain="bazi"], .domain-panel[data-domain="constitution"] { min-height: 760px; color: #f4f0e8; isolation: isolate; overflow: hidden; }
.domain-panel[data-domain="cureqi"] { background: radial-gradient(ellipse at 76% 4%, rgba(255,103,56,.4), transparent 30%), radial-gradient(ellipse at 10% 72%, rgba(137,36,34,.35), transparent 40%), linear-gradient(145deg,#100f1b 0%,#071222 58%,#100b15 100%); }
.domain-panel[data-domain="bazi"] { background: radial-gradient(ellipse at 74% 8%, rgba(60,104,255,.42), transparent 34%), radial-gradient(ellipse at 18% 92%, rgba(28,67,128,.5), transparent 46%), linear-gradient(145deg,#090d24 0%,#07162b 65%,#0c0b22 100%); }
.domain-panel[data-domain="constitution"] { background: radial-gradient(ellipse at 73% 8%, rgba(46,219,180,.36), transparent 34%), radial-gradient(ellipse at 16% 88%, rgba(20,107,120,.38), transparent 46%), linear-gradient(145deg,#061a22 0%,#071621 65%,#071e24 100%); }
.panel-lede, .bazi-workspace-context { color: #c4d0dc; }
.eyebrow { color: #d8b39c !important; }
#panel-bazi .eyebrow { color: #aebaff !important; }
#panel-constitution .eyebrow { color: #9debd7 !important; }
.agent-quickstart { border-color: rgba(255,157,112,.4); background: linear-gradient(115deg,rgba(102,34,30,.7),rgba(28,25,42,.45)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 45px rgba(0,0,0,.25); }
.agent-quickstart-mark { background: linear-gradient(145deg,#ffab7e,#d64832); box-shadow: 0 0 30px rgba(255,92,49,.46); }
.agent-quickstart strong { color: #fff; }
.agent-quickstart p, .agent-signal { color: #c2cbd5; }
.signal-dot { background: #ff7654; box-shadow: 0 0 12px #ff7654; }
.constitution-quickstart { border-color: rgba(95,238,202,.4); background: linear-gradient(115deg,rgba(16,82,86,.7),rgba(12,33,49,.52)); }
.constitution-quickstart .agent-quickstart-mark { background: linear-gradient(145deg,#7bffe0,#138f8b); box-shadow: 0 0 30px rgba(57,219,177,.38); }
.constitution-quickstart .signal-dot { background: #55e5bd; box-shadow: 0 0 12px #55e5bd; }
.conversation { border-color: rgba(190,216,235,.14); background: rgba(3,10,20,.28); }
.empty-state { color: #aebaca; }
.empty-state strong { color: #fff; }
.composer { border-color: rgba(191,214,233,.25); background: rgba(7,19,34,.78); box-shadow: 0 15px 50px rgba(0,0,0,.25); }
.composer textarea { color: #fff; }
.composer textarea::placeholder { color: #78889a; }
.send-button { background: linear-gradient(145deg,#ff9a6d,#d44535); box-shadow: 0 0 24px rgba(255,92,49,.46); }
#panel-bazi .button-primary { color: #fff; background: linear-gradient(145deg,#7088ff,#3d50c6); box-shadow: 0 0 24px rgba(88,108,255,.42); }
#panel-bazi .bazi-confirmed-summary, #panel-bazi .bazi-chat-context, #panel-bazi .bazi-chat-body, #panel-bazi .profile-module-card { border-color: rgba(144,159,255,.26); background: rgba(14,25,59,.58); }
#panel-constitution .profile-summary, #panel-constitution .workflow, #panel-constitution .profile-chat { border-color: rgba(95,238,202,.24); background: rgba(5,46,53,.56); }
#panel-constitution .workflow summary { color: #b4ffec; }
#panel-constitution .workflow-form textarea { color: #fff; border-color: rgba(95,238,202,.28); background: rgba(3,25,33,.7); }
#panel-constitution .button-primary { color: #03221f; background: linear-gradient(145deg,#83ffe2,#27b99b); box-shadow: 0 0 25px rgba(57,219,177,.38); }
#panel-constitution .send-button { background: linear-gradient(145deg,#83ffe2,#139d8e); box-shadow: 0 0 24px rgba(57,219,177,.38); }
.domain-panel[data-domain="bazi"] .bazi-workspace-main,
.domain-panel[data-domain="bazi"] .bazi-screen,
.domain-panel[data-domain="bazi"] .bazi-workflow-screen,
.domain-panel[data-domain="bazi"] .bazi-chat-screen { background: transparent !important; }
.domain-panel[data-domain="bazi"] .bazi-screen-heading,
.domain-panel[data-domain="bazi"] .bazi-chat-context { background: rgba(5,11,22,.28) !important; }
.access-gate { color: #f4f0e8; background: radial-gradient(ellipse at 70% 20%, rgba(74,92,255,.22), transparent 40%), linear-gradient(145deg,#06101e,#0b1424); }
.access-gate > div { border-left-color: #ff7654; }
.access-gate h1 { color: #fff; }
.access-gate p:not(.eyebrow) { color: #aebac8; }
.access-gate .eyebrow { color: #ffab8d !important; }
.access-gate .button-primary { color: #fff; background: linear-gradient(145deg,#ff9a6d,#d44535); }
.work-panel[data-access-state="login"] .access-gate, .work-panel[data-access-state="expired"] .access-gate { color: #f4f0e8; background: radial-gradient(ellipse at 70% 20%, rgba(74,92,255,.22), transparent 40%), linear-gradient(145deg,#06101e,#0b1424); }
.work-panel[data-access-state="login"] .access-gate h1, .work-panel[data-access-state="expired"] .access-gate h1 { color: #fff; }
.work-panel[data-access-state="login"] .access-gate p:not(.eyebrow), .work-panel[data-access-state="expired"] .access-gate p:not(.eyebrow) { color: #aebac8; }
@media (max-width: 600px) { .lab { width: 100%; } .workspace { border-radius: 0; } .quota-strip { border-radius: 0; } .domain-panel[data-domain="cureqi"], .domain-panel[data-domain="bazi"], .domain-panel[data-domain="constitution"] { min-height: 720px; } }

/* Generated realm art: the scene is the interface, controls sit in its dark air. */
.domain-panel[data-domain="cureqi"] { background-image: linear-gradient(90deg, rgba(5,11,22,.22) 0%, rgba(5,11,22,.32) 44%, rgba(5,11,22,.66) 100%), url('/static/agent_lab/cureqi-realm.png'); background-position: center; background-size: cover; }
.domain-panel[data-domain="bazi"] { background-image: linear-gradient(90deg, rgba(5,11,22,.2) 0%, rgba(5,11,22,.34) 44%, rgba(5,11,22,.72) 100%), url('/static/agent_lab/bazi-realm.png'); background-position: center; background-size: cover; }
.domain-panel[data-domain="constitution"] { background-image: linear-gradient(90deg, rgba(5,11,22,.2) 0%, rgba(5,11,22,.28) 44%, rgba(5,11,22,.7) 100%), url('/static/agent_lab/constitution-realm.png'); background-position: center; background-size: cover; }
.domain-panel[data-domain="cureqi"]::before, .domain-panel[data-domain="bazi"]::before, .domain-panel[data-domain="constitution"]::before { opacity: .28; mix-blend-mode: screen; }
@media (max-width: 600px) {
  .domain-panel[data-domain="cureqi"], .domain-panel[data-domain="bazi"], .domain-panel[data-domain="constitution"] { background-position: 62% center; }
  .domain-panel[data-domain="cureqi"] { background-image: linear-gradient(90deg, rgba(5,11,22,.34), rgba(5,11,22,.62)), url('/static/agent_lab/cureqi-realm.png'); }
  .domain-panel[data-domain="bazi"] { background-image: linear-gradient(90deg, rgba(5,11,22,.34), rgba(5,11,22,.62)), url('/static/agent_lab/bazi-realm.png'); }
  .domain-panel[data-domain="constitution"] { background-image: linear-gradient(90deg, rgba(5,11,22,.34), rgba(5,11,22,.62)), url('/static/agent_lab/constitution-realm.png'); }
}
/* Daily first-visit insight */
.daily-insight-card {
  margin: 18px 0 20px;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(31,36,60,.92), rgba(20,25,43,.88));
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
}
.daily-insight-kicker { display:flex; gap:10px; align-items:center; color:#d8c995; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.daily-insight-free { color:#8bd8bd; letter-spacing:0; text-transform:none; }
.daily-insight-body { margin-top:10px; color:#f5f1e8; }
.daily-insight-body h3 { margin:0 0 8px; font-size:22px; }
.daily-insight-body p { margin:6px 0; line-height:1.8; }
.daily-insight-result-section { margin-top:13px; padding-top:12px; border-top:1px solid rgba(255,255,255,.09); }
.daily-insight-result-section strong { color:#e8d7a5; }
.daily-insight-reference { display:block; margin-top:14px; color:#9da6bd; }
.daily-insight-loading, .daily-insight-error { color:#c7cede; }
.daily-insight-actions { margin-top:14px; }