/* static/css/theme.css - 墨缇斯·政智通 主题样式（设计令牌移植自交互 Demo theme.css + 后台组件扩展） */

/* ==================== 设计令牌（Design Tokens） ==================== */
:root {
    color-scheme: light;
    --color-primary: #123f3a;
    --color-primary-deep: #0d312d;
    --color-primary-soft: #e7efec;
    --color-accent: #b08d3f;
    --color-accent-soft: #f4eddc;
    --color-background: #f6f5f0;
    --color-surface: #ffffff;
    --color-surface-alt: #fbfbf8;
    --color-text: #20261f;
    --color-muted-text: #667069;
    --color-border: #e4e2d8;
    --color-border-strong: #d3d0c2;
    --color-border-soft: #eeece3;
    --color-focus: #40618c;
    --color-success: #2f7d55;
    --color-success-soft: #e5f2ea;
    --color-warning: #c77b2a;
    --color-warning-soft: #f9efe1;
    --color-danger: #c0523a;
    --color-danger-soft: #f8e9e5;
    --color-info: #40618c;
    --color-info-soft: #e8eef5;
    --font-body: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-display: Georgia, "Songti SC", "SimSun", "STSong", serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 999px;
    --space-unit: 0.25rem;
    --shadow-sm: 0 1px 2px rgba(18, 63, 58, 0.06);
    --shadow-md: 0 4px 16px rgba(18, 63, 58, 0.08);
    --shadow-lg: 0 10px 32px rgba(18, 63, 58, 0.12);
    --sidebar-w: 15.5rem;
    --content-width: 76rem;
}

* { box-sizing: border-box; }

html {
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
}

body { margin: 0; min-height: 100dvh; }

button, input, select, textarea { font: inherit; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.skip-link {
    left: 1rem;
    position: fixed;
    top: 1rem;
    transform: translateY(-200%);
    z-index: 100;
}
.skip-link:focus { transform: translateY(0); }

/* ==================== 布局壳层 ==================== */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100dvh;
}

/* ==================== 侧边栏 ==================== */
.sidebar {
    background: var(--color-primary);
    color: #e8efec;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
    padding: 1.25rem 0.9rem;
    gap: 0.35rem;
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.25rem 0.5rem 1.1rem;
    border-bottom: 1px solid rgba(232, 239, 236, 0.14);
    margin-bottom: 0.6rem;
}

.brand-mark {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--color-accent), #d9b25f);
    display: grid;
    place-items: center;
    color: var(--color-primary-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.brand-sub {
    font-size: 0.72rem;
    color: rgba(232, 239, 236, 0.62);
    letter-spacing: 0.06em;
}

.nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }

.nav-group { display: flex; flex-direction: column; gap: 0.15rem; }

.nav-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: rgba(232, 239, 236, 0.5);
    padding: 0.9rem 0.6rem 0.35rem;
    text-transform: uppercase;
}

/* 父级菜单带 URL 时的可点击分组标题（menu_url 为空时渲染为不可点击的 .nav-label） */
.nav-label-link { display: block; text-decoration: none; color: rgba(232, 239, 236, 0.72); }
.nav-label-link:hover { color: #fff; text-decoration: none; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    color: #cdd9d4;
    font-size: 0.88rem;
    text-decoration: none;
}

.nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }

.nav-link.active { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; }

.nav-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    flex: 0 0 auto;
}

.sidebar-foot {
    padding: 0.8rem 0.6rem 0.3rem;
    border-top: 1px solid rgba(232, 239, 236, 0.14);
    font-size: 0.76rem;
    color: rgba(232, 239, 236, 0.66);
}
.sidebar-foot .ver { margin-top: 0.2rem; font-size: 0.68rem; letter-spacing: 0.04em; }

/* ==================== 主区与顶栏 ==================== */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(246, 245, 240, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.6rem;
}

.topbar-title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

.topbar-search { flex: 1; max-width: 26rem; position: relative; }

.topbar-search input {
    width: 100%;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: 0.85rem;
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

.user-menu { position: relative; display: flex; align-items: center; }
.user-detail { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.user-name { font-size: 0.84rem; font-weight: 600; }
.user-role { font-size: 0.72rem; color: var(--color-muted-text); }

/* 用户菜单触发按钮 */
.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer;
    color: inherit;
}
.user-menu-toggle:hover { background: var(--color-primary-soft); border-color: var(--color-border); }
.user-menu-caret {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--color-muted-text);
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}
.user-menu.open .user-menu-caret { transform: rotate(180deg); }

/* 用户下拉面板 */
.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 15rem;
    max-width: 21rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.35rem;
    z-index: 80;
    display: none;
}
.user-menu.open .user-dropdown { display: block; }

.dropdown-head {
    padding: 0.6rem 0.7rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.3rem;
}
.dropdown-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary-deep);
}
.dropdown-meta {
    font-size: 0.75rem;
    color: var(--color-muted-text);
    margin-top: 0.1rem;
    word-break: break-all;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
}
.dropdown-item:hover { background: var(--color-primary-soft); text-decoration: none; }
.dropdown-item:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -2px; }
.dropdown-icon {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.dropdown-divider { height: 1px; background: var(--color-border); margin: 0.3rem 0.35rem; }
.dropdown-danger { color: var(--color-danger); }
.dropdown-danger .dropdown-icon { background: var(--color-danger-soft); color: var(--color-danger); }
.dropdown-danger:hover { background: var(--color-danger-soft); }

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border);
}

.avatar {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.content {
    padding: 1.5rem 1.6rem 3rem;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
}

.page-head { margin-bottom: 1.2rem; }
.page-head h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    margin: 0 0 0.3rem;
    color: var(--color-primary-deep);
}
.page-head .lede { color: var(--color-muted-text); font-size: 0.92rem; max-width: 52rem; }

/* ==================== 卡片与栅格 ==================== */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.2rem;
}
.card + .card { margin-top: 1rem; }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}
.card-head h2, .card-head h3 {
    font-family: var(--font-display);
    margin: 0;
    font-size: 1.02rem;
    color: var(--color-primary-deep);
}
.card-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.grid { display: grid; gap: 1rem; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==================== 统计与进度 ==================== */
.stat { display: flex; flex-direction: column; gap: 0.25rem; }
.stat .stat-label { font-size: 0.8rem; color: var(--color-muted-text); }
.stat .stat-value {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--color-primary-deep);
    line-height: 1.1;
}
.stat .stat-delta { font-size: 0.78rem; }
.delta-up { color: var(--color-success); }
.delta-down { color: var(--color-danger); }

.bar-track {
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-border);
    overflow: hidden;
    display: inline-block;
    width: 100%;
}
.bar-fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }
.bar-fill.accent { background: var(--color-accent); }
.bar-fill.success { background: var(--color-success); }
.bar-fill.warning { background: var(--color-warning); }
.bar-fill.danger { background: var(--color-danger); }

.progress-bars { display: flex; flex-direction: column; gap: 0.8rem; }
.progress-row {
    display: grid;
    grid-template-columns: 8rem 1fr auto;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.85rem;
}

.score-ring {
    --p: 0;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--color-primary) calc(var(--p) * 1%), var(--color-border) 0);
    position: relative;
    margin: 0 auto;
}
.score-ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--color-surface);
}
.score-ring span { position: relative; font-weight: 700; font-size: 1.2rem; color: var(--color-primary-deep); }

/* ==================== 徽标与提示 ==================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-info { background: var(--color-info-soft); color: var(--color-info); }
.badge-accent { background: var(--color-accent-soft); color: #8a6a28; }
.badge-neutral { background: var(--color-primary-soft); color: var(--color-primary); }

.alert {
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    font-size: 0.86rem;
    margin-top: 0.8rem;
    border: 1px solid transparent;
}
.alert-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: #f0d3cc; }
.alert-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: #eeddbf; }
.alert-info { background: var(--color-info-soft); color: var(--color-info); border-color: #d3e0ee; }
.alert-success { background: var(--color-success-soft); color: var(--color-success); border-color: #cfe6da; }

/* ==================== 按钮 ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-primary);
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--color-primary-soft); text-decoration: none; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-deep); }
.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-accent:hover { background: #9c7b33; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-muted-text); }
.btn-ghost:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.btn-block { width: 100%; margin-top: 0.4rem; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==================== 表单 ==================== */
.field { display: flex; flex-direction: column; gap: 0.32rem; margin-bottom: 0.7rem; }
.field label { font-size: 0.8rem; font-weight: 600; color: var(--color-text); }
.field input, .field select, .field textarea {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 0.88rem;
    color: var(--color-text);
    width: 100%;
}
.field textarea { font-family: var(--font-mono); line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(18, 63, 58, 0.12);
}
.field .hint { font-size: 0.75rem; color: var(--color-muted-text); }

/* 日期/年月/时间段控件（templates/common/date_range.html 生成，见 static/js/common.js）
   背景：这些字段原先都是纯文本框，用户要求改为真正的日期类控件。
   这里只负责"起止并排"的排版：两段控件的值合成一个中文明文写回隐藏域，
   因此视觉上仍是一个字段，不会打乱既有栅格布局。 */
.range-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.range-inline input[type="month"],
.range-inline input[type="date"],
.range-inline input[type="datetime-local"] {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 0.88rem;
    color: var(--color-text);
    flex: 1 1 0;
    min-width: 0;
}
.range-inline input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(18, 63, 58, 0.12);
}
.range-inline .range-sep {
    color: var(--color-muted-text);
    font-size: 0.85rem;
    flex: 0 0 auto;
}
/* ★2026-10-07 修复「建设周期与企业规模互相盖住」（用户反馈）：
   原规则 `[data-date-range] input{min-width:8.5rem}` 本意是"窄容器里别把
   年/月控件压扁"，但它的**选择器优先级高于** `.range-inline input{min-width:0}`，
   于是"起止并排"的区间控件被强行撑到 2×8.5rem + 分隔符 ≈ 287px。
   在 `.grid-cols-2` 两列布局里每列只有 156~243px（实测 1600px 视口下每列 242.75px），
   区间块因此**横向溢出 20~100px**，结束月份输入直接压在右列「企业规模」上 ——
   这正是用户看到的"互相盖住"。
   修法：区间内输入允许收缩（basis 取 0 + min-width 0，flex 才能生效），
   并允许换行 → 列太窄时两个月份上下排，而不是越界压住邻居。 */
.range-inline { flex-wrap: wrap; }
[data-date-range] input[type="month"],
[data-date-range] input[type="date"],
[data-date-range] input[type="datetime-local"] {
    min-width: 0;
    flex: 1 1 6.5rem;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    color: var(--color-muted-text);
    cursor: pointer;
    width: auto;
}
/* 复选框必须显式限定尺寸：input 默认无固定宽高，在 flex 容器中会被 align-items:stretch 拉长 */
.checkbox-line input[type="checkbox"] {
    width: 0.95rem;
    height: 0.95rem;
    min-width: 0.95rem;
    max-width: 0.95rem;
    padding: 0;
    margin: 0;
    border-radius: 0.2rem;
    accent-color: var(--color-primary);
    flex: 0 0 auto;
    align-self: center;
}

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; }
.filter-bar .field { margin-bottom: 0; min-width: 9rem; }

.chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
    padding: 0.28rem 0.72rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: 0.8rem;
    color: var(--color-muted-text);
    cursor: pointer;
}
.chip.active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

/* ==================== 表格 ==================== */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.table th {
    text-align: left;
    color: var(--color-muted-text);
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-surface-alt);
}
.table td {
    padding: 0.62rem 0.6rem;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--color-surface-alt); }

.text-muted { color: var(--color-muted-text); }

/* ==================== 分页 ==================== */
.pagination {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-top: 0.9rem;
}
.pagination button {
    min-width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0 0.5rem;
}
.pagination button:hover { background: var(--color-primary-soft); }
.pagination button.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ==================== 列表 ==================== */
.list-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.87rem; }
.list-plain li { padding-left: 0.9rem; position: relative; }
.list-plain li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: var(--color-accent);
}

.list-row-group { list-style: none; margin: 0; padding: 0; }
.list-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.list-row:last-child { border-bottom: none; }
.list-row-main { flex: 1; min-width: 0; }
.list-row-main .title { font-weight: 600; font-size: 0.92rem; color: var(--color-primary-deep); margin-bottom: 0.15rem; }
.list-row-main .meta {
    font-size: 0.79rem;
    color: var(--color-muted-text);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
}

/* ==================== 标签页与面板 ==================== */
.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.tab {
    padding: 0.5rem 0.9rem;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    color: var(--color-muted-text);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.tab.active { color: var(--color-primary); font-weight: 600; border-bottom-color: var(--color-primary); }
.panel[hidden] { display: none; }

/* ★2026-10-07 全局 [hidden] 兜底（补既有缺陷）
   为什么需要：`[hidden]` 的 UA 规则是 `display:none`，但**任何显式 display 声明都会
   覆盖它**（同优先级下后声明的胜出，且类选择器权重高于属性选择器？—— 实测本项目
   .field{display:flex} 就压过了 [hidden]）。本项目此前只在 .panel / .modal-mask /
   .modal-error / .loading-mask 上逐个补了 [hidden] 规则，**其它元素一律失效**：
   实测 `gov/project_review_modal.html` 里 `<div class="field" id="rvReviseWrap" hidden>`
   在页面上照常显示（"修改要求"字段本该只在选「退回修改」时出现）。
   这里加一条全局规则一次性修好，避免以后再逐个打补丁。
   !important 是必要的：要与各类显式 display 声明竞争。 */
[hidden] { display: none !important; }

/* ==================== 项目评审：专家选择与分专家打分（2026-10-07） ====================
   用户要求补上专家库 + 分专家独立打分 + 回避规则，这里是对应的展示样式：
     .expert-item / .is-conflict  —— 专家勾选行；命中回避规则的整体置灰并标红原因
     .expert-score-card           —— 每位专家一组 5 维打分的卡片（一眼看清"谁打了什么分"）
     .chip / .chip-box            —— 可评审领域多选
   为什么置灰而不是隐藏：评审组需要看到"谁不能选、为什么"，
   隐藏会让人怀疑专家库不全，也不利于事后解释评审组构成。 */
.expert-pick {
    border: 1px solid var(--color-border, #e3e5e8);
    border-radius: 6px;
    padding: 0.6rem;
    margin-bottom: 0.8rem;
    max-height: 260px;
    overflow-y: auto;
}
.expert-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.34rem 0.2rem;
    border-bottom: 1px dashed var(--color-border, #eceef0);
    cursor: pointer;
    flex-wrap: wrap;
}
.expert-item:last-child { border-bottom: none; }
.expert-item .expert-name { font-weight: 600; min-width: 5.5rem; }
.expert-item.is-conflict {
    background: var(--color-danger-bg, #fdf0ef);
    cursor: not-allowed;
    opacity: 0.85;
}
.conflict-tag {
    color: var(--color-danger, #b3261e);
    font-size: 0.82rem;
    background: var(--color-danger-bg, #fdf0ef);
    border: 1px solid var(--color-danger-border, #f3c9c5);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    white-space: normal;
}
.expert-score-card {
    border: 1px solid var(--color-border, #e3e5e8);
    border-radius: 6px;
    padding: 0.7rem;
    margin-bottom: 0.7rem;
}
.expert-score-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border, #eceef0);
}
.expert-score-head .btn { margin-left: auto; }
.chip-box { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--color-border, #d9dce0);
    border-radius: 14px;
    padding: 0.18rem 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.chip:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-bg, #eef4fd);
    font-weight: 600;
}
.radio-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.radio-row .radio { display: inline-flex; align-items: flex-start; gap: 0.35rem; cursor: pointer; }
/* 说明文字另起一行，避免"（推荐：…可回避剔除）"把选项名挤成两三行（截图可见） */
.radio-row .radio > span { display: flex; flex-direction: column; line-height: 1.4; }
.radio-row .radio .text-muted { font-size: 0.86rem; }
.inline-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* ==================== 模态框 ==================== */
.modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(13, 49, 45, 0.42);
    display: grid;
    place-items: center;
    z-index: 60;
    padding: 1.2rem;
}
.modal-mask[hidden] { display: none; }
.modal { width: 100%; max-width: 34rem; max-height: 88dvh; overflow-y: auto; }
/* 宽弹窗：公文生成（类型专属要素表单，含 grid-cols-2）与公文编辑（正文大文本域）用 */
.modal-wide { max-width: 48rem; }
/* 弹窗内表单校验提示（400 / 409 文案就地显示，不关弹窗、内容不丢） */
.modal-error {
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    font-size: 0.83rem;
}
.modal-error[hidden] { display: none; }

/* ==================== 确认弹窗（Common.confirm 用） ====================
   ★2026-10-09 用户要求：「退出登录时的提示，修改为好看点的」。
     原先退出登录走浏览器原生 window.confirm —— 样式由浏览器决定、与本站设计系统
     完全脱节（灰底白框、按钮是系统字体），且无法放图标/说明文字。
     现改为站点内统一的确认弹窗，本组样式供 Common.confirm() 生成的结构使用。
   ⚠️ 不复用 .card-head / .modal-foot：确认框是"窄、居中、无滚动"的小弹窗，
      与业务弹窗（表单、表格）的留白与标题字号不同，单独定义更可控。 */
.confirm-modal { max-width: 27rem; padding: 1.9rem 1.9rem 1.5rem; text-align: center; }
.confirm-icon {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 1.05rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
}
/* 危险级（退出登录 / 删除 / 停用等不可逆或中断性操作）用警示色 */
.confirm-icon.is-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.confirm-icon.is-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.confirm-title {
    font-family: var(--font-display);
    margin: 0 0 0.7rem;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    color: var(--color-primary-deep);
}
.confirm-text {
    margin: 0;
    font-size: 0.93rem;
    color: var(--color-text);
    line-height: 1.6;
}
.confirm-hint {
    margin: 0.85rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border-soft);
    font-size: 0.79rem;
    color: var(--color-muted-text);
    line-height: 1.6;
}
.confirm-actions {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    margin-top: 1.5rem;
}
/* 窄屏时按钮竖排铺满，避免两个按钮挤成一团 */
@media (max-width: 420px) {
    .confirm-actions { flex-direction: column-reverse; }
    .confirm-actions .btn { width: 100%; }
}

/* ==================== 申报日历（独立模块页 /calendar） ====================
   ★2026-10-09 新增（用户反馈「个人和机构中没有申报日历的菜单和对应的功能模块」）。
   纯 CSS Grid 月历：7 列等宽、星期表头、单元格内事件 chip。
   设计取向与本站一致：主色描边表示今天，暖金=政策截止，墨绿=项目节点，灰=已过期。 */
.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}
.cal-weekdays span {
    text-align: center;
    font-size: 0.74rem;
    color: var(--color-muted-text);
    padding: 0.2rem 0;
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
}
.cal-cell {
    min-height: 4.6rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: 0.32rem 0.36rem;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    overflow: hidden;
}
/* 补位单元格（上月/下月）：淡出，不参与交互 */
.cal-cell.is-out { background: var(--color-surface-alt); border-color: transparent; }
.cal-cell.is-out .cal-day { color: var(--color-border-strong); }
/* 已过期：整体降饱和，避免与待办抢注意力 */
.cal-cell.is-past { background: var(--color-surface-alt); }
.cal-cell.is-past .cal-day { color: var(--color-muted-text); }
/* 今天：主色描边 + 浅底，是全页最强的视觉锚点 */
.cal-cell.is-today {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
    background: var(--color-primary-soft);
}
.cal-day { font-size: 0.8rem; font-weight: 600; color: var(--color-text); }
.cal-cell.is-today .cal-day { color: var(--color-primary-deep); }
.cal-chip {
    display: block;
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-chip.is-policy { background: var(--color-accent-soft); color: #8a6a28; }
.cal-chip.is-node { background: var(--color-primary-soft); color: var(--color-primary-deep); }
.cal-chip.is-more { background: var(--color-border-soft); color: var(--color-muted-text); }
.cal-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
    font-size: 0.76rem;
    color: var(--color-muted-text);
}
.cal-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
    margin-left: 0.6rem;
}
.cal-dot.is-policy { background: var(--color-accent-soft); border: 1px solid var(--color-accent); }
.cal-dot.is-node { background: var(--color-primary-soft); border: 1px solid var(--color-primary); }
.cal-dot.is-today { background: var(--color-primary-soft); border: 1px solid var(--color-primary); }
.cal-dot.is-past { background: var(--color-surface-alt); border: 1px solid var(--color-border-strong); }
/* 窄屏：日历退化为紧凑格子（高度减小、chip 只留色块），保证 7 列不挤爆 */
@media (max-width: 900px) {
    .cal-cell { min-height: 3.4rem; }
    .cal-chip { font-size: 0.62rem; padding: 0.06rem 0.2rem; }
}
@media (max-width: 560px) {
    .cal-cell { min-height: 2.6rem; padding: 0.2rem; }
    .cal-chip { display: none; }          /* 极小屏只保留日期格，靠右侧清单看内容 */
    .cal-grid, .cal-weekdays { gap: 0.16rem; }
}

/* ==================== 消息提示 ==================== */
.toast-container {
    position: fixed;
    right: 1.2rem;
    top: 1.2rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 22rem;
}
.toast {
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.85rem;
    background: var(--color-surface);
    border-left: 4px solid var(--color-primary);
    animation: toast-in 0.18s ease-out;
}
.toast-success { border-left-color: var(--color-success); }
.toast-error { border-left-color: var(--color-danger); }
.toast-warning { border-left-color: var(--color-warning); }
.toast-info { border-left-color: var(--color-info); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}

/* ==================== 加载遮罩 ==================== */
.loading-mask {
    position: fixed;
    inset: 0;
    background: rgba(246, 245, 240, 0.6);
    display: grid;
    place-items: center;
    z-index: 80;
}
.loading-mask[hidden] { display: none; }
.loading-spinner {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== 代码与预格式 ==================== */
.pre-block {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 32rem;
    overflow: auto;
    margin: 0;
}

/* ==================== 角色切换条 ==================== */
.role-switch-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    background: var(--color-accent-soft);
    border-color: #ecdfbf;
}
.role-switch-main { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; flex-wrap: wrap; }
.role-switch-actions { display: flex; gap: 0.5rem; }

/* ==================== 空状态 ==================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--color-muted-text);
    text-align: center;
    font-size: 0.87rem;
}

/* ==================== 登录页 ==================== */
.login-page {
    background:
        radial-gradient(circle at 12% 18%, rgba(176, 141, 63, 0.16), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(18, 63, 58, 0.18), transparent 46%),
        var(--color-background);
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}
.login-wrap { width: 100%; max-width: 26rem; }
.login-card { padding: 1.8rem 1.6rem; }
.login-brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.login-brand .brand-mark {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, var(--color-primary), #1c5b53);
    color: var(--color-accent);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
}
.login-brand .brand-name { font-family: var(--font-display); font-size: 1.16rem; color: var(--color-primary-deep); font-weight: 700; }
.login-brand .brand-sub { font-size: 0.74rem; color: var(--color-muted-text); letter-spacing: 0.05em; }
.login-lede { color: var(--color-muted-text); font-size: 0.85rem; letter-spacing: 0.14em; margin: 0.2rem 0 1.1rem; }

/* 图形验证码行：输入框自适应 + 图片固定尺寸（避免被 flex 拉伸） */
.captcha-row { display: flex; align-items: center; gap: 0.5rem; }
.captcha-row .captcha-input { flex: 1 1 auto; min-width: 0; }
.captcha-image {
    width: 8.25rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-background);
    cursor: pointer;
    display: block;
}
.captcha-image:hover { border-color: var(--color-primary); }
.captcha-refresh {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
}
.login-remember { margin-bottom: 0.9rem; }
/* 单行勾选项不应继承 .field 的最小宽度（旧版 .field 的 min-width:9rem 会把"记住账号"撑开） */
.login-remember .checkbox-line { min-width: 0; }
.login-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 1.1rem;
    font-size: 0.74rem;
    color: var(--color-muted-text);
}

/* ==================== 错误页 ==================== */
.error-page {
    display: grid;
    place-items: center;
    padding: 3rem 1rem;
    background: var(--color-background);
}
.error-wrap { max-width: 34rem; text-align: center; padding: 2.2rem 1.8rem; }
.error-code {
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.error-title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 0.5rem; color: var(--color-primary-deep); }
.error-desc { color: var(--color-muted-text); font-size: 0.9rem; }
.error-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; }

/* ==================== 响应式 ==================== */
@media (max-width: 1024px) {
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        padding: 0.7rem 0.9rem;
    }
    .brand { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
    .nav-label, .sidebar-foot { display: none; }
    .topbar { flex-wrap: wrap; padding: 0.6rem 1rem; }
    .topbar-search { order: 3; max-width: none; flex-basis: 100%; }
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
    .content { padding: 1.1rem 1rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   版本差异对比（2026-09-28，方案版本对比功能）
   规范：样式集中在此处，模板里不写内联样式（.vd-* 语义类）。
   配色统一使用主题变量，避免硬编码色值在深色/浅色下失真。
   ========================================================================== */
.vd-summary {
    margin: 0.4rem 0;
    font-weight: 600;
}

.vd-stats,
.vd-note {
    margin: 0.3rem 0;
    font-size: 0.85rem;
}

.vd-error {
    margin: 0.4rem 0;
    color: var(--color-danger);
}

.vd-sec {
    margin: 0.7rem 0;
    padding-left: 0.6rem;
    border-left: 3px solid var(--color-border);
}

/* 左侧色条区分变更类型，扫一眼就能看出哪节是新增/删除/修改 */
.vd-sec-added {
    border-left-color: var(--color-success);
}

.vd-sec-removed {
    border-left-color: var(--color-danger);
}

.vd-sec-modified {
    border-left-color: var(--color-warning);
}

.vd-sec-head {
    margin-bottom: 0.25rem;
}

.vd-pre {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0.35rem 0;
    font-size: 0.82rem;
    line-height: 1.5;
    max-height: 22rem;
    overflow: auto;
    /* ★逐行 diff 用等宽字体：中文与符号混排时不至于参差不齐 */
    font-family: var(--font-mono);
}

/* ★2026-09-29 修复「预览差异显示成一片重叠文字」：
   diff 的每一行是 <span class="vd-add|vd-del|vd-ctx">，而 span 默认是**行内元素** ——
   行内元素不占满整行、还会与源码里的 `\n` 一起按文字流折叠，
   视觉上多行挤成一团、背景色只覆盖文字部分。
   改为 display:block 后每行独占一行，行背景才能铺满，diff 才读得出来。 */
.vd-add,
.vd-del,
.vd-ctx {
    display: block;
    padding: 0 0.35rem;
    border-radius: 2px;
}

.vd-add {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.vd-del {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.vd-ctx {
    color: var(--color-muted-text);
}

/* 版本对比 / 润色预览里的小节标题（在 diff 块之前，标明这段差异属于哪一节） */
.vd-section-title {
    margin: 0.6rem 0 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

/* ==========================================================================
   按章节润色（2026-09-28）—— 复用 .vd-* 差异配色，这里只补弹窗内布局
   ========================================================================== */
.polish-result {
    margin-top: 0.8rem;
}

.polish-summary {
    margin: 0.4rem 0;
    font-weight: 600;
}

.polish-after {
    margin-top: 0.6rem;
}

.polish-after summary {
    cursor: pointer;
    color: var(--color-muted-text);
    font-size: 0.85rem;
}

/* ==========================================================================
   企业画像选择器（static/js/enterprise-picker.js）
   为什么需要：用户要求「所有用到企业画像的地方都不填写，从已填写的画像选择」。
   被选择器接管的字段一律只读，需要**看得出来**是只读、且不是"禁用不可提交"，
   否则用户会以为页面坏了。
   ========================================================================== */
.text-danger {
    color: var(--color-danger);
}

.enterprise-picker {
    margin-bottom: 0.8rem;
}

/* 只读观感：底色偏灰 + 光标默认，与真正 disabled 区分（disabled 不参与提交） */
[data-picker-locked] {
    background: var(--color-surface-alt);
    color: var(--color-muted-text);
    cursor: default;
}

[data-picker-locked]:focus {
    outline: none;
}

.enterprise-picker-status {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--color-muted-text);
}

/* ==========================================================================
   方案编辑器：章节可点选（选中的章节就是「AI 深化本章」的目标）
   为什么需要：原先"深化本章"读的是润色弹窗里的下拉，而弹窗**默认隐藏** →
   用户点按钮时目标为空、实际执行的是整篇深化，与按钮文案不符。
   改为"点章节即选中"，因此需要看得出可点、看得出选中。
   ========================================================================== */
.section-selectable {
    cursor: pointer;
}

.section-selectable:hover {
    background: var(--color-surface-alt);
}

#sectionList li.is-active {
    background: var(--color-surface-alt);
    border-left: 3px solid var(--color-primary);
    font-weight: 600;
}

/* ==========================================================================
   「本次 AI 参考了哪些知识库」面板（D94）
   --------------------------------------------------------------------------
   为什么需要独立样式：
     审计发现用户完全看不到 AI 有没有用知识库。这个面板要**低调但可见** ——
     用左侧色条 + 折叠明细，让"这次有没有依据"一眼可辨，
     又不至于在每个页面顶部占据大块版面。
   颜色沿用 theme.css 既有变量，避免与整体视觉冲突。
   ========================================================================== */
.kb-usage {
    border: 1px solid var(--color-border, #dfe5e3);
    border-left: 3px solid var(--color-primary, #123f3a);
    border-radius: 6px;
    padding: .6rem .8rem;
    margin: .6rem 0;
    background: var(--color-surface-alt, #f7faf9);
}

/* 未使用知识库时用中性色，避免"看起来像成功提示" */
.kb-usage[data-kb-used="false"] {
    border-left-color: var(--color-border, #dfe5e3);
}

.kb-usage .kb-usage-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.kb-usage .kb-usage-note {
    margin: .35rem 0 .2rem;
    font-size: .875rem;
    line-height: 1.5;
}

.kb-usage .kb-usage-body {
    margin-top: .5rem;
}

.kb-usage .kb-usage-body .table {
    margin-bottom: .4rem;
}

/* 明细表格在窄屏可横向滚动，避免撑破卡片 */
.kb-usage .kb-usage-body {
    overflow-x: auto;
}

/* ★2026-10-07 专家库表格列宽：多领域文本（如技术改造、数字化改造）此前与
   相邻列挤在一起（截图可见），给这几列最小宽度并允许换行显示。 */
#expertTable { table-layout: auto; }
#expertTable th, #expertTable td { vertical-align: top; }
#expertTable td:nth-child(1) { min-width: 8.5rem; white-space: nowrap; }
#expertTable td:nth-child(2) { min-width: 11rem; }
#expertTable td:nth-child(4) { min-width: 9rem; }
#expertTable td:nth-child(6) { white-space: nowrap; }
#expertTable td:nth-child(7) { white-space: nowrap; }

/* ★2026-10-07 专家库「可评审领域」每个领域独占一行：
   多领域用「、」连成一串时，在窄列里会折行并与相邻列视觉粘连
   （截图可见"数字化改造、研发项目 省级"糊在一起）。
   改为每个领域一个 <div> 后，列边界清楚，也更好扫读。 */
#expertTable .domain-line { line-height: 1.5; }