/* ==========================================================================
   算数·海辕 —— 内部工作台（admin / staff）
   深色工业 HUD 主题 + 明/暗可切
   ========================================================================== */

:root {
    --bg: #0b0e14;
    --bg-soft: #10141d;
    --panel: #151a24;
    --panel-2: #1b2130;
    --panel-3: #232b3c;
    --border: #252d3d;
    --border-soft: #1c2331;
    --text: #e8edf5;
    --text-2: #b3bccd;
    --muted: #7c8798;
    --primary: #3b82f6;
    --primary-2: #2563eb;
    --primary-soft: rgba(59, 130, 246, .14);
    --accent: #14b8a6;
    --accent-soft: rgba(20, 184, 166, .14);
    --warn: #f59e0b;
    --danger: #ef4444;
    --success: #22c55e;
    --purple: #a855f7;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);
    --sidebar-w: 246px;
    --font: "Inter", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

html[data-theme="light"] {
    /* 清爽亮色（默认皮肤）：页面浅灰、顶栏/侧栏/卡片统一白，靠细边线+留白分区，不靠重阴影 */
    --bg: #f5f7f9;
    --bg-soft: #ffffff;
    --panel: #ffffff;
    --panel-2: #f7f9fb;
    --panel-3: #eef2f5;
    --border: #e4e9ee;
    --border-soft: #eaeff4;
    --text: #1a1f27;
    --text-2: #4a5666;
    /* 次要文字：#7d8896 在 11px 小字上只有 3.6:1，亮色底看不清；
       加深到 #626d7b 后白底 5.2:1、浅灰标签底 4.7:1，达到 WCAG AA，观感仍是柔和灰。 */
    --muted: #626d7b;
    --success: #15803d;
    --warn: #b45309;
    --danger: #dc2626;
    --primary-soft: rgba(59, 130, 246, .09);
    --accent-soft: rgba(20, 184, 166, .09);
    --shadow: 0 10px 28px rgba(15, 30, 50, .07);
    --shadow-sm: 0 1px 3px rgba(15, 30, 50, .05);
}

/* 亮色细节修补：顶栏/侧栏本身是白底，里面的「白控件」会隐身，统一换成浅灰；
   深色皮肤专用的近白色文字、重阴影也要按亮色重写一遍。 */
html[data-theme="light"] .topbar .tb-search,
html[data-theme="light"] .topbar .icon-btn,
html[data-theme="light"] .topbar .user-chip { background: var(--panel-2); }
html[data-theme="light"] .nav-item:hover { background: var(--panel-3); }
html[data-theme="light"] .sidebar { border-right-color: var(--border); }
html[data-theme="light"] .topbar { border-bottom-color: var(--border); }
html[data-theme="light"] .brand-footer.is-side { color: var(--muted); }
html[data-theme="light"] .brand-footer.is-side a { color: var(--text-2); }
html[data-theme="light"] .brand-footer.is-side a:hover { color: var(--primary); }
html[data-theme="light"] .step.is-done .st-dot { color: #fff; }
html[data-theme="light"] .drawer { box-shadow: -14px 0 40px rgba(15, 30, 50, .12); }
html[data-theme="light"] table.table th { background: var(--panel-2); }
html[data-theme="light"] table.table tbody tr:hover { background: #f4f8fb; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 8px; border: 2px solid var(--bg); }

/* ---------------- 布局 ---------------- */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--bg-soft);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.brand-box {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--border-soft);
}
.brand-box .brand-mark {
    display: flex; align-items: center; gap: 10px;
}
.brand-logo {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; font-size: 15px; letter-spacing: -.5px;
}
.brand-title { font-size: 14px; font-weight: 700; line-height: 1.25; }
.brand-sub { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

.nav { flex: 1; overflow-y: auto; padding: 10px 10px 24px; }
.nav-group { margin-bottom: 4px; }
.nav-group-title {
    font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
    padding: 12px 10px 6px; font-weight: 600;
}
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--text-2); font-size: 13.5px; margin-bottom: 1px;
    transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.nav-item.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-item .ni-ico { width: 18px; text-align: center; opacity: .85; font-size: 14px; }
.nav-item .ni-badge {
    margin-left: auto; font-size: 11px; background: var(--danger); color: #fff;
    border-radius: 10px; padding: 0 6px; line-height: 16px;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: 56px; display: flex; align-items: center; gap: 14px;
    padding: 0 20px; background: var(--bg-soft);
    border-bottom: 1px solid var(--border-soft);
    position: sticky; top: 0; z-index: 30;
}
.topbar .crumb { color: var(--muted); font-size: 13px; }
.topbar .crumb b { color: var(--text); font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-search {
    width: 260px; height: 34px; border-radius: var(--radius-sm);
    background: var(--panel); border: 1px solid var(--border);
    color: var(--text); padding: 0 12px; font-size: 13px; outline: none;
}
.tb-search:focus { border-color: var(--primary); }

.user-chip {
    display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px;
    border-radius: 20px; background: var(--panel); border: 1px solid var(--border);
}
.avatar {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
    background: linear-gradient(135deg, #3b82f6, #14b8a6);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: #fff;
}
.user-chip .u-name { font-size: 13px; font-weight: 600; line-height: 1.1; }
.user-chip .u-role { font-size: 11px; color: var(--muted); line-height: 1.2; }

.icon-btn {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--panel); border: 1px solid var(--border); color: var(--text-2);
    cursor: pointer; font-size: 15px; position: relative;
}
.icon-btn:hover { color: var(--text); border-color: var(--primary); text-decoration: none; }
.icon-btn .dot {
    position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
    background: var(--danger); border-radius: 50%; border: 2px solid var(--bg-soft);
}
/* 带数字的角标：提醒这类「有几条没关」比「有没有」更重要，光一个红点不够用 */
.icon-btn .icon-badge {
    position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700;
    line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg-soft);
}

.content { padding: 20px 22px 60px; flex: 1; }
.content-narrow { max-width: 1080px; }

/* ---------------- 通用组件 ---------------- */

.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-header h2 { font-size: 20px; }
.page-header-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.page-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 15px; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: var(--panel-3); color: var(--text);
    font-size: 13.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: filter .12s, background .12s, border-color .12s;
}
.btn:hover { filter: brightness(1.12); text-decoration: none; }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-accent { background: var(--accent); color: #04211d; font-weight: 600; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text-2); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-warn { background: var(--warn); color: #2a1a00; font-weight: 600; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-sm { height: 29px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn-lg { height: 44px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }

.card {
    background: var(--panel); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.card-head {
    padding: 13px 16px; border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-head h3 { font-size: 14.5px; }
.card-head .head-sub { color: var(--muted); font-size: 12px; }
.card-head .head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-body { padding: 16px; }
.card-body.tight { padding: 10px; }
.card-foot { padding: 12px 16px; border-top: 1px solid var(--border-soft); }
.card-inner { border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-soft, var(--panel)); box-shadow: none; margin-bottom: 0; }
.card-alert { border-color: rgba(234, 179, 8, .5); }

/* 渠道架构树 */
.arch-node { margin-bottom: 10px; }
.arch-card { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; margin-bottom: 0; }
.arch-main { flex: 1; min-width: 260px; }
.arch-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arch-facts { display: flex; gap: 20px; flex-wrap: wrap; }
.fact { text-align: center; min-width: 64px; }
.fact-v { font-size: 17px; font-weight: 700; }
.fact-k { font-size: 11px; color: var(--muted); }
.fact-warn .fact-v { color: var(--warn); }
.arch-children { border-left: 2px solid var(--border-soft); margin-left: 14px; padding-left: 10px; margin-top: 8px; }

/* 融资单操作折叠 */
.fp-actions summary { cursor: pointer; user-select: none; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1400px) {
    .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-6, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
}

/* KPI */
.kpi {
    background: var(--panel); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: 14px 16px; position: relative; overflow: hidden;
}
.kpi::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--primary); opacity: .8;
}
.kpi.kpi-accent::after { background: var(--accent); }
.kpi.kpi-warn::after { background: var(--warn); }
.kpi.kpi-danger::after { background: var(--danger); }
.kpi.kpi-purple::after { background: var(--purple); }
.kpi-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: 25px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.kpi-foot { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.kpi-foot .up { color: var(--success); }
.kpi-foot .down { color: var(--danger); }

/* 表格 */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.table th {
    text-align: left; font-weight: 600; color: var(--muted); font-size: 12px;
    padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
    background: var(--panel-2); position: sticky; top: 0;
}
table.table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.table tbody tr:hover { background: var(--panel-2); }
table.table tbody tr.is-selected { background: var(--primary-soft); }
table.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.table .mono { font-family: var(--mono); font-size: 12px; }
table.table .actions { white-space: nowrap; text-align: right; }
table.table .actions a, table.table .actions button { margin-left: 6px; }
table.table .nowrap { white-space: nowrap; }
.table-dense td, .table-dense th { padding: 6px 10px; }

.sub-table { font-size: 12.5px; }
.sub-table th { background: transparent; }

.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
    background: var(--panel-3); color: var(--text-2); white-space: nowrap;
}
.badge-green { background: rgba(34, 197, 94, .16); color: #4ade80; }
.badge-blue { background: rgba(59, 130, 246, .18); color: #60a5fa; }
.badge-orange { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.badge-red { background: rgba(239, 68, 68, .18); color: #f87171; }
.badge-purple { background: rgba(168, 85, 247, .18); color: #c084fc; }
.badge-gray { background: var(--panel-3); color: var(--muted); }
html[data-theme="light"] .badge-green { color: #15803d; }
html[data-theme="light"] .badge-blue { color: #1d4ed8; }
html[data-theme="light"] .badge-orange { color: #b45309; }
html[data-theme="light"] .badge-red { color: #b91c1c; }
html[data-theme="light"] .badge-purple { color: #7e22ce; }

.tag { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 11px; background: var(--panel-3); color: var(--text-2); margin-right: 4px; }
.tag-outline { background: transparent; border: 1px solid var(--border); }

/* 表单 */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.form-item { grid-column: span 6; }
.form-item.col-3 { grid-column: span 3; }
.form-item.col-4 { grid-column: span 4; }
.form-item.col-8 { grid-column: span 8; }
.form-item.col-12 { grid-column: span 12; }
@media (max-width: 900px) { .form-item, .form-item.col-3, .form-item.col-4, .form-item.col-8 { grid-column: span 12; } }

.form-label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; font-weight: 500; }
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-control, select.form-control, textarea.form-control {
    width: 100%; height: 38px; padding: 0 11px; border-radius: var(--radius-sm);
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
    font-size: 13.5px; font-family: inherit; outline: none; transition: border-color .12s;
}
textarea.form-control { height: auto; min-height: 84px; padding: 9px 11px; line-height: 1.55; resize: vertical; }
select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.form-control-sm { height: 30px; font-size: 12.5px; padding: 0 8px; }
.form-control[readonly], .form-control:disabled { opacity: .7; cursor: not-allowed; }
.form-help { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.form-static { padding: 9px 0; font-size: 13.5px; color: var(--text); }
.form-actions { display: flex; gap: 10px; align-items: center; padding-top: 6px; flex-wrap: wrap; }

.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 15px; height: 15px; }
.switch-row { display: flex; flex-wrap: wrap; gap: 14px; }

.filter-bar {
    display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end;
    padding: 13px 16px; border-bottom: 1px solid var(--border-soft); background: var(--panel-2);
    border-radius: var(--radius) var(--radius) 0 0;
}
.filter-bar .fi { display: flex; flex-direction: column; gap: 4px; }
.filter-bar .fi label { font-size: 11.5px; color: var(--muted); }
.filter-bar .fi .form-control { height: 34px; min-width: 140px; }
.filter-bar .fi-wide .form-control { min-width: 220px; }
.filter-bar .fi-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* 详情页 */
.detail-head {
    display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
    padding: 18px; background: var(--panel); border: 1px solid var(--border-soft);
    border-radius: var(--radius); margin-bottom: 16px;
}
.detail-head .dh-main { flex: 1; min-width: 280px; }
.detail-head h2 { font-size: 21px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-head .dh-sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.detail-head .dh-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.field-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); font-size: 13px; }
.field-row:last-child { border-bottom: 0; }
.field-label { flex: 0 0 128px; color: var(--muted); font-size: 12.5px; }
.field-value { flex: 1; min-width: 0; word-break: break-word; }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tabs a, .tabs button {
    padding: 9px 15px; font-size: 13.5px; color: var(--muted); border: 0; background: transparent;
    border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.tabs a.is-active, .tabs button.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }

.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.tl-item { position: relative; padding: 0 0 16px 4px; }
.tl-item::before {
    content: ""; position: absolute; left: -19px; top: 6px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.tl-time { font-size: 11.5px; color: var(--muted); }
.tl-title { font-size: 13.5px; font-weight: 500; }
.tl-desc { font-size: 12.5px; color: var(--text-2); }

.steps { display: flex; gap: 0; overflow-x: auto; padding: 4px 0 12px; }
.step { display: flex; align-items: center; gap: 8px; padding-right: 22px; position: relative; white-space: nowrap; }
.step::after {
    content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 1px; background: var(--border);
}
.step:last-child::after { display: none; }
.step .st-dot {
    width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-3); color: var(--muted); border: 1px solid var(--border);
}
.step .st-name { font-size: 12.5px; color: var(--muted); }
.step.is-done .st-dot { background: var(--success); color: #04240f; border-color: transparent; }
.step.is-done .st-name { color: var(--text-2); }
.step.is-active .st-dot { background: var(--primary); color: #fff; border-color: transparent; box-shadow: 0 0 0 4px var(--primary-soft); }
.step.is-active .st-name { color: var(--primary); font-weight: 600; }

/* 空状态 / 提示 */
.empty-state { text-align: center; padding: 46px 20px; }
.empty-state-title { font-size: 14.5px; color: var(--text-2); font-weight: 600; }
.empty-state-desc { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.empty-state-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; }
.empty-row:hover { background: transparent !important; }

.alert {
    padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px;
    border: 1px solid var(--border); background: var(--panel-2); margin-bottom: 14px;
    display: flex; gap: 9px; align-items: flex-start;
}
.alert-success { border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .09); color: #7ee2a8; }
.alert-error { border-color: rgba(239, 68, 68, .4); background: rgba(239, 68, 68, .09); color: #fca5a5; }
.alert-warn { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .09); color: #fcd34d; }
.alert-info { border-color: rgba(59, 130, 246, .4); background: var(--primary-soft); color: #93c5fd; }
html[data-theme="light"] .alert-success { color: #15803d; }
html[data-theme="light"] .alert-error { color: #b91c1c; }
html[data-theme="light"] .alert-warn { color: #b45309; }
html[data-theme="light"] .alert-info { color: #1d4ed8; }

.hint { font-size: 12px; color: var(--muted); }
.divider { height: 1px; background: var(--border-soft); margin: 14px 0; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }
/* 语义文字色：详情页的「影响面」块里用来说明成功率/风险，颜色跟随主题变量 */
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.text-success { color: var(--success); }
.right { text-align: right; }
.center { text-align: center; }
.mono { font-family: var(--mono); }
/* 表格里的「推荐/首选」行：整行加一层淡绿底 + 左侧色条，扫一眼就能定位最优方案 */
tr.row-highlight > td { background: color-mix(in srgb, var(--success) 9%, transparent); }
tr.row-highlight > td:first-child { box-shadow: inset 3px 0 0 var(--success); }
html[data-theme="light"] tr.row-highlight > td { background: #f2fbf5; }

/* 装柜重心示意条：柜头在左、柜门在右，虚线是柜中点，圆点是算出来的纵向重心 */
.cog-bar { position: relative; height: 10px; border-radius: 6px; background: var(--panel-3); border: 1px solid var(--border-soft); }
.cog-bar .cog-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed var(--muted); }
.cog-bar .cog-mark { position: absolute; top: -3px; width: 12px; height: 16px; margin-left: -6px; border-radius: 4px; border: 1px solid #fff2; }
.cog-bar .cog-mark.is-ok { background: var(--success); }
.cog-bar .cog-mark.is-watch { background: var(--warn); }
.cog-bar .cog-mark.is-bad { background: var(--danger); }
/* 关联单据卡片：单据链条可视 + 可点击直达 */
.rel-group { padding: 10px 0; border-bottom: 1px dashed var(--line, #e6e8ec); }
.rel-group:last-child { border-bottom: none; padding-bottom: 0; }
.rel-head { font-weight: 600; font-size: 13px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.rel-body { display: flex; flex-direction: column; gap: 4px; }
.rel-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.rel-meta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.row-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line-2, #c9ced6); }
.row-link:hover { color: var(--primary); border-bottom-color: var(--primary); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .ml-auto { margin-left: auto; }
.w-100 { width: 100%; }

.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; gap: 10px; }
.pager-links { display: flex; gap: 4px; align-items: center; }
.pager-links a {
    min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 9px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text-2); font-size: 12.5px;
}
.pager-links a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pager-links a.is-active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* 弹层 */
.modal-mask {
    position: fixed; inset: 0; background: rgba(4, 7, 12, .7); display: none;
    align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.modal-mask.is-open { display: flex; }
.modal {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
    width: 100%; max-width: 620px; max-height: 88vh; overflow: auto; box-shadow: var(--shadow);
}
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; }
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border-soft); display: flex; gap: 10px; justify-content: flex-end; }

/* ==========================================================================
   登录页：左侧情境图 + 右侧登录面
   目标是一屏交代完「这是什么系统 / 能演示什么 / 拿哪个账号进」，不靠滚动。
   窄屏（<1040px）左栏收成顶部横幅，右侧纵向堆叠。
   ========================================================================== */
.login-body { background: var(--bg); }

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
}

/* ---------------- 左：情境图 ---------------- */
.login-hero {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
    padding: 54px 46px 24px;
    background: #0b1b36; color: #e8f1f8;
}
.login-hero .lh-shot {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 42%; display: block;
    /* 插图本身是「蓝调时刻」的深色夜景，直接放到面板上会糊成黑板。
       统一抬亮一档，让天际线/集装箱船/水面反光真的作为一张图被看见。 */
    filter: brightness(1.45) saturate(1.06);
}
/*
 * 遮罩 = 一块"文字底板"：上半屏压暗供叠字，下半屏几乎全开，
 * 让天际线、集装箱船、水面反光和路面光轨真的能被看见。
 * 早前一版整页压到平均亮度 6.7%，整张图糊成一块黑板，白画了。
 * 右上的月光不走蒙版，单独用 .lh-glow 叠在蒙版之上（见下）。
 */
.login-hero .lh-veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            rgba(4, 9, 16, .62) 0%,
            rgba(4, 9, 16, .62) 52%,
            rgba(4, 9, 16, .26) 62%,
            rgba(4, 9, 16, .04) 74%,
            rgba(4, 9, 16, 0) 88%,
            rgba(4, 9, 16, .28) 100%),
        linear-gradient(100deg,
            rgba(4, 9, 16, .45) 0%,
            rgba(4, 9, 16, .30) 32%,
            rgba(4, 9, 16, .10) 58%,
            rgba(4, 9, 16, 0) 82%);
}
/* 右上角月光：压暗底板会顺手吃掉插画里的月亮，所以把它提到蒙版之上单独画。
   位置对齐 SVG 里的月盘（约 80% 宽 / 12% 高），核心刻意避开标题文字块的右缘。 */
.login-hero .lh-glow {
    position: absolute; top: -96px; right: -96px; width: 470px; height: 470px;
    z-index: 1; pointer-events: none;
    background: radial-gradient(circle at 54% 44%,
        rgba(226, 245, 255, .46) 0%,
        rgba(186, 230, 253, .24) 20%,
        rgba(125, 211, 252, .10) 44%,
        rgba(125, 211, 252, 0) 70%);
}
.login-hero .lh-inner { position: relative; z-index: 1; max-width: 560px; }

.lh-brand { display: flex; align-items: center; gap: 12px; }
.lh-logo {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
    display: grid; place-items: center; font-size: 21px; font-weight: 800;
    color: #fff; background: linear-gradient(140deg, #3b82f6, #0d9488);
    box-shadow: 0 8px 22px rgba(13, 148, 136, .4);
}
.lh-brand-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.lh-brand-txt b { font-size: 16.5px; font-weight: 700; color: #fff; }
.lh-brand-txt i { font-style: normal; font-size: 11.5px; color: rgba(232, 241, 248, .68); }

.lh-title {
    font-size: 33px; font-weight: 800; line-height: 1.32; letter-spacing: -.02em;
    margin: clamp(20px, 3.2vh, 44px) 0 clamp(11px, 1.5vh, 20px); color: #fff;
    text-shadow: 0 1px 4px rgba(2, 6, 14, .72), 0 4px 22px rgba(2, 6, 14, .5);
}
.lh-desc {
    margin: 0; max-width: 500px; font-size: 13.5px; line-height: 1.72;
    color: rgba(240, 247, 253, .90);
    text-shadow: 0 1px 3px rgba(2, 6, 14, .82), 0 2px 14px rgba(2, 6, 14, .6);
}

.lh-kpis {
    list-style: none; margin: clamp(16px, 2.4vh, 34px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.lh-kpis li {
    padding: 11px 12px 10px; border-radius: 12px;
    background: rgba(8, 20, 34, .56); border: 1px solid rgba(255, 255, 255, .18);
}
.lh-kpis b { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; color: #fff; letter-spacing: -.01em; }
.lh-kpis b em { font-style: normal; font-size: 11.5px; font-weight: 600; color: rgba(232, 241, 248, .76); margin-left: 3px; }
.lh-kpis span { display: block; margin-top: 4px; font-size: 11.5px; color: rgba(232, 241, 248, .84); }

/* 业务动线：一眼说清六段闭环。上下的间距刻意收紧 ——
   要点被推到地平线辉光带上就会掉到 4.09:1，低于 AA。 */
.lh-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: clamp(13px, 1.9vh, 28px); }
.lh-flow span {
    font-size: 12px; line-height: 1; padding: 8px 11px; border-radius: 999px; white-space: nowrap;
    color: #eaf4fb; background: rgba(8, 22, 38, .58); border: 1px solid rgba(255, 255, 255, .17);
}
.lh-flow i { position: relative; width: 13px; height: 1px; flex: 0 0 13px; background: rgba(170, 226, 245, .6); }
.lh-flow i::after {
    content: ""; position: absolute; right: -1px; top: -2.5px;
    border: 2.5px solid transparent; border-left-color: rgba(190, 234, 250, .85);
}

.lh-points { list-style: none; margin: clamp(13px, 1.9vh, 28px) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(7px, 1.2vh, 14px); }
.lh-points li {
    position: relative; padding-left: 23px; font-size: 13px; line-height: 1.55;
    color: rgba(240, 247, 253, .94);
    text-shadow: 0 1px 2px rgba(2, 6, 14, .92), 0 2px 12px rgba(2, 6, 14, .7);
}
.lh-points li::before {
    content: ""; position: absolute; left: 6px; top: 7px; width: 7px; height: 7px; border-radius: 2px;
    background: #5eead4; box-shadow: 0 0 0 3px rgba(94, 234, 212, .22);
}

.login-hero .lh-foot {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 9px;
    font-size: 11.5px; color: rgba(232, 241, 248, .78);
}
.login-hero .lh-foot .lh-dot {
    width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .26);
}
.login-hero .lh-foot code {
    font-family: var(--mono); font-size: 11.5px; color: #fff;
    background: rgba(255, 255, 255, .16); padding: 1px 6px; border-radius: 5px;
}

/* ---------------- 右：登录面 ---------------- */
.login-side {
    background: var(--panel);
    display: flex; flex-direction: column; min-width: 0;
}
.login-main {
    flex: 1 1 auto; min-height: 0;
    display: grid; place-items: center;
    overflow-y: auto; padding: 26px 44px;
}
.login-panel { width: 100%; max-width: 456px; }
.login-panel .lp-head { margin-bottom: 16px; }
.login-panel .lp-head h1 { font-size: 22px; margin-bottom: 4px; }
.login-tabs { margin-bottom: 16px; }

.login-form .lf-row { margin-bottom: 13px; }
.login-form .lf-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
/* 登录框比内容区的控件略高：这是用户整页唯一的动作，值得放大 */
.login-form .form-control { height: 42px; font-size: 14px; }
.lf-pass { position: relative; }
.lf-pass .form-control { padding-right: 42px; }
.lf-eye {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--muted); font-size: 14px; line-height: 1; font-family: inherit;
}
.lf-eye:hover, .lf-eye.is-on { background: var(--panel-3); color: var(--text); }
.lf-submit { height: 44px; margin-top: 4px; font-weight: 600; letter-spacing: .02em; }

/*
 * 演示账号：一行一组（左标签 + 右侧角色胶囊）。
 * 早前用「2 列分组卡片」时，每组角色数不一样，框里全是几十到三百像素的空洞；
 * 改成行式后 ragged 只落在右侧，看起来就是正常的标签云。
 */
.demo-accounts { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.demo-accounts .da-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; margin-bottom: 8px;
}
.demo-accounts .da-title { font-size: 12px; font-weight: 600; color: var(--text-2); }
.demo-accounts .da-note { font-size: 11px; color: var(--muted); }
.demo-accounts .da-rows { display: flex; flex-direction: column; gap: 6px; }
.demo-accounts .da-row { display: flex; align-items: flex-start; gap: 9px; }
.demo-accounts .da-row-label {
    flex: 0 0 76px; width: 76px; padding-top: 5px; text-align: right;
    font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.35;
}
.demo-accounts .da-row-chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.demo-accounts button {
    font-size: 12px; line-height: 1; padding: 5px 11px; border-radius: 20px; cursor: pointer; transition: all .12s;
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text-2); font-family: inherit;
}
.demo-accounts button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.login-panel .lp-links {
    margin-top: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px;
}
.login-panel .lp-links a { color: var(--primary); }

/* 页脚收进右栏，避免在左图下面横切一道白条 */
.login-side > .brand-footer { flex: 0 0 auto; border-top: 1px solid var(--border-soft); }
.login-side > .brand-footer .bf-inner { padding: 9px 40px; max-width: none; }
.login-side > .brand-footer .bf-qr { width: 62px; height: 62px; }

/* 矮屏（1366x768 办公本 / 投屏常见）：先收掉上下留白，再谈滚动。
   左栏的纵向节奏走 clamp(…vh…)，会跟着高度自己收敛，这里只用管右栏。 */
@media (max-height: 880px) {
    .login-main { padding-top: 16px; padding-bottom: 16px; }
    .lh-title { font-size: 28px; }
}
/* 真的矮到 740 以下：改顶对齐，溢出时能正常滚到顶部而不是把标题切掉 */
@media (max-height: 740px) {
    .login-main { place-items: start center; padding-top: 16px; padding-bottom: 16px; }
    .lh-title { font-size: 25px; }
}

@media (max-width: 1040px) {
    .login-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .login-hero { gap: 0; padding: 22px 22px 18px; }
    .login-hero .lh-shot { object-position: 50% 26%; }
    .lh-title { font-size: 21px; margin: 14px 0 8px; }
    .lh-desc { font-size: 12.5px; }
    /* 手机上简报里已经列了六段业务，动线胶囊再铺一遍只是占地方 */
    .lh-flow { display: none; }
    /* 手机上把指标条压成一条无框数据带：卖点（真数据）不能一窄就消失 */
    .lh-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
        margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .16);
    }
    .lh-kpis li { padding: 0; background: none; border: 0; border-radius: 0; }
    .lh-kpis b { font-size: 16px; }
    .lh-kpis b em { font-size: 10.5px; margin-left: 2px; }
    .lh-kpis span { font-size: 10.5px; margin-top: 2px; }
    .lh-points { display: none; }
    .login-hero .lh-foot { margin-top: 14px; }
    .login-main { padding: 24px 22px 12px; place-items: center; }
    .login-panel { max-width: 100%; }
    .login-side > .brand-footer .bf-inner { padding: 9px 22px; }
}

@media (max-width: 560px) {
    .demo-accounts .da-row { gap: 8px; }
    .demo-accounts .da-row-label { flex-basis: 64px; width: 64px; }
    /* 触屏上把胶囊做大到接近可点尺寸，11 个角色别点错 */
    .demo-accounts button { padding: 7px 12px; font-size: 12.5px; }
    .lh-brand-txt i { display: none; }
}

/* 移动端壳 */
.mobile-shell { max-width: 560px; margin: 0 auto; min-height: 100vh; background: var(--bg); padding-bottom: 74px; }
.mobile-top {
    position: sticky; top: 0; z-index: 20; background: var(--bg-soft); border-bottom: 1px solid var(--border-soft);
    padding: 12px 16px; display: flex; align-items: center; gap: 10px;
}
.mobile-top h1 { font-size: 15.5px; }
.mobile-body { padding: 14px 14px 30px; }
.tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    max-width: 560px; margin: 0 auto; background: var(--bg-soft);
    border-top: 1px solid var(--border-soft); display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar a {
    flex: 1; text-align: center; padding: 9px 2px 8px; font-size: 11px; color: var(--muted); line-height: 1.3;
}
.tabbar a .tb-ico { display: block; font-size: 18px; margin-bottom: 1px; }
.tabbar a.is-active { color: var(--primary); font-weight: 600; }
.tabbar a:hover { text-decoration: none; }

.m-card {
    background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 13px 14px; margin-bottom: 10px;
}
.m-card .mc-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.m-card .mc-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.m-card .mc-rows { margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.m-card .mc-rows div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--border-soft); }
.m-card .mc-rows div:last-child { border-bottom: 0; }
.m-card .mc-actions { margin-top: 11px; display: flex; gap: 8px; flex-wrap: wrap; }
.m-card .mc-actions .btn { flex: 1; min-width: 96px; }

/* 移动端：快捷作业宫格 */
.m-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.m-grid a {
    background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 13px 4px 11px; text-align: center; color: var(--text); text-decoration: none; position: relative;
}
.m-grid a .mg-ico { display: block; font-size: 21px; margin-bottom: 5px; }
.m-grid a .mg-label { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.m-grid a .mg-badge {
    position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; line-height: 16px; font-weight: 600;
}
.m-grid a:active { transform: scale(.96); }

/* 底部导航角标 */
.tabbar a { position: relative; }
.tabbar .tb-badge {
    position: absolute; top: 5px; left: 50%; margin-left: 8px; min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; line-height: 15px; font-weight: 600;
}

.big-num { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 条形图（纯 CSS） */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; }
.bars .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bars .bar {
    width: 100%; border-radius: 5px 5px 2px 2px; min-height: 3px;
    background: linear-gradient(180deg, var(--primary), rgba(59, 130, 246, .45));
}
.bars .bar.bar-2 { background: linear-gradient(180deg, var(--accent), rgba(20, 184, 166, .45)); }
.bars .bar-label { font-size: 10.5px; color: var(--muted); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

.progress { height: 6px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--primary); }
.progress.p-warn span { background: var(--warn); }
.progress.p-danger span { background: var(--danger); }
.progress.p-ok span { background: var(--success); }

/* 扫描/作业卡 */
.scan-box {
    border: 1px dashed var(--border); border-radius: var(--radius); padding: 20px;
    text-align: center; background: var(--panel-2);
}
.scan-box .sb-ico { font-size: 30px; margin-bottom: 8px; }

.checklist { display: grid; gap: 8px; }
.checklist label {
    display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-radius: var(--radius-sm);
    background: var(--panel-2); border: 1px solid var(--border-soft); font-size: 13px; cursor: pointer;
}
.checklist label:hover { border-color: var(--primary); }
.checklist .cl-name { flex: 1; }
.checklist .cl-tag { font-size: 11px; color: var(--muted); }

.print-only { display: none; }
@media print {
    .sidebar, .topbar, .no-print, .tabbar { display: none !important; }
    .content { padding: 0; }
    .print-only { display: block; }
    body { background: #fff; color: #000; }
    .card { border-color: #ccc; box-shadow: none; }
}

/* ==========================================================================
   平台体验层（v2）：皮肤 / 布局密度 / 右侧说明抽屉 / 批量条 / 快捷入口 / 大屏 /
   筛选穿透 / 导入向导 / 单据套打 —— 统一在此定义，业务页面只加类名
   ========================================================================== */

/* ---------- 1. 主题色（客户可在「界面与布局」自选，存用户偏好） ---------- */
html[data-accent="green"]  { --primary: #10b981; --primary-2: #059669; --primary-soft: rgba(16,185,129,.14); --accent: #14b8a6; --accent-soft: rgba(20,184,166,.14); }
html[data-accent="purple"] { --primary: #8b5cf6; --primary-2: #7c3aed; --primary-soft: rgba(139,92,246,.16); --accent: #06b6d4; --accent-soft: rgba(6,182,212,.14); }
html[data-accent="orange"] { --primary: #f97316; --primary-2: #ea580c; --primary-soft: rgba(249,115,22,.16); --accent: #0ea5e9; --accent-soft: rgba(14,165,233,.14); }
html[data-accent="rose"]   { --primary: #e11d48; --primary-2: #be123c; --primary-soft: rgba(225,29,72,.16); --accent: #8b5cf6; --accent-soft: rgba(139,92,246,.14); }
/* 亮色皮肤下主题色要再压一档：白底上 .14 的色块偏重、亮绿按钮配白字偏飘；
   绿还要够深才看得清（#059669 作小字/白字按钮只有 3.8:1），#047857 是 5.5:1 达标且仍是清新的翡翠绿 */
html[data-theme="light"][data-accent="green"]  { --primary: #047857; --primary-2: #036b4d; --primary-soft: rgba(4,120,87,.10); --accent: #0f766e; --accent-soft: rgba(15,118,110,.10); }
html[data-theme="light"][data-accent="purple"] { --primary-soft: rgba(139,92,246,.10); --accent-soft: rgba(6,182,212,.10); }
html[data-theme="light"][data-accent="orange"] { --primary-soft: rgba(249,115,22,.10); --accent-soft: rgba(14,165,233,.10); }
html[data-theme="light"][data-accent="rose"]   { --primary-soft: rgba(225,29,72,.10);  --accent-soft: rgba(139,92,246,.10); }

/* ---------- 2. 布局密度与字号 ---------- */
html[data-density="compact"] { --radius: 10px; --radius-sm: 6px; }
html[data-density="compact"] body { font-size: 13px; }
html[data-density="compact"] .card-body { padding: 11px 13px; }
html[data-density="compact"] .card-head { padding: 10px 13px; }
html[data-density="compact"] .content { padding: 14px 16px 44px; }
html[data-density="compact"] .table th,
html[data-density="compact"] .table td { padding: 6px 10px; }
html[data-density="compact"] .form-grid { gap: 10px; }
html[data-density="compact"] .kpi-value { font-size: 21px; }
html[data-font="large"] body { font-size: 15.2px; }
html[data-font="large"] .table td, html[data-font="large"] .table th { font-size: 14px; }

/* ---------- 3. 左侧导航：折叠 / 搜索 / 分组收起 ---------- */
.sidebar-foot { border-top: 1px solid var(--border-soft); padding: 8px 10px; display: flex; gap: 6px; }
.brand-box { position: relative; }
.nav-collapse { position: absolute; right: 12px; top: 20px; }
.nav-collapse button {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border);
    background: var(--panel); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1;
}
.nav-collapse button:hover { color: var(--primary); border-color: var(--primary); }
.nav-search { padding: 8px 12px 2px; }
.nav-search input {
    width: 100%; height: 30px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--panel); color: var(--text); font-size: 12.5px; padding: 0 9px; font-family: var(--font);
}
.nav-search input:focus { outline: none; border-color: var(--primary); }
.nav-group-title { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav-group-title::after { content: "▾"; font-size: 9px; opacity: .6; margin-left: auto; }
.nav-group.is-folded .nav-group-title::after { content: "▸"; }
.nav-group.is-folded .nav-list { display: none; }
.nav-list { display: block; }
.nav-empty { padding: 14px 12px; font-size: 12.5px; color: var(--muted); }

.layout.is-nav-collapsed { --sidebar-w: 62px; }
.layout.is-nav-collapsed .brand-title,
.layout.is-nav-collapsed .brand-sub,
.layout.is-nav-collapsed .nav-item span:not(.ni-ico):not(.ni-badge),
.layout.is-nav-collapsed .nav-group-title,
.layout.is-nav-collapsed .nav-search,
.layout.is-nav-collapsed .nav-ext-text { display: none; }
.layout.is-nav-collapsed .nav-item { justify-content: center; padding: 9px 0; }
.layout.is-nav-collapsed .ni-badge { position: absolute; right: 8px; top: 4px; }
.layout.is-nav-collapsed .nav-item { position: relative; }
.layout.is-nav-collapsed .brand-box { padding: 14px 8px; }
.layout.is-nav-collapsed .brand-mark { justify-content: center; }
.layout.is-nav-collapsed .nav-collapse { right: 50%; transform: translateX(50%); top: 60px; }
.layout.is-nav-collapsed .sidebar-foot { flex-direction: column; }

/* ---------- 4. 顶栏：角色化快捷入口 ---------- */
.topbar { flex-wrap: wrap; row-gap: 8px; }
.quick-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.quick-item {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    border-radius: 15px; border: 1px solid var(--border); background: var(--panel);
    color: var(--text-2); font-size: 12.5px; white-space: nowrap; position: relative;
}
.quick-item:hover { color: var(--primary); border-color: var(--primary); text-decoration: none; }
.quick-item.is-active { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.quick-item .qi-badge {
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger);
    color: #fff; font-size: 10.5px; line-height: 17px; text-align: center; font-weight: 700;
}
.quick-item .qi-badge.qi-ok { background: var(--panel-3); color: var(--muted); }
.quick-more { position: relative; }
.quick-more .qm-panel {
    position: absolute; right: 0; top: 34px; z-index: 60; width: 260px; background: var(--panel);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; display: none;
    max-height: 62vh; overflow: auto;
}
.quick-more.is-open .qm-panel { display: block; }
.qm-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--text-2); font-size: 13px; }
.qm-item:hover { background: var(--panel-2); color: var(--primary); text-decoration: none; }
.qm-title { font-size: 11px; color: var(--muted); padding: 6px 9px 2px; letter-spacing: .06em; text-transform: uppercase; }

.user-chip { position: relative; }
.user-menu {
    position: absolute; right: 0; top: 42px; z-index: 70; width: 250px; background: var(--panel);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; display: none;
}
.user-chip.is-open .user-menu { display: block; }
.um-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: var(--text-2); }
.um-row:hover { background: var(--panel-2); color: var(--primary); text-decoration: none; }
.um-sep { height: 1px; background: var(--border-soft); margin: 6px 0; }
.um-label { font-size: 11px; color: var(--muted); padding: 4px 8px 2px; }
.swatch-row { display: flex; gap: 6px; padding: 4px 8px 8px; }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch.is-on { border-color: var(--text); }

/* ---------- 5. 右侧说明抽屉（点一下才展开，不占工作区） ---------- */
.drawer-mask {
    position: fixed; inset: 0; background: rgba(4, 8, 16, .45); z-index: 120; display: none;
}
.drawer-mask.is-open { display: block; }
.drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: 430px; max-width: 94vw; z-index: 121;
    background: var(--panel); border-left: 1px solid var(--border); box-shadow: -14px 0 40px rgba(0,0,0,.34);
    transform: translateX(102%); transition: transform .22s ease; display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer-head { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; }
.drawer-head h3 { font-size: 15px; flex: 1; }
.drawer-body { padding: 14px 16px 40px; overflow: auto; }
.drawer-section { margin-bottom: 18px; }
.drawer-section h4 { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.drawer-section p { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.drawer-step { display: flex; gap: 9px; font-size: 13px; color: var(--text-2); padding: 5px 0; }
.drawer-step b { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 11px; text-align: center; line-height: 18px; }
.kv-list { display: grid; gap: 5px; }
.kv-list .kv { display: flex; gap: 10px; font-size: 12.5px; }
.kv-list .kv span:first-child { flex: 0 0 116px; color: var(--muted); }
.drawer-hotkey { font-size: 12px; color: var(--muted); }
kbd {
    display: inline-block; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border);
    background: var(--panel-2); font-size: 11px; font-family: var(--mono);
}
.help-btn {
    width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel);
    color: var(--muted); cursor: pointer; font-size: 14px; flex: 0 0 32px;
}
.help-btn:hover { color: var(--primary); border-color: var(--primary); }

/* ---------- 6. 列表页：批量条 / 筛选穿透 / 每页条数 ---------- */
.bulk-bar {
    display: none; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 10px;
    border: 1px solid var(--primary); background: var(--primary-soft); border-radius: var(--radius); font-size: 13px;
}
.bulk-bar.is-on { display: flex; }
.bulk-bar .bb-count { font-weight: 700; color: var(--primary); }
.bulk-bar .bb-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.table td.col-check, .table th.col-check { width: 34px; text-align: center; }
.filter-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-chips .fc-label { font-size: 12px; color: var(--muted); }
.chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 12px;
    background: var(--panel-3); color: var(--text-2); font-size: 12px;
}
.chip-accent { background: var(--primary-soft); color: var(--primary); }
.chip a { color: inherit; opacity: .7; }
.chip a:hover { opacity: 1; text-decoration: none; }
.pager .per-page { display: inline-flex; align-items: center; gap: 5px; }
.pager .per-page select { height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text-2); font-size: 12px; }
.list-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 表格行内快捷操作 */
.row-ops { display: inline-flex; gap: 6px; opacity: .35; transition: opacity .12s; }
tr:hover .row-ops { opacity: 1; }
.row-ops a { font-size: 12px; }

/* ---------- 7. 导入向导 ---------- */
.imp-steps { display: flex; gap: 0; margin-bottom: 16px; }
.imp-step { display: flex; align-items: center; gap: 8px; padding-right: 30px; position: relative; font-size: 12.5px; color: var(--muted); }
.imp-step::after { content: "→"; position: absolute; right: 9px; opacity: .5; }
.imp-step:last-child::after { display: none; }
.imp-step b { width: 20px; height: 20px; border-radius: 50%; background: var(--panel-3); color: var(--muted); font-size: 11px; text-align: center; line-height: 20px; }
.imp-step.is-on { color: var(--primary); font-weight: 600; }
.imp-step.is-on b { background: var(--primary); color: #fff; }
.imp-drop {
    border: 1px dashed var(--border); border-radius: var(--radius); padding: 22px; text-align: center;
    background: var(--panel-2); font-size: 13px; color: var(--text-2);
}
.imp-report { font-size: 12.5px; }
.imp-report .ok { color: var(--success); }
.imp-report .bad { color: var(--danger); }
.imp-report li { margin-bottom: 3px; }

/* ---------- 8. 表单细节：日期快捷区间 / 省市区级联 / 校验提示 ---------- */
.date-quick { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.date-quick button {
    border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
    font-size: 11.5px; border-radius: 6px; padding: 1px 7px; cursor: pointer; font-family: var(--font);
}
.date-quick button:hover { color: var(--primary); border-color: var(--primary); }
.region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.form-control.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.14); }
.form-control.is-valid { border-color: rgba(34,197,94,.6); }
.field-err { font-size: 11.5px; color: var(--danger); margin-top: 4px; display: none; }
.field-err.is-on { display: block; }
.sticky-actions {
    position: sticky; bottom: 0; z-index: 30; background: var(--panel);
    border-top: 1px solid var(--border-soft); padding: 11px 16px; margin: 0 -16px -16px;
}

/* ---------- 9. 大屏 / 仪表板：一屏铺满 + KPI 穿透 ---------- */
.screen-grid { display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.screen-grid > .span-3 { grid-column: span 3; }
.screen-grid > .span-4 { grid-column: span 4; }
.screen-grid > .span-5 { grid-column: span 5; }
.screen-grid > .span-6 { grid-column: span 6; }
.screen-grid > .span-7 { grid-column: span 7; }
.screen-grid > .span-8 { grid-column: span 8; }
.screen-grid > .span-9 { grid-column: span 9; }
.screen-grid > .span-12 { grid-column: span 12; }
.screen-fit { max-height: calc(100vh - 168px); overflow: auto; }
.kpi-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.kpi-grid .kpi { padding: 12px 14px; }
.kpi.is-drill { cursor: pointer; position: relative; transition: transform .12s, border-color .12s; }
.kpi.is-drill:hover { transform: translateY(-1px); border-color: var(--primary); }
.kpi.is-drill::before {
    content: "明细 →"; position: absolute; right: 12px; bottom: 9px; font-size: 10.5px;
    color: var(--muted); opacity: 0; transition: opacity .14s;
}
.kpi.is-drill:hover::before { opacity: 1; }
/* 下钻落地提示条：从大屏/展板点进来时，列表顶部说明来源并给一键返回 */
.drill-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 7px 12px; border-radius: 8px;
    background: var(--primary-soft); color: var(--text-2); font-size: 12.5px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.drill-banner b { color: var(--primary); }
.drill-banner .btn { flex: 0 0 auto; }

.kpi-grid.tight .kpi-value { font-size: 20px; }
.kpi-grid.tight .kpi { padding: 10px 12px; }
.mini-table { font-size: 12.5px; }
.mini-table td, .mini-table th { padding: 5px 8px; }
.rank-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.rank-line .rl-name { flex: 0 0 92px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-line .rl-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.rank-line .rl-bar i { display: block; height: 100%; background: var(--primary); }
.rank-line .rl-val { flex: 0 0 84px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 10. 单据套打 ---------- */
.doc-page {
    background: #fff; color: #111827; padding: 26px 30px; border-radius: 10px;
    font-size: 13px; line-height: 1.7; max-width: 900px; margin: 0 auto;
}
.doc-page .doc-title { font-size: 20px; margin: 0 0 6px; color: #111827; }
.doc-page .doc-meta { color: #4b5563; font-size: 12px; margin: 0 0 14px; }
.doc-page .doc-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.doc-page .doc-table th, .doc-page .doc-table td { border: 1px solid #d1d5db; padding: 6px 8px; font-size: 12px; }
.doc-page .doc-table th { background: #f3f4f6; text-align: left; }
.doc-page .doc-note { font-size: 12px; color: #374151; }
.doc-page .doc-sign { margin-top: 26px; font-size: 13px; }
.doc-page .doc-foot { margin-top: 26px; font-size: 11px; color: #6b7280; border-top: 1px dashed #d1d5db; padding-top: 8px; }
.doc-vars { display: flex; flex-wrap: wrap; gap: 5px; }
.doc-vars code {
    background: var(--panel-3); border-radius: 5px; padding: 2px 6px; font-size: 11.5px; cursor: pointer;
    font-family: var(--mono); color: var(--text-2);
}
.doc-vars code:hover { background: var(--primary-soft); color: var(--primary); }
@media print {
    .doc-page { padding: 0; max-width: none; box-shadow: none; border-radius: 0; }
    .sidebar, .topbar, .no-print, .drawer, .drawer-mask, .tabbar, .quick-bar { display: none !important; }
    .layout { display: block; }
    .main { display: block; }
    .content { padding: 0; }
}

/* ---------- 11. 轻提示（保存成功 / 已复制） ---------- */
.toast-wrap { position: fixed; right: 20px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--primary);
    border-radius: 10px; padding: 9px 14px; font-size: 13px; box-shadow: var(--shadow); animation: toast-in .18s ease;
}
.toast.t-ok { border-left-color: var(--success); }
.toast.t-warn { border-left-color: var(--warn); }
.toast.t-err { border-left-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 12. 二维码（手机填报，扫码而非跳转） ---------- */
.qr-box { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qr-canvas { background: #fff; padding: 8px; border-radius: 10px; border: 1px solid var(--border); }
.qr-canvas svg { display: block; }
.qr-side { flex: 1; min-width: 210px; }
.qr-link {
    display: block; word-break: break-all; font-family: var(--mono); font-size: 12px;
    background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px 9px; margin: 6px 0;
}
.qr-tip { font-size: 12px; color: var(--muted); }

/* ---------- 13. 懒加载占位 ---------- */
[data-lazy] { min-height: 44px; }
.lazy-loading { display: flex; align-items: center; gap: 8px; padding: 14px; color: var(--muted); font-size: 12.5px; }
.lazy-loading::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border);
    border-top-color: var(--primary); animation: lazy-spin .7s linear infinite;
}
@keyframes lazy-spin { to { transform: rotate(360deg); } }

/* ---------- 14. 页面标题栏（说明按钮 + 返回） ---------- */
.page-header .ph-help { display: flex; align-items: center; gap: 8px; }
.page-header-left { min-width: 260px; }

/* ---------- 15. 移动端适配 ---------- */
@media (max-width: 1180px) {
    .screen-grid > .span-3, .screen-grid > .span-4, .screen-grid > .span-5 { grid-column: span 6; }
    .screen-grid > .span-7, .screen-grid > .span-8, .screen-grid > .span-9 { grid-column: span 12; }
}
@media (max-width: 900px) {
    .sidebar { position: fixed; z-index: 90; transform: translateX(-100%); transition: transform .2s; }
    .layout.is-nav-open .sidebar { transform: none; }
    .quick-bar { display: none; }
    .content { padding: 14px; }
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
    .region-grid { grid-template-columns: 1fr; }
    .form-item, .form-item.col-3, .form-item.col-4, .form-item.col-8 { grid-column: span 12; }
    .screen-grid > * { grid-column: span 12 !important; }
}

/* ==========================================================================
   16. 顶栏用户菜单 / 快捷入口 / 导航补充（v2.1）
   ========================================================================== */
.user-chip { padding: 0; background: none; border: 0; border-radius: 0; }
.user-chip-btn {
    display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px;
    border-radius: 20px; background: var(--panel); border: 1px solid var(--border);
    cursor: pointer; font-family: inherit; color: var(--text); max-width: 230px;
}
.user-chip-btn:hover { border-color: var(--primary); }
.user-chip .u-meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.user-chip .u-caret { font-size: 10px; color: var(--muted); }
.quick-item .qi-text { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.quick-item .qi-badge:empty { display: none; }
.quick-item .qi-badge.qi-ok { display: none; }
.quick-more > .quick-item { cursor: pointer; font-family: inherit; }
.nav-item .ni-badge { margin-left: auto; }
.nav-group-title { user-select: none; }
.nav-list { position: relative; }
.nav-item[hidden] { display: none; }
.nav-group[hidden] { display: none; }

/* 单据套打：详情页打印按钮 */
.doc-print-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.doc-vars-group { margin-bottom: 10px; }
.doc-vars-group .dvg-title { font-size: 12px; color: var(--muted); margin-bottom: 4px; }


/* ==========================================================================
   17. 系统设置中心 / 待办 / 数据字典 / 手机端入口（v2.2）
   说明：新增功能一律复用已定义的 --panel/--border/--primary 等变量，
   保证换主题色、切明暗、调密度时这些页面一起变，不用单独适配。
   ========================================================================== */

/* 17.1 设置中心：每个功能一张可点卡片，右侧带一句“当前有多少” */
.sys-item {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel-2);
    color: var(--text); text-decoration: none; transition: all .14s;
}
.sys-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.sys-ico {
    flex: 0 0 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: var(--panel-3); font-size: 16px;
}
.sys-item .sys-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sys-item .sys-go { color: var(--muted); font-size: 16px; }
.sys-item:hover .sys-go { color: var(--primary); }

/* 17.2 我的待办：有量才亮，无量置灰，一眼看出今天先干什么 */
.todo-card { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; text-decoration: none; color: var(--text); }
.todo-card.is-active { border-left: 3px solid var(--primary); }
.todo-card.is-active.tone-danger { border-left-color: var(--danger); }
.todo-card.is-active.tone-warn { border-left-color: var(--warn); }
.todo-card.is-empty { opacity: .55; }
.todo-card .tc-top { display: flex; align-items: baseline; gap: 9px; }
.todo-card .tc-num { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary); line-height: 1.1; }
.todo-card.tone-danger .tc-num { color: var(--danger); }
.todo-card.tone-warn .tc-num { color: var(--warn); }
.todo-card.is-empty .tc-num { color: var(--muted); }
.todo-card .tc-title { font-weight: 600; font-size: 14px; }
.todo-card .tc-hint { font-size: 12.5px; color: var(--muted); min-height: 36px; }
.todo-card .tc-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--border-soft); padding-top: 7px; }
.todo-card .tc-go { color: var(--primary); }

/* 17.3 数据字典：左类型 + 右条目，两栏各管各的滚动 */
.dict-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
.dict-types { display: grid; gap: 4px; max-height: 62vh; overflow: auto; }
.dict-type {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
    color: var(--text-2); text-decoration: none; font-size: 13px;
}
.dict-type:hover { background: var(--panel-3); color: var(--text); }
.dict-type.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.dict-type .dt-name { flex: 1; }
.dict-type .dt-code { font-size: 11px; color: var(--muted); }
.row-active { background: var(--primary-soft); }
tr.row-active td { background: var(--primary-soft); }

/* 17.4 表单里的单选/多选组：横排卡片，点哪选哪，不用精准点小圆点 */
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-item {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px;
    border: 1px solid var(--border-soft); background: var(--panel-2); font-size: 12.5px; cursor: pointer;
}
.opt-item:hover { border-color: var(--primary); }
.opt-item input { margin: 0; }
.opt-item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.quick-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 320px; overflow: auto; }
.quick-pick .opt-item { justify-content: flex-start; }

/* 17.5 手机端入口：二维码卡片 */
.qr-card .qr-box { flex-direction: column; align-items: center; }
.qr-card .qr-box svg { width: 168px; height: 168px; background: #fff; padding: 6px; border-radius: 10px; }
.qr-card .qr-link input { font-size: 11.5px; }

@media (max-width: 1180px) {
    .dict-layout { grid-template-columns: 1fr; }
    .dict-types { max-height: 260px; }
}

/* 18 出品方标识：演示水印 + 页脚署名 + 商务联系（全端统一） */
.brand-watermark {
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.brand-watermark span {
    font-size: 21px; font-weight: 800; letter-spacing: .10em; line-height: 2.1;
    color: color-mix(in srgb, var(--text) 8%, transparent);
    transform: rotate(-24deg); white-space: pre-wrap; text-align: center; max-width: 130vw;
    -webkit-user-select: none; user-select: none;
}
[data-theme="light"] .brand-watermark span { color: rgba(15, 22, 35, .075); }
@media (max-width: 760px) { .brand-watermark span { font-size: 15px; letter-spacing: .06em; } }

.brand-footer { border-top: 1px solid var(--border-soft); background: var(--panel); color: var(--muted); font-size: 12.5px; }
.brand-footer .bf-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 12px 20px; max-width: 1600px; margin: 0 auto;
}
.brand-footer a { color: var(--text-2); text-decoration: none; }
.brand-footer a:hover { color: var(--primary); }
.brand-footer .bf-vendor { font-weight: 600; }
.brand-footer .bf-sep { opacity: .5; margin: 0 6px; }
.brand-footer .bf-contact { display: flex; align-items: center; gap: 12px; }
.brand-footer .bf-contact-txt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.45; }
.brand-footer .bf-contact-txt b { color: var(--text); font-size: 12px; }
.brand-footer .bf-contact-txt a { font-size: 15px; font-weight: 700; color: var(--primary); }
.brand-footer .bf-note { font-size: 11.5px; color: var(--muted); }
.brand-footer .bf-qr { width: 86px; height: 86px; border-radius: 9px; background: #fff; padding: 4px; border: 1px solid var(--border-soft); }
/* 侧栏/手机端紧凑版 */
.brand-footer.is-compact { border: 0; background: none; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.brand-footer.is-side { border: 0; background: none; color: rgba(255, 255, 255, .45); padding: 10px 14px 14px; }
.brand-footer.is-side a { color: rgba(255, 255, 255, .55); }
.brand-footer.is-side a:hover { color: #fff; }
.brand-footer.is-compact .bf-phone { font-size: 11.5px; }

.sidebar-brand {
    border-top: 1px solid var(--border-soft); padding: 9px 12px 11px;
    display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--muted);
}
.sidebar-brand a { color: var(--muted); text-decoration: none; }
.sidebar-brand a:hover { color: var(--primary); }
.sidebar-brand .sb-tel { font-size: 11px; }
.is-nav-collapsed .sidebar-brand { display: none; }

@media print {
    .brand-watermark { position: fixed; z-index: 9999; }
    .brand-watermark span { color: rgba(15, 22, 35, .10) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .brand-footer .bf-qr { display: none; }
}


/* ==========================================================================
   业务进度与轨迹（批次一：展板下钻 / 阶段进度条 / 状态变迁轨 / 满意度评分）
   命名前缀 loop- / stage- / score- 为跨项目复用组件，保持与本项目 HUD 主题一致
   ========================================================================== */

/* ---- 阶段进度条：一条线上看出「走到哪一步」 ---- */
.loop-bar {
    display: flex; align-items: center; gap: 0; flex-wrap: wrap;
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--bg-soft); border: 1px solid var(--border-soft);
}
.loop-step {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--muted); white-space: nowrap;
    padding-right: 18px; position: relative;
}
.loop-step:last-child { padding-right: 0; }
.loop-step:not(:last-child)::after {
    content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 1px;
    background: var(--border); transform: translateY(-50%);
}
.loop-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: var(--border); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.loop-step.is-done { color: var(--text); }
.loop-step.is-done .loop-dot { background: var(--success); }
.loop-step.is-current { color: var(--text); font-weight: 600; }
.loop-step.is-current .loop-dot { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.loop-step.is-todo { opacity: .62; }
.loop-bar-sm .loop-step { font-size: 11px; padding-right: 12px; }
.loop-bar-sm .loop-dot { width: 7px; height: 7px; }
.stage-progress-note { font-size: 11.5px; margin-top: 8px; line-height: 1.5; }

/* ---- 状态变迁轨：竖向时间轴，含每步停留时长 ---- */
.stage-timeline { display: flex; flex-direction: column; }
.stage-node { display: flex; gap: 10px; }
.stage-line { position: relative; width: 14px; flex: 0 0 14px; display: flex; justify-content: center; }
.stage-line::after {
    content: ""; position: absolute; top: 16px; bottom: 0; width: 1px; background: var(--border-soft);
}
.stage-node:last-child .stage-line::after { display: none; }
.stage-dot {
    width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
    background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); z-index: 1;
}
.stage-body { flex: 1; padding-bottom: 14px; min-width: 0; }
.stage-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stage-arrow { font-size: 11.5px; color: var(--muted); }
.stage-time { font-size: 11px; color: var(--muted); margin-left: auto; font-family: var(--mono); }
.stage-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.stage-reason {
    margin-top: 5px; font-size: 12px; color: var(--text); padding: 5px 8px;
    border-left: 2px solid var(--border); background: var(--bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---- 满意度评分格：低分必须一眼可见 ---- */
.score-cell { display: inline-flex; align-items: center; gap: 5px; }
.score-stars { letter-spacing: 1px; font-size: 11px; }

/* ---- 长文本：保留换行，避免详情页被挤成一行 ---- */
.longtext { display: block; white-space: normal; line-height: 1.62; word-break: break-word; }

/* ---- 展板下钻：可点数字 + 网格化指标块 ---- */
.drill { display: inline-flex; align-items: baseline; gap: 4px; text-decoration: none; color: inherit; }
.drill:hover .drill-num { color: var(--primary); }
.drill-num { font-weight: 700; border-bottom: 1px dashed var(--border); }
.drill-hint { font-size: 11px; color: var(--muted); }
.grid-metrics {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.grid-metrics .metric {
    background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 10px 12px; min-height: 74px; display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.grid-metrics .metric .m-label { font-size: 11.5px; color: var(--muted); }
.grid-metrics .metric .m-value { font-size: 19px; font-weight: 700; font-family: var(--mono); }
.grid-metrics .metric .m-sub { font-size: 11px; color: var(--muted); }

/* ---- 板级信号灯：正常/预警/超期三态 ---- */
.lamp { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.lamp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.lamp.is-ok::before { background: var(--success); }
.lamp.is-warn::before { background: var(--warn); }
.lamp.is-bad::before { background: var(--danger); }

/* ---- 填充条：占比可视化（替代长长短短的手工 div） ---- */
.fill-bar { height: 6px; border-radius: 4px; background: var(--bg-soft); overflow: hidden; min-width: 60px; }
.fill-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.fill-bar > i.is-warn { background: var(--warn); }
.fill-bar > i.is-bad { background: var(--danger); }
.fill-bar > i.is-ok { background: var(--success); }

/* ---- 需求覆盖看板（/system/requirements）----
   三段堆叠条：已覆盖 / 部分覆盖 / 规划中，宽度按条数占比，颜色沿用全局语义色，
   明暗主题下都跟着 var 走；段间用 1px 描边分隔，避免同色相邻时糊成一条。 */
.mixbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-soft); min-width: 90px; }
.mixbar > i { display: block; height: 100%; }
.mixbar > i + i { border-left: 1px solid var(--card); }
.mixbar > i.is-ok { background: var(--success); }
.mixbar > i.is-warn { background: var(--warn); }
.mixbar > i.is-bad { background: var(--danger); opacity: .5; }

/* 列表里的覆盖说明要收敛，否则一句话能把表格撑爆 */
.cover-note { display: inline-block; max-width: 420px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* 一条需求经常对应好几个页面，按钮成组换行而不是横着挤出去 */
.req-links { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 详情页长文本块：需求描述 / 缺口说明 / 验收标准 */
.prose { line-height: 1.85; font-size: 13.5px; }

@media (max-width: 720px) {
    .loop-bar { padding: 8px 10px; }
    .loop-step { font-size: 11px; padding-right: 13px; }
    .grid-metrics { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
    .grid-metrics .metric { min-height: 66px; }
    .grid-metrics .metric .m-value { font-size: 17px; }
}

/* ==================================================================
   取证 / 签字 / 照片墙（批次一）
   场景：维修取证照片、拒签照片、手写签名、工单详情照片墙
   ================================================================== */
.media-link { display: inline-block; line-height: 0; border-radius: var(--radius-sm); }
.media-link:hover { box-shadow: 0 0 0 2px var(--primary); }
.thumb {
    width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--panel-2); display: block;
}
.evidence-img {
    max-width: 100%; max-height: 460px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--panel-2); display: block;
}
.sign-img {
    max-width: 320px; max-height: 140px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: #fff; padding: 4px;
}
.sign-view .sign-box { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.sign-meta { font-size: 12.5px; color: var(--text-2); line-height: 1.9; }

/* 照片墙：按取证阶段分组，缺哪一段一眼可见 */
.gallery-stage { margin-bottom: 14px; }
.gallery-stage-head {
    font-size: 12.5px; font-weight: 600; color: var(--text-2);
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    padding-bottom: 6px; border-bottom: 1px dashed var(--border);
}
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.gallery-item {
    margin: 0; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.gallery-item img { width: 100%; height: 116px; object-fit: cover; display: block; }
.gallery-item figcaption { padding: 6px 8px; font-size: 11.5px; line-height: 1.5; }
.gallery-item .cap { display: block; color: var(--text); margin-bottom: 2px; }
.gallery-item .meta { display: block; color: var(--muted); }
.gallery-item .wm { color: var(--accent); }

/* 手写签名板：虚线框提示"哪儿签"，签过之后边框转绿 */
.sign-pad {
    position: relative; border: 2px dashed var(--border); border-radius: var(--radius);
    background: #fff; cursor: crosshair; touch-action: none; overflow: hidden;
    max-width: 560px;
}
.sign-pad canvas { display: block; background: transparent; }
.sign-pad.is-signed { border-color: var(--success); border-style: solid; }
.sign-pad-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.sign-drop { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 10px; }

/* ---- 单证齐套检查（进口 / 清关 / 上牌） ---- */
.kit-bar { display: inline-flex; align-items: center; gap: 8px; }
.kit-bar .fill-bar { flex: 0 0 76px; }
.fill-txt { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.doc-kit { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg-soft); }
.doc-kit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-kit-sub { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.doc-kit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-kit-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--border); font-size: 13px; }
.doc-kit-item.is-danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--card)); }
.doc-kit-item.is-warn { border-color: var(--warn); }
.doc-kit-tag { flex: 0 0 auto; min-width: 30px; text-align: center; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--bg-soft); color: var(--muted); }
.doc-kit-tag.ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.doc-kit-tag.warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.doc-kit-tag.danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.doc-kit-name { font-weight: 600; }
.doc-kit-req, .doc-kit-opt { font-size: 11px; padding: 1px 5px; border-radius: 4px; }
.doc-kit-req { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.doc-kit-opt { background: var(--bg-soft); color: var(--muted); }
.doc-kit-no { font-family: var(--mono, monospace); font-size: 12px; }
.doc-kit-exp { font-size: 11.5px; color: var(--muted); }
.doc-kit-item .btn { margin-left: auto; }
.btn-xs { height: 22px; padding: 0 7px; font-size: 11.5px; border-radius: 5px; }


/* ==========================================================================
   数据口 / 提示条 通用件（app/Views/system/dataport.php、fields.php 用）
   约定：callout 只用于「一句话解释为什么这样设计」，不做告警红色霸屏
   ========================================================================== */
.callout { padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.7;
    background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft, var(--text)); }
.callout-warn { background: color-mix(in srgb, var(--warn) 10%, var(--card)); border-color: var(--warn); }
.callout-danger { background: color-mix(in srgb, var(--danger) 8%, var(--card)); border-color: var(--danger); }
.kv { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; }
.kv > div { display: flex; align-items: baseline; gap: 6px; }
.hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.dp-group { font-size: 11.5px; color: var(--muted); padding: 8px 10px 4px; letter-spacing: .3px; }
.ext-tag { margin-left: 6px; font-size: 10px; padding: 0 4px; border-radius: 3px; vertical-align: middle;
    background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }

/* ==========================================================================
   渠道对账 / 回款核销（app/Views/finance/reconcile.php、receipt.php、receipts.php）
   约定：账龄用横条（越长=金额越大），逾期用告警色，不给整行刷红以免看不清数字
   ========================================================================== */
.aging-row { display: grid; grid-template-columns: 130px 1fr 116px; gap: 10px; align-items: center; padding: 5px 0; }
.aging-row .aging-label { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.aging-row .aging-label .hint { font-size: 11px; }
.aging-row .aging-amount { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.kv .span-2 { flex-basis: 100%; }
tr.is-focus td { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.form-actions form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.form-actions input[type="text"] { min-width: 240px; }


/* ==========================================================================
   岗位教练 + 演示自检清单（app/Services/Coach.php、Demo.php）
   约定：教练面板在首屏，只放「轮到我处理」和一条动线，不做成第二个菜单
   ========================================================================== */
.coach-panel .card-head { border-bottom: 1px solid var(--border); }
.coach-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.coach-action {
    display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--panel-2); text-decoration: none; color: inherit;
    transition: border-color .12s, transform .12s;
}
.coach-action:hover { border-color: var(--primary); transform: translateY(-1px); text-decoration: none; }
.coach-action .ca-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.coach-action .ca-main b { font-size: 13px; color: var(--text); }
.coach-action .ca-hint { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-action.tone-danger { border-left: 3px solid var(--danger); }
.coach-action.tone-warn { border-left: 3px solid var(--warn); }
.coach-action.tone-info { border-left: 3px solid var(--primary); }
.coach-loop { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.coach-script {
    margin-top: 12px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; color: var(--text-2);
    background: color-mix(in srgb, var(--primary) 6%, var(--panel-2));
}
.coach-script .cs-tag {
    display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 4px; font-size: 11px;
    background: var(--primary-soft); color: var(--primary);
}
.demo-group + .demo-group { margin-top: 12px; }
.demo-group .dg-title { font-size: 11.5px; color: var(--muted); letter-spacing: .3px; margin-bottom: 6px; }
.demo-group .dg-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.demo-node {
    display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 7px; font-size: 12.5px;
    border: 1px solid var(--border); text-decoration: none; color: var(--text-2); background: var(--panel-2);
}
.demo-node:hover { border-color: var(--primary); text-decoration: none; }
.demo-node .dn-mark { font-weight: 700; }
.demo-node.is-ok { border-left: 3px solid var(--success, #17a673); }
.demo-node.is-ok .dn-mark { color: var(--success, #17a673); }
.demo-node.is-miss { border-left: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 5%, var(--panel-2)); }
.demo-node.is-miss .dn-mark { color: var(--danger); }
.demo-node .dn-label { flex: 1; }
.demo-node .dn-count { font-variant-numeric: tabular-nums; color: var(--text); }
.demo-node .dn-need { font-size: 11px; color: var(--danger); }

/* 装柜图（三维装柜 SVG）：给仓库/货代看的摆位示意图，打印时要清晰 */
.pack-svg { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.pack-svg text { font-family: var(--font-mono, ui-monospace, monospace); }
@media print {
    .pack-svg { break-inside: avoid; }
}

/* ==========================================================================
   审批中心 + 通用随单附件（app/Services/Approval.php、Attach.php）
   约定：详情页的审批条只回答三件事 —— 走到哪一级、卡在谁手里多久、我能不能签
   ========================================================================== */
.tabs .tab-count {
    display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 7px;
    font-size: 11px; line-height: 16px; background: var(--panel-3); color: var(--muted);
}
.tabs a.is-active .tab-count { background: var(--primary-soft); color: var(--primary); }

.approval-panel { display: flex; flex-direction: column; gap: 10px; }
.ap-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-status { padding: 2px 9px; border-radius: 6px; font-size: 12px; background: var(--panel-3); color: var(--text-2); }
/* 状态色走主题变量：深色底给亮色字、亮色底给深色字，两套皮肤都够对比度 */
.ap-status.ap-pending { background: rgba(245, 158, 11, .16); color: var(--warn); }
.ap-status.ap-approved { background: rgba(34, 197, 94, .16); color: var(--success); }
.ap-status.ap-rejected { background: rgba(239, 68, 68, .16); color: var(--danger); }
.ap-node { font-size: 12.5px; color: var(--text-2); }
.ap-role, .ap-flow, .ap-stuck { font-size: 12px; color: var(--muted); }
.ap-stuck { margin-left: auto; }
.ap-rule {
    padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: var(--text-2);
    background: color-mix(in srgb, var(--primary) 6%, var(--panel-2));
}
.ap-track { display: flex; flex-direction: column; gap: 6px; }
.ap-step {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 6px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2);
    font-size: 12.5px;
}
.ap-step .ap-mark { font-weight: 700; width: 12px; }
.ap-step-title { color: var(--text); }
.ap-step-who, .ap-step-meta { font-size: 12px; color: var(--muted); }
.ap-step-opinion { flex-basis: 100%; font-size: 12px; color: var(--text-2); }
.ap-step-approved { border-left: 3px solid var(--success, #15803d); }
.ap-step-rejected { border-left: 3px solid var(--danger); }
.ap-step-pending { border-left: 3px solid var(--warn, #b45309); }
.ap-step-withdrawn { border-left: 3px solid var(--muted); }
.ap-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-form .ap-opinion { max-width: 320px; }

.attach-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.attach-form input[type="file"] { max-width: 260px; }
.attach-form select { max-width: 130px; }
.attach-form input[type="text"] { max-width: 200px; }