/* 全站视觉变量与布局；业务交互由 pages 各模块负责。 */
@import url('./styles-responsive.css');
  
  
:root {
  --ink:#20283b;
  --muted:#626f7e;
  --accent:#052851;
  --accent-dark:#1f1a3b;
  --paper:#f5f6f8;
  --line:#e2e6eb;
  --amber:#955000;
  --rail:#1f1a3b;
  font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif;
  font-size:14px;
  color:var(--ink);
  background:var(--paper)}

* {
  box-sizing:border-box}
body {
  margin:0}
button,input,textarea,select {
  font:inherit}
button,a,input,textarea,select {
  outline-offset:3px}
button {
  cursor:pointer}
button:disabled {
  cursor:wait;
  opacity:.55}
a {
  color:inherit;
  text-decoration:none}
button,.button {
  border:0;
  border-radius:7px;
  padding:10px 17px;
  font-weight:600;
  display:inline-block;
  line-height:1.5}
button:hover,.button:hover {
  filter:brightness(.96)}
.primary {
  background:var(--accent);
  color:white}
.secondary {
  background:#eef1f7;
  color:#052851;
  border:1px solid #dce2eb}
.ghost {
  background:transparent;
  color:#536478;
  padding:6px 10px}
.full {
  width:100%}
.muted {
  color:var(--muted)}
.hint,.footnote {
  font-size:12px;
  color:var(--muted);
  line-height:1.8}
.error {
  color:#ad352f}
.warning {
  color:var(--amber)}
h1,h2,h3,h4,p {
  margin-top:0}
h1 {
  font-size:29px;
  letter-spacing:-.7px;
  margin-bottom:9px}
h2 {
  font-size:19px;
  line-height:1.6;
  margin-bottom:14px}
h3 {
  font-size:15px;
  line-height:1.6;
  margin-bottom:7px}
p {
  line-height:1.8}
small {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:5px}
.eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  color:#74878e;
  font-weight:700;
  display:block;
  margin-bottom:10px}
.workspace {
  display:flex;
  min-height:100vh}
.sidebar {
  width:222px;
  position:fixed;
  inset:0 auto 0 0;
  background:var(--rail);
  color:#eceef6;
  display:flex;
  flex-direction:column;
  padding:30px 19px}
.brand {
  font-family:"Microsoft YaHei",sans-serif;
  font-size:35px;
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:700;
  letter-spacing:1px}
.brand span {
  font-size:12px;
  letter-spacing:1.5px;
  line-height:1.5;
  font-weight:500}
.workspace-label {
  font-size:9px;
  letter-spacing:1.2px;
  color:#a2aaad;
  margin:43px 10px 15px}
nav {
  display:grid;
  gap:6px}
nav a {
  display:flex;
  gap:13px;
  align-items:center;
  padding:13px;
  border-radius:7px;
  color:#c4c9d5}
nav a span {
  font-size:18px;
  width:20px;
  text-align:center}
nav a.active {
  background:#ffffff12;
  color:#fff}
nav a:hover {
  background:#ffffff0c}
.sidebar-bottom {
  margin-top:auto;
  font-size:12px;
  color:#a2aaad;
  padding:20px 11px 0}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c6a879;
  margin-right:6px}
.version {
  float:right}
.main {
  margin-left:222px;
  flex:1;
  min-width:0}
.topbar {
  height:78px;
  padding:0 42px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px}
.user-menu {
  display:flex;
  align-items:center;
  gap:10px}
.avatar {
  background:#f1ebe1;
  color:#705b38;
  border-radius:50%;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  font-size:15px}
.content {
  max-width:1580px;
  margin:0 auto;
  padding:36px 42px 30px}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px}
.page-heading p {
  color:var(--muted);
  margin:0}
.today {
  color:var(--muted);
  font-size:12px}
footer {
  font-size:11px;
  color:#74878e;
  text-align:center;
  letter-spacing:2px;
  padding:20px}
.welcome-card {
  background:#eef1f6;
  border:1px solid #dce2eb;
  border-radius:12px;
  padding:30px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px}
.welcome-card h2 {
  font-size:24px;
  margin:12px 0 7px}
.welcome-card p {
  color:#626f7e}
.target-art {
  margin:0 30px;
  color:#b39567;
  text-align:center}
.target-art span {
  font-size:110px;
  font-weight:100;
  line-height:1.2}
.target-art small {
  color:#b39567;
  letter-spacing:3px}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:24px}
.metrics article {
  background:white;
  border:1px solid var(--line);
  border-radius:9px;
  padding:20px 22px}
.metrics span {
  color:#626f7e;
  font-size:12px}
.metrics strong {
  display:block;
  font-size:34px;
  margin:14px 0 8px;
  font-weight:600;
  letter-spacing:-1px}
.metrics small {
  font-size:11px;
  color:#74878e}
.two-col {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:22px;
  align-items:start}
.panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px;
  margin-bottom:22px;
  min-width:0}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:15px}
.section-head h2 {
  margin:0}
.badge {
  display:inline-block;
  border-radius:5px;
  padding:4px 8px;
  background:#eef0f4;
  color:#626f7e;
  font-size:11px;
  white-space:nowrap}
.badge.green {
  color:#006c45;
  background:#e3f9e9}
.badge.amber {
  color:#955000;
  background:#fff1e9}
.empty {
  text-align:center;
  padding:35px 18px;
  color:var(--muted)}
.empty h3 {
  color:#526078;
  margin:14px 0 6px}
.empty p {
  font-size:13px;
  max-width:400px;
  margin:auto}
.empty-mark {
  font-size:25px;
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px dashed #c1c6c8;
  border-radius:12px;
  color:#74878e}
.attention-row {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:17px 0;
  gap:15px}
.attention-row p {
  font-size:12px;
  color:var(--amber);
  margin:7px 0 0}
.rhythm {
  display:flex;
  gap:15px;
  padding:17px 0;
  border-bottom:1px solid var(--line)}
.rhythm>span {
  font-size:12px;
  color:#a78a5c;
  line-height:2.2}
.rhythm h3 {
  margin:0}
.rhythm p {
  font-size:12px;
  color:var(--muted);
  margin:5px 0}
.integration-line {
  line-height:2.6;
  margin-top:15px;
  font-size:12px}
.integration-line .badge {
  margin-left:12px}
.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:18px}
.notice {
  border-left:3px solid #c6a879;
  background:#f6f2eb;
  padding:13px 16px;
  font-size:12px;
  color:#6d5e48;
  line-height:1.8;
  border-radius:0 5px 5px 0;
  margin-bottom:20px}
.table-panel {
  padding:0;
  overflow:auto}
table {
  border-collapse:collapse;
  width:100%;
  font-size:13px}
th {
  text-align:left;
  color:#626f7e;
  font-size:11px;
  font-weight:500;
  background:#f8f9fb;
  white-space:nowrap}
th,td {
  padding:17px 20px;
  border-bottom:1px solid var(--line);
  line-height:1.65}
td {
  vertical-align:top}
tr:last-child td {
  border-bottom:0}
.preview-cell {
  max-width:380px;
  color:#626f7e;
  font-size:12px}
.task-title {
  max-width:460px}
.task-title strong {
  font-weight:500}
.table-scroll {
  overflow:auto}
.table-scroll input {
  min-width:145px}
label {
  display:block;
  color:#526078;
  font-size:12px;
  margin-bottom:18px;
  line-height:1.6}
input,textarea,select {
  width:100%;
  display:block;
  margin-top:7px;
  border:1px solid #cdd5df;
  border-radius:6px;
  background:#fdfdfe;
  padding:11px 12px;
  color:var(--ink);
  font-size:13px;
  line-height:1.6}
input:focus,textarea:focus,select:focus {
  outline:2px solid #d9e1ff;
  border-color:#052851}
textarea {
  resize:vertical}
input[type=file] {
  margin-bottom:16px}
input[type=date] {
  max-width:235px}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px}
.form-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:22px;
  border-top:1px solid var(--line);
  padding-top:20px}
.inline-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:16px 0}
details {
  margin:12px 0;
  border-top:1px solid #e2e6eb;
  padding-top:12px}
summary {
  cursor:pointer;
  color:#526078;
  font-size:12px;
  line-height:1.8}
details label:first-of-type {
  margin-top:14px}
.prose {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:13px;
  line-height:1.9}
.record {
  padding:19px 0;
  border-bottom:1px solid var(--line)}
.record:last-child {
  border-bottom:0}
.record-meta {
  font-size:11px;
  color:#74878e;
  margin-bottom:10px}
.record p {
  margin:10px 0 0;
  font-size:12px}
.daily-layout {
  grid-template-columns:1.2fr 1fr}
.acceptance {
  background:#f6f2eb;
  color:#6d5e48;
  padding:14px;
  font-size:13px;
  border-radius:5px}
.objective h2 {
  max-width:950px}
.kr-row {
  display:flex;
  gap:22px;
  padding:23px 0;
  border-top:1px solid var(--line)}
.kr-code {
  font-size:12px;
  color:#74878e;
  min-width:68px;
  padding-top:3px}
.kr-main {
  flex:1}
.kr-value {
  min-width:112px;
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:end;
  gap:12px}
.kr-value strong {
  font-size:16px;
  font-weight:500}
.setting-row {
  display:flex;
  justify-content:space-between;
  padding:15px 0;
  border-bottom:1px solid var(--line)}
.binding-row {
  display:flex;
  align-items:center;
  gap:18px;
  padding:15px 0;
  border-top:1px solid var(--line)}
.binding-row>div {
  min-width:190px}
.binding-row input {
  margin:0;
  max-width:420px}
.analysis-intro h2 {
  font-size:23px}
.analysis-intro p {
  max-width:980px}
.error-panel {
  padding:24px;
  background:#fff0ed;
  color:#ad352f;
  border-radius:8px}
.loading {
  padding:50px;
  text-align:center;
  color:var(--muted)}
dialog {
  border:1px solid var(--line);
  border-radius:12px;
  width:min(880px,94vw);
  max-height:90vh;
  padding:0;
  box-shadow:0 20px 90px #05285130;
  color:var(--ink)}
dialog::backdrop {
  background:#1f1a3b60;
  backdrop-filter:blur(3px)}
.modal-head {
  padding:20px 27px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  background:white;
  z-index:2}
.modal-head h2 {
  margin:0}
.modal-body {
  padding:25px 28px}
.version-item {
  padding:18px;
  background:#f8f9fb;
  border:1px solid var(--line);
  border-radius:6px}
.version-item h4 {
  font-size:12px;
  color:#626f7e;
  margin:20px 0 5px}
#toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%,20px);
  background:#052851;
  color:white;
  padding:13px 23px;
  border-radius:8px;
  box-shadow:0 6px 24px #0002;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:100;
  max-width:85vw;
  line-height:1.7}
#toast.visible {
  opacity:1;
  transform:translate(-50%,0)}
.login {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  min-height:100vh}
.login-story {
  background:#1f1a3b;
  color:#ffffff;
  padding:65px 11%;
  display:flex;
  flex-direction:column}
.login-story .brand {
  margin-bottom:120px}
.login-story .brand span {
  max-width:110px;
  font-size:10px}
.login-story h1 {
  font-size:44px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-1px}
.login-story p {
  color:#c1c6d5;
  margin-top:20px}
.login-bottom {
  margin-top:auto;
  font-size:12px;
  color:#c6a879;
  letter-spacing:2px;
  padding-top:70px}
.login-form {
  max-width:410px;
  width:100%;
  align-self:center;
  justify-self:center;
  padding:30px}
.login-form h2 {
  font-size:27px}
.login-form form {
  margin-top:36px}
.login-form .hint {
  margin-top:25px}
.login-form .error {
  min-height:20px;
  margin-top:12px}


/* FE39：输入 @ 后就地显示人员候选，支持手机换行。 */
.mention-options{display:flex;flex-wrap:wrap;gap:6px;padding:10px;margin:6px 0;border:1px solid #cbc6da;border-radius:8px;background:#fff;max-height:180px;overflow:auto}.mention-options button{font-size:13px}