@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
  --ink: #263238;
  --blue: #2f5d7c;
  --blue-deep: #203f56;
  --orange: #d7792b;
  --red: #b44a3c;
  --paper: #f5f7f8;
  --line: #b8c7d0;
  --grid: rgba(47, 93, 124, .06);
  --green: #32815f;
  font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1120px; background: var(--paper); }
button, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; background-color: var(--paper); }

.topbar { height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 20px; color: #fff; background: var(--blue-deep); box-shadow: 0 2px 8px rgba(23, 47, 63, .18); }
.brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 21px; font-weight: 700; letter-spacing: 0; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid #dce8ee; font-size: 16px; transform: rotate(45deg); }
.brand-mark span { transform: rotate(-45deg); }
.top-divider { width: 1px; height: 28px; background: rgba(255,255,255,.36); }
.current-project { font-size: 16px; white-space: nowrap; }
.top-spacer { flex: 1; }
.top-label { font-size: 14px; color: #dfe9ee; white-space: nowrap; }
.top-select { height: 34px; min-width: 128px; padding: 0 30px 0 12px; color: #fff; border: 1px solid rgba(255,255,255,.38); background: #345972; border-radius: 3px; }
.top-select option { color: var(--ink); background: #fff; }
.bell, .profile { border: 0; color: #fff; background: transparent; }
.bell { position: relative; font-size: 23px; padding: 4px 8px; }
.badge { position: absolute; top: -2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ef4c38; font-size: 14px; line-height: 17px; }
.profile { display: flex; align-items: center; gap: 9px; padding: 3px 0 3px 8px; font-size: 15px; white-space: nowrap; }
.profile-icon { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 50%; font-size: 16px; }

.app-frame { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.workspace { display: grid; grid-template-columns: 84px minmax(700px, 1fr) 306px; gap: 16px; padding: 16px 14px 12px; background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.ruler { position: relative; min-height: 810px; padding-top: 13px; border-right: 1px solid var(--line); color: var(--ink); }
.ruler::before { content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 100%; background: repeating-linear-gradient(to bottom, var(--blue) 0 1px, transparent 1px 13px); opacity: .55; }
.ruler-item { position: relative; height: 126px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding-left: 21px; font-size: 14px; font-weight: 600; writing-mode: horizontal-tb; }
.ruler-item::after { content: '◆'; position: absolute; right: -8px; color: var(--blue); font-size: 15px; }
.ruler-item:nth-child(2)::after, .ruler-item:nth-child(3)::after { color: var(--ink); }

.function-list { position: sticky; top: 0; align-self: start; height: calc(100vh - 64px); overflow-y: auto; border-right: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 1px 0 2px rgba(38,50,56,.04); scrollbar-gutter: stable; }
.function-list-head { display: flex; align-items: baseline; justify-content: space-between; min-height: 48px; padding: 0 14px; border-bottom: 2px solid var(--blue); background: #edf3f6; }
.function-list-head span { color: #173d58; font-size: 17px; font-weight: 700; }
.function-list-head small { color: #60727d; font-size: 14px; }
.function-group { padding: 11px 8px 9px; }
.function-group + .function-group { border-top: 1px solid #d8e2e7; }
.function-group h2 { margin: 0 8px 6px; color: #60727d; font-size: 14px; font-weight: 700; }
.function-items { display: grid; gap: 2px; }
.function-item { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 7px 9px; border: 0; border-left: 3px solid transparent; color: #40525d; background: transparent; text-align: left; font-size: 14px; font-weight: 600; line-height: 1.3; }
.function-index { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid #6f8796; background: #f5f7f8; transform: rotate(45deg); }
.function-item:hover { color: var(--blue-deep); background: #edf5f9; }
.function-item:hover .function-index { border-color: var(--blue); background: #cfe9f8; }
.function-item.active { border-left-color: var(--orange); color: #173d58; background: #fff4e8; }
.function-item.active .function-index { border-color: var(--orange); background: var(--orange); }

.module-frame { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.module-frame > .function-list { position: sticky; top: 0; }
.module-mount { min-width: 0; overflow: auto; background: var(--paper); }
.module-mount > * { min-height: calc(100vh - 64px) !important; font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif !important; font-size: 14px !important; }
.module-mount h1 { font-size: 28px !important; }
.module-mount h2 { font-size: 18px !important; }
.module-mount h3 { font-size: 16px !important; }
.module-mount p, .module-mount label { font-size: 14px !important; }
.module-mount button, .module-mount input, .module-mount select, .module-mount textarea { font-size: 14px !important; }
.module-mount table { font-size: 14px !important; }
.module-mount small, .module-mount time { font-size: 14px !important; }

.main-column { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.project-strip, .track-panel, .action-band, .side-panel { border: 1px solid var(--line); background: rgba(255,255,255,.88); box-shadow: 0 1px 2px rgba(38,50,56,.04); }
.project-strip { min-height: 104px; display: grid; grid-template-columns: 112px 1fr 280px; align-items: center; overflow: hidden; background: #edf3f6; }
.device-sketch { height: 100%; display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--blue); font-size: 55px; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; }
.strip-title { padding: 12px 20px; font-size: 24px; font-weight: 700; color: #122e44; }
.strip-meta { align-self: stretch; display: grid; align-content: center; gap: 7px; padding: 12px 20px; border-left: 1px solid var(--line); font-size: 14px; }
.strip-meta span { display: inline-block; min-width: 68px; font-weight: 700; }
.warning-text { color: var(--orange); font-weight: 700; }

.track-panel { min-height: 454px; padding: 18px 20px 14px; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.panel-title { margin: 0; font-size: 18px; line-height: 1.2; }
.overview-title { font-size: 28px; }
.title-icon { display: inline-grid; width: 23px; height: 23px; margin-right: 8px; place-items: center; color: var(--blue); border: 2px solid var(--blue); font-size: 14px; vertical-align: -2px; }
.track-wrap { position: relative; margin-top: 24px; padding: 0 2px; }
.track-line { position: absolute; top: 16px; left: 17px; right: 17px; height: 5px; background: linear-gradient(90deg, #2d91d0 0 54%, var(--orange) 54% 65%, var(--red) 65% 72%, var(--ink) 72%); }
.track-arrow { position: absolute; top: 10px; right: 0; color: var(--ink); font-size: 20px; }
.stages { position: relative; display: grid; grid-template-columns: repeat(10, minmax(62px, 1fr)); gap: 6px; }
.stage { min-width: 0; }
.stage-dot { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; margin: 0 auto 10px; border: 2px solid var(--blue); border-radius: 50%; color: #fff; background: #258bcc; font-size: 14px; font-weight: 700; }
.stage.current .stage-dot { border-color: var(--orange); background: var(--orange); }
.stage.risk .stage-dot { border-color: #ef2f24; background: #ef2f24; }
.stage.future .stage-dot { color: var(--ink); border-color: #516576; background: #f5f7f8; }
.stage-card { min-height: 110px; padding: 8px 5px; text-align: center; border: 1px solid #8faaba; background: rgba(255,255,255,.9); }
.stage.current .stage-card { border-color: var(--orange); }
.stage.risk .stage-card { color: var(--red); border-color: #ef8c7d; }
.stage-name { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.stage-info { display: block; font-size: 14px; line-height: 1.55; white-space: nowrap; }
.state { display: inline-block; margin-top: 8px; padding: 2px 5px; border: 1px solid #5ca77f; color: var(--green); background: #edf9f1; font-size: 14px; white-space: nowrap; }
.stage.current .state { border-color: #ec9a52; color: var(--orange); background: #fff4e8; }
.stage.risk .state { border-color: #ef7770; color: var(--red); background: #fff0ef; }
.stage.future .state { border-color: #a8b6bf; color: #66767f; background: #f6f8f9; }
.current-version { margin: 22px 0 0; padding: 10px 14px; color: #173d58; border: 1px solid #c7deeb; background: #e9f5fc; text-align: center; font-size: 15px; font-weight: 700; }
.batch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 20px 10% 0; }
.batch { position: relative; padding-top: 20px; text-align: center; }
.batch::before { content: '↓'; position: absolute; top: -15px; left: 50%; color: var(--blue); font-size: 22px; }
.batch-label { display: block; margin-bottom: 7px; color: var(--blue); font-size: 14px; font-weight: 700; }
.batch:nth-child(2) .batch-label { color: var(--orange); }
.batch-box { padding: 8px; text-align: left; border: 1px solid #acd0e4; background: #eef8fd; font-size: 14px; line-height: 1.7; }
.batch:nth-child(2) .batch-box { border-color: #ebc28d; background: #fff5e8; }

.side-column { display: flex; flex-direction: column; gap: 16px; }
.side-panel { overflow: hidden; }
.side-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 700; }
.collapse { border: 0; background: transparent; color: var(--ink); font-size: 19px; }
.side-body { padding: 14px 16px 16px; }
.field-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.field-row select { width: 100%; height: 30px; padding: 0 7px; border: 1px solid #aabac4; color: var(--ink); background: #fff; }
.issue-list { margin-top: 15px; border-top: 1px solid #d8e0e4; }
.issue-row { display: grid; grid-template-columns: 1fr 34px 72px 12px; align-items: center; gap: 5px; padding: 9px 0; border-bottom: 1px solid #e3e8ea; font-size: 14px; }
.issue-tag { padding: 3px 5px; border: 1px solid var(--orange); color: var(--orange); background: #fff8ee; text-align: center; }
.issue-tag.blue { color: var(--blue); border-color: #85b4d3; background: #f0f8fc; }
.issue-tag.green { color: var(--green); border-color: #83bca0; background: #effaf4; }
.delta { color: var(--red); font-weight: 700; }
.quality-list { display: grid; gap: 13px; font-size: 14px; }
.quality-item { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 8px; }
.progress { height: 12px; border: 1px solid #9baeb9; background: #f4f7f8; }
.progress i { display: block; width: 68%; height: 100%; background: var(--blue); }
.release-title { margin: 16px 0 9px; font-weight: 700; }
.release-list { display: grid; gap: 11px; margin: 0; padding-left: 18px; font-size: 14px; }
.release-list li::marker { color: #9aaab4; }

.action-band { min-height: 211px; padding: 14px 20px; }
.action-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.action-buttons { display: flex; gap: 10px; }
.primary, .secondary, .text-button { height: 34px; padding: 0 14px; border-radius: 2px; font-size: 14px; }
.primary { border: 1px solid var(--blue-deep); color: #fff; background: var(--blue-deep); }
.secondary { border: 1px solid #6e9bb8; color: var(--blue-deep); background: #fff; }
.text-button { border: 0; color: #176da5; background: transparent; padding: 0; }
.revision-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.revision-table th, .revision-table td { height: 30px; padding: 5px 12px; border: 1px solid #b7c5ce; text-align: left; white-space: nowrap; }
.revision-table th { color: #263d4b; border-top: 2px solid var(--ink); border-bottom-color: var(--blue); background: #eaf3f8; font-weight: 700; }
.revision-table td:first-child { border-left: 4px solid var(--blue); }
.risk-pill { display: inline-block; min-width: 38px; padding: 2px 7px; border: 1px solid #efa23a; color: var(--orange); background: #fff5e7; text-align: center; }
.risk-pill.high { border-color: #ee6b5d; color: #fff; background: #ef5c4c; }
.risk-pill.low { border-color: #85b4d3; color: var(--blue); background: #eff7fc; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 5; padding: 11px 16px; color: #fff; background: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.2); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(31,45,53,.32); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(520px, 80vw); padding: 26px; border: 1px solid var(--line); background: #fff; box-shadow: 0 15px 50px rgba(31,45,53,.25); }
.modal-close { position: absolute; top: 8px; right: 12px; border: 0; color: var(--ink); background: transparent; font-size: 23px; }
.modal-card h2 { margin: 0 0 18px; font-size: 20px; }
.detail-grid { display: grid; grid-template-columns: 110px 1fr; gap: 12px 16px; margin: 0; font-size: 14px; }
.detail-grid dt { color: #6a7b84; }
.detail-grid dd { margin: 0; font-weight: 600; }

@media (max-width: 1280px) {
  .app-frame { grid-template-columns: 210px minmax(0, 1fr); }
  .module-frame { grid-template-columns: 210px minmax(0, 1fr); }
  .workspace { grid-template-columns: 64px minmax(680px, 1fr) 280px; gap: 10px; padding-inline: 9px; }
  .ruler-item { padding-left: 9px; }
  .project-strip { grid-template-columns: 88px 1fr 240px; }
  .strip-title { padding-inline: 12px; font-size: 22px; }
  .strip-meta { padding-inline: 12px; }
  .track-panel { padding-inline: 13px; }
}