/* 正式界面视觉层：只重构外观和层级，不覆盖数据计算与导出布局。 */

:root {
  color-scheme: light;
  --ink: #dce5e4;
  --sidebar: rgba(246, 246, 241, .62);
  --surface: rgba(249, 248, 243, .58);
  --surface-2: rgba(255, 255, 255, .48);
  --surface-3: rgba(255, 255, 255, .68);
  --line: rgba(255, 255, 255, .72);
  --line-soft: rgba(77, 103, 104, .13);
  --text: #2f3e46;
  --text-soft: #4e6464;
  --muted: #667a7a;
  --cyan: #5e8b7e;
  --cyan-deep: #426f65;
  --cyan-soft: rgba(94, 139, 126, .13);
  --gold: #d9ad59;
  --gold-soft: rgba(217, 173, 89, .15);
  --green: #4d9a7e;
  --green-soft: rgba(77, 154, 126, .13);
  --red: #b96464;
  --red-soft: rgba(185, 100, 100, .12);
  --orange: #bd7d68;
  --orange-soft: rgba(189, 125, 104, .13);
  --blue: #6ba4b9;
  --field: rgba(255, 255, 255, .46);
  --glass-strong: rgba(249, 248, 243, .78);
  --deep-field: rgba(64, 87, 88, .08);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 19px;
  --shadow: 0 24px 70px rgba(55, 78, 78, .15), 0 3px 12px rgba(55, 78, 78, .07);
  --small-shadow: 0 10px 28px rgba(55, 78, 78, .11);
}

html[data-theme="night"] {
  color-scheme: dark;
  --ink: #1e2e31;
  --sidebar: rgba(30, 49, 53, .78);
  --surface: rgba(38, 59, 62, .68);
  --surface-2: rgba(255, 255, 255, .07);
  --surface-3: rgba(255, 255, 255, .11);
  --line: rgba(255, 255, 255, .14);
  --line-soft: rgba(255, 255, 255, .09);
  --text: #f3f4ef;
  --text-soft: #d0dbd8;
  --muted: #a8bbb7;
  --cyan: #86b3a6;
  --cyan-deep: #9bc7bb;
  --cyan-soft: rgba(134, 179, 166, .14);
  --gold: #e2be76;
  --gold-soft: rgba(226, 190, 118, .13);
  --green: #82c6aa;
  --green-soft: rgba(130, 198, 170, .13);
  --red: #e49a98;
  --red-soft: rgba(228, 154, 152, .13);
  --orange: #e4a38f;
  --orange-soft: rgba(228, 163, 143, .13);
  --blue: #8ec3d5;
  --field: rgba(255, 255, 255, .07);
  --glass-strong: rgba(45, 67, 70, .86);
  --deep-field: rgba(255, 255, 255, .06);
  --shadow: 0 28px 80px rgba(5, 17, 19, .34), 0 3px 14px rgba(5, 17, 19, .2);
  --small-shadow: 0 12px 30px rgba(5, 17, 19, .23);
}

html { background: var(--ink); }

body {
  min-width: 1120px;
  color: var(--text);
  background:
    radial-gradient(circle at 9% 8%, rgba(230, 181, 167, .66), transparent 25%),
    radial-gradient(circle at 86% 5%, rgba(167, 199, 212, .68), transparent 28%),
    radial-gradient(circle at 82% 91%, rgba(94, 139, 126, .24), transparent 30%),
    linear-gradient(145deg, var(--ink), color-mix(in srgb, var(--ink) 86%, #94acaa));
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 14px;
  transition: color 180ms ease, background 240ms ease;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

body::before {
  left: -90px;
  bottom: 7%;
  width: 260px;
  height: 260px;
  background: linear-gradient(145deg, rgba(255,255,255,.5), rgba(167,199,212,.24));
  box-shadow: inset -20px -22px 48px rgba(88,131,143,.12), 18px 24px 58px rgba(57,80,81,.11);
}

body::after {
  right: 2.5%;
  top: 25%;
  width: 118px;
  height: 118px;
  background: linear-gradient(145deg, rgba(255,255,255,.66), rgba(230,181,167,.5));
  box-shadow: inset -14px -16px 30px rgba(169,104,91,.12), 12px 18px 38px rgba(57,80,81,.11);
}

.app-shell {
  position: relative;
  z-index: 1;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  width: calc(100vw - 28px);
  min-height: calc(100vh - 28px);
  margin: 14px auto;
}

.sidebar,
.workspace {
  border: 1px solid var(--line);
  background: var(--sidebar);
  box-shadow: var(--shadow);
}

.sidebar {
  backdrop-filter: blur(26px) saturate(112%);
  -webkit-backdrop-filter: blur(26px) saturate(112%);
}

.workspace { background: var(--glass-strong); }

.sidebar {
  top: 14px;
  height: calc(100vh - 28px);
  padding: 16px 12px 14px;
  border-right: 1px solid var(--line);
  border-radius: 24px;
}

.workspace {
  min-width: 0;
  border-radius: 24px;
  overflow: clip;
}

.brand {
  min-height: 58px;
  padding: 0 9px 14px;
  overflow: hidden;
}

.brand img {
  display: block;
  width: 120px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
  transform-origin: left center;
  transition: transform 220ms ease;
}

html[data-theme="night"] .brand img { transform: none; }
.brand-mark { display: none; }

.nav-label { color: var(--muted); letter-spacing: .04em; }
.nav-item { min-height: 48px; border: 1px solid transparent; border-radius: 13px; }
.nav-item:hover { color: var(--text); background: var(--field); }
.nav-item.active { color: var(--text); border-color: var(--line); background: var(--glass-strong); box-shadow: var(--small-shadow); }
.nav-item.active svg, .nav-item.active small { color: var(--cyan-deep); }
.nav-item.muted { opacity: .52; }
.sidebar-section, .sidebar-foot, .brand { border-color: var(--line-soft); }
.sidebar-source { color: var(--text-soft); }
.sidebar-foot p { color: var(--muted); }

.topbar {
  top: 0;
  min-height: 70px;
  padding: 0 22px;
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--sidebar) 76%, transparent);
  backdrop-filter: blur(24px);
}

.breadcrumb { color: var(--muted); }
.breadcrumb strong { color: var(--text); }
.topbar-actions { gap: 9px; }
.quarter-picker, .operator-field { color: var(--muted); }
.quarter-picker select, .operator-field input { height: 38px; }

.theme-toggle {
  width: 64px;
  height: 38px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--field);
}

.theme-toggle span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #4a6f68;
  background: #f4f2ec;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(55,78,78,.17);
  transform: translateX(0);
  transition: transform 220ms ease, color 220ms ease, background 220ms ease;
}

html[data-theme="night"] .theme-toggle span { color: #f2d58f; background: #3a5559; transform: translateX(26px); }

input, select, textarea {
  color: var(--text);
  border-color: var(--line-soft);
  background: var(--field);
}

input:focus, select:focus, textarea:focus, button:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}

input:disabled { color: var(--muted); background: var(--deep-field); }

.main-content {
  width: 100%;
  max-width: none;
  padding: 23px 26px 48px;
}

.page-heading { align-items: center; margin-bottom: 17px; }
.page-kicker { margin-bottom: 5px; color: var(--cyan-deep); font-size: 10px; letter-spacing: .08em; }
.heading-title-line { display: flex; align-items: center; gap: 12px; }
.page-heading h1 {
  margin: 0;
  font-family: "方正小标宋简体", "STKaiti", serif;
  font-size: clamp(29px, 2.2vw, 40px);
  font-weight: 400;
  letter-spacing: .01em;
}
body.front-desk .topbar {
  background: color-mix(in srgb, var(--sidebar) 92%, transparent);
}
body.front-desk .page-heading h1,
body.front-desk .section-heading h2,
body.front-desk .panel-heading h2,
body.front-desk .workflow-tab strong,
body.front-desk .run-strip strong {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  letter-spacing: 0;
}
body.front-desk .page-heading h1 {
  font-size: clamp(27px, 1.9vw, 36px);
  font-weight: 850;
  line-height: 1.16;
}
.heading-title-line > span { padding: 5px 9px; color: var(--cyan-deep); background: var(--cyan-soft); border-radius: 999px; font-size: 10px; font-weight: 750; }
.page-heading > div > p:last-child { margin-top: 7px; color: var(--muted); }

.btn { border-radius: 12px; }
.btn.primary { color: #fff; background: var(--cyan); border-color: transparent; box-shadow: 0 8px 20px rgba(66,111,101,.18); }
.btn.primary:hover { color: #fff; background: var(--cyan-deep); }
.btn.secondary { color: var(--text); background: var(--field); border-color: var(--line-soft); }
.btn.secondary:hover { color: var(--text); border-color: var(--line); background: var(--surface-3); }

.run-strip,
.workflow-tabs,
.panel,
.source-stack,
.readiness-rail,
.metric-ribbon {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

.run-strip { padding: 13px 16px; border-radius: 15px; }
.run-strip dl div { border-color: var(--line-soft); }
.workflow-tabs { margin: 14px 0 22px; padding: 4px; border-radius: 16px; overflow: visible; }
.workflow-tab { min-height: 58px; border: 0; border-radius: 12px; }
.workflow-tab:hover { color: var(--text); background: var(--field); }
.workflow-tab.active { color: var(--text); background: var(--glass-strong); box-shadow: var(--small-shadow); }
.workflow-tab.active > span { color: #294b4d; border-color: transparent; background: #b8d5de; }
.workflow-tab > span { border-color: var(--line-soft); }

.section-heading { margin-bottom: 15px; }
.section-heading h2 { font-size: 21px; }
.section-heading p, .panel-heading p { color: var(--muted); }
.section-badge, .version-chip, .mapping-state { color: var(--cyan-deep); background: var(--cyan-soft); }
.panel { border-radius: var(--radius-lg); }

.source-uploader { border-color: var(--line-soft); }
.source-uploader.has-file { background: var(--green-soft); }
.source-uploader.optional { background: var(--deep-field); }
.source-index { border-color: var(--line-soft); }
.source-uploader.required .source-index { color: var(--cyan-deep); border-color: color-mix(in srgb, var(--cyan) 38%, transparent); background: var(--cyan-soft); }
.source-copy > p, .source-title span, .source-meta { color: var(--muted); }
.readiness-track, .rate-track { background: var(--deep-field); }
.readiness-list li, .mapping-rows, .mapping-row, .taxonomy-block, .rule-output, .setting-section, .publish-checks { border-color: var(--line-soft); }
.rail-heading > strong, .font-download, .ppt-preview-toolbar span { color: var(--cyan-deep); }

.rule-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 132px;
  gap: 10px;
  margin-bottom: 16px;
}

.rule-catalog-item,
.rule-catalog-add {
  min-height: 62px;
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: var(--field);
}

.rule-catalog-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; }
.rule-catalog-item > span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--cyan-deep); background: rgba(167,199,212,.32); border-radius: 11px; font-size: 11px; font-weight: 850; }
.rule-catalog-item strong, .rule-catalog-item small { display: block; }
.rule-catalog-item strong { font-size: 12px; }
.rule-catalog-item small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.rule-catalog-item em { color: var(--muted); font-size: 9px; font-style: normal; }
.rule-catalog-item.active { border-color: color-mix(in srgb, var(--cyan) 42%, transparent); background: var(--glass-strong); box-shadow: var(--small-shadow); }
.rule-catalog-item.active em { color: var(--cyan-deep); font-weight: 750; }
.rule-catalog-add { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); border-style: dashed; }
.rule-catalog-add:hover { color: var(--text); background: var(--surface-3); }

.rule-person { border-color: var(--line); background: var(--field); border-radius: 18px; }
.rule-person.one { border-color: rgba(107,164,185,.38); }
.rule-person.many { border-color: rgba(202,143,130,.38); }
.rule-person.one .rule-person-heading > span { color: #355c63; background: linear-gradient(145deg, #dbecef, #91bdca); border-radius: 50%; box-shadow: inset -6px -7px 13px rgba(71,116,126,.13), 0 8px 18px rgba(60,86,88,.13); }
.rule-person.many .rule-person-heading > span { color: #6b4942; background: linear-gradient(145deg, #f2d1c6, #dc9f91); border-radius: 50%; box-shadow: inset -6px -7px 13px rgba(143,83,71,.11), 0 8px 18px rgba(93,67,62,.11); }
.rule-person li { color: var(--text-soft); border-color: var(--line-soft); }
.relation-arrow svg { color: var(--cyan-deep); }

.metric-ribbon { border-radius: 18px; }
.metric-ribbon > div { border-color: var(--line-soft); }
.metric-ribbon small { color: var(--muted); }
.org-panel-heading { align-items: flex-end; }
.org-panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.org-heading-copy { min-width: 0; }
.org-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 22px; margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.org-breadcrumb button { min-height: 22px; padding: 0 5px; color: var(--muted); border: 0; background: transparent; border-radius: 6px; font: inherit; }
.org-breadcrumb button:hover { color: var(--text); background: var(--cyan-soft); }
.org-breadcrumb button:focus-visible { color: var(--text); outline: 2px solid color-mix(in srgb, var(--cyan) 58%, transparent); outline-offset: 1px; }
.org-breadcrumb .current { color: var(--text-soft); font-weight: 750; }
.org-breadcrumb .separator { color: color-mix(in srgb, var(--muted) 58%, transparent); }
.org-title-row { display: flex; align-items: center; gap: 9px; }
.org-title-row h2 { margin: 0; }
.org-level-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; color: var(--cyan-deep); background: var(--cyan-soft); border-radius: 7px; font-size: 8px; font-weight: 800; }
.org-hierarchy-notice { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 9px 11px; color: var(--text-soft); border: 1px solid color-mix(in srgb, var(--orange) 26%, transparent); background: var(--orange-soft); border-radius: 10px; font-size: 9px; }
.org-hierarchy-notice svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--orange); }
.org-data-table .org-name-button { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 6px 4px 0; color: var(--text); border: 0; background: transparent; border-radius: 7px; font: inherit; font-weight: 780; text-align: left; }
.org-data-table .org-name-button svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--cyan-deep); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.org-data-table tr[data-can-drill="true"] { cursor: pointer; }
.org-data-table tr[data-can-drill="true"]:hover .org-name-button { color: var(--cyan-deep); }
.org-data-table tr[data-can-drill="true"]:hover .org-name-button svg { transform: translateX(2px); }
.org-action-column { width: 136px; text-align: right !important; }
.org-action-stack { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.org-drill-button { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 8px; color: var(--cyan-deep); border: 1px solid color-mix(in srgb, var(--cyan) 26%, transparent); background: var(--cyan-soft); border-radius: 8px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.org-drill-button svg { width: 12px; height: 12px; }
.org-drill-button:hover { border-color: color-mix(in srgb, var(--cyan) 48%, transparent); background: color-mix(in srgb, var(--cyan-soft) 72%, var(--surface)); }
.org-report-button { min-height: 28px; padding: 0 9px; color: #8a4b00; border: 1px solid rgba(236, 168, 54, .36); background: rgba(255, 206, 100, .18); border-radius: 8px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.org-report-button:hover { border-color: rgba(236, 168, 54, .58); background: rgba(255, 206, 100, .28); }
.org-leaf-label { color: var(--muted); font-size: 9px; }
.data-table th { color: var(--muted); border-color: var(--line-soft); background: var(--glass-strong); }
.data-table td { color: var(--text-soft); border-color: var(--line-soft); }
.data-table tbody tr:hover td { background: var(--cyan-soft); }
.empty-state svg, .mapping-empty svg, .result-empty svg { color: var(--muted); }

.report-layout { grid-template-columns: minmax(330px, 22%) minmax(0, 1fr); gap: 16px; }
.report-settings { top: 84px; max-height: calc(100vh - 112px); overflow: auto; scrollbar-width: thin; }
.report-scope-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent); background: var(--cyan-soft); border-radius: 10px; }
.report-scope-summary span, .report-scope-summary strong, .report-scope-summary small { display: block; }
.report-scope-summary span { color: var(--muted); font-size: 8px; }
.report-scope-summary strong { margin-top: 2px; color: var(--text); font-size: 11px; }
.report-scope-summary small { margin-top: 2px; color: var(--cyan-deep); font-size: 8px; }
.ppt-field-row, .progress-field-toggles label, .color-rule-row { border-color: var(--line-soft); background: var(--field); }
.ppt-field-row:has(input[type="checkbox"]:checked) { border-color: color-mix(in srgb, var(--cyan) 34%, transparent); background: var(--cyan-soft); }
.ppt-field-row > input[type="text"]:focus { background: var(--field); box-shadow: inset 0 0 0 1px var(--cyan); }
.progress-field-toggles label:has(input:checked) { color: #9b6f1a; border-color: rgba(217,173,89,.44); background: var(--gold-soft); }
html[data-theme="night"] .progress-field-toggles label:has(input:checked) { color: #f0cd82; }
.font-download { border-color: color-mix(in srgb, var(--cyan) 30%, transparent); background: var(--cyan-soft); }
.ppt-preview-panel { padding: 15px; }
.ppt-stage-wrap { border-color: rgba(77,103,104,.28); border-radius: 11px; box-shadow: 0 18px 46px rgba(55,78,78,.18); }
.ppt-preview-note { border-color: var(--line-soft); background: var(--cyan-soft); }
.audit-panel { margin-top: 16px; }

.app-dialog { color: var(--text); border-color: var(--line); background: var(--glass-strong); }
.dialog-head, .dialog-actions { border-color: var(--line-soft); background: var(--surface); }
.evidence-block { border-color: var(--line-soft); background: var(--field); }
.app-dialog::backdrop { background: rgba(23,39,42,.45); backdrop-filter: blur(7px); }
.toast { color: #fff; background: var(--cyan); }

@media (min-width: 1800px) {
  body { font-size: 15px; }
  .app-shell { grid-template-columns: 238px minmax(0, 1fr); }
  .main-content { padding-inline: 32px; }
  .report-layout { grid-template-columns: 390px minmax(0, 1fr); }
  .source-workbench { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 1180px) {
  body { min-width: 980px; }
  .app-shell { width: calc(100vw - 18px); grid-template-columns: 198px minmax(0, 1fr); margin: 9px auto; }
  .sidebar { top: 9px; height: calc(100vh - 18px); }
  .rule-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-layout { grid-template-columns: 300px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  body { min-width: 320px; }
  .app-shell { display: block; width: 100%; margin: 0; }
  .sidebar, .workspace { border-radius: 0; border-inline: 0; }
  .sidebar { height: auto; }
  .brand img { width: 104px; height: 40px; }
  .theme-toggle { width: 60px; }
  html[data-theme="night"] .theme-toggle span { transform: translateX(22px); }
  .rule-catalog { grid-template-columns: 1fr 1fr; }
  .report-settings { max-height: none; overflow: visible; }
}

@media (max-width: 660px) {
  .heading-title-line { align-items: flex-start; flex-direction: column; gap: 6px; }
  .org-panel-heading { align-items: stretch; }
  .org-panel-actions, .org-panel-heading .search-field, .org-panel-heading .search-field input { width: 100%; }
  .org-panel-actions .btn { flex: 1; }
  .org-action-column { width: 120px; }
  .rule-catalog { grid-template-columns: 1fr; }
  .rule-catalog-add { min-height: 48px; }
}