/* Homeweb operations console */
:root { color: #182230; background: #f5f7fa; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 13px; line-height: 1.6; --ink: #182230; --muted: #596579; --paper: #fff; --line: #dfe5ec; --navy: #245bdb; --amber: #92520a; --amber-on-dark: #f0b96f; --green: #0f6f5d; --red: #a8322a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { width: auto; min-width: 0; min-height: 36px; border: 1px solid var(--navy); border-radius: 6px; padding: 6px 14px; color: #fff; background: var(--navy); cursor: pointer; }
button:hover:not(:disabled) { background: #1949b6; }
button:disabled { color: #737f8f; border-color: var(--line); background: #edf0f4; cursor: not-allowed; }
button.secondary, button.ghost-button { color: var(--ink); border-color: var(--line); background: #fff; }
button.secondary:hover:not(:disabled), button.ghost-button:hover:not(:disabled) { border-color: #96b3ec; background: #f3f7ff; }
button.danger { color: var(--red); border-color: #e4bdbb; background: #fff; }
button.danger:hover:not(:disabled) { background: #fff0ef; }
button.danger:disabled { color: #737f8f; border-color: var(--line); background: #edf0f4; }
button.small { padding: 5px 10px; font-size: 13px; }
button.text-button { padding: 0; border: 0; color: var(--navy); background: transparent; }
button.text-button:hover { text-decoration: underline; background: transparent; }
:focus-visible { outline: 3px solid #789de9; outline-offset: 3px; }
input, select, textarea { width: 100%; min-width: 0; min-height: 38px; border: 1px solid #bdc7d5; border-radius: 6px; padding: 8px 10px; color: var(--ink); background: #fff; }
textarea { resize: vertical; line-height: 1.6; }
h1, h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 8px; font-size: 22px; line-height: 1.4; letter-spacing: -.025em; }
h3 { margin-bottom: 12px; font-size: 16px; }
a { color: var(--navy); }
.text-link { display: inline-flex; align-items: center; min-height: 36px; gap: 6px; text-decoration: none; white-space: nowrap; font-size: 13px; }
.text-link:hover { text-decoration: underline; }
.text-link[aria-disabled=true] { color: var(--muted); pointer-events: none; }
.hint, .field-help { color: var(--muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.hint { margin-bottom: 0; }
.shell { min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--line); }
.brand-lockup, .topbar-meta { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; background: var(--navy); border-radius: 8px; font-size: 23px; font-weight: 750; }
.topbar h1 { display: inline; font-size: 19px; margin: 0 12px 0 0; }
.eyeless { color: var(--muted); font-size: 12px; }
.mode-chip { border: 1px solid #d4dfef; border-radius: 4px; color: #455875; background: #f7f9fc; font-size: 12px; padding: 3px 8px; }
.menu-toggle { display: none; }
.app-shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.step-rail { padding: 24px 12px; background: #fff; border-right: 1px solid var(--line); }
.rail-kicker { margin: 0 14px 14px; font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.step-rail ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 6px; }
.step-button { display: grid; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 11px 14px; border-radius: 6px; }
.step-button span { font-weight: 600; }
.step-button small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.step-button:hover:not(:disabled) { background: #f4f6fa; }
.step-button.active { background: #edf3ff; color: #245bdb; box-shadow: inset 3px 0 #245bdb; }
.step-button.active small { color: #526d9b; }
.rail-note { padding: 24px 14px; margin: 28px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; white-space: pre-line; }
.workbench { min-width: 0; width: 100%; max-width: 1500px; padding: 28px 32px 40px; }
.generation-panel { margin-bottom: 20px; overflow-wrap: anywhere; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 22px; }
.page-intro, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-intro h2 { margin: 2px 0 6px; }
.section-kicker { margin: 0 0 5px; font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--muted); }
.overview-page, .configure-cards { display: grid; gap: 20px; }
.overview-page .page-intro { margin-bottom: 0; }
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.status-card { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.status-card-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.status-card strong { font-size: 25px; font-weight: 650; font-variant-numeric: tabular-nums; }
.status-card .hint { margin: 0; overflow-wrap: anywhere; }
.status-dot { font-size: 12px; }
.status-ok .status-dot { color: var(--green); }
.status-warn .status-dot, .status-danger .status-dot { color: var(--amber); }
.attention-list { list-style: none; padding: 0; margin: 0; }
.attention-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 12px 0; }
.attention-list li:first-child { border-top: 0; }
.attention-list button { flex-shrink: 0; }
.toolbar, .actions, .site-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-config-card { padding: 0; overflow: hidden; }
.site-config-card .panel-heading { margin: 0; padding: 20px; border-bottom: 1px solid var(--line); }
.site-config-card .panel-heading h2 { margin: 0; }
.site-config-card .toolbar button { width: auto; min-width: 0; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.filter-bar input { flex: 1 1 220px; }
.filter-bar select { width: auto; max-width: 100%; flex: 0 1 220px; }
.site-config-card .filter-bar { margin: 18px 20px 10px; }
.list-help { padding: 0 20px 12px; }
.middle-site-list { min-width: 0; }
.site-config-card .middle-site-list { padding: 0 20px; }
.middle-site-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(130px, 1.3fr) minmax(100px, .85fr) auto; gap: 18px; align-items: center; min-height: 72px; padding: 14px 10px; border-top: 1px solid #e9edf3; }
.middle-site-row:hover { background: #f8faff; }
.middle-site-row.selected { box-shadow: inset 3px 0 #245bdb; background: #f8faff; }
.middle-site-row small { display: block; }
.middle-site-row strong, .site-domains, .site-template { overflow-wrap: anywhere; }
.site-domains, .site-template { font-size: 13px; color: var(--muted); }
.site-config-card > .message { margin: 12px 20px; }
.site-detail { min-width: 0; }
.editor-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.editor-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); background: transparent; padding: 12px 18px; }
.editor-tabs button:hover { background: #edf3ff; }
.editor-tabs button.active { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field { display: grid; gap: 8px; align-content: start; font-weight: 600; font-size: 13px; }
.full-width { grid-column: 1 / -1; }
.site-editor-footer { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 16px 20px; margin-top: 20px; box-shadow: 0 -4px 16px rgb(24 34 48 / 4%); }
.draft-summary { flex: 1 1 350px; font-size: 12px; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.site-editor-footer .message { flex: 1 0 100%; margin: 0; }
.site-editor-footer .message:empty { display: none; }
.danger-zone { margin-top: 24px; }
.danger-zone summary { cursor: pointer; color: var(--red); font-size: 13px; }
.danger-zone p { margin: 12px 0; }
.global-config-card { max-width: 100%; }
.line-form { display: grid; gap: 16px; }
.global-config-footer { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin-top: 16px; }
.global-config-footer .message { flex: 1; margin: 0; }
.template-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.template-row { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 20px; min-width: 0; }
.template-identity h3 { margin: 8px 0 2px; font-size: 17px; }
.template-identity code { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.template-state { display: inline-block; color: var(--muted); background: #f1f3f6; padding: 2px 7px; font-size: 11px; border-radius: 4px; }
.template-row[data-bound="true"] .template-state { color: var(--green); background: #e8f5f0; }
.template-domains { display: flex; flex-wrap: wrap; gap: 5px; }
.domain-chip { max-width: 100%; padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; overflow-wrap: anywhere; }
.template-action { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.template-action .text-link { margin-left: auto; }
.source-details { margin-top: 24px; }
.source-fields { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; margin: 0 0 24px; }
.source-fields dt { color: var(--muted); }
.source-fields dd { margin: 0; overflow-wrap: anywhere; }
.source-details .text-link { margin-left: 20px; }
.diagnostic-list { display: grid; margin: 16px 0; }
.diagnostic-row { display: grid; grid-template-columns: 24px 100px minmax(0, 1fr); gap: 12px; align-items: center; border-top: 1px solid var(--line); padding: 12px 0; }
.diagnostic-icon { color: var(--amber); }
.is-ok .diagnostic-icon { color: var(--green); }
.diagnostic-row > span:last-child { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.backup-list { display: grid; gap: 12px; margin-top: 16px; }
.backup-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; }
.backup-row strong { overflow-wrap: anywhere; }
.backup-row p { margin: 4px 0 0; }
.json-preview { min-height: 220px; margin: 16px 0; background: #f8fafc; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.message { color: var(--green); overflow-wrap: anywhere; }
.message:empty { display: none; }
.message.error { color: var(--red); }
.notice { padding: 12px 16px; border: 1px solid #b9dfcf; background: #effaf5; border-radius: 6px; }
.empty { padding: 24px 0; color: var(--muted); }
.login-panel { width: min(480px, calc(100vw - 32px)); margin: 10vh auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 32px; }
.login-panel label, .login-panel input { display: block; margin-bottom: 12px; }
.login-panel button { margin-top: 12px; }
/* Password login only: keep the shared initialization and recovery forms unchanged. */
.password-login-screen { display: grid; min-height: 100vh; min-height: 100svh; padding: 32px 20px; place-items: center; }
.password-login-panel { width: min(400px, 100%); margin: 0; padding: 32px; border-radius: 14px; }
.password-login-heading { margin-bottom: 28px; }
.password-login-brand { margin: 0; color: var(--navy); font-size: 28px; font-weight: 750; line-height: 1.2; letter-spacing: -.025em; }
.password-login-heading h1 { margin: 10px 0 0; font-size: 20px; font-weight: 650; line-height: 1.4; }
.password-login-heading .hint { margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
.password-login-panel label { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.password-login-input { position: relative; }
.password-login-panel input { min-height: 50px; margin: 0; padding: 12px 64px 12px 14px; font-size: 16px; line-height: 1.5; }
.password-login-panel input::placeholder { color: var(--muted); opacity: 1; }
.password-login-panel input[aria-invalid="true"] { border-color: var(--red); }
.password-login-panel .password-visibility { position: absolute; inset: 3px 3px 3px auto; width: 52px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 13px; }
.password-login-panel .password-visibility:hover:not(:disabled) { color: var(--navy); background: #edf3ff; }
.password-login-panel .password-visibility:focus-visible { outline-offset: -3px; }
.password-login-panel .password-login-submit { width: 100%; min-height: 48px; margin-top: 20px; font-size: 15px; font-weight: 600; }
.password-login-panel .password-login-submit:active:not(:disabled) { background: #153e9b; }
.password-login-panel .message, .password-login-panel .message:empty { display: block; min-height: 22px; margin: 16px 0 0; font-size: 13px; line-height: 1.6; }
@media (max-width: 480px) {
  .password-login-screen { padding: 24px 16px; }
  .password-login-panel { padding: 28px 24px; }
}
.mobile-navigation { border: 0; border-radius: 0; margin: 0; width: min(300px, 88vw); height: 100dvh; max-height: 100dvh; padding: 18px; }
.mobile-navigation::backdrop { background: rgb(24 34 48 / 40%); }
.mobile-navigation .step-rail { border: 0; padding: 24px 0; }
@media (max-width: 1150px) { .workbench { padding: 24px; } .middle-site-row { grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr); } .site-card-actions { justify-content: flex-end; } }
@media (max-width: 899px) { .app-shell { grid-template-columns: minmax(0, 1fr); } .app-shell > .step-rail { display: none; } .menu-toggle { display: inline-flex; } .topbar { padding: 12px 18px; } .eyeless { display: none; } .workbench { padding: 20px; } }
@media (max-width: 600px) {
  button, button.small, input, select, textarea { min-height: 44px; }
  .workbench { padding: 18px 12px 24px; } .panel { padding: 16px; } .topbar { padding: 12px; } .brand-mark { display: none; } .topbar h1 { margin: 0; font-size: 17px; } .topbar-meta { gap: 8px; } .mode-chip { font-size: 10px; }
  .page-intro, .panel-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  h2 { font-size: 21px; } .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .overview-grid .status-card:last-child { grid-column: 1 / -1; } .status-card { padding: 14px; } .status-card strong { font-size: 22px; }
  .site-config-card { padding: 0; } .site-config-card .panel-heading { padding: 16px; } .site-config-card .filter-bar { margin: 16px; } .site-config-card .middle-site-list { padding: 0 16px; }
  .middle-site-row { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 48px; } .site-card-actions { justify-content: flex-start; } .site-grid, .template-list { grid-template-columns: minmax(0, 1fr); }
  .editor-tabs button { padding: 10px 12px; } .site-editor-footer { padding: 12px; } .site-editor-footer button { flex: 1 1 auto; } .draft-summary { flex-basis: 100%; max-height: 90px; overflow: auto; }
  .filter-bar select { flex: 1 1 130px; } .template-action .text-link { margin-left: 0; } .backup-row { align-items: flex-start; flex-direction: column; } .source-fields { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; } .diagnostic-row { grid-template-columns: 20px 80px minmax(0, 1fr); gap: 8px; } .global-config-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

.confirm-dialog { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.confirm-dialog::backdrop { background: rgb(24 34 48 / 40%); }
.confirm-dialog .actions { justify-content: flex-end; margin-top: 24px; }
.site-select { text-align: left; overflow-wrap: anywhere; font-weight: 600; }