/* ============================================================
   惠仕评估项目管理系统 · UI 设计稿共享样式 v0.3
   依据《惠仕设计语言 · 设计规范 v1.0》（服务器 ~/workspace/DESIGN.md）
   深蓝 #0b1f3f × 暖白 × 冷灰 + 香槟金唯一点缀

   v0.2 视觉规则（按 review 调整）：
   · 可交互元素用「行动色」——主按钮深蓝实底；次按钮深蓝描边深蓝字；
     文字链接/小操作用深蓝字 + hover 金色下划线。
   · 仅展示容器去框线——用留白、发丝线分隔与冷灰底表达层级。
   · 输入控件（输入框/下拉/chips）保留 1px 发丝线描边作为可交互暗示。

   v0.3（按 review 调整）：
   · 按钮/chips 统一 2px 微圆角（规范上限内），输入框保持直角。
   · 档案卡双列 kv 改为同行四列表格，行高自动拉齐、框线对齐。
   · 恢复流程链 .flow（简版六节点），用于管理看板项目进度。
   ============================================================ */

:root {
    --navy:       #0b1f3f;
    --navy-2:     #142c52;
    --white:      #fdfdfc;
    --gray:       #f0f3f7;
    --ink:        #182541;
    --ink-soft:   #5d6678;
    --gold:       #c9a35b;
    --gold-soft:  #e6c98c;
    --line:       rgba(24,37,65,.12);
    --line-dark:  rgba(253,253,252,.13);
    --ok:         #2e7d5b;
    --warn:       #b8860b;
    --err:        #a03d31;
    --ease-out:   cubic-bezier(.22,.61,.36,1);
    --maxw:       1080px;
    --mono:       ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.65;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
}

::selection { background: rgba(201,163,91,.35); }

a { color: var(--navy); }
button { font-family: inherit; }

.num  { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.mut  { color: var(--ink-soft); }

/* ---------- 顶栏（浅色 · 底部 1px 发丝线） ---------- */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--white);
    border-bottom: 1px solid var(--line);
}
.topbar-in {
    max-width: var(--maxw); margin: 0 auto;
    padding: 0 24px; height: 56px;
    display: flex; align-items: center; gap: 26px;
}
.brand {
    display: flex; align-items: center; gap: 9px;
    font-weight: 900; font-size: 15px; letter-spacing: .02em;
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand i { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; }
.topnav { display: flex; gap: 22px; }
.topnav a {
    font-size: 13.5px; color: var(--ink-soft); text-decoration: none;
    padding: 4px 1px; border-bottom: 2px solid transparent;
    transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.topnav a:hover { color: var(--ink); }
.topnav a.on  { color: var(--navy); font-weight: 600; border-bottom-color: var(--gold); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.topbar-right a { color: var(--ink-soft); text-decoration: none; }
.topbar-right a:hover { color: var(--ink); }
.menu-btn { display: none; }

/* ---------- 页面骨架 ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 72px; }
.page-head { margin: 44px 0 8px; }
.eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 600; letter-spacing: .32em;
    color: var(--gold); white-space: nowrap;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex: none; }
.page-title {
    margin-top: 14px;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 900; letter-spacing: -.01em; line-height: 1.3;
}
.page-title .tag { vertical-align: 4px; margin-left: 10px; }
.gold-rule { width: 56px; height: 2px; background: var(--gold); margin-top: 18px; }
.page-sub { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }

.sec { margin-top: 44px; }
.sec-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
    padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 0;
}
.sec-h h2 {
    font-size: 16.5px; font-weight: 700; letter-spacing: .01em;
    display: flex; align-items: center; gap: 9px;
}
.sec-h h2::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
.sec-h .side { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- 按钮（可交互 = 行动色深蓝 · 2px 微圆角） ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13.5px; font-weight: 600; line-height: 1.4;
    padding: 9px 22px; border: 1px solid var(--navy);
    background: var(--navy); color: #f2f5fa;
    text-decoration: none; cursor: pointer; border-radius: 2px;
    transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-outline {
    background: transparent; border-color: rgba(11,31,63,.32);
    color: var(--navy); font-weight: 600;
}
.btn-outline:hover { background: rgba(201,163,91,.05); border-color: var(--gold); color: var(--navy); }
.btn-sm { padding: 5px 13px; font-size: 12.5px; }
.btn-text-err { border: none; background: none; color: var(--err); font-weight: 500; padding: 9px 6px; font-size: 13px; }
.btn-text-err:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 文字型行动链接（编辑 / 进入 / 复制 / 拨打…） */
.alink {
    color: var(--navy); font-weight: 500; font-size: 12.5px;
    text-decoration: none; white-space: nowrap;
    border-bottom: 1px solid var(--line); padding-bottom: 1px;
    transition: border-color .2s var(--ease-out);
}
.alink:hover { border-bottom-color: var(--gold); }

/* ---------- 标签 / 状态 ---------- */
/* 状态标：软深蓝底（仅展示，不用描边盒，与按钮拉开） */
.tag {
    display: inline-flex; align-items: center;
    font-size: 11.5px; font-weight: 600; line-height: 1;
    padding: 6px 10px; background: rgba(11,31,63,.07); color: var(--navy);
    white-space: nowrap;
}
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: currentColor; flex: none; }
.st-gold { color: var(--gold); }
.st-gold span { color: var(--ink); }
.st-ink  { color: var(--ink-soft); }
.st-ok   { color: var(--ok); }
.st-warn { color: var(--warn); }
.st-err  { color: var(--err); }

/* ---------- 面板（仅用于「档案卡」等重点展示容器） ---------- */
.panel { border: 1px solid var(--line); background: var(--white); padding: 22px 26px 24px; }
.panel-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px;
}
.panel-h h2, .panel-h h3 {
    font-size: 15.5px; font-weight: 700;
    display: flex; align-items: center; gap: 9px;
}
.panel-h h2::before, .panel-h h3::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
.panel-h .side { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- 数据表（无竖线 · 1px 横发丝线 · 行 hover 淡金） ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th {
    font-size: 12px; font-weight: 600; letter-spacing: .1em;
    color: var(--ink-soft); text-align: left;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
    white-space: nowrap; background: var(--white);
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background .18s var(--ease-out); }
.table tbody tr:hover { background: rgba(201,163,91,.05); }
.table .r { text-align: right; }
.table .c { text-align: center; }
.table .nw { white-space: nowrap; }
.table-sticky thead th { position: sticky; top: 56px; z-index: 5; box-shadow: 0 1px 0 var(--line); }

/* key-value 定义表 */
.kv { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kv th {
    font-size: 13px; font-weight: 400; color: var(--ink-soft);
    text-align: left; padding: 9px 16px 9px 0; width: 88px;
    vertical-align: top; white-space: nowrap; border-bottom: 1px solid var(--line);
}
.kv td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: none; }

/* 双列 kv（档案卡）：四列同行，行高自动拉齐、框线对齐 */
.kv-pair { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kv-pair th, .kv-pair td { border-bottom: 1px solid var(--line); vertical-align: top; padding: 9px 0; }
.kv-pair tr:last-child th, .kv-pair tr:last-child td { border-bottom: none; }
.kv-pair th {
    font-size: 13px; font-weight: 400; color: var(--ink-soft);
    text-align: left; white-space: nowrap; width: 76px; padding-right: 14px;
}
.kv-pair th.gap { padding-left: 26px; width: 102px; }

/* ---------- 编号信息条（无框账签条：上下发丝线 + 列间细线） ---------- */
.meta-bar {
    display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr auto;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.meta-cell { padding: 15px 18px 16px; border-left: 1px solid var(--line); min-width: 0; }
.meta-cell:first-child { border-left: none; padding-left: 2px; }
.meta-cell:last-child { padding-right: 2px; }
.meta-label { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 6px; }
.meta-value { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
.meta-value .mono { overflow-wrap: anywhere; font-weight: 600; }
.meta-value.empty { color: var(--ink-soft); font-size: 13px; }
.copy-btn {
    border: none; background: none; padding: 0 0 1px;
    color: var(--navy); font-size: 12px; font-weight: 500;
    border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer;
    transition: border-color .2s var(--ease-out);
}
.copy-btn:hover { border-bottom-color: var(--gold); }
.qr-thumb { width: 44px; height: 44px; display: block; border: 1px solid var(--line); }

/* ---------- 流程链（管理看板 · 项目进度；金色仅当前节点） ---------- */
.flow { display: flex; align-items: center; min-width: 0; }
.flow-step { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.flow-step .fd { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--ink-soft); flex: none; }
.flow-step.done { color: var(--ink); }
.flow-step.done .fd { background: var(--navy); border-color: var(--navy); }
.flow-step.now { color: var(--ink); font-weight: 700; }
.flow-step.now .fd { background: var(--gold); border-color: var(--gold); }
.flow-line { flex: 1 1 12px; height: 1px; background: var(--line); margin: 0 8px; min-width: 10px; }

/* ---------- 统计条（去框：上下发丝线 + 列间细线） ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 20px 24px 18px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; padding-left: 2px; }
.stat b { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat b sup { font-size: 11.5px; font-weight: 600; color: var(--gold); margin-left: 3px; }
.stat span { display: block; font-size: 11.5px; letter-spacing: .1em; color: var(--ink-soft); margin-top: 5px; }

/* ---------- 表单（输入控件保留描边 = 可交互暗示 · 保持直角） ---------- */
.field { margin-bottom: 15px; }
.field > label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.field > label .req { color: var(--err); margin-left: 2px; }
.input, select.input, textarea.input {
    width: 100%; border: 1px solid var(--line); background: var(--white);
    padding: 9px 12px; font-size: 14px; color: var(--ink);
    border-radius: 0; font-family: inherit; line-height: 1.5;
    transition: border-color .2s var(--ease-out);
}
.input:focus { outline: none; border-color: var(--gold); }
.input::placeholder { color: rgba(93,102,120,.55); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.radio-row { display: flex; gap: 20px; align-items: center; padding: 4px 0; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.radio-row input { accent-color: var(--navy); }

/* ---------- 快选 chips（可交互控件 · 2px 微圆角） ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    min-height: 40px; display: inline-flex; align-items: center;
    padding: 8px 16px; font-size: 14px;
    border: 1px solid var(--line); background: var(--white); color: var(--ink);
    cursor: pointer; border-radius: 2px;
    transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.chip:hover { border-color: var(--gold); background: rgba(201,163,91,.06); }
.chip.sel { background: var(--navy); border-color: var(--navy); color: #f2f5fa; }
.chip-group { margin-bottom: 18px; }
.chip-group > .cg-label { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; }

/* ---------- 已填区行 ---------- */
.frow {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
    padding: 10px 0; border-bottom: 1px solid var(--line);
}
.frow:last-child { border-bottom: none; }
.fk { font-size: 13px; color: var(--ink-soft); min-width: 4.5em; }
.fv { font-size: 14px; }
.fedit {
    margin-left: auto; min-height: 32px; padding: 3px 6px;
    font-size: 12.5px; color: var(--navy); font-weight: 500;
    background: none; border: none; border-bottom: 1px solid transparent;
    cursor: pointer; border-radius: 0;
}
.fedit:hover { border-bottom-color: var(--gold); }

/* ---------- 照片 ---------- */
.ph {
    background: var(--gray); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--ink-soft); text-align: center;
    aspect-ratio: 1; overflow: hidden;
}
.prog { height: 2px; background: var(--line); position: relative; margin-top: 10px; }
.prog i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--gold); }

/* ---------- 提示条（冷灰底 + 金色左条，无框） ---------- */
.banner {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--gray); border-left: 2px solid var(--gold);
    padding: 11px 14px; font-size: 13px;
}
.banner .b-ico { color: var(--gold); font-weight: 700; flex: none; }
.banner b { font-weight: 600; }

/* 警示变体（银行特别要求等"容易忽略但必须看到"的备注，2026-09-15） */
.banner-warn {
    background: #fdf1ec; border-left: 3px solid #c0452a;
    font-size: 14px; color: #8a2c17;
}
.banner-warn .b-ico { color: #c0452a; }
.banner-warn b { color: #8a2c17; }

/* ---------- 交互标注（仅设计稿说明用，非界面元素） ---------- */
.note {
    margin-top: 36px; padding: 14px 18px;
    border: 1px dashed var(--line);
    font-size: 12.5px; color: var(--ink-soft); line-height: 2;
}
.note b { color: var(--ink); font-weight: 600; }
.note::before {
    content: "交互标注"; display: block;
    font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--gold);
    margin-bottom: 6px;
}

/* ---------- 页脚 ---------- */
.footer {
    border-top: 1px solid var(--line); margin-top: 64px;
    padding: 20px 24px 28px; text-align: center;
    font-size: 12px; color: var(--ink-soft);
}
.footer a { color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* ============================================================
   手机断点 ≤768px（设计目标 ~390px）
   ============================================================ */
@media (max-width: 768px) {
    .topbar-in { padding: 0 16px; gap: 14px; height: 52px; }
    .topnav { display: none; }
    .menu-btn {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 13px; color: var(--ink); background: none;
        border: 1px solid var(--line); border-radius: 2px; padding: 6px 12px; cursor: pointer;
    }
    .topbar-right .hide-m { display: none; }
    .wrap { padding: 0 16px 56px; }
    .page-head { margin: 32px 0 4px; }
    .sec { margin-top: 36px; }
    .panel { padding: 18px 16px 20px; }
    .form-row { grid-template-columns: 1fr; }

    /* 双列 kv → 单列逐字段，行线对齐 */
    .kv-pair, .kv-pair tbody { display: block; width: 100%; }
    .kv-pair tr { display: flex; flex-wrap: wrap; }
    .kv-pair th, .kv-pair td { display: block; border-bottom: 1px solid var(--line); }
    .kv-pair th { width: 76px; flex: none; padding: 9px 14px 9px 0; }
    .kv-pair th.gap { padding-left: 0; width: 76px; }
    .kv-pair td { flex: 1 1 calc(100% - 90px); min-width: calc(100% - 90px); padding: 9px 0; }
    .kv-pair tr:last-child th, .kv-pair tr:last-child td { border-bottom: none; }

    /* meta 账签条 → 2×2 */
    .meta-bar { grid-template-columns: 1fr 1fr; }
    .meta-cell { padding: 12px 14px 13px; border-left: none; }
    .meta-cell:first-child { padding-left: 14px; }
    .meta-cell:nth-child(2n) { border-left: 1px solid var(--line); }
    .meta-cell:nth-child(n+3) { border-top: 1px solid var(--line); }

    /* stats 收紧 */
    .stat { padding: 14px 14px 12px; }
    .stat:first-child { padding-left: 2px; }
    .stat b { font-size: 21px; }

    .table thead th, .table td { padding: 10px 10px; }

    /* 流程链允许横向滑动 */
    .flow { overflow-x: auto; padding-bottom: 6px; }

    .hide-m { display: none !important; }
}


/* ============================================================
   模板补充组件（2026-08-28 改版）：从设计稿页内样式提升为共享契约
   —— 类名与 SPEC §5 契约一一对应，值全部沿用设计稿原值
   ============================================================ */

/* 宽表横滑容器（SPEC §6：页面禁止横向滚动；容器内禁用吸顶表头） */
.tbl-scroll { overflow-x: auto; }
.tbl-scroll .table-sticky thead th { position: static; box-shadow: none; }

/* Tab 条（提升自 08-quick-write；吸顶，active 深蓝 700 + 金色 2px 下划线，手机端横滑） */
.tabs {
    position: sticky; top: 56px; z-index: 20;
    background: var(--white); border-bottom: 1px solid var(--line);
    display: flex; gap: 4px; margin: 22px -24px 0; padding: 0 24px;
    overflow-x: auto;
}
.tabs a {
    flex: none; padding: 13px 16px 11px; font-size: 13.5px; color: var(--ink-soft);
    text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
    transition: color .2s var(--ease-out);
    cursor: pointer;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--navy); font-weight: 700; border-bottom-color: var(--gold); }
.tabs a .cnt { font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; margin-left: 5px; }

/* 上传区（提升自 04-project-create） */
.dropzone {
    border: 1px dashed rgba(11,31,63,.35); background: var(--gray);
    padding: 30px 20px; text-align: center; cursor: pointer;
    transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.dropzone:hover { border-color: var(--gold); background: rgba(201,163,91,.05); }
/* 拖拽悬停反馈（值同 hover，规范内） */
.dropzone.dragover { border-color: var(--gold); background: rgba(201,163,91,.05); }
.dropzone b { display: block; font-size: 14px; color: var(--navy); font-weight: 600; }
.dropzone span { font-size: 12.5px; color: var(--ink-soft); }

/* 弹窗（提升自 04-project-create；遮罩 rgba(11,31,63,.55)，白底直角 ≤640px） */
.modal-mask {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(11,31,63,.55);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-mask[hidden] { display: none; }
.modal {
    background: var(--white); width: min(640px, 100%);
    max-height: calc(100vh - 48px); overflow: auto;
    padding: 22px 26px 24px;
}
.modal-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.modal-h h2 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.modal-h h2::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
.modal-h .cnt { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.modal-acts { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.modal-acts .spacer { flex: 1; }

/* 手机断点补充（与本文件 §6 同断点） */
@media (max-width: 768px) {
    .tabs { top: 52px; margin: 18px -16px 0; padding: 0 16px; }
    .modal { padding: 18px 16px 20px; }
    .modal-mask { padding: 12px; }
}