/* Q·FLOW / Precision Workspace
 * Unified visual layer. Layout and workflow contracts stay in styles.css.
 * Screen typography uses the existing global size selector; no remote fonts.
 */
:root {
  --ink: #142d3b;
  --ink-soft: #3e5662;
  --muted: #667c85;
  --muted-soft: #80939c;
  --line: #dce5e8;
  --line-strong: #c3d1d6;
  --canvas: #f2f5f5;
  --surface: #fff;
  --surface-soft: #f7f9f9;
  --surface-blue: #eef7f7;
  --navy: #142d3b;
  --navy-deep: #102732;
  --blue: #087f8c;
  --blue-dark: #086771;
  --teal: #087f8c;
  --green: #247354;
  --amber: #996119;
  --red: #b74444;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px #142d3b05;
  --shadow: 0 8px 24px #142d3b0a;
  --shadow-lg: 0 24px 70px #142d3b26;
  --focus: 0 0 0 3px #087f8c24;
  --font-ui: Arial, "Microsoft YaHei", "微软雅黑", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --font: var(--font-ui);
}
body { color: var(--ink); letter-spacing: .005em; }
::selection { color: #142d3b; background: #cce9e8; }
input, select, textarea { border-color: var(--line-strong); border-radius: 6px; background: #fff; }
input::placeholder, textarea::placeholder { color: #819199; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); }
label { color: #435b66; font-weight: 600; }
button, a { touch-action: manipulation; }
:where(input, select, textarea, button, a):focus-visible { outline: 2px solid #087f8c; outline-offset: 2px; }
.primary, .secondary, .ghost, .danger { min-height: 38px; border-radius: 6px; padding: 9px 14px; font-weight: 650; box-shadow: none; }
.primary, .login-card .primary { background: #087f8c; border-color: #087f8c; box-shadow: 0 2px 3px #142d3b0a; }
.primary:hover, .login-card .primary:hover { background: #086771; border-color: #086771; box-shadow: none; transform: none; }
.secondary { color: #176774; background: #f0f8f8; border-color: #c8dedf; }
.secondary:hover { color: #0b6570; background: #e3f1f0; border-color: #9cc3c6; }
.ghost { color: #415c67; background: #fff; border-color: #d3dfe2; }
.ghost:hover { background: #f2f6f6; border-color: #a5bdc5; }
.row-action { color: #08727e; background: #f0f7f7; border-color: #d6e7e8; border-radius: 5px; font-weight: 600; }
.row-action:hover { background: #dceeed; }
.text-button, .link-code, .link-code:hover { color: #067582; }
.icon-button { border-radius: 6px; box-shadow: none; }

/* An airy navigation rail keeps dense data pages visually quiet. */
.app-shell { grid-template-columns: 228px minmax(0, 1fr); }
.sidebar { width: 228px; color: #435a64; background: #fff; border-right: 1px solid #dce5e8; scrollbar-width: thin; scrollbar-color: #ccd8dc transparent; }
.brand-lockup { gap: 11px; padding: 25px 22px 20px; }
.brand-q { width: 34px; height: 34px; color: #fff; border: 0; border-radius: 8px; background: #142d3b; box-shadow: none; }
.brand-lockup b { color: #142d3b; font-size: 17px; letter-spacing: .06em; }
.brand-lockup small { color: #71858e; font-size: 10px; }
.workspace-chip { margin: 0 16px 16px; padding: 11px 12px; border-color: #e1e9eb; border-radius: 7px; background: #f7f9f9; }
.workspace-chip b { color: #344f5c; font-weight: 600; }
.workspace-chip small { color: #71848d; }
.online-dot { background: #168d79; box-shadow: 0 0 0 3px #168d790d; }
.nav-group { margin: 0 12px 10px; }
.nav-group-toggle { min-height: 32px; padding: 8px 9px; color: #6d808a; font-size: 11px; letter-spacing: .04em; }
.nav-group-toggle:hover, .nav-group.expanded .nav-group-toggle, .nav-group.active-group .nav-group-toggle { color: #304c59; background: #f5f8f8; box-shadow: none; }
.nav-group-icon, .nav-chevron { color: #789098; }
.nav-group-links { margin: 3px 0 4px 15px; padding-left: 8px; border-left-color: #e1e9ec; gap: 1px; }
.nav { min-height: 36px; margin: 1px 0; padding: 8px 10px; color: #4c626d; border-radius: 6px; font-size: 13px; font-weight: 500; }
.nav:hover { color: #096d79; background: #f2f7f7; }
.nav.active { color: #066d79; background: #e8f3f2; box-shadow: inset 3px 0 #087f8c; font-weight: 700; }
.nav-icon { color: #789198; }
.nav.active .nav-icon { color: #087985; }
.nav-tree-connector { background: #dce6e8; }
.nav:hover .nav-tree-connector, .nav.active .nav-tree-connector { background: #6faaa9; }
.permission-card { background: #f8fafa; border-color: #e2eaed; border-radius: 7px; }
.permission-card b { color: #36535f; }
.permission-card small, .permission-card span { color: #758a93; }
.app-shell.sidebar-collapsed .nav-group.nav-flyout-open .nav-group-links { background: #fff; border-color: #d1dfe2; box-shadow: 0 16px 38px #142d3b21; }

/* A stable utility bar and an editorial page heading. */
.topbar { min-height: 68px; padding: 10px 28px; gap: 12px; border-color: #dce5e8; background: #fffffffa; box-shadow: none; }
.topbar-left { gap: 10px; }
.page-context small { color: #7a8d96; }
.page-context b { color: #36505d; font-weight: 600; }
.sidebar-toggle { color: #597681; background: #fff; border-color: #d7e3e6; }
.sidebar-toggle:hover { background: #edf5f5; color: #087f8c; border-color: #bfd6d9; }
.global-filter-controls { padding: 4px; border: 1px solid #e3eaec; border-radius: 8px; background: #f8fafa; }
.global-filter-controls input, .global-filter-controls select { background: #fff; border-color: #d9e3e6; }
.font-switch { border-color: #d9e4e7; border-radius: 6px; background: #fff; }
.font-switch button { color: #68818b; border-color: #e0e8ea; }
.font-switch button.selected { color: #08717d; background: #eaf4f3; }
.user-menu > span, .account-avatar { background: #142d3b; box-shadow: none; color: #fff; }
/* Fill the workspace even when browser zoom exposes a very wide CSS viewport. */
.content { width: 100%; max-width: none; margin: 0; padding: 28px 30px 48px; }
.page-head { margin-bottom: 24px; gap: 24px; }
.page-head .crumb { display: none; }
.page-head h1 { margin: 0 0 8px; color: #142d3b; font-size: 28px; letter-spacing: -.025em; font-weight: 750; }
.page-head p { color: #667e89; font-size: 13px; line-height: 1.75; max-width: 760px; }
.page-head-side { align-items: center; max-width: 100%; }
.scope-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid #dbe6e8; border-radius: 6px; background: #f8fbfb; line-height: 22px; }
.scope-summary b { max-width: none; margin: 0; overflow: visible; color: #415c67; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.scope-summary span { color: #6c818b; font-size: 11px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.scope-summary small { padding-left: 10px; border-left: 1px solid #dbe6e8; color: #526e79; font-size: 12px; overflow-wrap: anywhere; }
.head-actions { gap: 8px; }

/* Common panels, metrics and diagnostic charts. */
.panel { border-color: #dce5e8; border-radius: 10px; box-shadow: 0 1px 2px #142d3b03; }
.panel-title h3, .section-head h3, .chart-head h3 { color: #203d4a; font-weight: 700; }
.panel-title p, .section-head p { color: #6f828a; line-height: 1.7; }
.kicker { padding: 0; min-height: 17px; background: transparent; color: #087785; font-size: 10px; letter-spacing: .1em; font-weight: 700; }
.kicker.risk { color: #986120; background: transparent; }
.command-kpis, .metric-grid { gap: 12px; }
.command-kpi, .metric-card { min-height: 120px; padding: 18px 20px; border-color: #dce5e8; border-radius: 9px; background: #fff; box-shadow: none; }
.command-kpi::after, .metric-card::after { display: none; }
.command-kpi b, .metric-card b { color: #142d3b; font-family: var(--font-ui); font-size: 32px; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.command-kpi small, .metric-card small { color: #70858f; line-height: 1.5; font-size: 11px; }
.command-kpi .kpi-index { color: #b9c9ce; }
button.command-kpi:hover, .metric-card:hover { transform: none; border-color: #78b7b8; box-shadow: 0 0 0 1px #78b7b833; background: #fcfefe; }
.command-kpi:first-child { border-top: 3px solid #087f8c; padding-top: 16px; }
.inspection-kpis-compact .command-kpis > * { min-height: 78px; border-radius: 7px; padding: 11px 14px; }
.inspection-kpis-compact .command-kpis b { font-size: 25px; }
:is(.analysis-summary, .inspection-analysis-summary, .auto-summary, .summary-callout) { border: 1px solid #c8dddd; border-left: 4px solid #087f8c; border-radius: 9px; color: #385864; background: #f0f7f6; box-shadow: none; }
.chart-card, .chart-panel { border-color: #dce5e8; border-radius: 10px; background: #fff; box-shadow: none; }
.chart-head { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #eef2f3; }
.chart-head h3 { margin-top: 4px; }
.chart-data-table { color: #506a76; }
.bar-row { border-radius: 5px; }
.bar-row:hover { background: #f0f7f6; }
.donut-legend button { padding-top: 8px; padding-bottom: 8px; border-bottom-color: #edf2f3; }
.quick-grid button { border-color: #dce5e8; background: #fff; border-radius: 7px; }
.quick-grid button:hover { background: #f3f8f7; border-color: #b6d2d2; }
.quick-grid b { color: #087985; }
.action-queue-row { padding-top: 13px; padding-bottom: 13px; }
.action-queue-row:hover { background: #f2f8f7; }

/* Tables use a light ruled layout: emphasis belongs to the data. */
.table-panel, .inspection-ledger-panel, .meeting-material { border-radius: 10px; border-color: #dce5e8; }
.table-wrap { scrollbar-width: thin; scrollbar-color: #bdced3 #f4f7f8; }
.ledger-table { color: #37515e; }
.ledger-table th, .inspection-ledger-table th, .audit-ledger-table th { padding: 13px 12px; color: #506771; background: #f2f6f6; border-bottom: 1px solid #cfdde1; font-size: 12px; font-weight: 650; letter-spacing: .01em; }
.ledger-table td, .inspection-ledger-table td, .audit-ledger-table td { padding: 13px 12px; border-bottom-color: #e7eef0; font-size: 13px; line-height: 1.65; }
.ledger-table tbody tr:nth-child(even) > td { background-color: #fafcfc; }
.ledger-table tbody tr:hover > td { background-color: #edf6f5; }
.ledger-table tbody tr:has(input[type="checkbox"]:checked) > td { background: #e8f3f2; }
.ledger-table .cell-sub { margin-top: 4px; color: #738791; font-size: 11px; line-height: 1.55; }
.ledger-table .link-code { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.projector .ledger-table :is(.cell-sub, .link-code) { font-size: var(--projector-body-size); line-height: 1.6; }
.ledger-table:not(.meeting-table) [data-column="issue_no"] { min-width: 190px; }
.ledger-table:not(.meeting-table) [data-column="owner_name"] { min-width: 86px; }
.ledger-table:not(.meeting-table) [data-column="planned_due_date"] { min-width: 108px; }
.ledger-table:not(.meeting-table) .link-code { text-align: left; line-height: 1.7; }
.due { display: inline-flex; flex-direction: column; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.projector .due small { font-size: .8em; line-height: 1.4; }
.projector col[data-column="planned_due_date"] { width: calc(var(--projector-body-size) * 6.5 + 28px); }
.command-kpi-index { color: #91a6ae; font-weight: 500; }
.bar-fill, .trend-fill { fill: #087f8c; }
.inspection-summary-card { background: #f0f7f6; border: 1px solid #c8dddd; border-left: 4px solid #087f8c; }
:is(.table-toolbar, .ledger-toolbar, .inspection-ledger-toolbar) { padding: 15px 18px; border-bottom-color: #e1e9ec; background: #fff; }
.inspection-type-emblem { color: #087985; background: #edf6f5; border-color: #c9dfde; border-radius: 7px; }
.ledger-pagination { padding: 13px 18px; color: #68808b; border-top-color: #e0e9ec; background: #fff; }
.ledger-pagination select, .ledger-pagination button { min-height: 32px; border-radius: 5px; }
.status, .severity-chip, .state-on, .state-off, .draft-badge, .inspection-result { border-radius: 5px; padding: 4px 7px; font-size: 11px; line-height: 1.3; font-weight: 650; }
.status.PROCESSING, .status.IN_PROGRESS, .status.VALIDATION { color: #096d79; background: #e8f3f3; }
.status.CLOSED, .status.COMPLETED, .status.APPROVED, .inspection-result.PASS { color: #226b51; background: #eaf4ef; }
.status.RETURNED, .inspection-result.FAIL, .severity-chip.CRITICAL { color: #a53f3f; background: #fbecec; }
.status.CANCELLED, .status.VOID { color: #687984; background: #edf1f2; }
.filter-panel, .inspection-filter-panel { padding: 16px 18px; border-color: #dce5e8; box-shadow: none; }
.ledger-filter-grid { gap: 9px; }
.ledger-filter-grid :is(input, select, button), .inspection-filter-grid :is(input, select) { min-height: 36px; border-radius: 6px; background: #fff; font-size: 12px; }
.inspection-filter-grid label { color: #667e89; font-size: 11px; }

/* Full-page records and configuration share the same paper-like sections. */
:is(.issue-workspace-hero, .issue-description-card, .issue-overview-card, .issue-workspace-stage, .inspection-detail-hero, .inspection-section, .workbench-section, .inspection-report-section) { border-color: #dbe5e8; border-radius: 10px; background: #fff; box-shadow: none; }
.issue-workspace-hero { padding: 24px; border-top: 3px solid #087f8c; }
.issue-workspace-hero h1 { color: #142d3b; font-size: 28px; }
.issue-workspace-stage > header, .workbench-section > .section-head { border-bottom-color: #e4ecee; background: #fbfcfc; }
.issue-workspace-stage > header > span { color: #087f8c; background: #edf6f5; border-radius: 6px; }
.issue-workspace-nav { border-color: #dbe5e8; background: #fff; border-radius: 9px; }
.issue-workspace-nav button.active { color: #087381; background: #edf6f5; border-color: #bcd9d9; }
.issue-background-board > div, .issue-governance-strip { border-color: #e0e9ec; background: #f8fafb; }
.issue-background-board .issue-fact-card { border: 1px solid #dce6e8; border-radius: 7px; background: #f8fafb; box-shadow: none; }
.issue-fact-card::after { display: none; }
.issue-fact-card > span { color: #667e89; font-size: 11px; font-weight: 600; }
.issue-fact-card b { color: #304e5c; }
.closure-readiness { box-shadow: none; }
.inspection-overview-command { margin-bottom: 18px; }
.inspection-pulse-card { border-radius: 8px; box-shadow: none; }
.inspection-overview-pulse b { color: #087f8c; font-size: 29px; }
.inspection-entry-items article { background: #fff; box-shadow: none; border-radius: 8px; }
.inspection-entry-items article > header { background: #f3f7f7; }
.form-grid { gap: 18px; }
.form-grid label { font-size: 12px; line-height: 1.6; }
.form-grid label > :is(input, select, textarea) { margin-top: 7px; }
.form-grid label > small { display: block; margin-top: 5px; color: #758a93; font-size: 11px; }
.detail-section { padding-top: 22px; padding-bottom: 22px; }
.task-card, .approval-card, .attachment-list > article { border-color: #dce6e9; border-radius: 8px; box-shadow: none; }
.config-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 22px; }
.config-tabs { padding: 8px; border-color: #dce5e8; border-radius: 9px; box-shadow: none; }
.config-tabs button { min-height: 38px; color: #617983; padding: 10px; font-weight: 500; border-radius: 5px; }
.config-tabs button.active { color: #087481; background: #e9f4f2; box-shadow: inset 3px 0 #087f8c; font-weight: 700; }
.config-heading { margin-bottom: 4px; padding-bottom: 18px; }
.config-heading h2 { font-size: 22px; color: #203d4a; }
.config-heading p { color: #70858f; line-height: 1.75; }
.config-heading { flex-wrap: wrap; gap: 14px; }
.config-heading > div:first-child { flex: 1 1 380px; }
.config-heading .actions { flex: 0 0 auto; }
:is(.config-heading, .page-head, .table-toolbar, .inspection-ledger-toolbar) :is(.primary, .secondary, .ghost) { white-space: nowrap; }
.chart-column-svg .chart-column.chart-primary rect, .dual-axis-chart-svg .trend-total-bar, .daily-pulse-chart.volume .daily-pulse-bar.is-active rect { fill: #087f8c; }
:is(.calendar-rule-summary, .calendar-control-panel, .calendar-impact-panel, .backup-callout, .account-card) { border-color: #dce5e8; border-radius: 10px; box-shadow: none; background: #fff; }
.calendar-rule-copy { background: #f0f7f6; }
:is(.meeting-background-card, .meeting-control-card, .meeting-analytics-card, .meeting-after-sales-card, .meeting-actions-tracker) { border-color: #dce5e8; border-radius: 10px; box-shadow: none; }
:is(.meeting-background-heading, .meeting-control-header, .meeting-analytics-head) { background: #f8fbfa; border-bottom-color: #e0e9e9; }
.summary-text { color: #304d5b; font-size: 14px; line-height: 1.9; padding: 24px; border-color: #e0e9ec; background: #fff; }
.modal { background: #142d3b66; backdrop-filter: blur(4px); }
.modal-card:not(.projector) { padding: 28px; border: 1px solid #e0e8eb; border-radius: 12px; box-shadow: 0 24px 80px #0c263542; }
.modal-card h2 { color: #142d3b; font-size: 23px; }
.modal-card .dialog-intro { color: #718792; line-height: 1.75; margin-bottom: 22px; }
.modal-card .actions { gap: 10px; }
.modal-close { color: #6d838d; background: #f8fbfb; border-color: #dce6e9; }
.empty, .empty-state, .error-state { color: #6b818c; border-color: #dce5e8; border-radius: 9px; background: #fbfcfc; }

/* Login: a calm brand spread with a clearly separated sign-in column. */
.login-rich { grid-template-columns: minmax(0, 1.35fr) minmax(420px, .8fr); background: #f4f7f7; min-height: 100vh; height: auto; }
.hero-quality { min-height: 100vh; padding: 44px clamp(40px, 5vw, 92px); background: #142d3b; }
.hero-quality::before, .hero-quality::after { display: none; }
.hero-grid { opacity: .04; background-size: 48px 48px; }
.hero-content { max-width: 880px; margin: 0 auto; }
.hero h1 { font-size: clamp(36px, 3.15vw, 60px); line-height: 1.22; letter-spacing: -.045em; margin: 24px 0 20px; }
.hero-content > p { color: #b6cbd1; font-size: 15px; line-height: 1.85; margin-bottom: 26px; }
.eyebrow { color: #7bc7c4; letter-spacing: .15em; font-size: 10px; }
.hero-metrics { gap: 0; border-top: 1px solid #ffffff24; border-bottom: 1px solid #ffffff24; }
.hero-metrics > div { min-height: 78px; padding: 15px 18px 15px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.hero-metrics > div + div { padding-left: 18px; border-left: 1px solid #ffffff1a; }
.hero-metrics b { font-size: 13px; font-weight: 600; }
.hero-metrics span { color: #9fb9c3; font-size: 11px; }
.org-slide { margin-top: 25px; padding-top: 0; border-top: 0; gap: 13px; }
.slide-photo { aspect-ratio: 2.1 / 1; border-radius: 9px; border-color: #ffffff24; box-shadow: none; }
.login-gallery-copy b { font-size: 13px; }
.login-gallery-copy p { font-size: 12px; color: #a9c3cd; }
.login-panel { padding: 48px 38px; background: #f4f7f7; }
.login-panel::before, .login-panel::after { display: none; }
.login-card-shell { width: min(100%, 430px); min-height: 0; padding: 38px; border: 1px solid #dbe5e8; border-radius: 12px; background: #fff; box-shadow: 0 16px 50px #142d3b08; backdrop-filter: none; }
.login-card { min-height: 0; }
.login-mark { margin-bottom: 34px; }
.login-mark-symbol { color: #fff; background: #142d3b; border-radius: 8px; box-shadow: none; }
.login-card h2 { color: #142d3b; font-size: 30px; letter-spacing: -.025em; margin-top: 5px; }
.login-card-heading > span { color: #087f8c; }
.login-card-heading > p { color: #738993; font-size: 13px; }
.login-card input { height: 45px; background: #fff; border-color: #c9d9de; }
.login-values { color: #56747e; border-color: #e2e9eb; font-size: 11px; letter-spacing: .12em; margin: 18px 0 22px; }
.login-card .primary { margin-top: 24px; min-height: 46px; border-radius: 6px; font-weight: 650; }

@media (max-width: 1500px) {
  .app-shell:not(.sidebar-collapsed) { grid-template-columns: 214px minmax(0, 1fr); }
  .app-shell:not(.sidebar-collapsed) .sidebar { width: 214px; }
  .content { padding: 24px; }
  .topbar { padding: 10px 24px; gap: 10px; }
  .page-head { gap: 16px; }
  .page-head h1 { font-size: 26px; }
  .command-kpis, .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .command-kpi, .metric-card { min-height: 108px; padding: 16px 18px; }
  .config-layout { gap: 16px; grid-template-columns: 174px minmax(0, 1fr); }
}
@media (max-width: 1280px) {
  .content { padding: 22px 20px 40px; }
  .topbar { padding-right: 20px; padding-left: 20px; }
  .page-head { flex-wrap: wrap; }
  .page-head-side { align-items: center; }
  .hero-quality { padding: 36px 38px; }
  .hero h1 { font-size: 36px; }
  .login-panel { padding: 30px; }
  .login-card-shell { padding: 30px; }
}
@media (max-height: 850px) and (min-width: 1000px) {
  .hero-quality { padding-top: 28px; padding-bottom: 28px; }
  .hero h1 { font-size: clamp(34px, 2.6vw, 49px); margin: 17px 0 14px; }
  .hero-content > p { margin-bottom: 18px; font-size: 14px; }
  .org-slide { margin-top: 20px; }
  .slide-photo { aspect-ratio: 2.5 / 1; }
}
@media (max-width: 1000px) {
  .login-rich { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); }
  .hero-quality { padding: 28px; }
  .hero-metrics { grid-template-columns: 1fr; }
  .hero-metrics > div + div { padding-left: 0; border-left: 0; }
  .login-panel, .login-card-shell { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .app-shell, button, input, select, textarea { transition: none; } }
@media print {
  .content { max-width: none; padding: 0; }
  .panel, .ledger-table, .issue-workspace-stage { box-shadow: none; }
  .ledger-table thead { display: table-header-group; }
  .ledger-table tr { break-inside: avoid; }
  .ledger-table th { background: #edf3f3; print-color-adjust: exact; }
}