:root {
  --bg: #090713;
  --panel: rgba(22, 16, 42, 0.82);
  --panel-strong: #18102f;
  --panel-soft: rgba(113, 77, 177, 0.09);
  --line: rgba(184, 146, 255, 0.18);
  --line-strong: rgba(190, 154, 255, 0.38);
  --text: #f6f2ff;
  --muted: #b9aecf;
  --purple: #9c6cff;
  --purple-bright: #c1a2ff;
  --cyan: #58d7ff;
  --green: #53dfa6;
  --amber: #ffcc70;
  --red: #ff7792;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  --app-font: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --nav-font-size: 12px;
  --overview-title-size: 30px;
  --page-title-size: 29px;
  --body-font-size: 12px;
  --section-title-size: 15px;
  --table-font-size: 10px;
  --gantt-font-size: 10px;
  --button-font-size: 12px;
  --number-font-size: 23px;
  --label-font-size: 10px;
  color-scheme: dark;
  font-family: var(--app-font);
}

* { box-sizing: border-box; }
html { min-width: 1180px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% 0%, #211347 0, transparent 30%), linear-gradient(145deg, #090713 0%, #0d0919 54%, #120b21 100%); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; width: 440px; height: 440px; border-radius: 50%; filter: blur(110px); opacity: .16; pointer-events: none; }
.ambient-a { background: #7548ff; top: -180px; right: 10%; }
.ambient-b { background: #4322a0; bottom: -220px; left: 10%; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); position: relative; z-index: 1; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px 22px; border-right: 1px solid var(--line); background: rgba(10, 7, 20, .86); backdrop-filter: blur(22px); display: flex; flex-direction: column; }
.brand-block { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(140deg, #7844ed, #ba8cff); display: grid; place-items: center; font-size: 14px; font-weight: 800; letter-spacing: .06em; box-shadow: 0 12px 30px rgba(128, 70, 238, .35); }
.brand-block strong { display: block; font-size: 18px; }
.brand-block span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; letter-spacing: .09em; }
nav { padding-top: 20px; }
.nav-group-label { margin: 18px 10px 8px; color: #796f90; font-size: 10px; letter-spacing: .18em; }
.nav-link { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; margin: 3px 0; color: #bfb6d2; text-align: left; border-radius: 10px; cursor: pointer; transition: .2s ease; }
.nav-link:hover { background: rgba(151, 104, 255, .08); color: #fff; }
.nav-link.active { background: linear-gradient(90deg, rgba(142, 88, 255, .25), rgba(142, 88, 255, .06)); color: #fff; box-shadow: inset 2px 0 var(--purple); }
.nav-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.045); color: var(--purple-bright); font-size: 11px; font-weight: 800; }
.nav-link small { color: #786e8a; font-size: 10px; }
.sidebar-foot { margin-top: auto; color: #827894; font-size: 11px; display: flex; align-items: center; gap: 8px; padding: 14px 10px 0; border-top: 1px solid var(--line); }
.local-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }

.main-stage { min-width: 0; padding: 0 34px 50px; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 28px; background: linear-gradient(180deg, rgba(9,7,19,.97) 0%, rgba(9,7,19,.88) 75%, transparent 100%); backdrop-filter: blur(14px); }
.eyebrow { margin: 0 0 6px; color: var(--purple-bright); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: var(--page-title-size); letter-spacing: -.02em; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.year-control { min-width: 130px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.year-control span { display: block; color: #867c98; font-size: 9px; margin-bottom: 2px; }
.year-control select { width: 100%; color: #fff; background: transparent; border: 0; outline: 0; font-size: 12px; }
.year-control option { background: #18102f; }
.button { min-height: 38px; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--line); cursor: pointer; transition: .18s ease; font-size: 12px; white-space: nowrap; }
.button:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.button.primary { border-color: transparent; background: linear-gradient(135deg, #7d45ed, #a56cff); box-shadow: 0 9px 24px rgba(125, 69, 237, .24); }
.button.secondary { background: rgba(255,255,255,.035); }
.button.danger { background: rgba(255, 119, 146, .08); color: #ff9bad; border-color: rgba(255,119,146,.25); }
.file-button { display: inline-flex; align-items: center; }
.notice-bar { display: flex; align-items: center; gap: 10px; padding: 9px 13px; margin: -2px 0 20px; border: 1px solid rgba(88,215,255,.15); border-radius: 9px; color: #aaa0ba; background: rgba(88,215,255,.035); font-size: 11px; }
.notice-bar span { color: var(--cyan); font-weight: 700; }
.notice-bar button { margin-left: auto; border: 0; background: transparent; color: #726983; font-size: 18px; cursor: pointer; }

.page-content { max-width: 1560px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .65fr); gap: 18px; align-items: stretch; margin-bottom: 18px; }
.hero-main { min-height: 246px; padding: 28px 30px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(120deg, rgba(96, 53, 179, .22), rgba(18, 13, 34, .82) 56%), radial-gradient(circle at 90% 0, rgba(182, 127, 255, .18), transparent 35%); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hero-main::after { content: ""; position: absolute; width: 270px; height: 270px; right: -90px; bottom: -150px; border: 1px solid rgba(194,162,255,.16); border-radius: 50%; box-shadow: 0 0 0 34px rgba(194,162,255,.025), 0 0 0 72px rgba(194,162,255,.018); }
.hero-kicker { color: var(--cyan); font-size: 11px; letter-spacing: .14em; font-weight: 700; }
.hero h2 { max-width: 820px; margin: 13px 0 12px; font-size: clamp(28px, 3vw, 46px); line-height: 1.12; letter-spacing: -.035em; }
.hero-summary { max-width: 800px; color: #c6bdd7; font-size: 14px; line-height: 1.8; }
.editable { outline: none; text-decoration: underline dashed rgba(193,162,255,.38); text-underline-offset: 5px; cursor: text; }
.editable:focus { background: rgba(156,108,255,.11); text-decoration-color: var(--purple); border-radius: 4px; }
.hero-side { padding: 21px; border-radius: 18px; background: linear-gradient(155deg, rgba(32,23,56,.95), rgba(19,14,33,.96)); border: 1px solid var(--line); }
.section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; color: #aaa0bc; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.section-label strong { color: #fff; font-size: 13px; letter-spacing: 0; text-transform: none; }
.stat-stack { display: grid; gap: 15px; }
.stat-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.stat-row:last-child { border-bottom: 0; }
.stat-row span { color: #9f95b3; font-size: 11px; }
.stat-row strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.stat-row small { display: block; margin-top: 3px; color: #70677f; font-size: 10px; }

.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.metric { padding: 16px 18px; min-height: 92px; border-left: 2px solid var(--purple); background: rgba(255,255,255,.028); border-radius: 4px 12px 12px 4px; }
.metric.cyan { border-color: var(--cyan); }
.metric.green { border-color: var(--green); }
.metric.amber { border-color: var(--amber); }
.metric span { display: block; color: #8f859f; font-size: 10px; margin-bottom: 9px; }
.metric strong { font-size: 23px; }
.metric small { color: #776d89; margin-left: 6px; }

.layout-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .65fr); gap: 18px; margin-bottom: 18px; }
.panel { border-top: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(27,20,47,.72), rgba(17,13,29,.72)); padding: 20px 22px; border-radius: 5px 5px 16px 16px; box-shadow: 0 16px 46px rgba(0,0,0,.15); }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.panel-head h3 { margin: 0; font-size: 15px; }
.panel-head p { margin: 6px 0 0; color: #82778f; font-size: 10px; }
.panel-actions { display: flex; gap: 8px; }
.mini-button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); color: #b7adc8; font-size: 10px; cursor: pointer; }

.goal-list { display: grid; gap: 12px; }
.goal-item { display: grid; grid-template-columns: 38px 1fr auto; gap: 13px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.goal-item:last-child { border-bottom: 0; }
.goal-index { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--purple-bright); border: 1px solid rgba(193,162,255,.28); font-size: 10px; }
.goal-item strong { display: block; font-size: 13px; }
.goal-item p { margin: 5px 0 0; color: #8f859e; font-size: 11px; line-height: 1.6; }
.progress-ring { --p: 50; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--purple) calc(var(--p) * 1%), rgba(255,255,255,.07) 0); display: grid; place-items: center; }
.progress-ring::after { content: attr(data-value); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #18122a; font-size: 8px; color: #ddd3ed; }

.org-list { display: grid; gap: 8px; }
.role-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; background: rgba(255,255,255,.025); border-radius: 9px; border: 1px solid transparent; }
.role-row:hover { border-color: var(--line); }
.role-row strong { font-size: 11px; }
.role-row p { margin: 3px 0 0; color: #746a82; font-size: 9px; }
.role-meta { text-align: right; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; font-size: 9px; border: 1px solid; }
.status::before { content:""; width:5px; height:5px; border-radius:50%; background: currentColor; }
.status.active, .status.done { color: var(--green); border-color: rgba(83,223,166,.2); background: rgba(83,223,166,.06); }
.status.recruit, .status.risk { color: var(--amber); border-color: rgba(255,204,112,.2); background: rgba(255,204,112,.06); }
.status.planned, .status.pending { color: var(--purple-bright); border-color: rgba(193,162,255,.2); background: rgba(193,162,255,.06); }
.status.blocked, .status.high { color: var(--red); border-color: rgba(255,119,146,.2); background: rgba(255,119,146,.06); }

.gantt-wrap { overflow: hidden; }
.gantt-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.filter-select { border: 1px solid var(--line); color: #c9bfd8; background: #171126; padding: 6px 9px; border-radius: 7px; font-size: 10px; }
.gantt-scroll { overflow-x: auto; padding-bottom: 6px; }
.gantt { min-width: 980px; display: grid; grid-template-columns: 230px repeat(12, minmax(55px, 1fr)); font-size: 9px; position: relative; }
.gantt.year-all { grid-template-columns: 230px repeat(12, minmax(65px, 1fr)); }
.gantt-cell { min-height: 39px; border-right: 1px solid rgba(184,146,255,.08); border-bottom: 1px solid rgba(184,146,255,.07); padding: 8px; position: relative; }
.gantt-header { color: #7e748f; text-align: center; min-height: 30px; background: rgba(255,255,255,.015); }
.gantt-name { color: #cfc6dc; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }
.gantt-name strong { font-size: 10px; font-weight: 600; }
.gantt-name span { margin-top: 3px; color: #71677f; font-size: 8px; }
.gantt-track { grid-column: 2 / span 12; min-height: 39px; border-bottom: 1px solid rgba(184,146,255,.07); position: relative; background-image: repeating-linear-gradient(90deg, transparent, transparent calc(8.333% - 1px), rgba(184,146,255,.08) calc(8.333% - 1px), rgba(184,146,255,.08) 8.333%); }
.gantt-bar { position: absolute; top: 9px; height: 20px; min-width: 6px; border-radius: 4px; background: linear-gradient(90deg, #7542e0, #a779ff); box-shadow: 0 4px 14px rgba(117,66,224,.24); cursor: pointer; overflow: hidden; }
.gantt-bar::after { content:""; position:absolute; inset:0 auto 0 0; width: calc(var(--progress) * 1%); background: rgba(255,255,255,.24); }
.gantt-bar.project { background: linear-gradient(90deg, #6857e8, #55c8f6); }
.gantt-bar.risk { background: linear-gradient(90deg, #c8685c, #ef9b65); }
.milestone { position: absolute; top: 12px; width: 14px; height: 14px; background: var(--amber); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 14px rgba(255,204,112,.35); }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { padding: 9px 10px; text-align: left; color: #796f88; font-size: 9px; font-weight: 600; border-bottom: 1px solid var(--line-strong); }
td { padding: 11px 10px; color: #bbb1ca; font-size: 10px; border-bottom: 1px solid rgba(184,146,255,.08); vertical-align: middle; }
tr:hover td { background: rgba(156,108,255,.025); }
.table-link { color: #ddd4e9; cursor: pointer; }
.table-link:hover { color: var(--purple-bright); }
.number-input, .text-input, .date-input, .select-input { width: 100%; min-width: 72px; border: 1px solid transparent; border-radius: 5px; padding: 5px 6px; color: #d8cfdf; background: transparent; font-size: 10px; }
.number-input:hover, .text-input:hover, .date-input:hover, .select-input:hover, .number-input:focus, .text-input:focus, .date-input:focus, .select-input:focus { outline: none; border-color: var(--line-strong); background: rgba(255,255,255,.025); }
.select-input option { background: #18102f; }
.progress-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 6px; }
.progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8050ec, #58d7ff); border-radius: inherit; }

.interface-map { display: grid; gap: 9px; }
.interface-row { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.interface-row:last-child { border: 0; }
.interface-row strong { color: var(--purple-bright); font-size: 10px; }
.interface-row span { color: #94899f; font-size: 10px; line-height: 1.5; }
.risk-list { display: grid; gap: 8px; }
.risk-item { padding: 11px 12px; border-left: 2px solid var(--amber); background: rgba(255,204,112,.035); border-radius: 3px 9px 9px 3px; cursor: pointer; }
.risk-item.high { border-color: var(--red); background: rgba(255,119,146,.035); }
.risk-item strong { font-size: 10px; }
.risk-item p { margin: 5px 0 0; color: #827789; font-size: 9px; line-height: 1.5; }

.project-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.fact { padding: 11px 0 0; border-top: 1px solid var(--line); }
.fact span { color: #81768f; font-size: 9px; }
.fact strong { display: block; margin-top: 6px; font-size: 14px; }
.decision-list { counter-reset: decision; display: grid; gap: 10px; }
.decision-item { position: relative; padding: 13px 14px 13px 42px; background: rgba(255,255,255,.025); border-radius: 9px; color: #a99eb7; font-size: 10px; line-height: 1.6; }
.decision-item::before { counter-increment: decision; content: counter(decision); position: absolute; left: 13px; top: 13px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--purple-bright); font-size: 8px; }
.placeholder-box { padding: 18px; border: 1px dashed rgba(193,162,255,.28); border-radius: 10px; color: #8f849d; font-size: 10px; line-height: 1.7; }

.modal { width: min(720px, 90vw); color: var(--text); border: 1px solid var(--line-strong); border-radius: 16px; background: #130e22; box-shadow: 0 40px 100px rgba(0,0,0,.55); padding: 0; }
.modal::backdrop { background: rgba(4,3,9,.72); backdrop-filter: blur(5px); }
.modal form { padding: 22px; }
.modal-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.modal h2 { margin: 0; font-size: 21px; }
.icon-button { border: 0; background: rgba(255,255,255,.04); color: #9d92aa; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 19px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: grid; gap: 6px; }
.form-field.wide { grid-column: 1 / -1; }
.form-field label { color: #8b8098; font-size: 10px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); color: #fff; padding: 10px 11px; outline: none; font-size: 11px; }
.form-field textarea { min-height: 90px; resize: vertical; }
.form-field option { background: #18102f; }
.appearance-modal { width: min(760px, 92vw); max-height: 90vh; overflow: auto; }
.appearance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.appearance-field { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.appearance-field.wide { grid-column: 1 / -1; }
.appearance-field span { display: flex; justify-content: space-between; color: #7b8fa5; font-size: 11px; }
.appearance-field output { color: var(--purple); font-weight: 700; }
.appearance-field select { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #244866; }
.appearance-field input[type="range"] { width: 100%; accent-color: var(--purple); }
.font-preview { margin-top: 18px; padding: 18px; border-left: 3px solid var(--purple); border-radius: 4px 10px 10px 4px; background: rgba(40,120,200,.055); }
.font-preview span { display: block; color: #7d91a7; font-size: 10px; margin-bottom: 8px; }
.font-preview strong { display: block; font-size: 20px; color: var(--text); }
.font-preview p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.modal-actions { display: flex; align-items: center; gap: 9px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); }
.action-spacer { flex: 1; }
.toast { position: fixed; right: 28px; bottom: 28px; z-index: 100; padding: 12px 16px; background: #24173f; border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow); color: #e8dfff; font-size: 11px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.empty { padding: 30px 12px; text-align: center; color: #746a82; font-size: 11px; }

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 220px minmax(0,1fr); }
  .main-stage { padding-inline: 24px; }
  .top-actions .button { padding-inline: 10px; }
}

@media print {
  body { background: #fff; color: #171020; }
  .sidebar, .top-actions, .notice-bar, .ambient, .panel-actions, .gantt-tools { display: none !important; }
  .app-shell { display:block; }
  .main-stage { padding: 0; }
  .topbar { position:static; background:#fff; }
  .panel, .hero-main, .hero-side { box-shadow:none; background:#fff; color:#171020; border-color:#ddd; break-inside:avoid; }
}

/* 浅蓝白管理主题 */
:root {
  --bg: #eef5fc;
  --panel: rgba(255, 255, 255, .94);
  --panel-strong: #ffffff;
  --panel-soft: #f5f9ff;
  --line: rgba(72, 118, 171, .16);
  --line-strong: rgba(53, 112, 181, .30);
  --text: #18314f;
  --muted: #6b7f98;
  --purple: #2878c8;
  --purple-bright: #3d8ed8;
  --cyan: #168fc5;
  --green: #20956f;
  --amber: #c47b16;
  --red: #c65362;
  --shadow: 0 18px 55px rgba(44, 89, 137, .10);
  color-scheme: light;
}
html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 90% 0%, rgba(121, 183, 238, .22), transparent 28%),
    linear-gradient(145deg, #f7fbff 0%, #eef5fc 55%, #e8f2fb 100%);
  color: var(--text);
}
.ambient-a { background: #90caf5; opacity: .22; }
.ambient-b { background: #c4ddf5; opacity: .25; }
.sidebar { background: rgba(248, 252, 255, .94); border-color: var(--line); }
.brand-mark { background: linear-gradient(140deg, #2b75bf, #67ade7); box-shadow: 0 10px 26px rgba(37, 110, 181, .20); color: #fff; }
.brand-block span, .sidebar-foot { color: #7d91a8; }
.nav-group-label { color: #8ba0b7; }
.nav-link { color: #5d738c; }
.nav-link:hover { background: rgba(38, 116, 190, .07); color: #174b7d; }
.nav-link.active { background: linear-gradient(90deg, rgba(60, 137, 211, .16), rgba(60, 137, 211, .04)); color: #174f84; box-shadow: inset 2px 0 #2f7fc7; }
.nav-icon { background: #eaf3fb; color: #2876bb; }
.nav-link small { color: #92a5b8; }
.topbar { background: linear-gradient(180deg, rgba(246,250,254,.98) 0%, rgba(246,250,254,.90) 76%, transparent 100%); }
.eyebrow { color: #2878c8; }
.year-control { background: rgba(255,255,255,.72); }
.year-control span { color: #7b8fa5; }
.year-control select { color: #244866; }
.year-control option, .filter-select, .select-input option { background: #fff; color: #244866; }
.button.secondary, .mini-button { background: rgba(255,255,255,.72); color: #426782; }
.button.primary { color: #fff; background: linear-gradient(135deg, #2776c1, #55a1dc); box-shadow: 0 8px 22px rgba(39,118,193,.18); }
.notice-bar { background: rgba(55, 142, 207, .05); color: #6e8195; }
.notice-bar span { color: #217cad; }
.hero-main {
  background: linear-gradient(120deg, rgba(223, 239, 253, .98), rgba(255,255,255,.98) 62%), radial-gradient(circle at 90% 0, rgba(104,174,231,.22), transparent 35%);
  border-color: rgba(72, 130, 187, .20);
}
.hero-main::after { border-color: rgba(55, 131, 197, .13); box-shadow: 0 0 0 34px rgba(55,131,197,.025), 0 0 0 72px rgba(55,131,197,.018); }
.hero-kicker { color: #2278b9; }
.overview-hero h2 { max-width: 900px; font-size: var(--overview-title-size); line-height: 1.42; letter-spacing: -.018em; }
.hero-summary { color: #5d7188; }
.hero-side { background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(240,247,253,.98)); }
.section-label, .panel-head p, .stat-row span { color: #73879d; }
.section-label strong, .panel-head h3, .goal-item strong, .role-row strong { color: #1b3b5d; }
.stat-row small, .goal-item p, .interface-row span, .risk-item p { color: #7a8da1; }
.metric { background: rgba(255,255,255,.76); }
.metric span { color: #71859a; }
.metric small { color: #8699ac; }
.panel { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,250,254,.94)); box-shadow: var(--shadow); }
.editable:focus { background: rgba(43, 122, 194, .09); }
.progress-ring::after { background: #fff; color: #3a5c79; }
.role-row, .decision-item { background: rgba(230, 240, 249, .62); }
.role-row p { color: #7f91a4; }
.filter-select { background: #fff; color: #42627c; }
.gantt-header { color: #71879c; background: rgba(222,237,249,.50); }
.gantt-name { color: #405e78; }
.gantt-name span { color: #8497a9; }
.gantt-track {
  background-color: rgba(236, 245, 252, .48);
  background-image: repeating-linear-gradient(90deg, transparent, transparent calc((100% / var(--segments)) - 1px), rgba(72,118,171,.10) calc((100% / var(--segments)) - 1px), rgba(72,118,171,.10) calc(100% / var(--segments)));
}
.gantt-bar { background: linear-gradient(90deg, #347fc4, #68afe3); box-shadow: 0 4px 12px rgba(45, 117, 182, .20); }
.gantt-bar.project { background: linear-gradient(90deg, #2878c8, #47b5d8); }
th { color: #70859a; }
td { color: #506b82; }
.table-link { color: #305f87; }
.number-input, .text-input, .date-input, .select-input { color: #355872; }
.number-input:hover, .text-input:hover, .date-input:hover, .select-input:hover,
.number-input:focus, .text-input:focus, .date-input:focus, .select-input:focus { background: #f4f9fd; }
.progress-bar { background: #dfeaf4; }
.placeholder-box { color: #698098; background: rgba(235,245,253,.55); }
.modal { color: var(--text); background: #f8fbfe; }
.modal-head .icon-button { color: #647d94; background: #e9f2f9; }
.form-field input, .form-field select, .form-field textarea { background: #fff; color: #244866; }
.form-field option { background: #fff; }
.appearance-field { background: #f8fbfe; }
.toast { background: #fff; color: #285579; box-shadow: var(--shadow); }
.status.active, .status.done { background: rgba(32,149,111,.07); }
.status.recruit, .status.risk { background: rgba(196,123,22,.07); }
.status.planned, .status.pending { background: rgba(40,120,200,.07); }
.status.blocked, .status.high { background: rgba(198,83,98,.07); }

/* 可独立调整的文字类别：由“外观设置”实时写入这些变量。 */
.nav-link { font-size: var(--nav-font-size); }
.nav-group-label, .sidebar-foot { font-size: calc(var(--nav-font-size) - 2px); }
.nav-icon, .nav-link small { font-size: calc(var(--nav-font-size) - 1px); }

.hero h2 { font-size: var(--overview-title-size); }
.hero-summary, .goal-item p, .role-row p, .interface-row span,
.risk-item p, .decision-item, .placeholder-box, .notice-bar {
  font-size: var(--body-font-size);
}

.panel-head h3, .section-label strong { font-size: var(--section-title-size); }

th, td, .number-input, .text-input, .date-input, .select-input {
  font-size: var(--table-font-size);
}

.gantt, .gantt-name strong { font-size: var(--gantt-font-size); }
.gantt-name span { font-size: calc(var(--gantt-font-size) - 2px); }

.button, .mini-button, .year-control select, .filter-select,
.file-button, .icon-button { font-size: var(--button-font-size); }

.metric strong, .stat-row strong { font-size: var(--number-font-size); }

.eyebrow, .hero-kicker, .metric span, .stat-row span, .stat-row small,
.section-label, .panel-head p, .status, .fact span, .form-field label {
  font-size: var(--label-font-size);
}

/* 任意文字字号编辑 */
[hidden] { display: none !important; }
body.font-pick-mode .main-stage, body.font-pick-mode .sidebar { cursor: crosshair; }
body.font-pick-mode .font-editable-hover:hover {
  outline: 2px dashed rgba(39, 118, 193, .55);
  outline-offset: 3px;
  border-radius: 3px;
}
.font-edit-selected {
  outline: 2px solid #2878c8 !important;
  outline-offset: 4px;
  border-radius: 3px;
  box-shadow: 0 0 0 5px rgba(40,120,200,.10);
}
.font-toolbar {
  position: fixed;
  z-index: 90;
  top: 106px;
  right: 24px;
  width: 330px;
  padding: 15px;
  border: 1px solid rgba(56, 125, 188, .28);
  border-radius: 14px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 55px rgba(45, 90, 130, .20);
  color: #244866;
  backdrop-filter: blur(12px);
}
.font-toolbar-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.font-toolbar-head span { display: block; color: #7d91a7; font-size: 10px; margin-bottom: 4px; }
.font-toolbar-head strong { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.font-toolbar-close { width: 28px; height: 28px; border: 0; border-radius: 7px; background: #eaf3fb; color: #547590; cursor: pointer; font-size: 18px; }
.font-size-controls { display: grid; grid-template-columns: 42px 1fr 42px 48px; gap: 8px; align-items: center; margin-top: 14px; }
.font-size-controls button, .font-toolbar-actions button {
  min-height: 34px;
  border: 1px solid #cbddea;
  border-radius: 8px;
  background: #f7fbfe;
  color: #315f82;
  cursor: pointer;
  font-size: 12px;
}
.font-size-controls button:hover, .font-toolbar-actions button:hover { background: #eaf4fb; border-color: #8fb9da; }
.font-size-controls input { width: 100%; accent-color: #2878c8; }
.font-size-controls output { color: #2776c1; font-weight: 700; text-align: right; font-size: 12px; }
.font-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.font-toolbar p { margin: 11px 0 0; color: #7a8fa4; font-size: 10px; line-height: 1.55; }
#fontEditBtn[aria-pressed="true"] { background: #dceefa; color: #185e96; border-color: #78add3; }
/* 备案信息：按要求在网站底部展示并链接至工信部备案系统。 */
.site-filing {
  padding: 16px 24px;
  text-align: center;
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
}

.site-filing a {
  color: inherit;
  text-decoration: none;
}

.site-filing a:hover {
  color: #2563eb;
  text-decoration: underline;
}