/* 设计规范：颜色、字号、间距统一在这里定，页面只用这些变量。
   方向：实验室精密感 —— 冷中性色、细线分割、等宽数字、克制动效、小圆角。
   深浅色：<html> 上的 data-theme 决定，默认跟随系统，顶栏按钮可手动覆盖。 */
:root {
  color-scheme: light;        /* P10：具体深浅由 data-theme 决定，原生控件同步 */
  /* 主色与语义色 */
  --primary: #1d54bb;
  --primary-hover: #163f92;
  --primary-soft: #eaf0fb;
  --primary-line: #c9d8f2;
  --text: #17212f;
  --text-2: #4b5a70;
  --text-3: #7b8a9e;
  --border: #dde3ec;
  --border-strong: #bdc7d6;
  --bg: #f3f6fa;
  --surface: #fbfcfe;
  --surface-2: #ffffff;
  --fill: #edf1f7;
  --success: #0b7a54;
  --success-soft: #e5f4ed;
  --warning: #9a5f06;
  --warning-soft: #fdf1dc;
  --danger: #b3302b;
  --danger-soft: #fdeceb;
  --changed: #fff4ce;

  /* 语义别名：行悬停、表头、占位符、代码、遮罩 */
  --hover: #f5f8fc;
  --thead: #edf1f7;
  --placeholder: #a9b4c4;
  --code-bg: #eef2f8;
  --paper: #ffffff;
  --overlay: rgba(14, 24, 40, .42);
  --grid-line: #dde3ec;
  --row-hover: #f5f8fc;
  --calc-bg: #f7f9fc;
  --group-bg: #f0f3f8;
  --hl-soft: rgba(29, 84, 187, .055);
  --hl-strong: rgba(29, 84, 187, .115);
  --sel-bg: rgba(29, 84, 187, .10);
  --dirty-bg: #fff9ea;
  --dirty-line: #ecd39a;
  --dirty-text: #7a4100;
  --dirty-dot: #c47f06;
  --on-primary: #ffffff;
  --on-danger: #ffffff;
  --on-success: #ffffff;

  /* 精密感：小圆角、细线阴影（阴影只给浮层用） */
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: none;
  --shadow-lg: 0 12px 32px rgba(18, 32, 54, .16), 0 2px 8px rgba(18, 32, 54, .08);

  /* 间距刻度（4 的倍数） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* 排版：字号阶梯 + 流体标题；数字等宽 */
  --fs-xs: .75rem;      /* 12 */
  --fs-sm: .8125rem;    /* 13 */
  --fs-base: .875rem;   /* 14 */
  --fs-md: .9375rem;    /* 15 */
  --fs-h1: clamp(1.25rem, 1.05rem + .5vw, 1.5rem);
  --lh-body: 1.65;
  --font: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --topbar-h: 52px;
  --sidebar-w: 236px;

  /* P9 统一线性图标：mask 上色，颜色跟随语义令牌，深色自动适配 */
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E");
  --icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 21h16'/%3E%3C/svg%3E");
  --icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
  --icon-table: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='8' width='36' height='32' rx='2'/%3E%3Cpath d='M6 17h36M18 17v23M30 17v23'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E");
  --icon-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l2 3h4l2-3h5'/%3E%3Cpath d='M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.2 8 11 4.6-1.8 8-6 8-11V5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E");
}

/* ---- P10 深色模式：由 <html data-theme="dark"> 驱动，按钮可手动覆盖系统设置 ---- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #6b9bff;
    --primary-hover: #8bb0ff;
    --primary-soft: #182a47;
    --primary-line: #2d4670;
    --text: #e7eef8;
    --text-2: #a9b9cf;
    --text-3: #788ba5;
    --border: #29374c;
    --border-strong: #3d4f6a;
    --bg: #0e1622;
    --surface: #151f2e;
    --surface-2: #1b2739;
    --fill: #1c2839;
    --success: #4cc79a;
    --success-soft: #12352b;
    --warning: #e0a94b;
    --warning-soft: #3a2d15;
    --danger: #f08a84;
    --danger-soft: #3b1d1d;
    --changed: #4a3a12;
    --hover: #1b283a;
    --thead: #1c2839;
    --placeholder: #62748c;
    --code-bg: #1b2739;
    --paper: #e8eef6;
    --overlay: rgba(3, 8, 16, .68);
    --grid-line: #29374c;
    --row-hover: #1b283a;
    --calc-bg: #172234;
    --group-bg: #1c2839;
    --hl-soft: rgba(107, 155, 255, .09);
    --hl-strong: rgba(107, 155, 255, .18);
    --sel-bg: rgba(107, 155, 255, .16);
    --dirty-bg: #3a2f18;
    --dirty-line: #6b5424;
    --dirty-text: #e8c886;
    --dirty-dot: #e0a94b;
    --on-primary: #0e1622;
    --on-danger: #200d0d;
    --on-success: #08231b;
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--fs-base)/var(--lh-body) var(--font); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.32; letter-spacing: -.01em; }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-2); }
ul { margin: 0; padding-left: 20px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-sm); }
.num, kbd { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--sp-4); }
kbd { font: var(--fs-xs)/1.4 var(--font-num); padding: 1px 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); }

/* 等宽数字：编号、限值、时间、计数一律对齐（仪器面板感） */
.proj-no, .proj-name, .task-no, .nav-item .note, .codes, .side-progress .small,
.list-group-title .muted, .list-tabs .tab span, code, .data-table td.num, .grid-table td.num {
  font-variant-numeric: tabular-nums;
}

/* 顶栏 */
.topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: var(--fs-md); letter-spacing: .01em; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--primary); color: var(--surface-2); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.topnav { display: flex; gap: 2px; flex: 1; }
.topnav a { padding: 5px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-sm); }
.topnav a:hover { background: var(--fill); text-decoration: none; }
.topnav a.on { color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.user { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); }
.user form { margin: 0; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; }

/* 主体：项目页左边是步骤栏 */
.app { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.main { flex: 1; min-width: 0; padding: var(--sp-5) 28px var(--sp-7); }
.main.narrow { max-width: 1200px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.page-head h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.02em; }
.page-sub { color: var(--text-3); margin-top: var(--sp-1); font-size: var(--fs-sm); max-width: 90ch; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); flex: none; }
.page-actions form { margin: 0; }

.sidebar { width: var(--sidebar-w); flex: none; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: var(--sp-4) 12px var(--sp-5); background: var(--surface); border-right: 1px solid var(--border); }
.proj-head { padding: 0 var(--sp-2) var(--sp-3); margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.proj-no { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .04em; }
.proj-name { font-weight: 650; line-height: 1.45; margin: 2px 0 var(--sp-2); word-break: break-all; }
.side-progress { padding: 6px 0 0; }
.side-progress .bar { height: 5px; margin-bottom: 5px; }
.nav-group { margin: var(--sp-3) 0 var(--sp-1); padding: 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; color: var(--text-3); }
.nav-item { display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-2); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm); }
.nav-item:hover { background: var(--fill); text-decoration: none; }
.nav-item.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-item .label { flex: 1; }
.nav-item .note { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.nav-item.lock .label { color: var(--text-3); }
.dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; font-size: 10px; line-height: 1; }
.dot.done { background: var(--success); border-color: var(--success); }
.dot.done::after { content: ""; width: 11px; height: 11px; background-color: var(--surface-2);
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat; }
.dot.doing { border-color: var(--primary); }
.dot.doing::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.dot.lock { border-style: dashed; }
.dot.na { border-color: var(--border); background: var(--fill); }
.dot.home, .dot.down, .dot.doc { border: 0; background: none; }
.dot.home::after, .dot.down::after, .dot.doc::after { content: ""; width: 14px; height: 14px; background-color: var(--text-2);
  -webkit-mask: var(--icon-home) center / contain no-repeat; mask: var(--icon-home) center / contain no-repeat; }
.dot.down::after { -webkit-mask-image: var(--icon-down); mask-image: var(--icon-down); }
.dot.doc::after { -webkit-mask-image: var(--icon-doc); mask-image: var(--icon-doc); }

@media (max-width: 960px) {
  .topbar { gap: var(--sp-3); padding: 0 var(--sp-3); }
  .app { flex-direction: column; }
  .sidebar { position: static; width: auto; height: auto; padding: var(--sp-3); border-right: 0; border-bottom: 1px solid var(--border); }
  .nav-list { display: flex; gap: var(--sp-1); overflow-x: auto; }
  .nav-group { display: none; }
  .nav-item { flex: none; }
  .main { padding: var(--sp-4); }
  .page-head { flex-direction: column; }
}