:root {
    /* ===== 科技蓝紫渐变主色（iOS 风格，2026-08-13） ===== */
    --primary: #2F54EB;            /* iOS 系统蓝 */
    --primary-dark: #4C8AFF;       /* 深色模式蓝 */
    --primary-2: #36CFC9;          /* iOS 靛蓝/紫 */
    --grad: linear-gradient(135deg, #2F54EB 0%, #36CFC9 100%);
    --grad-soft: linear-gradient(135deg, rgba(47,84,235,0.10) 0%, rgba(54,207,201,0.10) 100%);

    --success: #00B42A;
    --danger: #F53F3F;
    --warning: #FF7D00;
    --secondary: #86909C;          /* iOS 系统灰1 */

    --bg: #F7F8FA;                 /* iOS grouped background */
    --card-bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F5F6F8;

    --text: #1D2129;               /* iOS label */
    --text-light: #86909C;         /* iOS gray1 */
    --text-muted: rgba(60,60,67,0.30);

    --border: #E5E6EB;
    --border-strong: #D9DCE3;
    --separator: #E5E6EB;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);

    --nav-frost: rgba(255,255,255,0.72);
    --nav-frost-dark: rgba(28,28,30,0.72);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 980px;

    --shadow: var(--shadow-md);

    /* 兼容旧引用（原 navy/cyan 已弃用，保留变量以防引用） */
    --navy: #1d1d1f;
    --navy-2: #1d1d1f;
    --navy-3: #1d1d1f;
    --navy-card: rgba(0, 0, 0, 0.04);
    --cyan: #2F54EB;
    --cyan-soft: rgba(47, 84, 235
);
    --glow-cyan: 0 0 12px rgba(47, 84, 235
);
    --support-bar-h: 32px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

/* ===== 移动端/微信端安全兜底（2026-08-12 加固） ===== */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
input, select, textarea, button { max-width: 100%; }

.hidden {
    display: none !important;
}

/* 登录页 */
#login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2F54EB 0%, #1e40af 100%);
    padding: 20px;
}

.login-box {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 36px 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.logo {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    text-align: center;
    margin-bottom: 8px;
}

.login-box h2 {
    text-align: center;
    margin-bottom: 24px;
    color: var(--text-light);
    font-weight: 500;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.inline-fields {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.inline-fields input,
.inline-fields select {
    flex: 1;
    min-width: 60px;
}

.inline-fields .input-small {
    max-width: 70px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--secondary);
    color: #fff;
}

.btn-secondary:hover {
    background: #475569;
}

.btn-small {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-large {
    padding: 16px 28px;
    font-size: 18px;
    flex: 1;
}

.btn-block {
    width: 100%;
}

.error-msg {
    color: var(--danger);
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
}

/* 主应用布局 */
#main-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.clock {
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.date-info {
    color: var(--text-light);
    font-size: 14px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.app-body {
    display: flex;
    flex: 1;
}

.app-nav {
    width: 180px;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
}

.nav-item {
    padding: 14px 24px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.nav-item:hover,
.nav-item.active {
    background: #eff6ff;
    color: var(--primary);
    border-left-color: var(--primary);
}

.app-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* ===================== 周计划横幅（顶部展示） ===================== */
.weekly-plan-banner {
    background: linear-gradient(135deg, #eaf2ff 0%, #f6f9ff 100%);
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
}
.weekly-plan-banner .wp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.weekly-plan-banner .wp-icon { font-size: 18px; line-height: 1; }
.weekly-plan-banner .wp-today {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
}
.weekly-plan-banner .wp-chevron { color: var(--secondary); font-size: 14px; flex: 0 0 auto; }
.weekly-plan-banner .wp-all {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.weekly-plan-banner .wp-day {
    display: flex;
    gap: 6px;
    font-size: 14px;
    line-height: 1.5;
}
.weekly-plan-banner .wp-day-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}
.weekly-plan-banner .wp-day-text {
    color: var(--text);
    word-break: break-word;
}

.content-page {
    display: none;
    animation: fadeIn 0.2s ease;
}

.content-page.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.module-header h2 {
    font-size: 22px;
}

.sub-tabs {
    display: flex;
    gap: 8px;
    background: var(--bg);
    padding: 4px;
    border-radius: 8px;
}

.sub-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-light);
}

.sub-tab.active {
    background: var(--card-bg);
    color: var(--primary);
    font-weight: 600;
    box-shadow: var(--shadow);
}

.sub-page {
    display: none;
}

.sub-page.active {
    display: block;
}

/* 表单网格 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    background: var(--card-bg);
    padding: 20px;
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.form-group-span-2 {
    grid-column: span 2;
}

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 首页 */
.home-welcome {
    text-align: center;
    padding: 30px 0;
}

.home-welcome h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.home-welcome p {
    color: var(--text-light);
    margin-bottom: 32px;
}

.home-version {
    display: inline-block;
    margin-top: 26px;
    padding: 6px 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2F54EB, #36CFC9);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(47, 84, 235
);
}

.home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    max-width: 700px;
    margin: 0 auto;
}

.home-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 28px 16px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.card-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.card-title {
    font-weight: 600;
}

/* 路产损失 */
.damages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.damage-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.6fr 0.8fr 0.6fr 0.8fr 0.8fr 0.9fr 30px;
    gap: 6px;
    align-items: center;
}

/* 损失行"更多字段"折叠按钮：电脑端隐藏，手机端显示 */
.dmg-more-toggle {
    display: none;
    border: 1px dashed var(--color-border-secondary, #c7c7cc);
    background: transparent;
    color: var(--color-text-secondary, #888);
    font-size: 12px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}
.dmg-more-toggle:hover { color: var(--color-text, #333); border-color: var(--color-text-secondary, #888); }
@media (min-width: 769px) {
    .damage-row .dmg-extra { display: block; }
}

/* 伴随项目（主损失项的附属路产，如护栏严重弯时伴随的螺栓）*/
.cmp-toggle {
    grid-column: 1 / -1;
    border: 1px dashed var(--color-border-secondary, #c7c7cc);
    background: transparent;
    color: var(--color-text-secondary, #888);
    font-size: 12px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
}
.cmp-toggle:hover { color: var(--color-text, #333); border-color: var(--color-text-secondary, #888); }
.cmp-box {
    display: none;
    grid-column: 1 / -1;
    background: rgba(109, 40, 217, 0.04);
    border: 1px dashed rgba(109, 40, 217, 0.25);
    border-radius: 8px;
    padding: 8px;
    margin-top: 4px;
}
.damage-row.cmp-open .cmp-box { display: block; }
.cmp-tip { font-size: 12px; color: var(--color-text-secondary, #888); margin-bottom: 6px; }
.cmp-row {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 0.8fr 0.9fr 28px;
    gap: 4px;
    margin-bottom: 4px;
    align-items: center;
}
.cmp-row input {
    padding: 6px;
    font-size: 13px;
    min-width: 0;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 4px;
    background: var(--bg, #fff);
    color: var(--text, #111);
}
.cmp-row .cmp-del {
    background: var(--danger, #dc2626);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px 0;
}
.cmp-add {
    margin-top: 4px;
    border: 1px dashed var(--color-border-secondary, #c7c7cc);
    background: transparent;
    color: #6d28d9;
    font-size: 12px;
    padding: 5px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
}
.cmp-add:hover { background: rgba(109, 40, 217, 0.08); }

/* 后台路产库：伴随项目配置区 */
.cmp-cfg-list { display: flex; flex-direction: column; gap: 6px; }
.cmp-cfg-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr 0.7fr 32px;
    gap: 6px;
    align-items: center;
}
/* 联动 checkbox 行：跨列独占一行（与"数量/每套增量/删除"分行，避免被 step 列覆盖溢出文字）*/
.cmp-cfg-row .cmp-cfg-link {
    grid-column: 1 / -1;
    justify-self: start;
}
.cmp-cfg-row input {
    padding: 8px;
    font-size: 14px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 4px;
    background: var(--bg, #fff);
    color: var(--text, #111);
    min-width: 0;
}
.cmp-cfg-row .cmp-cfg-del {
    background: var(--danger, #dc2626);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px 0;
}
.cmp-cfg-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-secondary, #666);
    cursor: pointer;
    white-space: nowrap;
}
.cmp-cfg-step:disabled {
    opacity: 0.4;
}

/* 勾选框加大（设为常用/记住密码等）—— 默认太小不明显 */
.checkbox-inline input[type="checkbox"],
.remember-login input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #6d28d9;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}
/* 伴随项目按损坏程度分组 */
.cmp-cfg-sec {
    border: 1px dashed var(--color-border-secondary, #c7c7cc);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    background: rgba(109, 40, 217, 0.03);
}
.cmp-cfg-sec-title {
    font-size: 13px;
    font-weight: 600;
    color: #6d28d9;
    margin-bottom: 6px;
}
.cmp-cfg-sec .cmp-cfg-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cmp-cfg-sec-add {
    border: 1px dashed var(--color-border-secondary, #c7c7cc);
    background: transparent;
    color: #6d28d9;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.cmp-cfg-sec-add:hover { background: rgba(109, 40, 217, 0.08); }

.damage-row input {
    padding: 8px;
    font-size: 14px;
}

.damage-row select {
    padding: 8px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    min-width: 0;
}

.damage-row .btn-del {
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px;
}

/* 媒体预览 */
.media-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.media-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 费用框 */
.fee-box {
    background: #f8fafc;
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 16px;
}

.fee-box h4 {
    margin-bottom: 12px;
    color: var(--text-light);
}

.fee-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.fee-row.total {
    border-bottom: none;
    font-size: 18px;
    color: var(--primary);
    margin-top: 8px;
}

/* 话术输出 */
.text-output {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    display: none;
}

.text-output.active {
    display: block;
}

.text-output pre {
    white-space: pre-wrap;
    word-break: break-all;
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* 车辆模块 */
.vehicle-panel {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow);
    max-width: 600px;
}

.plate-select-row {
    display: flex;
    gap: 8px;
}

.plate-select-row select {
    flex: 1;
}

.plate-select-row input {
    flex: 1;
}

.vehicle-actions {
    display: flex;
    gap: 16px;
    margin: 24px 0;
}

.vehicle-prompt {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.vehicle-status {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin: 16px 0;
    color: var(--primary);
}

/* 记录列表 */
.record-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.record-item {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.record-item .record-info {
    flex: 1;
}

.record-item .record-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.record-item .record-meta {
    font-size: 13px;
    color: var(--text-light);
}

.record-item .record-actions {
    display: flex;
    gap: 6px;
}

.badge {
    display: inline-block;
    background: #eff6ff;
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
}

.badge-done {
    background: #dcfce7;
    color: #16a34a;
}

.badge-out {
    background: #fef3c7;
    color: #e67e22;
}

.badge-creator {
    background: #f3e8ff;
    color: #9333ea;
}

.trip-complete {
    border-left: 3px solid #16a34a;
}

.trip-ongoing {
    border-left: 3px solid #e67e22;
}

/* ---------- 标准路产项目 ---------- */
.module-tip {
    font-size: 12px;
    color: var(--text-light);
    font-weight: normal;
    margin-left: 8px;
}

.roaditem-add-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1 1 140px;
    margin-bottom: 0;
}

.roaditem-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-light);
    margin: 6px 2px 10px;
}

/* 标准路产项目 · 查找功能 */
.roaditem-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 2px 12px;
}
.roaditem-search-input {
    flex: 1;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.2s;
}
.roaditem-search-input:focus {
    outline: none;
    border-color: var(--primary);
}
.roaditem-search-clear {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-light);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.roaditem-search-clear:hover {
    color: var(--text);
    border-color: var(--border-strong);
}
.roaditem-hl {
    background: rgba(47, 84, 235
);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

/* 损坏程度编辑器（标准路产项目） */
.rd-degree-tip {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 6px;
}
.rd-degree-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.rd-degree-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rd-degree-row .rd-degree-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}
.rd-degree-row .rd-degree-price {
    flex: 0 0 110px;
    width: 110px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}
.rd-degree-row .rd-degree-del {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: #dc2626;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.rd-degree-row .rd-degree-del:hover {
    border-color: #dc2626;
}
.rd-degree-row input:focus {
    outline: none;
    border-color: var(--primary);
}
.record-degrees {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rd-chip {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(54, 207, 201
);
    color: var(--text);
    border: 1px solid rgba(54, 207, 201
);
}
.rd-chip b {
    color: var(--primary);
}

.roaditem-locked {
    background: #fffbeb;
    border-left: 3px solid #b45309;
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

.toast-out {
    animation: toastOut 0.3s ease forwards !important;
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
    font-size: 15px;
}

.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 2000;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2s forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 新闻 */
.news-date {
    color: var(--text-light);
    font-size: 14px;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-item {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.15s;
}

.news-item:hover {
    transform: translateX(4px);
}

.news-index {
    background: var(--primary);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.news-content {
    flex: 1;
}

.news-item h4 {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.4;
}

.news-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--text-light);
}

.news-source {
    background: #eff6ff;
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.news-time {
    color: var(--text-light);
}

/* 后台管理 */
.admin-panel {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.admin-panel h3 {
    margin: 24px 0 16px;
    font-size: 18px;
}

.admin-user-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.permission-checks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.permission-checks label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    cursor: pointer;
}

.permission-checks input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

/* 路产巡护组管理 */
.patrol-group-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pg-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 8px;
}
.pg-info { flex: 1; min-width: 0; }
.pg-info strong { font-size: 15px; color: var(--text); }
.pg-plates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pg-plate {
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}
.pg-plate-empty { color: var(--text-light); font-size: 12px; }
.pg-item .record-actions { flex-shrink: 0; }

/* 弹窗 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-box {
    position: relative;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 460px;
    width: 90%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalIn 0.25s ease;
    -webkit-overflow-scrolling: touch;
}

/* 配置区分区折叠（损坏程度 / 伴随项目）——减少长表单的视觉负担 */
.cfg-section {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 10px;
    background: rgba(109, 40, 217, 0.02);
    overflow: hidden;
}
.cfg-section summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14px;
    color: #4c1d95;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cfg-section summary::-webkit-details-marker { display: none; }
.cfg-section summary::after {
    content: '▾';
    font-size: 12px;
    color: var(--color-text-secondary, #888);
    transition: transform 0.2s;
}
.cfg-section:not([open]) summary::after { transform: rotate(-90deg); }
.cfg-section .cfg-body {
    padding: 10px 14px 14px;
    border-top: 1px dashed var(--border, #e5e7eb);
}
.cfg-section .cfg-body .rd-degree-tip,
.cfg-section .cfg-body .cmp-cfg-sec-title {
    font-size: 12px;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-box h3 {
    text-align: center;
    margin-bottom: 8px;
    font-size: 20px;
}

.modal-desc {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 14px;
}

.modal-options {
    display: flex;
    gap: 12px;
}

.truck-type-btn {
    flex: 1;
    flex-direction: column;
    padding: 20px 12px;
    text-align: center;
    gap: 6px;
}

.truck-type-btn .truck-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 6px;
}

.truck-type-btn small {
    display: block;
    font-size: 12px;
    opacity: 0.8;
    font-weight: 400;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .app-header {
        padding: 10px 14px;
    }

    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .form-row .form-group {
        flex: 1 1 auto;
    }

    .roaditem-add-panel {
        padding: 12px;
    }

    .roaditem-list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .header-left {
        gap: 8px;
        flex-wrap: wrap;
    }

    .brand {
        font-size: 16px;
    }

    .clock {
        font-size: 15px;
    }

    .date-info {
        display: none;
    }

    .app-body {
        flex-direction: column-reverse;
    }

    .app-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        border-right: none;
        border-top: 1px solid var(--border);
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        align-items: stretch;
    }

    .app-nav::-webkit-scrollbar { display: none; }

    .nav-item {
        text-align: center;
        padding: 14px 4px;
        font-size: 16px;
        border-left: none;
        border-top: 3px solid transparent;
        border-radius: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        min-height: 56px;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-item.active {
        border-left-color: transparent;
        border-top-color: var(--primary);
        background: #eff6ff;
    }

    .app-content {
        padding: 16px;
        padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group-span-2 {
        grid-column: span 1;
    }

    .form-actions {
        flex-direction: column;
        gap: 12px;
    }

    .form-actions .btn {
        width: 100%;
        padding: 14px 18px;
        font-size: 16px;
        min-height: 50px;
    }

    .damage-row {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    /* 手机端：损失行折叠——只显示 项目/数量/损坏程度/删除，其余收进"更多字段" */
    .damage-row [data-field="name"] { grid-column: 1 / -1; }
    .damage-row .dmg-extra { display: none; }
    .damage-row.expanded .dmg-extra { display: block; }
    .dmg-more-toggle { display: block; grid-column: 1 / -1; }
    /* 手机端：伴随项目行 2 列（名称独占一行）*/
    .cmp-row { grid-template-columns: 1fr 1fr; }
    .cmp-row [data-cf-field="name"] { grid-column: 1 / -1; }
    /* 手机端：路产库伴随配置行布局
       name/link 各跨列独占一行；qty/step/del 三列；行1 name / 行2 link / 行3 qty-step-del */
    .cmp-cfg-row { grid-template-columns: 1fr 1fr 32px; }
    .cmp-cfg-row .cmp-cfg-name { grid-column: 1 / -1; }
    .cmp-cfg-row .cmp-cfg-qty { grid-column: 1 / 2; }
    .cmp-cfg-row .cmp-cfg-step { grid-column: 2 / 3; }
    .cmp-cfg-row .cmp-cfg-del { grid-column: 3 / 4; }

    .damage-row input {
        font-size: 12px;
        padding: 6px;
    }

    .damage-row .btn-del {
        grid-column: span 1;
        padding: 8px;
    }

    .home-cards {
        grid-template-columns: 1fr 1fr;
    }

    .module-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .sub-tabs {
        width: 100%;
    }

    .sub-tab {
        flex: 1;
        font-size: 13px;
        padding: 8px 10px;
    }

    .vehicle-actions {
        flex-direction: column;
    }

    .modal-options {
        flex-direction: column;
    }

    .truck-type-btn {
        padding: 16px;
    }

    .inline-fields {
        gap: 4px;
    }

    .inline-fields input,
    .inline-fields select {
        font-size: 13px;
        padding: 8px 6px;
    }

    .plate-select-row {
        flex-direction: column;
    }

    .admin-user-item {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .permission-checks {
        flex-direction: column;
        gap: 8px;
    }

    .record-item {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .record-item .record-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .home-welcome h1 {
        font-size: 22px;
    }
}

/* 超小屏 (<= 400px) */
@media (max-width: 400px) {
    .login-box {
        padding: 24px 16px;
    }

    .logo {
        font-size: 24px;
    }

    .app-nav .nav-item {
        font-size: 15px;
        padding: 12px 4px;
        min-width: 0;
        min-height: 52px;
    }

    .form-grid {
        padding: 12px;
    }

    .damage-row {
        grid-template-columns: 1fr;
    }

    .damage-row .btn-del {
        grid-column: span 1;
    }
}

/* ---- 表单右侧模板图片预览 ---- */
.form-with-preview {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.form-with-preview .form-grid {
    flex: 1;
    min-width: 0;
}

.preview-panel {
    width: 260px;
    min-width: 260px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    position: sticky;
    top: 10px;
}

.preview-header {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    text-align: center;
}

.preview-img-wrap {
    width: 100%;
    border-radius: 4px;
    /* 明细表/确认单是整页纸张（约 13.33in 高），iframe 会被撑高；
       这里限制容器高度并让其内部滚动：内容完整不截断，页面也不会被拉得巨长 */
    max-height: 72vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.preview-img {
    width: 100%;
    display: block;
}

/* ---- 智能识别填充 ---- */
.smart-fill-box {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.smart-fill-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.smart-fill-head span {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.smart-hint {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.5;
    margin-top: 8px;
}

.ocr-progress {
    font-size: 12px;
    color: var(--primary);
    margin: 6px 0;
}

.ocr-result {
    margin-top: 8px;
}

.ocr-result-head {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.ocr-text {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    line-height: 1.6;
    max-height: 140px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 4px;
}

.ocr-text.collapsed {
    max-height: 48px;
    overflow: hidden;
}

.ocr-thumbs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* 标准路产项目库 */
.catalog-label {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 10px;
}

.catalog-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.chip {
    background: #eff6ff;
    color: var(--primary);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.chip:hover {
    background: var(--primary);
    color: #fff;
}

.catalog-search {
    margin-top: 8px;
}

.road-catalog-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    background: var(--card-bg);
    color: var(--text);
}

.road-catalog-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 84, 235
);
}

.catalog-empty {
    font-size: 12px;
    color: var(--text-light);
    padding: 4px 2px;
}

/* 可放大缩略图 */
.media-thumb {
    cursor: zoom-in;
    position: relative;
    overflow: hidden;
}

.media-thumb::after {
    content: '🔍';
    position: absolute;
    right: 3px;
    bottom: 3px;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border-radius: 4px;
    padding: 0 3px;
    display: none;
    line-height: 1.4;
}

.media-thumb:hover::after {
    display: block;
}

/* 大图预览 lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.lightbox-img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    background: #fff;
}

.lightbox-video {
    max-width: 92vw;
    max-height: 92vh;
    position: relative;
    z-index: 1;
    background: #000;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 22px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ---- 离线模式横幅 ---- */
.offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1500;
    background: #f59e0b;
    color: #fff;
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 密码年龄提示条（与离线横幅同层，支持按钮） */
.pwd-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #7c3aed;
    flex-wrap: wrap;
}
.pwd-prompt-btn {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.5);
    padding: 2px 10px;
    font-size: 12px;
}
.pwd-prompt-btn:hover { background: rgba(255,255,255,0.3); }

/* 登录页：记住密码 + 一键登录 */
.quick-login {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-background-secondary, #f5f5f7);
    border: 1px dashed var(--color-border-secondary, #c7c7cc);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 13px;
    flex-wrap: wrap;
}
.quick-login-name { color: var(--color-text-secondary, #666); flex: 1; min-width: 120px; }
.remember-login {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary, #666);
    margin: 4px 0 12px;
    cursor: pointer;
}

/* ---- 预览标签页 ---- */
.preview-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.preview-tab {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-light);
}
.preview-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    font-weight: 600;
}
.preview-pane { display: none; }
.preview-pane.active { display: block; animation: fadeIn 0.2s ease; }
.preview-dl {
    display: block;
    width: 100%;
    margin-top: 8px;
}

/* 预览面板加宽（容纳标签页） */
.form-with-preview .preview-panel {
    width: 440px;
    min-width: 440px;
}

/* ---- 粘贴 / 复制弹窗文本域 ---- */
.paste-textarea {
    width: 100%;
    min-height: 200px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

/* ---- 大图预览（单独页面） ---- */
.large-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: 94vw;
    max-width: 960px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    overflow: hidden;
}
.large-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}
.large-title { font-size: 15px; font-weight: 600; color: var(--text); }
.large-tools { display: flex; gap: 8px; }
.large-frame {
    width: 100%;
    height: 82vh;
    border: none;
    background: #fff;
}
/* 图片 / 视频放大预览（手机端点击媒体缩略图查看大图） */
.large-media {
    width: 100%;
    height: 82vh;
    object-fit: contain;
    background: #000;
    display: block;
}
.large-media.hidden { display: none; }
.large-frame.hidden { display: none; }

/* ---- 移动端适配补充 ---- */
@media (max-width: 768px) {
    .form-with-preview {
        flex-direction: column;
    }
    .form-with-preview .preview-panel {
        width: 100%;
        min-width: 0;
    }
    .form-with-preview .form-grid {
        width: 100%;
    }
    #detail-frame, #confirm-frame, #transport-frame, #clearance-confirm-frame {
        height: 360px !important;
    }
    .large-frame { height: 76vh; }
    .large-media { height: 76vh; }
    .offline-banner { font-size: 12px; }
}

/* ===================== 顶部进度条（运行时展示进度） ===================== */
.progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    background: transparent;
}
.progress-bar.running {
    opacity: 1;
    background-image: linear-gradient(90deg, transparent, var(--primary) 40%, var(--primary-dark) 60%, transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: progress-slide 1.1s linear infinite;
}
.progress-bar.done {
    opacity: 1;
    background: var(--success);
    transition: opacity .4s ease;
}
@keyframes progress-slide {
    0%   { background-position: -60% 0; }
    100% { background-position: 160% 0; }
}

/* ===================== 预警信息 ===================== */
.wl-summary {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}
.wl-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.wl-total { font-size: 16px; color: var(--text); }
.wl-total b { font-size: 24px; color: var(--primary); margin: 0 2px; }
.wl-levels { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-badge { color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }

.wl-danger-banner {
    margin-top: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
}

.wl-block { margin-bottom: 22px; }
.wl-block-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 6px 0 12px; }

.wl-by-level { display: flex; flex-direction: column; gap: 14px; }
.wl-level-title {
    font-size: 15px; font-weight: 700;
    padding: 8px 12px;
    border-left: 4px solid var(--primary);
    background: #f8fafc;
    border-radius: 0 8px 8px 0;
    margin-bottom: 8px;
}
.wl-level-pill { color: #fff; padding: 2px 8px; border-radius: 6px; font-size: 12px; margin-right: 6px; }

.wl-item { background: var(--card-bg); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); margin-bottom: 8px; }
.wl-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-level-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.wl-region { font-weight: 700; font-size: 14px; }
.wl-cat { background: #eff6ff; color: var(--primary); padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.wl-time { color: var(--text-light); font-size: 12px; margin-left: auto; }
.wl-title { font-weight: 700; margin: 6px 0 4px; font-size: 15px; }
.wl-detail { font-size: 13px; color: var(--text); line-height: 1.6; }
.wl-defense { font-size: 13px; color: #047857; margin-top: 6px; background: #ecfdf5; padding: 6px 10px; border-radius: 6px; }

.wl-by-region { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wl-region-card {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 12px;
    box-shadow: var(--shadow);
    border: 2px solid transparent;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.wl-region-name { font-weight: 700; font-size: 14px; }
.wl-region-badge { color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.wl-region-card.wl-safe { opacity: .85; }
.wl-region-badge.wl-none { background: #94a3b8; }
.wl-region-card.wl-danger { border-color: #dc2626; background: #fef2f2; }
.wl-pulse { color: #dc2626; margin-left: 4px; animation: wl-pulse 1s infinite; }
@keyframes wl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.wl-by-category { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-cat-chip { background: #f1f5f9; border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.wl-cat-chip b { color: var(--primary); }
.wl-empty { color: var(--text-light); padding: 8px 0; }

/* ===================== 每日早报 ===================== */
.brief-head {
    background: linear-gradient(135deg, #2F54EB, #1e40af);
    color: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}
.brief-greeting { font-size: 14px; opacity: .9; }
.brief-title { font-size: 20px; font-weight: 800; margin: 4px 0; }
.brief-sub { font-size: 12px; opacity: .8; }
.brief-alert {
    border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px;
    background: #eff6ff; color: var(--primary); border: 1px solid #bfdbfe;
}
.brief-alert.danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; font-weight: 600; }
.brief-section-title { font-weight: 700; margin: 10px 0 8px; font-size: 15px; }
.news-list-inner { display: flex; flex-direction: column; gap: 10px; }
.brief-tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.brief-tips li { font-size: 14px; color: var(--text); }

/* ---- 新闻页：今日预警摘要 ---- */
.news-warn-block { background: var(--card-bg); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.news-warn-none-block { background: #f0fdf4; border: 1px solid #bbf7d0; }
.news-warn-title { font-weight: 800; font-size: 15px; margin-bottom: 8px; color: var(--text); }
.news-warn-none { color: #047857; font-size: 14px; }
.news-warn-sum { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.news-warn-sum b { color: #dc2626; font-size: 18px; margin: 0 2px; }
.news-warn-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 8px; border-top: 1px dashed var(--border); font-size: 13px; cursor: pointer; border-radius: 8px; transition: background .15s; }
.news-warn-item:hover { background: #f1f5f9; }
.news-warn-item:first-of-type { border-top: none; }
.news-warn-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.news-warn-region { font-weight: 700; }
.news-warn-type { background: #eff6ff; color: var(--primary); padding: 1px 8px; border-radius: 4px; font-size: 12px; }
.news-warn-level { font-weight: 700; }
.news-warn-time { color: var(--text-light); margin-left: auto; }
.news-warn-go { color: var(--text-light); font-weight: 700; margin-left: 4px; }

/* 预警页：等级条目可点击 + 具体地点 */
.wl-item { cursor: pointer; transition: box-shadow .15s, transform .1s; }
.wl-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.wl-location { font-size: 12px; color: var(--text-light); margin: 4px 0 2px; padding-left: 16px; position: relative; }
.wl-location::before { content: '📍'; position: absolute; left: 0; }

/* ---- 全国新闻 · 60秒新闻简报 ---- */
.brief-brief-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.brief-brief-item { display: flex; gap: 10px; align-items: flex-start; background: var(--card-bg); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); }
.brief-brief-index { background: var(--primary); color: #fff; min-width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.brief-brief-main { display: flex; flex-direction: column; gap: 2px; }
.brief-brief-title { font-size: 14px; line-height: 1.45; color: var(--text); }
.brief-brief-meta { font-size: 12px; color: var(--text-light); }
.brief-brief-item { cursor: pointer; transition: box-shadow .15s, transform .1s; }
.brief-brief-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.brief-brief-item .brief-go { margin-left: auto; color: var(--text-light); font-weight: 700; align-self: center; }

/* ===================== 预警详情弹窗 ===================== */
.warning-detail-box { max-width: 480px; }
.warning-detail-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.warning-detail-head h3 { margin: 0; font-size: 16px; flex: 1; color: var(--text); }
.wd-level { color: #fff; font-weight: 700; font-size: 12px; padding: 2px 10px; border-radius: 6px; background: #888; }
.warning-detail-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.wd-row { display: flex; gap: 10px; font-size: 14px; align-items: baseline; }
.wd-label { color: var(--text-light); min-width: 64px; flex-shrink: 0; }
.wd-value { color: var(--text); font-weight: 600; }
.wd-location-row .wd-location { color: #b45309; font-weight: 600; line-height: 1.5; }
.wd-block { display: flex; flex-direction: column; gap: 4px; }
.wd-block .wd-label { margin-bottom: 2px; }
.wd-text { font-size: 14px; color: var(--text); line-height: 1.6; background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.wd-defense-block .wd-text { background: #f0fdf4; }

/* ===================== 新闻详情弹窗 ===================== */
.news-detail-box { max-width: 480px; }
.news-detail-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.news-detail-head h3 { margin: 0; font-size: 16px; flex: 1; color: var(--text); line-height: 1.4; }
.news-detail-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.nd-row { display: flex; gap: 10px; font-size: 14px; align-items: baseline; }
.nd-label { color: var(--text-light); min-width: 56px; flex-shrink: 0; }
.nd-value { color: var(--text); font-weight: 600; }
.nd-block { display: flex; flex-direction: column; gap: 4px; }
.nd-block .nd-label { margin-bottom: 2px; }
.nd-link { font-size: 14px; color: var(--primary); word-break: break-all; }
.nd-text { font-size: 14px; color: var(--text); line-height: 1.7; background: var(--bg); border-radius: 8px; padding: 10px 12px; }

/* ===================== 移动端适配：预警 / 早报 / 进度 ===================== */
@media (max-width: 768px) {
    .wl-by-region { grid-template-columns: 1fr 1fr; }
    .wl-summary-row { flex-direction: column; align-items: flex-start; }
    .brief-head { padding: 14px; }
    .brief-title { font-size: 18px; }
    .news-warn-time { margin-left: 0; width: 100%; }
    .pg-item { flex-direction: column; align-items: stretch; }
    .pg-item .record-actions { display: flex; gap: 8px; }
    .news-detail-box { width: calc(100% - 24px); }
    .news-detail-head h3 { font-size: 15px; }
}
@media (max-width: 400px) {
    .wl-by-region { grid-template-columns: 1fr; }
}


/* ===================== Apple 风格 UI 改造 ===================== */

/* 全局：干净浅灰背景，去掉科技网格纹理 */
html, body { min-height: 100%; }
body {
    background: #f5f5f7;
}
body::before, body::after { content: none; }

/* 顶部技术支持条：浅色磨砂 */
.support-bar {
    width: 100%;
    height: var(--support-bar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.support-bar::before { content: ""; }
.support-bar--login {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 登录页：Apple 浅色 */
#login-page {
    background:
        radial-gradient(circle at 50% 0%, rgba(47, 84, 235
), transparent 55%),
        linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
    position: relative;
}
.login-box {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.login-box .logo {
    color: #1d1d1f;
    letter-spacing: 1px;
}

/* 顶部导航栏：浅色磨砂 */
.app-header {
    flex-direction: column;
    padding: 0;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    position: sticky;
    top: 0;
}
.app-header::after { content: none; }
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 22px;
    position: relative;
    z-index: 1;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1d1d1f;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, #2F54EB, #42a5f5);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}
.brand-mark::before { content: "◈"; }
.clock { color: #1d1d1f; }
.date-info { color: #86868b; }
#current-user { color: #1d1d1f; font-weight: 500; }
#btn-logout {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
#btn-logout:hover { background: rgba(0, 0, 0, 0.08); }

/* 侧边栏导航：浅色磨砂 */
.app-nav {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px 0;
}
.nav-item {
    color: #1d1d1f;
    position: relative;
    border-left: 3px solid transparent;
    margin: 2px 8px;
    border-radius: 0 10px 10px 0;
}
.nav-item::before { content: none; }
.nav-item:hover,
.nav-item.active {
    background: rgba(47, 84, 235
);
    color: #2F54EB;
    border-left-color: transparent;
}

/* 内容区 */
.app-content { padding: 26px; }

/* 首页卡片 */
.home-welcome h1 {
    color: #1d1d1f;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.home-card {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.home-card::before { content: none; }
.home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
    border-color: rgba(47, 84, 235
);
}
.card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(47, 84, 235
), rgba(66,165,245,0.16));
    font-size: 32px;
    box-shadow: inset 0 0 0 1px rgba(47, 84, 235
);
}

/* 表单卡片 / 面板 */
.form-grid,
.vehicle-panel,
.admin-panel,
.text-output,
.wl-summary,
.news-warn-block,
.roaditem-add-panel {
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    background: #ffffff;
    border-radius: 18px;
}
.form-grid::before,
.vehicle-panel::before,
.admin-panel::before,
.wl-summary::before { content: none; }
.roaditem-add-panel { background: #ffffff; }

/* 按钮：Apple 胶囊 + 蓝 */
.btn { border-radius: 980px; }
.btn-primary {
    background: #2F54EB;
    box-shadow: none;
}
.btn-primary:hover {
    background: #0077ED;
    box-shadow: none;
    transform: translateY(-1px);
}
.btn-secondary {
    background: #e8e8ed;
    color: #1d1d1f;
}
.btn-secondary:hover { background: #dcdce1; }

/* 模块标题 */
.module-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1d1d1f;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.module-header h2::before {
    content: "";
    width: 5px;
    height: 22px;
    border-radius: 3px;
    background: #2F54EB;
}

/* 子标签页：Apple 分段控件 */
.sub-tabs {
    background: #e8e8ed;
    border-radius: 9px;
    padding: 2px;
}
.sub-tab {
    border-radius: 7px;
    color: #1d1d1f;
}
.sub-tab.active {
    background: #ffffff;
    color: #1d1d1f;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* 记录列表卡片 */
.record-item,
.news-item,
.admin-user-item,
.pg-item {
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: #ffffff;
}
.record-item:hover,
.news-item:hover,
.admin-user-item:hover,
.pg-item:hover {
    border-color: rgba(47, 84, 235
);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* 弹窗 */
.modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.modal-box {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* 标签徽章 */
.badge {
    background: rgba(47, 84, 235
);
    color: #2F54EB;
}

/* 早报头部（新闻页）转为干净 Apple 卡片 */
.brief-head {
    background: #ffffff;
    color: #1d1d1f;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.brief-greeting { opacity: 0.7; }
.brief-title { color: #1d1d1f; font-weight: 700; }

/* 细节打磨 */
.header-row { gap: 12px; }
.header-right { margin-left: auto; }
.support-bar { font-weight: 600; }

/* 移动端适配 */
@media (max-width: 768px) {
    .support-bar {
        font-size: 11.5px;
        gap: 10px;
        padding: 0 10px;
        height: 28px;
    }
    .support-bar span { display: none; }
    .app-header { position: sticky; top: 0; }
    .header-row { padding: 8px 12px; }
    .brand { font-size: 16px; gap: 6px; }
    .brand-mark { width: 18px; height: 18px; font-size: 10px; }
    .clock { font-size: 15px; }
    #current-user { font-size: 13px; }

    .app-body { flex-direction: column-reverse; }
    .app-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        border-right: none;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        align-items: stretch;
    }
    .app-nav::-webkit-scrollbar { display: none; }
    .nav-item {
        color: #1d1d1f;
        text-align: center;
        border-left: none;
        border-top: 3px solid transparent;
        border-radius: 14px;
        margin: 0;
        padding: 14px 4px;
        font-size: 16px;
        min-width: 0;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-item::before { display: none; }
    .nav-item:hover,
    .nav-item.active {
        background: rgba(47, 84, 235
);
        color: #2F54EB;
        border-top-color: #2F54EB;
        border-left-color: transparent;
    }
    .app-content { padding: 16px; padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

    .home-cards { grid-template-columns: 1fr 1fr; }
    .home-card { padding: 20px 10px; }
    .card-icon { width: 46px; height: 46px; font-size: 26px; }

    .form-grid,
    .vehicle-panel,
    .admin-panel,
    .text-output,
    .wl-summary { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

    .module-header h2 { font-size: 18px; }
    .header-row { gap: 8px; }
    .header-left { gap: 8px; }
    .header-right { gap: 8px; margin-left: auto; }
}

@media (max-width: 400px) {
    .support-bar { font-size: 10.5px; gap: 6px; }
    .brand { font-size: 15px; }
    .clock { font-size: 13px; }
}

/* ===================== 每日早报（早报.jpg 风格） ===================== */

/* 早报头部卡片 */
.brief-header-card {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 50%, #be185d 100%);
    color: #fff;
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: 0 10px 28px rgba(219, 39, 119, 0.32), inset 0 0 0 1px rgba(255,255,255,0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.brief-header-card::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 45%);
    pointer-events: none;
}
.brief-header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    position: relative;
}
.brief-header-en {
    font-size: 13px;
    opacity: 0.92;
}
.brief-header-divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.5);
}
.brief-header-cn {
    font-size: 26px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.brief-header-date {
    font-size: 15px;
    margin-top: 8px;
    opacity: 0.95;
}
.brief-header-quote {
    font-size: 13px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.35);
    opacity: 0.92;
    line-height: 1.5;
}

/* 全国新闻早报列表 */
.morning-brief-list {
    counter-reset: morning-news;
    list-style: none;
    padding: 0;
    margin: 0;
}
.morning-brief-list .brief-brief-item {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(16, 42, 77, 0.07);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    align-items: flex-start;
    gap: 12px;
    transition: box-shadow .15s, transform .1s, border-color .15s;
}
.morning-brief-list .brief-brief-item:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    border-color: rgba(236, 72, 153, 0.25);
    transform: translateY(-1px);
}
.morning-brief-list .brief-brief-index {
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: #fff;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow: 0 2px 6px rgba(219, 39, 119, 0.25);
}
.morning-brief-list .brief-brief-main {
    flex: 1;
}
.morning-brief-list .brief-brief-title {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
}

/* 每日金句 */
.daily-quote-block {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.06), rgba(47, 84, 235
));
    border-left: 4px solid #ec4899;
    border-radius: 0 12px 12px 0;
    padding: 14px 16px;
    margin: 16px 0;
}
.daily-quote-label {
    font-size: 13px;
    font-weight: 700;
    color: #be185d;
    margin-bottom: 6px;
}
.daily-quote-text {
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
    font-weight: 500;
}
.daily-quote-source {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 6px;
    text-align: right;
}

/* 新闻来源署名 */
.news-sources-footer {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    padding: 10px 0 6px;
    border-top: 1px dashed var(--border);
    margin-bottom: 10px;
}
.news-sources-label {
    font-weight: 600;
    color: var(--text);
}

/* 早报标题统一 */
.brief-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    margin: 18px 0 10px;
    font-size: 15px;
    color: var(--navy);
}
.brief-section-title::before {
    content: "";
    width: 5px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, #ec4899, #db2777);
}

/* 移动端早报适配 */
@media (max-width: 768px) {
    .brief-header-card {
        padding: 18px 16px;
        border-radius: 14px;
    }
    .brief-header-cn { font-size: 22px; }
    .brief-header-en { font-size: 11px; }
    .brief-header-date { font-size: 13px; }
    .brief-header-quote { font-size: 12px; }
    .morning-brief-list .brief-brief-item { padding: 10px 12px; }
    .morning-brief-list .brief-brief-title { font-size: 13.5px; }
    .daily-quote-block { padding: 12px 14px; }
    .daily-quote-text { font-size: 14px; }
}

/* ===================== 批量生成账号结果（Apple） ===================== */
.batch-result .batch-msg { margin-bottom: 10px; color: #34c759; font-weight: 600; }
.batch-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.batch-table th, .batch-table td {
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 7px 10px;
    text-align: left;
}
.batch-table th { background: #f5f5f7; color: #1d1d1f; font-weight: 600; }
.batch-table .batch-pwd { font-family: monospace; color: #1d1d1f; }
.batch-actions { margin: 10px 0; }

/* 账号列表查看密码 */
.pw-reveal {
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 980px;
    background: #f5f5f7;
    color: #1d1d1f;
    cursor: pointer;
}
.pw-reveal:hover { border-color: #2F54EB; color: #2F54EB; }
.pw-value { font-family: monospace; color: #1d1d1f; }

/* =========================================================
   iOS 主题美化层（2026-08-13）
   附着于原样式之后，仅覆盖视觉，不改动任何结构与功能。
   风格：Apple iOS · 科技蓝紫渐变 · 浅色优先 + 深色模式
   ========================================================= */

/* ---------- 全局字体渲染 / 字距 ---------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg);
    color: var(--text);
    letter-spacing: -0.01em;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 700; }

/* ---------- 品牌 / Logo：蓝紫渐变字 ---------- */
.brand, .logo {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.02em;
}

/* ---------- 登录页背景：蓝紫渐变 ---------- */
#login-page { background: var(--grad); }

/* ---------- 顶部栏：毛玻璃 ---------- */
.app-header {
    background: var(--nav-frost);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.33px solid var(--separator);
    box-shadow: none;
}

/* ---------- 侧边导航（桌面）：毛玻璃 + 圆角选中 ---------- */
.app-nav {
    background: var(--nav-frost);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 0.33px solid var(--separator);
}
.nav-item {
    border-radius: 10px;
    margin: 2px 10px;
    padding: 12px 16px;
    border-left: 3px solid transparent;
    color: var(--text);
    font-weight: 500;
}
.nav-item:hover {
    background: rgba(118,118,128,0.10);
    color: var(--primary);
    border-left-color: transparent;
}
.nav-item.active {
    background: var(--grad);
    color: #fff;
    border-left-color: transparent;
    box-shadow: 0 4px 12px rgba(47, 84, 235
);
}

/* ---------- 按钮：渐变主操作 + iOS 圆角 ---------- */
.btn {
    border-radius: var(--radius-pill);
    font-weight: 600;
    transition: all 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.btn-primary {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 4px 14px rgba(47, 84, 235
);
}
.btn-primary:hover {
    background: var(--grad);
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-secondary {
    background: rgba(118,118,128,0.16);
    color: var(--text);
}
.btn-secondary:hover { background: rgba(118,118,128,0.26); color: var(--text); }
.btn-link { color: var(--primary); }

/* 清障车型选择卡（覆盖 pill，改为卡片） */
.truck-type-btn {
    border-radius: 14px !important;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.truck-type-btn:hover { border-color: var(--primary); color: var(--primary); }
.truck-type-btn.active {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(47, 84, 235
);
}
.btn-primary.truck-type-btn,
.btn-secondary.truck-type-btn { background: var(--card-bg); }

/* ---------- 输入框：iOS 填充圆角 ---------- */
.form-group input,
.form-group select,
.form-group textarea,
.inline-fields input,
.inline-fields select {
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    padding: 12px 14px;
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.inline-fields input:focus,
.inline-fields select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--card-bg);
    box-shadow: 0 0 0 4px rgba(47, 84, 235
);
}

/* ---------- 卡片 / 表单网格：iOS 分组圆角 + 轻阴影 ---------- */
.form-grid,
.vehicle-panel,
.admin-panel,
.roaditem-add-panel {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--card-bg);
}
.home-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    background: var(--card-bg);
}
.home-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
/* 首页功能卡图标：渐变圆角方块（iOS App Icon 感） */
.home-card .card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--grad);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 6px 16px rgba(47, 84, 235
);
}

/* ---------- 分段控件（子标签）：iOS Segmented Control ---------- */
.sub-tabs {
    background: rgba(118,118,128,0.12);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}
.sub-tab {
    border-radius: 8px;
    color: var(--text-light);
    font-weight: 500;
    transition: all .2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.sub-tab.active {
    background: var(--card-bg);
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* ---------- 周计划横幅：蓝紫渐变 ---------- */
.weekly-plan-banner {
    background: var(--grad-soft);
    border-bottom: 0.33px solid var(--separator);
}
.weekly-plan-banner .wp-today { color: var(--text); }
.weekly-plan-banner .wp-day-label { color: var(--primary); }
.weekly-plan-banner .wp-chevron { color: var(--text-light); }

/* ---------- 话术输出 / 文本卡片 ---------- */
.text-output {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--card-bg);
}
.text-output pre {
    background: var(--surface-2);
    border-radius: 10px;
}

/* ---------- 记录项 / 新闻项 / 列表项：分组列表风 ---------- */
.record-item,
.news-item,
.pg-item,
.admin-user-item {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--card-bg);
}
.news-index {
    background: var(--grad);
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(47, 84, 235
);
}
.badge {
    background: rgba(47, 84, 235
);
    color: var(--primary);
    border-radius: 20px;
}
.badge-done { background: rgba(52,199,89,0.16); color: #1c9b46; }
.badge-out  { background: rgba(255,159,10,0.18); color: #c77700; }
.badge-creator { background: rgba(54, 207, 201
); color: var(--primary-2); }
.pg-plate { background: var(--grad); }

/* ---------- 弹窗：iOS Alert/Sheet 圆角 + 毛玻璃遮罩 ---------- */
.modal-box {
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    background: var(--card-bg);
}
.modal-box h3 { font-weight: 700; }
.modal-overlay {
    background: rgba(0,0,0,0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ---------- 费用框 / 提示 ---------- */
.fee-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.fee-row.total { color: var(--primary); }

/* ---------- Toast：iOS 深色胶囊 ---------- */
.toast {
    background: rgba(28,28,30,0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}

/* ---------- 复选框：iOS 强调色 ---------- */
.permission-checks input[type=checkbox] {
    accent-color: var(--primary);
    width: 20px;
    height: 20px;
}

/* ---------- 媒体缩略图：圆角 ---------- */
.media-thumb { border-radius: 14px; }

/* ---------- 批量结果（暗色兼容） ---------- */
.batch-table th { background: var(--surface-2); color: var(--text); }
.batch-table th, .batch-table td { border-color: var(--border); }
.pw-reveal { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.pw-reveal:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- 主题切换按钮 ---------- */
.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: transform .2s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle:active { transform: scale(0.92); }

/* ---------- 移动端：毛玻璃导航 + 圆角选中（覆盖原 media 查询） ---------- */
@media (max-width: 768px) {
    .app-header {
        background: var(--nav-frost);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 0.33px solid var(--separator);
        box-shadow: none;
    }
    .app-nav {
        background: var(--nav-frost);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-top: 0.33px solid var(--separator);
    }
    .nav-item {
        border-radius: 14px;
        margin: 2px;
        color: var(--text-light);
        font-weight: 500;
    }
    .nav-item.active {
        background: var(--grad);
        color: #fff;
        border-top-color: transparent;
        box-shadow: 0 4px 12px rgba(47, 84, 235
);
    }
    .home-card .card-icon { width: 50px; height: 50px; font-size: 24px; }
}

/* =========================================================
   数据概览（后台管理，仅管理员可见）
   ========================================================= */
.stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.stats-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 12px;
    margin: 14px 0 4px;
}
.stats-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    min-width: 0;
}
.stats-card-label {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 6px;
}
.stats-card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    word-break: break-all;
}
.stats-card-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.5;
}
.stats-empty {
    padding: 14px 2px;
    color: var(--text-light);
    font-size: 13px;
}
.stats-block { margin-top: 18px; }
.stats-block h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.stats-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
}
/* 柱状图：横向排列，移动端自动出现横向滚动而不是挤压变形 */
.stats-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
    padding: 6px 2px 2px;
    -webkit-overflow-scrolling: touch;
}
.stats-bar {
    flex: 1 1 0;
    min-width: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.stats-bar-value {
    font-size: 10px;
    color: var(--text-light);
    height: 13px;
    line-height: 13px;
}
.stats-bar-track {
    width: 100%;
    height: 84px;
    display: flex;
    align-items: flex-end;
    background: var(--surface-2);
    border-radius: 6px;
    overflow: hidden;
}
.stats-bar-fill {
    width: 100%;
    background: var(--grad);
    border-radius: 6px 6px 0 0;
    min-height: 3px;
    transition: height .3s ease;
}
.stats-bar-label {
    font-size: 10px;
    color: var(--text-light);
    white-space: nowrap;
}
.stats-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.stats-tbl th,
.stats-tbl td {
    border: 1px solid var(--border);
    padding: 7px 10px;
    text-align: left;
    color: var(--text);
}
.stats-tbl th {
    background: var(--surface-2);
    font-weight: 600;
    white-space: nowrap;
}
.stats-tbl tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); }
.stats-tag {
    display: inline-block;
    font-size: 11px;
    border-radius: 6px;
    padding: 1px 7px;
    white-space: nowrap;
}
.stats-tag.ok { background: rgba(52, 199, 89, 0.16); color: #1c9b46; }
.stats-tag.warn { background: rgba(255, 159, 10, 0.18); color: #c77700; }

@media (max-width: 768px) {
    .stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stats-card { padding: 10px 12px; }
    .stats-card-value { font-size: 19px; }
    .stats-columns { grid-template-columns: 1fr; gap: 0; }
    .stats-tbl { font-size: 12px; }
    .stats-tbl th, .stats-tbl td { padding: 6px 7px; }
    .stats-bar-track { height: 66px; }
}
@media (max-width: 400px) {
    .stats-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   深色模式（跟随系统 / 手动切换 data-theme）
   ========================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1C1C1E;
        --card-bg: #2C2C2E;
        --surface: #2C2C2E;
        --surface-2: #3A3A3C;
        --text: #FFFFFF;
        --text-light: rgba(235,235,245,0.60);
        --text-muted: rgba(235,235,245,0.30);
        --border: rgba(84,84,88,0.60);
        --separator: rgba(84,84,88,0.65);
        --primary: #2F54EB;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.40);
        --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
        --nav-frost: rgba(28,28,30,0.72);
        --grad-soft: linear-gradient(135deg, rgba(47, 84, 235
) 0%, rgba(54, 207, 201
) 100%);
    }
    .form-group input, .form-group select, .form-group textarea,
    .inline-fields input, .inline-fields select { background: #1C1C1E; color: #fff; }
    .fee-box, .admin-user-item, .pg-item, .roaditem-add-panel, .text-output pre { background: #1C1C1E; }
    .batch-table th { background: #1C1C1E; }
    .pw-reveal { background: #1C1C1E; }
}

:root[data-theme="dark"] {
    --bg: #1C1C1E;
    --card-bg: #2C2C2E;
    --surface: #2C2C2E;
    --surface-2: #3A3A3C;
    --text: #FFFFFF;
    --text-light: rgba(235,235,245,0.60);
    --text-muted: rgba(235,235,245,0.30);
    --border: rgba(84,84,88,0.60);
    --separator: rgba(84,84,88,0.65);
    --primary: #2F54EB;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.40);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
    --nav-frost: rgba(28,28,30,0.72);
    --grad-soft: linear-gradient(135deg, rgba(47, 84, 235
) 0%, rgba(54, 207, 201
) 100%);
}
:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group select,
:root[data-theme="dark"] .form-group textarea,
:root[data-theme="dark"] .inline-fields input,
:root[data-theme="dark"] .inline-fields select { background: #1C1C1E; color: #fff; }
:root[data-theme="dark"] .fee-box,
:root[data-theme="dark"] .admin-user-item,
:root[data-theme="dark"] .pg-item,
:root[data-theme="dark"] .roaditem-add-panel,
:root[data-theme="dark"] .text-output pre { background: #1C1C1E; }
:root[data-theme="dark"] .batch-table th { background: #1C1C1E; }
:root[data-theme="dark"] .pw-reveal { background: #1C1C1E; }

:root[data-theme="light"] {
    --bg: #F7F8FA;
    --card-bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F5F6F8;
    --text: #1D2129;
    --text-light: #86909C;
    --text-muted: rgba(60,60,67,0.30);
    --border: rgba(60,60,67,0.18);
    --separator: rgba(60,60,67,0.29);
    --primary: #2F54EB;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);
    --nav-frost: rgba(255,255,255,0.72);
    --grad-soft: linear-gradient(135deg, rgba(47,84,235,0.10) 0%, rgba(54,207,201,0.10) 100%);
}


/* ═══════════════════════════════════════════════════════════
   登录页 2026 大气版（蓝紫极光 + 毛玻璃 + Apple 风）
   置于文件末尾以覆盖上方全部历史登录样式；类名 lg-* 不与旧规则冲突
   ═══════════════════════════════════════════════════════════ */

/* ---- 背景：深邃蓝紫渐变 + 缓动光斑 ---- */
#login-page {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #071033 0%, #101b4d 34%, #35247d 66%, #5b2a9d 100%);
    padding: 84px 20px 40px;
    min-height: 100vh;
    min-height: 100dvh;
}
.lg-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.lg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform;
}
.lg-blob-1 {
    width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
    left: -12vw; top: -14vh;
    background: radial-gradient(circle, #2F54EB 0%, rgba(47, 84, 235
) 70%);
    animation: lg-drift-1 22s ease-in-out infinite alternate;
}
.lg-blob-2 {
    width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
    right: -10vw; top: 22vh;
    background: radial-gradient(circle, #36CFC9 0%, rgba(54, 207, 201
) 70%);
    animation: lg-drift-2 26s ease-in-out infinite alternate;
}
.lg-blob-3 {
    width: 34vw; height: 34vw; min-width: 260px; min-height: 260px;
    left: 24vw; bottom: -16vh;
    background: radial-gradient(circle, #BF5AF2 0%, rgba(191,90,242,0) 70%);
    opacity: 0.4;
    animation: lg-drift-3 30s ease-in-out infinite alternate;
}
/* 细网格：增加科技纵深，透明度极低不抢戏 */
.lg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 0%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 0%, transparent 100%);
}
@keyframes lg-drift-1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(9vw, 7vh, 0) scale(1.15); }
}
@keyframes lg-drift-2 {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-8vw, -6vh, 0) scale(0.95); }
}
@keyframes lg-drift-3 {
    from { transform: translate3d(0, 0, 0) scale(0.95); }
    to   { transform: translate3d(-6vw, -9vh, 0) scale(1.12); }
}

/* ---- 支持条：融入渐变背景 ---- */
.support-bar--login {
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none;
    z-index: 2;
}

/* ---- 毛玻璃卡片 ---- */
.login-box.lg-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 42px 36px 34px;
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.09) 100%);
    -webkit-backdrop-filter: saturate(160%) blur(28px);
    backdrop-filter: saturate(160%) blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 24px 70px rgba(4, 8, 32, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    animation: lg-card-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lg-card-in {
    from { opacity: 0; transform: translateY(26px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 品牌区 ---- */
.lg-brand {
    text-align: center;
    margin-bottom: 26px;
}
.lg-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2F54EB 0%, #36CFC9 55%, #BF5AF2 100%);
    box-shadow:
        0 10px 26px rgba(47, 84, 235
),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    margin-bottom: 14px;
}
.login-box.lg-card .logo,
.login-box.lg-card .lg-brand .logo {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #fff;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 0 2px 18px rgba(47, 84, 235
);
    margin-bottom: 6px;
}
.login-box.lg-card h2,
.lg-sub {
    color: rgba(255, 255, 255, 0.66);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 3px;
    margin-bottom: 0;
}
.login-box.lg-card h2 { display: none; } /* 副标题替代"账号登录"，页面更干净 */

/* ---- 输入框：内嵌图标 + 聚焦光晕 ---- */
#login-page .lg-field { margin-bottom: 18px; }
#login-page .lg-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-left: 4px;
}
.lg-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.lg-input:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(47, 84, 235
);
    box-shadow: 0 0 0 4px rgba(47, 84, 235
);
}
.lg-ico { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.lg-input:focus-within .lg-ico { color: rgba(255, 255, 255, 0.9); }
#login-page .lg-input input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 13px 0;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.5px;
}
#login-page .lg-input input::placeholder { color: rgba(255, 255, 255, 0.38); }
.lg-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: -6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s ease, background 0.2s ease;
}
.lg-eye:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.lg-eye:active { transform: scale(0.92); }

/* ---- 一键登录条 ---- */
#login-page .quick-login {
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.30);
    border-radius: 14px;
    padding: 9px 12px;
    margin-bottom: 12px;
}
#login-page .quick-login-name { color: rgba(255, 255, 255, 0.82); }

/* ---- 记住密码 ---- */
#login-page .lg-remember {
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    margin: 2px 0 20px;
    -webkit-tap-highlight-color: transparent;
}
#login-page .lg-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2F54EB;
}

/* ---- 登录按钮：渐变大按钮 ---- */
#login-page .lg-submit {
    width: 100%;
    padding: 15px 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 8px;
    text-indent: 8px; /* 视觉居中补偿字距 */
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #2F54EB 0%, #36CFC9 55%, #8B5CF6 100%);
    background-size: 150% 150%;
    color: #fff;
    cursor: pointer;
    box-shadow:
        0 12px 30px rgba(47, 84, 235
),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
#login-page .lg-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(54, 207, 201
), inset 0 1px 0 rgba(255,255,255,0.30);
}
#login-page .lg-submit:active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 8px 20px rgba(47, 84, 235
);
}

/* ---- 错误提示：红色毛玻璃胶囊 ---- */
#login-page .lg-error {
    margin-top: 14px;
    color: #FFE3E0 !important; /* app.js 提交时会内联 color:#dc2626，需 !important 覆盖保证可读性 */
    font-size: 13.5px;
    line-height: 1.55;
    text-align: center;
    background: rgba(255, 59, 48, 0.16);
    border: 0.5px solid rgba(255, 120, 110, 0.35);
    border-radius: 14px;
    padding: 9px 12px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
#login-page .lg-error:empty { display: none; }

/* ---- 深色模式微调（背景本来就是深色，仅调卡片质感） ---- */
:root[data-theme="dark"] .login-box.lg-card {
    background: linear-gradient(160deg, rgba(44, 44, 46, 0.72) 0%, rgba(28, 28, 30, 0.62) 100%);
    border-color: rgba(255, 255, 255, 0.14);
}

/* ---- 移动端 ---- */
@media (max-width: 480px) {
    #login-page { padding: 72px 14px 32px; }
    .login-box.lg-card {
        padding: 34px 24px 28px;
        border-radius: 22px;
        max-width: none;
    }
    .login-box.lg-card .logo { font-size: 29px; letter-spacing: 1.5px; }
    .lg-mark { width: 56px; height: 56px; border-radius: 17px; margin-bottom: 12px; }
    .lg-sub { letter-spacing: 2px; font-size: 12.5px; }
    #login-page .lg-submit { padding: 14px 0; font-size: 16.5px; letter-spacing: 6px; text-indent: 6px; }
    .lg-blob { filter: blur(52px); }
}
/* 超小屏 */
@media (max-width: 360px) {
    .login-box.lg-card { padding: 28px 18px 24px; }
    .login-box.lg-card .logo { font-size: 26px; }
}

/* ---- 减动效偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    .lg-blob { animation: none; }
    .login-box.lg-card { animation: none; }
}

/* ---- 露白兜底：登录页可见时，body 背景同步为深色（视口超出内容高度时也不露白） ---- */
@supports selector(html:has(*)) {
    html:has(#login-page:not(.hidden)) body {
        background: #071033;
    }
}

/* ═══════════════════════════════════════════════════════════
   人员信息模块（按巡护组分组展示；管理员可管理）
   ═══════════════════════════════════════════════════════════ */
.personnel-admin-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.personnel-select {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 14px;
    min-width: 160px;
    max-width: 100%;
}
.personnel-group-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.personnel-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--separator);
}
.personnel-group-name {
    font-size: 16px;
    font-weight: 700;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.personnel-count {
    font-size: 12.5px;
    color: var(--text-light);
    background: var(--grad-soft);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}
.personnel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-radius: 10px;
}
.personnel-item + .personnel-item { border-top: 1px solid var(--separator); }
.personnel-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--grad);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(47, 84, 235
);
}
.personnel-info { flex: 1; min-width: 0; }
.personnel-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.personnel-name-line strong { font-size: 15.5px; }
.personnel-duty {
    background: var(--grad-soft);
    color: var(--primary);
    font-size: 12px;
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    font-weight: 600;
}
.personnel-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-light);
}
.personnel-phone {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.personnel-phone:hover { text-decoration: underline; }
.personnel-phone-none { color: var(--text-muted); font-weight: 400; }
.personnel-note {
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.personnel-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.personnel-empty {
    padding: 14px 4px;
    font-size: 13.5px;
    color: var(--text-light);
}
/* 移动端：操作按钮换行到底部，避免挤压 */
@media (max-width: 480px) {
    .personnel-item { flex-wrap: wrap; }
    .personnel-actions { width: 100%; justify-content: flex-end; padding-top: 6px; }
    .personnel-note { max-width: 100%; white-space: normal; }
    .personnel-group-card { padding: 13px; }
}
:root[data-theme="dark"] .personnel-group-card { background: #2C2C2E; }

/* ═══════════════════════════════════════════════════════════
   导航美化：桌面侧栏 = 图标+文字 渐变胶囊选中态；移动端 = 单行横滑图标栏
   （置于文件末尾覆盖全部历史导航样式）
   ═══════════════════════════════════════════════════════════ */

/* ---- 桌面侧栏 ---- */
.app-nav {
    width: 176px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    margin: 0;
    border-radius: 14px;
    border-left: none;
    color: var(--text);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-light);
    transition: color 0.18s ease;
}
.nav-ico svg { width: 20px; height: 20px; }
.nav-item::before { content: none; }
.nav-item:hover {
    background: rgba(118, 118, 128, 0.12);
    color: var(--text);
    transform: translateX(2px);
    border-left-color: transparent;
}
.nav-item:hover .nav-ico { color: var(--primary); }
.nav-item.active {
    background: linear-gradient(135deg, #2F54EB 0%, #36CFC9 100%);
    color: #fff;
    border-left-color: transparent;
    box-shadow: 0 6px 18px rgba(47, 84, 235
);
}
.nav-item.active .nav-ico { color: #fff; }

/* ---- 移动端底部栏：单行横滑 + 图标在上 ---- */
@media (max-width: 768px) {
    .app-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
        width: 100%;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        border-right: none;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        scrollbar-width: none;
    }
    .app-nav::-webkit-scrollbar { display: none; }
    .nav-item {
        flex: 0 0 auto;
        flex-direction: column;
        gap: 3px;
        min-width: 58px;
        min-height: 50px;
        padding: 6px 9px;
        border-radius: 14px;
        border-top: none;
        font-size: 11.5px;
        font-weight: 500;
        text-align: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-ico { width: 21px; height: 21px; }
    .nav-ico svg { width: 21px; height: 21px; }
    .nav-item:hover { transform: none; }
    .nav-item.active {
        background: linear-gradient(135deg, #2F54EB 0%, #36CFC9 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(47, 84, 235
);
    }
}
@media (max-width: 400px) {
    .app-nav .app-nav .nav-item { min-width: 54px; }
    .nav-item { min-width: 54px; padding: 6px 7px; font-size: 11px; }
}

/* ---- 深色模式 ---- */
:root[data-theme="dark"] .app-nav {
    background: rgba(28, 28, 30, 0.72);
    border-right-color: rgba(84, 84, 88, 0.6);
}
:root[data-theme="dark"] .nav-item { color: #EBEBF5; }
:root[data-theme="dark"] .nav-item:hover { background: rgba(118, 118, 128, 0.24); }
:root[data-theme="dark"] .nav-item.active { color: #fff; }
@media (max-width: 768px) {
    :root[data-theme="dark"] .app-nav {
        background: rgba(28, 28, 30, 0.92);
        border-top-color: rgba(84, 84, 88, 0.6);
    }
}



/* ═══════════════════════════════════════════════════════════
   精致现代风皮肤层 v34（对标国内主流中后台设计语言）
   看得见的美化：彩色模块图标 + 细腻阴影层级 + 舒服的悬停反馈
   铁律：不改尺寸、不改功能，纯皮肤
   ═══════════════════════════════════════════════════════════ */

:root {
    --brand: #2F54EB;
    --brand-2: #36CFC9;
    --brand-grad: linear-gradient(135deg, #2F54EB 0%, #36CFC9 100%);
    --ink: #1D2129;
    --ink-2: #4E5969;
    --ink-3: #86909C;
    --line: #E5E6EB;
}

/* ---- 页面底色：顶部极淡蓝紫氛围光 ---- */
body {
    background-color: #f5f7fb;
    background-image:
        radial-gradient(1100px 380px at 18% -80px, rgba(47, 84, 235
), transparent 60%),
        radial-gradient(900px 340px at 85% -100px, rgba(54, 207, 201
), transparent 60%);
}
:root[data-theme="dark"] body {
    background-color: #15171e;
    background-image:
        radial-gradient(1100px 380px at 18% -80px, rgba(47, 84, 235
), transparent 60%),
        radial-gradient(900px 340px at 85% -100px, rgba(54, 207, 201
), transparent 60%);
}

/* ---- 滚动条 ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
    background: #c6cede;
    border-radius: 8px;
    border: 2px solid #f5f7fb;
}
::-webkit-scrollbar-thumb:hover { background: #a9b4c9; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4050; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5164; }

/* ---- 顶栏 ---- */
.app-header {
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(15, 23, 42, 0.05) !important;
}
:root[data-theme="dark"] .app-header {
    background: rgba(26, 29, 38, 0.85) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 6px 24px rgba(0,0,0,0.25) !important;
}
.brand-mark { box-shadow: 0 4px 12px rgba(47, 84, 235
) !important; }
.clock {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--brand);
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(47, 84, 235
);
}
#current-user { font-weight: 600; }

/* ---- 模块标题 ---- */
.module-header h2 {
    color: var(--ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0;
}
.module-header h2::before {
    width: 6px;
    height: 20px;
    border-radius: 4px;
    background: var(--brand-grad);
    box-shadow: 0 3px 10px rgba(47, 84, 235
);
}
.module-tip { color: var(--ink-3); }

/* ---- 面板卡片 ---- */
.admin-panel,
.fee-box,
.modal-box,
.wl-summary,
.personnel-group-card,
.text-output pre,
.stats-block {
    border-radius: 14px !important;
    border: 1px solid var(--line) !important;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 4px 16px rgba(16, 24, 40, 0.05) !important;
}
:root[data-theme="dark"] .admin-panel,
:root[data-theme="dark"] .fee-box,
:root[data-theme="dark"] .modal-box,
:root[data-theme="dark"] .personnel-group-card {
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30) !important;
}

/* ---- 表单 ---- */
.form-group input,
.form-group select,
.form-group textarea,
.inline-fields input,
.inline-fields select,
.paste-textarea {
    border-radius: 10px;
    border-color: #dfe4ec !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: #c4cddd !important; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.inline-fields input:focus,
.inline-fields select:focus,
.paste-textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3.5px rgba(47, 84, 235
) !important;
    outline: none;
}
:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group select,
:root[data-theme="dark"] .form-group textarea { border-color: rgba(255,255,255,0.14) !important; }

/* ---- 按钮 ---- */
.btn-primary {
    background: var(--brand-grad) !important;
    box-shadow: 0 4px 14px rgba(47, 84, 235
) !important;
}
.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(54, 207, 201
) !important;
    filter: saturate(1.08);
}
.btn-secondary {
    background: #fff !important;
    border: 1px solid #dfe4ec;
    color: var(--ink-2) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.btn-secondary:hover {
    background: #f6f8fc !important;
    border-color: #c4cddd !important;
    color: var(--brand) !important;
}
:root[data-theme="dark"] .btn-secondary {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.14);
    color: #e2e8f0 !important;
}
:root[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255,255,255,0.10) !important;
}

/* ---- 首页：彩色模块图标（多色系，眼前一亮的核心） ---- */
.home-welcome h1 {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0.5px;
}
.home-welcome p { color: var(--ink-3); letter-spacing: 3px; }
.home-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 4px 14px rgba(16, 24, 40, 0.05);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s ease, border-color 0.2s ease;
}
:root[data-theme="dark"] .home-card { background: #22252e; border-color: rgba(255,255,255,0.08); }
.card-icon {
    border-radius: 18px;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.home-card:hover {
    transform: translateY(-4px);
    border-color: rgba(47, 84, 235
);
    box-shadow: 0 12px 28px rgba(47, 84, 235
);
}
.home-card:hover .card-icon { transform: scale(1.07); }

/* 每个模块一个专属色系（软色底 + 同色系深字） */
.home-card[data-page="accident"]  .card-icon { background: linear-gradient(135deg, rgba(255,107,107,0.16), rgba(255,142,83,0.16)); box-shadow: inset 0 0 0 1px rgba(255,107,107,0.18); }
.home-card[data-page="clearance"] .card-icon { background: linear-gradient(135deg, rgba(255,176,32,0.16), rgba(255,125,26,0.16)); box-shadow: inset 0 0 0 1px rgba(255,176,32,0.18); }
.home-card[data-page="vehicle"]   .card-icon { background: linear-gradient(135deg, rgba(56,189,248,0.16), rgba(47, 84, 235
)); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.18); }
.home-card[data-page="personnel"] .card-icon { background: linear-gradient(135deg, rgba(52,211,153,0.16), rgba(16,185,129,0.16)); box-shadow: inset 0 0 0 1px rgba(52,211,153,0.18); }
.home-card[data-page="roaditems"] .card-icon { background: linear-gradient(135deg, rgba(129,140,248,0.16), rgba(54, 207, 201
)); box-shadow: inset 0 0 0 1px rgba(129,140,248,0.18); }
.home-card[data-page="news"]      .card-icon { background: linear-gradient(135deg, rgba(244,114,182,0.16), rgba(236,72,153,0.16)); box-shadow: inset 0 0 0 1px rgba(244,114,182,0.18); }
.home-card[data-page="warning"]   .card-icon { background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.16)); box-shadow: inset 0 0 0 1px rgba(251,191,36,0.20); }
.card-title { color: var(--ink); font-size: 14px; letter-spacing: 0.5px; }
:root[data-theme="dark"] .card-title { color: #e2e8f0; }
.home-version {
    background: var(--brand-grad) !important;
    box-shadow: 0 4px 14px rgba(47, 84, 235
) !important;
}

/* ---- 徽章 ---- */
.badge, .badge-done, .badge-out, .badge-creator {
    border-radius: 999px;
    font-weight: 600;
    padding: 2px 9px;
}

/* ---- 弹窗 ---- */
.modal .modal-overlay { background: rgba(15, 23, 42, 0.45); }
.modal-box { overflow: hidden; }
.modal-box h3 { color: var(--ink); }
.modal-box h3::before {
    width: 5px;
    height: 17px;
    border-radius: 4px;
    background: var(--brand-grad);
}

/* ---- 周计划横幅 ---- */
.weekly-plan-banner {
    background: #fff !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.04);
}
:root[data-theme="dark"] .weekly-plan-banner { background: #22252e !important; border-bottom-color: rgba(255,255,255,0.08) !important; }

/* ---- 表格 ---- */
.stats-tbl th, .stats-table th, .batch-table th {
    background: #f6f8fc !important;
    color: var(--ink-2) !important;
    font-weight: 600;
}
.stats-tbl td, .stats-table td { border-color: var(--line); }

/* ---- 人员/记录列表悬停 ---- */
.personnel-item:hover, .record-list > *:hover { background: rgba(47, 84, 235
); }

/* ---- 加载 ---- */
.loading { color: var(--ink-3); }

/* ---- 侧栏导航微调（延续图标版） ---- */
.app-nav { background: rgba(255, 255, 255, 0.75) !important; border-right-color: var(--line) !important; }
:root[data-theme="dark"] .app-nav { background: rgba(26, 29, 38, 0.85) !important; }
.nav-item { color: var(--ink-2); }
.nav-item:hover { background: rgba(47, 84, 235
); }
.nav-item:hover .nav-ico { color: var(--brand); }
.nav-item.active {
    background: var(--brand-grad);
    color: #fff;
    box-shadow: 0 6px 16px rgba(47, 84, 235
);
}
.nav-item.active .nav-ico { color: #fff; }
@media (max-width: 768px) {
    .app-nav { background: rgba(255, 255, 255, 0.94) !important; border-top-color: var(--line) !important; }
    :root[data-theme="dark"] .app-nav { background: rgba(26, 29, 38, 0.94) !important; }
}

/* ═══════════════════════════════════════════════════════════
   空间氛围层 v35：柔光斑 + 点阵纹理 + 卡片水印（纯装饰，零布局影响）
   ═══════════════════════════════════════════════════════════ */

/* ---- 1. 页面角落柔光斑（固定定位，填满空白区域的空间感） ---- */
#main-app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(620px 460px at calc(100% + 60px) calc(100% - 40px), rgba(54, 207, 201
), transparent 64%),
        radial-gradient(680px 500px at -120px 32%, rgba(47, 84, 235
), transparent 62%),
        radial-gradient(520px 400px at 58% -140px, rgba(14, 165, 233, 0.08), transparent 60%);
}
:root[data-theme="dark"] #main-app::before {
    background:
        radial-gradient(620px 460px at calc(100% + 60px) calc(100% - 40px), rgba(54, 207, 201
), transparent 64%),
        radial-gradient(680px 500px at -120px 32%, rgba(47, 84, 235
), transparent 62%),
        radial-gradient(520px 400px at 58% -140px, rgba(14, 165, 233, 0.10), transparent 60%);
}

/* ---- 2. 内容区点阵纹理（极淡，衬托卡片） ---- */
.app-content {
    background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
}
:root[data-theme="dark"] .app-content {
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ---- 3. 首页标题：渐变衬线小条 ---- */
.home-welcome h1 {
    position: relative;
    display: inline-block;
}
.home-welcome h1::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    width: 58px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2F54EB, #36CFC9, #a855f7);
    box-shadow: 0 2px 8px rgba(54, 207, 201
);
}

/* ---- 4. 首页卡片右下角水印图标（同款 emoji 超大极淡，增加层次） ---- */
.home-card {
    position: relative;
    overflow: hidden;
}
.home-card::after {
    position: absolute;
    right: -8px;
    bottom: -14px;
    font-size: 52px;
    line-height: 1;
    opacity: 0.08;
    transform: rotate(-12deg);
    pointer-events: none;
}
.home-card[data-page="accident"]::after  { content: "🚗"; }
.home-card[data-page="clearance"]::after { content: "🚧"; }
.home-card[data-page="vehicle"]::after   { content: "🚐"; }
.home-card[data-page="personnel"]::after { content: "👥"; }
.home-card[data-page="roaditems"]::after { content: "📋"; }
.home-card[data-page="news"]::after      { content: "📰"; }
.home-card[data-page="warning"]::after   { content: "🌦️"; }

/* ---- 5. 周计划横幅左侧渐变竖条（弱存在感装饰） ---- */
.weekly-plan-banner { position: relative; }
.weekly-plan-banner .wp-head { position: relative; }
.weekly-plan-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #2F54EB, #36CFC9);
}

/* ---- 6. 人员组卡片顶部渐变细线 ---- */
.personnel-group-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    width: auto;
    border: none;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, #2F54EB, #36CFC9, #a855f7);
    filter: none;
}

/* ---- 7. 弹窗顶部渐变细线（与人员卡呼应） ---- */
.modal-box::before {
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    border: none;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, #2F54EB, #36CFC9, #a855f7);
    filter: none;
}

/* ---- 降动效（本层无动画，保险起见） ---- */
@media (prefers-reduced-motion: reduce) {
    #main-app::before { background: none; }
}

/* 水印微调：缩小放正，完整露出更精致 */
.home-card::after {
    font-size: 38px;
    right: 9px;
    bottom: 6px;
    transform: none;
    opacity: 0.10;
}

/* 移动端水印缩小 */
@media (max-width: 768px) {
    .home-card::after { font-size: 30px; right: 6px; bottom: 4px; opacity: 0.08; }
}

/* ═══════════════════════════════════════════════════════════
   工作区主题色层 v36：每个模块独立色系，进页即知身处哪个工作区
   事故=红橙 清障=琥珀 车辆=天蓝 人员=翠绿 路产库=靛蓝 新闻=粉 预警=金 后台=品牌蓝
   作用域：仅当前激活页面内的标题条/主按钮/能量线 + 导航选中项
   ═══════════════════════════════════════════════════════════ */

/* ---- 各模块色变量（只作用于激活页） ---- */
#page-accident.active  { --pg: #ef5350; --pg2: #ff8a4c; }
#page-clearance.active { --pg: #f59e0b; --pg2: #ff7d3b; }
#page-vehicle.active   { --pg: #0ea5e9; --pg2: #2F54EB; }
#page-personnel.active { --pg: #10b981; --pg2: #0d9f6e; }
#page-roaditems.active { --pg: #36CFC9; --pg2: #8b5cf6; }
#page-news.active      { --pg: #ec4899; --pg2: #f472b6; }
#page-warning.active   { --pg: #e8a013; --pg2: #f59e0b; }
#page-admin.active     { --pg: #2F54EB; --pg2: #36CFC9; }

/* ---- 模块标题条 + 能量线跟随主题色 ---- */
#page-accident.active .module-header h2::before,
#page-clearance.active .module-header h2::before,
#page-vehicle.active .module-header h2::before,
#page-personnel.active .module-header h2::before,
#page-roaditems.active .module-header h2::before,
#page-news.active .module-header h2::before,
#page-warning.active .module-header h2::before {
    background: linear-gradient(180deg, var(--pg), var(--pg2));
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
#page-accident.active .module-header::after,
#page-clearance.active .module-header::after,
#page-vehicle.active .module-header::after,
#page-personnel.active .module-header::after,
#page-roaditems.active .module-header::after,
#page-news.active .module-header::after,
#page-warning.active .module-header::after {
    background: linear-gradient(90deg, var(--pg), transparent 72%);
}

/* ---- 页内主按钮：模块色渐变（次级按钮不受影响） ---- */
#page-accident.active .btn-primary,
#page-clearance.active .btn-primary,
#page-vehicle.active .btn-primary,
#page-personnel.active .btn-primary,
#page-roaditems.active .btn-primary,
#page-news.active .btn-primary,
#page-warning.active .btn-primary,
#page-admin.active .btn-primary {
    background: linear-gradient(135deg, var(--pg) 0%, var(--pg2) 100%) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}
#page-accident.active .btn-primary:hover,
#page-clearance.active .btn-primary:hover,
#page-vehicle.active .btn-primary:hover,
#page-personnel.active .btn-primary:hover,
#page-roaditems.active .btn-primary:hover,
#page-news.active .btn-primary:hover,
#page-warning.active .btn-primary:hover,
#page-admin.active .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
}

/* ---- 页内表单聚焦环跟随主题色 ---- */
#page-accident.active .form-group input:focus,
#page-accident.active .form-group select:focus,
#page-accident.active .form-group textarea:focus,
#page-clearance.active .form-group input:focus,
#page-clearance.active .form-group select:focus,
#page-clearance.active .form-group textarea:focus,
#page-vehicle.active .form-group input:focus,
#page-vehicle.active .form-group select:focus,
#page-vehicle.active .form-group textarea:focus,
#page-personnel.active .form-group input:focus,
#page-personnel.active .form-group select:focus,
#page-personnel.active .form-group textarea:focus,
#page-roaditems.active .form-group input:focus,
#page-roaditems.active .form-group select:focus,
#page-roaditems.active .form-group textarea:focus,
#page-news.active .form-group input:focus,
#page-news.active .form-group select:focus,
#page-news.active .form-group textarea:focus,
#page-warning.active .form-group input:focus,
#page-warning.active .form-group select:focus,
#page-warning.active .form-group textarea:focus {
    border-color: var(--pg) !important;
    box-shadow: 0 0 0 3.5px rgba(0, 0, 0, 0.07) !important;
}

/* ---- 人员组卡片顶部细线跟随模块色 ---- */
#page-personnel.active .personnel-group-card::before {
    background: linear-gradient(90deg, #10b981, #0d9f6e, #34d399);
}

/* ---- 导航选中项：各模块专属色（在哪个工作区一眼可见） ---- */
.nav-item[data-page="accident"].active {
    background: linear-gradient(135deg, #ef5350, #ff8a4c) !important;
    box-shadow: 0 6px 16px rgba(239, 83, 80, 0.32) !important;
}
.nav-item[data-page="clearance"].active {
    background: linear-gradient(135deg, #f59e0b, #ff7d3b) !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.32) !important;
}
.nav-item[data-page="vehicle"].active {
    background: linear-gradient(135deg, #0ea5e9, #2F54EB) !important;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.32) !important;
}
.nav-item[data-page="personnel"].active {
    background: linear-gradient(135deg, #10b981, #0d9f6e) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.32) !important;
}
.nav-item[data-page="roaditems"].active {
    background: linear-gradient(135deg, #36CFC9, #8b5cf6) !important;
    box-shadow: 0 6px 16px rgba(54, 207, 201
) !important;
}
.nav-item[data-page="news"].active {
    background: linear-gradient(135deg, #ec4899, #f472b6) !important;
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.32) !important;
}
.nav-item[data-page="warning"].active {
    background: linear-gradient(135deg, #e8a013, #f59e0b) !important;
    box-shadow: 0 6px 16px rgba(232, 160, 19, 0.32) !important;
}
.nav-item[data-page="home"].active {
    background: linear-gradient(135deg, #2F54EB, #36CFC9) !important;
    box-shadow: 0 6px 16px rgba(47, 84, 235
) !important;
}
.nav-item[data-page="admin"].active {
    background: linear-gradient(135deg, #334155, #475569) !important;
    box-shadow: 0 6px 16px rgba(51, 65, 85, 0.32) !important;
}

/* ---- 首页卡片悬停边框跟随各自色系 ---- */
.home-card[data-page="accident"]:hover  { border-color: rgba(239, 83, 80, 0.40); box-shadow: 0 12px 28px rgba(239, 83, 80, 0.15) !important; }
.home-card[data-page="clearance"]:hover { border-color: rgba(245, 158, 11, 0.40); box-shadow: 0 12px 28px rgba(245, 158, 11, 0.15) !important; }
.home-card[data-page="vehicle"]:hover   { border-color: rgba(14, 165, 233, 0.40); box-shadow: 0 12px 28px rgba(14, 165, 233, 0.15) !important; }
.home-card[data-page="personnel"]:hover { border-color: rgba(16, 185, 129, 0.40); box-shadow: 0 12px 28px rgba(16, 185, 129, 0.15) !important; }
.home-card[data-page="roaditems"]:hover { border-color: rgba(54, 207, 201
); box-shadow: 0 12px 28px rgba(54, 207, 201
) !important; }
.home-card[data-page="news"]:hover      { border-color: rgba(236, 72, 153, 0.40); box-shadow: 0 12px 28px rgba(236, 72, 153, 0.15) !important; }
.home-card[data-page="warning"]:hover   { border-color: rgba(232, 160, 19, 0.40); box-shadow: 0 12px 28px rgba(232, 160, 19, 0.15) !important; }

/* 子标签页选中态跟随模块主题色 */
#page-accident.active .sub-tab.active,
#page-clearance.active .sub-tab.active,
#page-vehicle.active .sub-tab.active,
#page-personnel.active .sub-tab.active,
#page-roaditems.active .sub-tab.active,
#page-news.active .sub-tab.active,
#page-warning.active .sub-tab.active {
    background: var(--pg) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   移动端按钮舒适度专项 v37（仅 ≤768px 生效，桌面不变）
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ---- 底部导航：加宽单项 + 滚动吸附 + 两端渐隐提示可滑动 ---- */
    .app-nav {
        gap: 5px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }
    .app-nav .nav-item {
        flex: 0 0 auto;
        min-width: 64px;
        min-height: 54px;
        padding: 7px 12px;
        gap: 4px;
        font-size: 12px;
        scroll-snap-align: start;
    }
    .app-nav .nav-ico { width: 22px; height: 22px; }
    .app-nav .nav-ico svg { width: 22px; height: 22px; }

    /* ---- 小按钮：加大触控目标（≥34px 高） ---- */
    .btn-small {
        padding: 8px 14px;
        font-size: 13.5px;
        min-height: 34px;
    }

    /* ---- 分段/预览标签：加高 ---- */
    .sub-tab, .preview-tab {
        padding: 10px 12px;
        min-height: 40px;
    }

    /* ---- 一键登录条按钮 ---- */
    .quick-login .btn { min-height: 32px; padding: 6px 12px; }

    /* ---- 弹窗按钮组：纵向全宽，拇指友好 ---- */
    .modal-options { flex-direction: column; }
    .modal-options .btn { width: 100%; min-height: 44px; }
    .form-actions .btn { min-height: 46px; }

    /* ---- 记录/人员行内操作按钮：保持小但可点 ---- */
    .personnel-actions .btn, .record-actions .btn { min-height: 32px; padding: 6px 12px; }
}

/* ═══════════════════════════════════════════════════════════
   移动端底部导航双排版 v38（5+4 两行网格，去掉滑动）
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .app-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        overflow: visible;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        scroll-snap-type: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .app-nav .nav-item {
        min-width: 0;
        min-height: 48px;
        padding: 6px 2px;
        gap: 3px;
        font-size: 11px;
        scroll-snap-align: none;
    }
    .app-nav .nav-ico { width: 20px; height: 20px; }
    .app-nav .nav-ico svg { width: 20px; height: 20px; }
}
@media (max-width: 360px) {
    .app-nav .nav-item { font-size: 10.5px; min-height: 46px; }
}

/* ═══════════════════════════════════════════════════════════
   移动端 inline-fields 修复 v39：高速公路/方向各占整行，不再截断
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .inline-fields { gap: 6px; }
    .inline-fields input,
    .inline-fields select {
        font-size: 15px;
        padding: 10px 10px;
        min-width: 0;
    }
    /* 高速名称、方向：独占一行，值完整可见 */
    .inline-fields input[name="highway"],
    .inline-fields input[name="direction"] {
        flex: 1 1 100%;
        width: 100%;
    }
    /* 桩号组：K + 公里 + 米 同行等分 */
    .inline-fields .input-small {
        max-width: none;
        flex: 1 1 70px;
    }
    .inline-fields span { flex: 0 0 auto; font-weight: 600; }
}

/* ==========================================================================
   v40 · 巡护组配置提示（高速 / 方向 / 车辆巡查位置一目了然）
   ========================================================================== */
.pg-item .pg-opt-tip {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-light, #64748b);
    word-break: break-all;
}

/* 收车「巡查位置」下拉：选项较多时给足高度，避免移动端被压缩 */
#vehicle-position {
    min-height: 42px;
}

/* ==========================================================================
   v42 · 后台管理分区化：左侧导航 + 一屏只显示一块，不再长滚动
   ========================================================================== */
.admin-layout {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* 内容区里的宽表格/图表不得撑破栅格列（否则会把左侧导航一起拉宽） */
.admin-body { min-width: 0; }
.admin-nav { min-width: 0; }

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 12px;
}

.admin-nav-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text, #1d1d1f);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background .18s, color .18s, box-shadow .18s;
}
.admin-nav-item:hover { background: var(--surface-2, #f1f2f6); }
.admin-nav-item.active {
    background: linear-gradient(135deg, var(--primary, #2F54EB), #36CFC9);
    color: #fff;
    box-shadow: 0 6px 16px rgba(47, 84, 235
);
}
.admin-nav-item:focus-visible { outline: 2px solid var(--primary, #2F54EB); outline-offset: 2px; }

/* 一次只显示一块 */
.admin-body > .admin-panel { display: none; }
.admin-body > .admin-panel.active {
    display: block;
    animation: adminPanelIn .22s ease both;
}
@keyframes adminPanelIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* 后端面板内的标题不再重复占位 */
.admin-body .admin-panel { margin-top: 0; }

@media (prefers-color-scheme: dark) {
    .admin-nav-item:hover { background: rgba(255, 255, 255, .08); }
}

/* 移动端：导航两列网格，内容全宽 */
@media (max-width: 768px) {
    .admin-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .admin-nav {
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
        gap: 6px;
    }
    .admin-nav-item {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
        padding: 9px 8px;
        font-size: 13px;
    }
}

/* ==========================================================================
   v43 · 后台分区导航改为「顶部横向标签」
   为什么：外层已有左侧主菜单（首页/事故/清障/…），后台再放一列左栏就出现
   "两层侧面按钮"，视觉打架。改到顶部并换成轻量浅色胶囊，与外层实心导航区分开。
   ========================================================================== */
.admin-layout { display: block; }

.admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    position: static;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, .08));
}

.admin-nav-item {
    width: auto;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light, #6b7280);
    background: transparent;
    box-shadow: none;
    transition: background .18s, color .18s, box-shadow .18s;
}
.admin-nav-item:hover { background: var(--surface-2, #f1f2f6); color: var(--text, #1d1d1f); }
.admin-nav-item.active {
    background: rgba(47, 84, 235
);
    color: var(--primary, #2F54EB);
    box-shadow: inset 0 0 0 1px rgba(47, 84, 235
);
}

@media (prefers-color-scheme: dark) {
    .admin-nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
    .admin-nav-item.active { background: rgba(47, 84, 235
); color: #8ec5ff; }
}

/* 移动端：仍是两列网格（顶部，不再是侧栏） */
@media (max-width: 768px) {
    .admin-nav { gap: 6px; padding-bottom: 10px; }
    .admin-nav-item {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
        padding: 9px 8px;
        font-size: 13px;
        border-radius: 10px;
    }
}

/* ==========================================================================
   v44 · 后台分区标签吸顶
   滚动到下面时标签一直停在顶部可点，不用再滑回页首。
   top 必须避开顶部 sticky header（桌面 91px / 移动 101px）；
   实际高度由 JS 写入 --adm-nav-top 精确同步，CSS 值仅作兜底。
   ========================================================================== */
.admin-nav {
    position: sticky;
    top: var(--adm-nav-top, 91px);
    z-index: 20;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    padding: 8px 2px 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, .08));
    box-shadow: 0 8px 14px -12px rgba(0, 0, 0, .22);
}

@media (max-width: 768px) {
    .admin-nav { top: var(--adm-nav-top, 101px); }
}

@media (prefers-color-scheme: dark) {
    .admin-nav { background: rgba(22, 24, 30, .92); }
}

/* ==========================================================================
   v44b · 修复 sticky 失效的根因
   html/body 上的 overflow-x:hidden 会把它们变成「滚动容器」，
   导致所有后代 position:sticky 失效（顶部 header、后台分区标签都会滚走）。
   overflow-x:clip 同样裁掉横向溢出，但不创建滚动容器 → sticky 恢复正常。
   不支持 clip 的旧浏览器自动回退原 hidden 行为，不影响功能。
   ========================================================================== */
@supports (overflow-x: clip) {
    html, body {
        overflow-x: clip;
        overflow-y: visible;
    }
}

/* v44c · .app-content 的 overflow-y:auto 同样会创建滚动容器并拦截页面内 sticky。
   其父级 .app-body 无固定高度，这个 auto 从来没有真正产生过内部滚动，
   放开为 visible 不改变现有滚动行为，只让 sticky 能按预期工作。 */
@supports (overflow-x: clip) {
    .app-content { overflow-y: visible; }
}

/* ==========================================================================
   v45 · 全站 UI 精修层
   目标：统一控件语言、收敛语义色、强化层次与质感（看得见但不臃肿）
   约束：不改尺寸 / 不改结构 / 不影响任何交互逻辑
   ========================================================================== */

/* ---------- 1. 表单控件：白底 + 细边框 + 柔和聚焦环，边界更清晰 ---------- */
input[type="text"], input[type="number"], input[type="password"], input[type="search"],
input[type="tel"], input[type="email"], input[type="date"], input[type="time"],
input[type="datetime-local"], select, textarea {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover,
input[type="search"]:hover, input[type="tel"]:hover, select:hover, textarea:hover {
    border-color: rgba(15, 23, 42, .22);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="email"]:focus,
input[type="date"]:focus, input[type="time"]:focus, select:focus, textarea:focus {
    border-color: #2F54EB;
    box-shadow: 0 0 0 3.5px rgba(47, 84, 235
), 0 1px 2px rgba(16, 24, 40, .04);
    outline: none;
}
::placeholder { color: #9aa3ad; opacity: 1; }

/* ---------- 2. 危险操作（删除/清空）：平时浅底红字，悬停才实心，降噪 ---------- */
.btn[style*="dc2626"] {
    background: #fef2f2 !important;
    color: #d92d20 !important;
    border: 1px solid rgba(217, 45, 32, .24) !important;
    box-shadow: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn[style*="dc2626"]:hover,
.btn[style*="dc2626"]:focus-visible {
    background: #d92d20 !important;
    color: #fff !important;
    border-color: #d92d20 !important;
    box-shadow: 0 6px 14px -6px rgba(217, 45, 32, .55) !important;
}

/* ---------- 3. 首页：线性图标着色、卡片微交互、副标题可读性 ---------- */
.home-card .card-icon svg { width: 27px; height: 27px; }
.home-card .card-icon { transition: transform .24s cubic-bezier(.34, 1.25, .64, 1), box-shadow .24s ease; }
.home-card[data-page="accident"]  .card-icon { color: #e8503a; }
.home-card[data-page="clearance"] .card-icon { color: #dd8600; }
.home-card[data-page="vehicle"]   .card-icon { color: #0b8fd0; }
.home-card[data-page="personnel"] .card-icon { color: #0f9d6e; }
.home-card[data-page="roaditems"] .card-icon { color: #5a63e0; }
.home-card[data-page="news"]      .card-icon { color: #db2f7f; }
.home-card[data-page="warning"]   .card-icon { color: #cf9206; }

.home-card {
    transition: transform .24s cubic-bezier(.34, 1.2, .64, 1), box-shadow .24s ease, border-color .24s ease;
}
.home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -20px rgba(16, 24, 40, .28);
}
.home-card[data-page="accident"]:hover  { border-color: rgba(232, 80, 58, .38); }
.home-card[data-page="clearance"]:hover { border-color: rgba(221, 134, 0, .38); }
.home-card[data-page="vehicle"]:hover   { border-color: rgba(11, 143, 208, .38); }
.home-card[data-page="personnel"]:hover { border-color: rgba(15, 157, 110, .38); }
.home-card[data-page="roaditems"]:hover { border-color: rgba(90, 99, 224, .38); }
.home-card[data-page="news"]:hover      { border-color: rgba(219, 47, 127, .38); }
.home-card[data-page="warning"]:hover   { border-color: rgba(207, 146, 6, .40); }

/* 卡片右下角水印：换成线性图标后略降，避免与主图标重复 */
.home-card::after { opacity: .05; }
.home-welcome p { color: #6b7280; }

/* ---------- 4. 每日早报横幅：降低饱和度，质感更柔和 ---------- */
.brief-header-card {
    background: linear-gradient(135deg, #f47bab 0%, #e35f95 48%, #c94d82 100%);
    box-shadow: 0 14px 30px -16px rgba(201, 77, 130, .52), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.brief-brief-index {
    background: linear-gradient(135deg, #2F54EB, #5a7dff);
    box-shadow: 0 2px 7px -3px rgba(47, 84, 235
);
}

/* ---------- 5. 列表项 hover：轻微位移 + 描边变色 ---------- */
.brief-brief-item,
.record-item,
.wl-item,
.personnel-group-card,
.rd-item,
.stats-card {
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.brief-brief-item:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(16, 24, 40, .24); }
.record-item:hover { border-color: rgba(47, 84, 235
); box-shadow: 0 10px 22px -14px rgba(16, 24, 40, .24); }
.wl-item:hover { border-color: rgba(47, 84, 235
); box-shadow: 0 10px 22px -14px rgba(16, 24, 40, .24); }
.personnel-group-card:hover { box-shadow: 0 12px 26px -16px rgba(16, 24, 40, .24); }
.stats-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(16, 24, 40, .26); }

/* ---------- 6. 面板/卡片：统一描边与柔影 ---------- */
.admin-panel, .preview-panel, .roaditem-add-panel, .roaditems-list, .vehicle-panel {
    border-color: rgba(15, 23, 42, .08);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -22px rgba(16, 24, 40, .22);
}

/* ---------- 7. 语义提示条收敛：降低荧光感，保持可读 ---------- */
.wl-defense { background: #f1f9f5; border-color: rgba(16, 185, 129, .16); color: #0f7a55; }
.wl-danger-banner { background: #fef3f2; border-color: rgba(217, 45, 32, .16); color: #b42318; }
.brief-alert { background: #fff7f0; border-color: rgba(234, 88, 12, .18); color: #b45309; }
.brief-alert.danger { background: #fef3f2; border-color: rgba(217, 45, 32, .18); color: #b42318; font-weight: 600; }

/* ---------- 8. 徽章：细描边、字距微调，不抢主体 ---------- */
.badge, .wl-level-pill, .wl-cat-chip, .chip, .rd-chip, .personnel-avatar-badge {
    letter-spacing: .01em;
}
.badge { box-shadow: inset 0 0 0 1px rgba(47, 84, 235
); }

/* ---------- 9. 表格：表头更清爽，行悬停有反馈 ---------- */
.batch-table th, .stats-table th { background: #f7f8fa; border-color: rgba(15, 23, 42, .08); }
.batch-table td, .stats-table td { border-color: rgba(15, 23, 42, .07); }
.batch-table tbody tr, .stats-table tbody tr { transition: background .16s ease; }
.batch-table tbody tr:hover, .stats-table tbody tr:hover { background: #fafbfd; }

/* ---------- 10. 深色主题适配 ---------- */
:root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="tel"], :root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: #1e2129;
    border-color: rgba(255, 255, 255, .14);
    color: #e8eaed;
}
:root[data-theme="dark"] .btn[style*="dc2626"] {
    background: rgba(217, 45, 32, .16) !important;
    color: #ff8a80 !important;
    border-color: rgba(217, 45, 32, .38) !important;
}
:root[data-theme="dark"] .home-welcome p { color: #9aa3ad; }
:root[data-theme="dark"] .batch-table th, :root[data-theme="dark"] .stats-table th { background: #23262e; }
:root[data-theme="dark"] .wl-defense { background: rgba(16, 185, 129, .10); color: #6ee7b7; }
:root[data-theme="dark"] .wl-danger-banner { background: rgba(217, 45, 32, .12); color: #fca5a5; }

/* ==========================================================================
   v45b · 补齐特异性
   v45 里 `select` / `textarea` 用的是裸元素选择器（特异性 0,0,1），
   会被原有 `.form-group select`（0,1,1）压住，导致下拉/多行框仍是灰底。
   这里用同容器选择器 + 文件末尾顺序确保白底生效。
   ========================================================================== */
.form-group input, .form-group select, .form-group textarea,
.inline-fields input, .inline-fields select,
.plate-select-row select, .plate-select-row input,
.paste-textarea {
    background: #fff;
    border-color: rgba(15, 23, 42, .12);
}
.form-group input:hover, .form-group select:hover,
.inline-fields input:hover, .inline-fields select:hover,
.plate-select-row select:hover {
    border-color: rgba(15, 23, 42, .22);
}
.form-group textarea:hover { border-color: rgba(15, 23, 42, .22) !important; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.inline-fields input:focus, .inline-fields select:focus,
.plate-select-row select:focus, .plate-select-row input:focus,
.paste-textarea:focus {
    border-color: #2F54EB;
    box-shadow: 0 0 0 3.5px rgba(47, 84, 235
);
    outline: none;
}

/* 首页卡片图标略放大，让线性图标在色块里更饱满 */
.home-card .card-icon svg { width: 30px; height: 30px; }

/* 深色主题：同上提高特异性 */
:root[data-theme="dark"] .form-group input, :root[data-theme="dark"] .form-group select,
:root[data-theme="dark"] .form-group textarea, :root[data-theme="dark"] .inline-fields input,
:root[data-theme="dark"] .inline-fields select, :root[data-theme="dark"] .plate-select-row select {
    background: #1e2129;
    border-color: rgba(255, 255, 255, .14);
    color: #e8eaed;
}

/* ==========================================================================
   v46 · 后台分区条移动端折叠（点击展开 / 点击收起）
   背景：移动端 8 个标签铺成 4 行，占掉不少屏幕，内容区被压扁。
   方案：吸顶处只留一行「当前分区 + 箭头」，点击才展开全部选项，选中后自动收起。
   桌面端不受影响（toggle 隐藏，仍是一行横向标签）。
   ========================================================================== */

/* 桌面：开关不显示，bar 接管吸顶职责（视觉与 v44 一致） */
.admin-nav-toggle { display: none; }

.admin-nav-bar {
    position: sticky;
    top: var(--adm-nav-top, 91px);
    z-index: 20;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    padding: 8px 2px 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, .08));
    box-shadow: 0 8px 14px -12px rgba(0, 0, 0, .22);
}

/* nav 自身不再吸顶、不再自带底板（职责交给 bar） */
.admin-nav {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    margin: 0;
    border-bottom: none;
    box-shadow: none;
}

/* ---------------- 移动端：折叠形态 ---------------- */
@media (max-width: 768px) {
    .admin-nav-bar { top: var(--adm-nav-top, 101px); padding: 6px 2px 8px; }

    .admin-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 11px 14px;
        border: 1px solid rgba(15, 23, 42, .12);
        border-radius: 14px;
        background: #fff;
        color: var(--text, #1d1d1f);
        font-family: inherit;
        font-size: 14.5px;
        font-weight: 650;
        text-align: left;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .admin-nav-toggle:active { background: #f7f8fa; }
    .admin-nav-toggle:focus-visible { outline: 2px solid var(--primary, #2F54EB); outline-offset: 2px; }

    /* 右侧箭头（CSS 画，避免字号差异）：收起朝下，展开朝上 */
    .admin-nav-toggle .ant-caret {
        width: 8px; height: 8px;
        border-right: 2px solid #8b93a1;
        border-bottom: 2px solid #8b93a1;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .24s ease;
        flex-shrink: 0;
    }
    .admin-nav-bar.open .admin-nav-toggle .ant-caret {
        transform: rotate(-135deg) translate(-2px, -2px);
    }
    .admin-nav-bar.open .admin-nav-toggle {
        border-color: rgba(47, 84, 235
);
        box-shadow: 0 0 0 3.5px rgba(47, 84, 235
);
    }

    /* 选项列表：默认收起；展开后纵向铺开 */
    .admin-nav { display: none; flex-direction: column; gap: 2px; margin-top: 8px; }
    .admin-nav-bar.open .admin-nav {
        display: flex;
        animation: admNavDrop .2s ease both;
    }
    @keyframes admNavDrop {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: none; }
    }

    .admin-nav-item {
        flex: 1 1 auto;
        width: 100%;
        text-align: left;
        padding: 11px 14px;
        font-size: 14px;
        border-radius: 10px;
    }
}

/* ---------------- 深色主题 ---------------- */
:root[data-theme="dark"] .admin-nav-bar { background: rgba(22, 24, 30, .92); }
@media (max-width: 768px) {
    :root[data-theme="dark"] .admin-nav-toggle {
        background: #1e2129;
        border-color: rgba(255, 255, 255, .14);
        color: #e8eaed;
    }
    :root[data-theme="dark"] .admin-nav-toggle .ant-caret { border-color: #9aa3ad; }
}

/* ==========================================================================
   v47 · 视觉品质提升层
   方向：延续既有「精致现代风」，把细节做到位（动效 / 质感 / 排版 / 空状态）
   硬约束：不改功能与交互逻辑；所有装饰层 pointer-events:none
   ========================================================================== */

/* ---------- 1. 页面切换：淡入上浮（只作用于内容容器，不阻塞交互） ---------- */
.content-page.active {
    animation: pageRise .34s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes pageRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .content-page.active,
    .home-card, .record-item, .wl-item, .brief-brief-item { animation: none !important; }
}

/* ---------- 2. 首页卡片：错落入场 + 图标块光晕 ---------- */
.home-card {
    animation: cardRise .46s cubic-bezier(.22, .8, .3, 1) both;
}
.home-card:nth-child(1) { animation-delay: .03s; }
.home-card:nth-child(2) { animation-delay: .07s; }
.home-card:nth-child(3) { animation-delay: .11s; }
.home-card:nth-child(4) { animation-delay: .15s; }
.home-card:nth-child(5) { animation-delay: .19s; }
.home-card:nth-child(6) { animation-delay: .23s; }
.home-card:nth-child(7) { animation-delay: .27s; }
@keyframes cardRise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* 图标块：加一层柔和内高光，色块不再"平" */
.home-card .card-icon {
    position: relative;
    overflow: hidden;
}
.home-card .card-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55), transparent 62%);
    opacity: .7;
    pointer-events: none;
}
.home-card:hover .card-icon { transform: scale(1.06); }

/* ---------- 3. 通用列表 / 卡片：轻微入场 ---------- */
.record-item, .wl-item, .brief-brief-item, .stats-card {
    animation: itemFade .34s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes itemFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 4. 模块页头：排版更利落 ---------- */
.module-header h2 {
    letter-spacing: -.018em;
}
.module-header .module-tip {
    color: #8b93a1;
}

/* ---------- 5. 空状态：从"干巴巴一行字"变成有呼吸感的占位 ---------- */
/* 注意：.loading（加载中）不加图标块，只统一居中节奏 */
.wl-empty, .loading, .stats-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    color: #8b93a1;
    font-size: 13.5px;
    text-align: center;
}
.wl-empty::before, .stats-empty::before {
    content: "";
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(47, 84, 235
), rgba(122, 92, 255, .10));
    box-shadow: inset 0 0 0 1px rgba(47, 84, 235
);
    flex: 0 0 auto;
}

/* ---------- 6. 数字排版：等宽数字 + 更紧的字距，数据更利落 ---------- */
.stats-card-value,
.stats-bar-value,
.wl-total,
#clock {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.stats-card-value { letter-spacing: -.025em; }

/* ---------- 7. 按钮：按压反馈（纯视觉，不影响事件） ---------- */
.btn:active:not(:disabled) { transform: scale(.975); }

/* ---------- 8. 全局细节：选区色 / 滚动条 / 焦点环 ---------- */
::selection { background: rgba(47, 84, 235
); color: inherit; }
::-moz-selection { background: rgba(47, 84, 235
); color: inherit; }

* { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .16);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

:focus-visible { outline: 2px solid rgba(47, 84, 235
); outline-offset: 2px; }

/* ---------- 9. 轻微颗粒质感：让大面积浅色底不再"塑料" ---------- */
html::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: .022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 10. 深色主题适配 ---------- */
:root[data-theme="dark"] ::selection { background: rgba(90, 150, 255, .3); }
:root[data-theme="dark"] .wl-empty,
:root[data-theme="dark"] .loading,
:root[data-theme="dark"] .stats-empty { color: #8b93a1; }
:root[data-theme="dark"] .wl-empty::before,
:root[data-theme="dark"] .loading::before,
:root[data-theme="dark"] .stats-empty::before {
    background: linear-gradient(135deg, rgba(90, 150, 255, .16), rgba(140, 110, 255, .14));
    box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .2);
}
:root[data-theme="dark"] html::after { opacity: .035; }

/* ==========================================================================
   v47b · 补齐空状态覆盖范围 + 首页卡片水印换形
   ========================================================================== */

/* ---------- 1. 更多页面的空状态统一（人员页 / 路产目录） ---------- */
.personnel-empty, .catalog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    color: #8b93a1;
    font-size: 13.5px;
    text-align: center;
}
.personnel-empty::before, .catalog-empty::before {
    content: "";
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(47, 84, 235
), rgba(122, 92, 255, .10));
    box-shadow: inset 0 0 0 1px rgba(47, 84, 235
);
    flex: 0 0 auto;
}

/* ---------- 2. 首页卡片右下角水印：emoji → 柔和光晕 ----------
   线性图标已成为卡片主体，emoji 水印与之语言冲突（两套符号系统），
   改为同色系的柔光圆斑，保留"不单调"的观感但不抢图标。 */
.home-card[data-page]::after {
    content: "";
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 84, 235
), transparent 68%);
    opacity: 1;
    font-size: 0;
    line-height: 0;
    pointer-events: none;
}
.home-card[data-page="accident"]::after  { background: radial-gradient(circle, rgba(232, 80, 58, .09), transparent 68%); }
.home-card[data-page="clearance"]::after { background: radial-gradient(circle, rgba(221, 134, 0, .09), transparent 68%); }
.home-card[data-page="vehicle"]::after   { background: radial-gradient(circle, rgba(11, 143, 208, .09), transparent 68%); }
.home-card[data-page="personnel"]::after { background: radial-gradient(circle, rgba(15, 157, 110, .09), transparent 68%); }
.home-card[data-page="roaditems"]::after { background: radial-gradient(circle, rgba(90, 99, 224, .09), transparent 68%); }
.home-card[data-page="news"]::after      { background: radial-gradient(circle, rgba(219, 47, 127, .09), transparent 68%); }
.home-card[data-page="warning"]::after   { background: radial-gradient(circle, rgba(207, 146, 6, .10), transparent 68%); }

/* 深色主题 */
:root[data-theme="dark"] .personnel-empty, :root[data-theme="dark"] .catalog-empty { color: #8b93a1; }
:root[data-theme="dark"] .personnel-empty::before, :root[data-theme="dark"] .catalog-empty::before {
    background: linear-gradient(135deg, rgba(90, 150, 255, .16), rgba(140, 110, 255, .14));
    box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .2);
}

/* ==========================================================================
   v47c · 空状态图标块内加线条图形（纯色块看起来像"没加载完"）
   ========================================================================== */
.wl-empty::before,
.stats-empty::before,
.personnel-empty::before,
.catalog-empty::before {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}
.wl-empty::before, .personnel-empty::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F54EB' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.1'/%3E%3Cpath d='M5.6 19.2c1-3.1 3.5-4.8 6.4-4.8s5.4 1.7 6.4 4.8'/%3E%3C/svg%3E");
}
.stats-empty::before, .catalog-empty::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F54EB' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4.8' width='16' height='14.4' rx='2.4'/%3E%3Cpath d='M4 9.6h16M8.4 13.6h7.2'/%3E%3C/svg%3E");
}

/* 车辆页"暂无出车记录"用的是 .loading */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    color: #8b93a1;
    font-size: 13.5px;
    text-align: center;
}
.loading::before {
    content: "";
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F54EB' stroke-opacity='0.5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5h14v9H5z'/%3E%3Cpath d='M5 12h3.5l1.2 1.8h4.6L15.5 12H19'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    box-shadow: inset 0 0 0 1px rgba(47, 84, 235
);
    background-color: rgba(47, 84, 235
);
    flex: 0 0 auto;
}

/* ==========================================================================
   v48 · 现代简约商务风 · 全局样式覆盖层
   ------------------------------------------------------------------
   主色 #2F54EB | 辅助色 #36CFC9 | 统一中性灰阶
   规格：卡片 12px 圆角 + 8px 柔和投影 + 24px 内边距
        标题字重 600、正文行高 1.6、按钮/输入框 hover 0.2s 过渡
   约束：不修改 HTML 结构、不修改 JS；全部用 !important 覆盖原样式
   ========================================================================== */

/* ---------- 0. 设计令牌 ---------- */
:root {
    --biz-primary: #2F54EB;
    --biz-primary-hover: #1D39C4;
    --biz-primary-active: #10239E;
    --biz-primary-soft: rgba(47, 84, 235, .08);
    --biz-accent: #36CFC9;
    --biz-accent-soft: rgba(54, 207, 201, .12);

    --biz-text: #1D2129;
    --biz-text-2: #4E5969;
    --biz-text-3: #86909C;

    --biz-bg: #F7F8FA;
    --biz-bg-2: #F2F3F5;
    --biz-card: #FFFFFF;
    --biz-border: #E5E6EB;
    --biz-border-2: #D9DCE3;

    --biz-danger: #F53F3F;
    --biz-danger-soft: #FFF1F0;
    --biz-success: #00B42A;
    --biz-warning: #FF7D00;

    --biz-r-card: 14px;
    --biz-r-ctl: 8px;
    --biz-shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --biz-shadow-hover: 0 6px 16px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
    --biz-pad: 24px;
    --biz-ease: .2s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 1. 页面底色：干净通透，移除原有氛围光 / 点阵 / 颗粒 ---------- */
html, body {
    background: var(--biz-bg) !important;
    background-image: none !important;
}
body::before, body::after { display: none !important; }
html::after { display: none !important; }
.app-content { background: transparent !important; background-image: none !important; }
.weekly-plan-banner { background-image: none !important; background: #fff !important; }

/* ---------- 2. 卡片 / 容器：12px 圆角 + 8px 柔和投影 + 24px 内边距 ---------- */
.admin-panel, .preview-panel, .vehicle-panel, .roaditem-add-panel, .roaditems-list,
.home-card, .stats-card, .stats-block, .personnel-group-card, .pg-item,
.admin-user-item, .wl-region-card, .batch-result,
.modal-box, .login-box, .lg-card, .wl-item, .record-item, .brief-brief-item {
    background: var(--biz-card) !important;
    border: 1px solid var(--biz-border) !important;
    border-radius: var(--biz-r-card) !important;
    box-shadow: var(--biz-shadow) !important;
    padding: var(--biz-pad) !important;
    transition: box-shadow var(--biz-ease), border-color var(--biz-ease), transform var(--biz-ease) !important;
}
/* 悬停：极轻抬升，保持克制 */
.home-card:hover, .stats-card:hover, .pg-item:hover, .admin-user-item:hover,
.record-item:hover, .wl-item:hover, .brief-brief-item:hover, .wl-region-card:hover {
    box-shadow: var(--biz-shadow-hover) !important;
    border-color: var(--biz-border-2) !important;
}
/* 首页卡片不再保留装饰光斑 */
.home-card::after, .home-card::before { display: none !important; }

/* 列表项内部元素不再重复撑高 */
.record-item > *:last-child, .wl-item > *:last-child { margin-bottom: 0 !important; }

/* ---------- 3. 按钮：统一组件样式 + 0.2s 过渡 ---------- */
.btn {
    border-radius: var(--biz-r-ctl) !important;
    border: 1px solid transparent !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 9px 18px !important;
    box-shadow: none !important;
    transition: background-color var(--biz-ease), color var(--biz-ease),
                border-color var(--biz-ease), box-shadow var(--biz-ease), transform var(--biz-ease) !important;
}
.btn-primary {
    background: var(--biz-primary) !important;
    border-color: var(--biz-primary) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background: var(--biz-primary-hover) !important;
    border-color: var(--biz-primary-hover) !important;
    box-shadow: 0 4px 12px rgba(47, 84, 235, .24) !important;
}
.btn-primary:active { background: var(--biz-primary-active) !important; }
.btn-secondary {
    background: #fff !important;
    border-color: var(--biz-border) !important;
    color: var(--biz-text-2) !important;
}
.btn-secondary:hover {
    background: var(--biz-primary-soft) !important;
    border-color: var(--biz-primary) !important;
    color: var(--biz-primary) !important;
}
.btn-small { padding: 6px 12px !important; font-size: 13px !important; border-radius: 7px !important; }
.btn-large { padding: 12px 26px !important; font-size: 15px !important; border-radius: 10px !important; }
.btn:disabled, .btn[disabled] { opacity: .45 !important; cursor: not-allowed !important; }

/* 内联色的按钮一并纳入体系：绿色→主色，红色→商务危险色 */
.btn[style*="34c759"], .btn[style*="00B42A"], .btn[style*="4cd964"] {
    background: var(--biz-primary) !important;
    border-color: var(--biz-primary) !important;
    color: #fff !important;
}
.btn[style*="34c759"]:hover, .btn[style*="00B42A"]:hover { background: var(--biz-primary-hover) !important; }
.btn[style*="dc2626"], .btn[style*="DC2626"] {
    background: var(--biz-danger-soft) !important;
    border-color: #FFCCC7 !important;
    color: var(--biz-danger) !important;
}
.btn[style*="dc2626"]:hover, .btn[style*="DC2626"]:hover {
    background: var(--biz-danger) !important;
    border-color: var(--biz-danger) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(245, 63, 63, .24) !important;
}

/* ---------- 4. 输入框 / 下拉 / 多行框：统一组件样式 ---------- */
input[type="text"], input[type="number"], input[type="password"], input[type="search"],
input[type="tel"], input[type="email"], input[type="date"], input[type="time"],
input[type="datetime-local"], select, textarea {
    background: #fff !important;
    border: 1px solid var(--biz-border) !important;
    border-radius: var(--biz-r-ctl) !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--biz-text) !important;
    box-shadow: none !important;
    transition: border-color var(--biz-ease), box-shadow var(--biz-ease), background-color var(--biz-ease) !important;
}
input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover,
input[type="search"]:hover, input[type="tel"]:hover, select:hover, textarea:hover {
    border-color: var(--biz-border-2) !important;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="email"]:focus,
input[type="date"]:focus, input[type="time"]:focus, select:focus, textarea:focus {
    border-color: var(--biz-primary) !important;
    box-shadow: 0 0 0 3px rgba(47, 84, 235, .12) !important;
    outline: none !important;
}
::placeholder { color: var(--biz-text-3) !important; opacity: 1 !important; }
label { color: var(--biz-text-2) !important; font-weight: 500 !important; }

/* ---------- 5. 字体层级：标题 600、正文行高 1.6、留白有呼吸感 ---------- */
h1, h2, h3, h4, h5,
.module-header h2, .admin-panel h3, .card-title, .stats-head h3,
.modal-head h3, .wl-title, .brief-title, .pg-info strong {
    font-weight: 600 !important;
    color: var(--biz-text) !important;
    letter-spacing: 0 !important;
}
body, .app-content, p, li, td, .module-tip, .record-meta, .wl-detail {
    line-height: 1.6 !important;
}
body { color: var(--biz-text) !important; font-size: 14.5px !important; }
.module-header { margin-bottom: 22px !important; }
.form-group { margin-bottom: 18px !important; }
.module-tip, .form-group .module-tip { color: var(--biz-text-3) !important; font-size: 12.5px !important; }

/* ---------- 6. 左侧 / 底部导航 ---------- */
.app-nav {
    background: #fff !important;
    border-right: 1px solid var(--biz-border) !important;
}
.nav-item {
    border-radius: var(--biz-r-ctl) !important;
    color: var(--biz-text-2) !important;
    font-weight: 500 !important;
    transition: background-color var(--biz-ease), color var(--biz-ease) !important;
}
.nav-item:hover { background: var(--biz-primary-soft) !important; color: var(--biz-primary) !important; }
.nav-item.active {
    background: var(--biz-primary-soft) !important;
    color: var(--biz-primary) !important;
    box-shadow: none !important;
}
.nav-item.active .nav-txt, .nav-item.active .nav-ico { color: var(--biz-primary) !important; }

/* ---------- 7. 顶部标题栏 ---------- */
.app-header {
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid var(--biz-border) !important;
    box-shadow: none !important;
}
.support-bar { background: #fff !important; border-bottom: 1px solid var(--biz-border) !important; color: var(--biz-text-3) !important; }
.clock { color: var(--biz-primary) !important; }
.weekly-plan-banner { border: 1px solid var(--biz-border) !important; border-radius: var(--biz-r-card) !important; }

/* ---------- 8. 表格 ---------- */
.batch-table, .stats-table { border-radius: var(--biz-r-card) !important; overflow: hidden !important; }
.batch-table th, .stats-table th {
    background: var(--biz-bg) !important;
    color: var(--biz-text-2) !important;
    font-weight: 600 !important;
    border-color: var(--biz-border) !important;
}
.batch-table td, .stats-table td { border-color: var(--biz-border) !important; padding: 12px 14px !important; }
.batch-table tbody tr:hover, .stats-table tbody tr:hover { background: var(--biz-primary-soft) !important; }

/* ---------- 9. 后台分区标签 ---------- */
.admin-nav-bar { background: rgba(247, 248, 250, .94) !important; border-bottom: 1px solid var(--biz-border) !important; box-shadow: none !important; }
.admin-nav-item { border-radius: var(--biz-r-ctl) !important; color: var(--biz-text-2) !important; }
.admin-nav-item:hover { background: var(--biz-primary-soft) !important; color: var(--biz-primary) !important; }
.admin-nav-item.active {
    background: var(--biz-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.admin-nav-toggle { border-color: var(--biz-border) !important; border-radius: var(--biz-r-ctl) !important; }
.admin-nav-bar.open .admin-nav-toggle { border-color: var(--biz-primary) !important; box-shadow: 0 0 0 3px rgba(47, 84, 235, .12) !important; }
.admin-body > .admin-panel { box-shadow: var(--biz-shadow) !important; }

/* ---------- 10. 弹窗 / 遮罩 ---------- */
.modal-overlay { background: rgba(29, 33, 41, .45) !important; backdrop-filter: blur(2px) !important; }
.modal-box { box-shadow: 0 12px 32px rgba(0, 0, 0, .12) !important; }
.modal-head { border-bottom: 1px solid var(--biz-border) !important; }

/* ---------- 11. 语义色块收敛为商务色 ---------- */
.badge { border-radius: 6px !important; box-shadow: none !important; font-weight: 500 !important; }
.badge-done { background: rgba(0, 180, 42, .10) !important; color: var(--biz-success) !important; }
.badge-out { background: rgba(255, 125, 0, .12) !important; color: var(--biz-warning) !important; }
.wl-defense { background: rgba(0, 180, 42, .06) !important; border-color: rgba(0, 180, 42, .16) !important; color: #0A8A24 !important; }
.wl-danger-banner { background: var(--biz-danger-soft) !important; border-color: #FFCCC7 !important; color: #CB2634 !important; }
.brief-alert { background: #FFF7E8 !important; border-color: #FFE4BA !important; color: #B25E00 !important; }
.brief-alert.danger { background: var(--biz-danger-soft) !important; border-color: #FFCCC7 !important; color: #CB2634 !important; }
.brief-header-card { background: var(--grad) !important; box-shadow: var(--biz-shadow) !important; border-radius: var(--biz-r-card) !important; }

/* ---------- 12. 空状态 / 占位 ---------- */
.wl-empty, .loading, .stats-empty, .personnel-empty, .catalog-empty {
    color: var(--biz-text-3) !important;
}
.wl-empty::before, .stats-empty::before, .personnel-empty::before, .catalog-empty::before {
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px var(--biz-border) !important;
}

/* ---------- 13. 滚动条 / 焦点环 ---------- */
::-webkit-scrollbar-thumb { background: #D9DCE3 !important; background-clip: content-box !important; }
::-webkit-scrollbar-thumb:hover { background: #C2C7D0 !important; background-clip: content-box !important; }
:focus-visible { outline: 2px solid var(--biz-primary) !important; outline-offset: 2px !important; }

/* ---------- 14. 登录页：干净通透的商务底 ---------- */
#login-page {
    background: linear-gradient(160deg, #F7F8FA 0%, #EEF3FF 46%, #EAF8F7 100%) !important;
}
#login-page .lg-bg { display: none !important; }
.lg-mark { background: var(--biz-primary) !important; border-radius: 14px !important; }
.login-box .logo, .lg-card .logo { color: var(--biz-text) !important; font-weight: 600 !important; }
.lg-input input { border-radius: var(--biz-r-ctl) !important; }
.lg-submit {
    background: var(--biz-primary) !important;
    border-radius: var(--biz-r-ctl) !important;
    box-shadow: 0 4px 14px rgba(47, 84, 235, .22) !important;
    transition: background-color var(--biz-ease), box-shadow var(--biz-ease) !important;
}
.lg-submit:hover { background: var(--biz-primary-hover) !important; box-shadow: 0 6px 18px rgba(47, 84, 235, .3) !important; }

/* ---------- 15. 深色模式：保持可读 ---------- */
:root[data-theme="dark"] {
    --biz-bg: #17181C;
    --biz-card: #1F2126;
    --biz-border: #2E3138;
    --biz-border-2: #3A3E46;
    --biz-text: #E8EAED;
    --biz-text-2: #B7BCC4;
    --biz-text-3: #8A9099;
    --biz-shadow: 0 2px 8px rgba(0, 0, 0, .32);
    --biz-shadow-hover: 0 6px 16px rgba(0, 0, 0, .4);
}
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
    background: #26282E !important;
    border-color: var(--biz-border) !important;
    color: var(--biz-text) !important;
}
:root[data-theme="dark"] .app-nav,
:root[data-theme="dark"] .app-header,
:root[data-theme="dark"] .support-bar { background: #1B1D22 !important; }
:root[data-theme="dark"] .admin-nav-bar { background: rgba(23, 24, 28, .94) !important; }
:root[data-theme="dark"] .batch-table th, :root[data-theme="dark"] .stats-table th { background: #26282E !important; }
:root[data-theme="dark"] #login-page { background: linear-gradient(160deg, #17181C 0%, #1A2030 50%, #16262A 100%) !important; }

/* ==========================================================================
   v48b · 修正与统一
   1) 导航选中态：原 v34 为每个页面写了 `.nav-item[data-page="x"].active` 渐变，
      特异性高于 `.nav-item.active`，导致浅色底失效而文字已变主色 → 蓝底蓝字。
      这里用同特异性（含 [data-page]）+ 置后 + !important 覆盖为纯主色实心 + 白字。
   2) 首页卡片图标：收敛到主色系，符合"统一主色 + 中性灰阶"的商务规范。
   ========================================================================== */

.nav-item.active,
.nav-item[data-page].active {
    background: var(--biz-primary) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(47, 84, 235, .22) !important;
}
.nav-item.active .nav-txt, .nav-item.active .nav-ico,
.nav-item[data-page].active .nav-txt, .nav-item[data-page].active .nav-ico {
    color: #fff !important;
}
.nav-item.active:hover,
.nav-item[data-page].active:hover {
    background: var(--biz-primary-hover) !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .nav-item.active, .nav-item[data-page].active {
        background: var(--biz-primary) !important;
        background-image: none !important;
    }
}

/* 首页卡片图标：统一主色系 */
.home-card[data-page] .card-icon {
    color: var(--biz-primary) !important;
    background: rgba(47, 84, 235, .07) !important;
    box-shadow: inset 0 0 0 1px rgba(47, 84, 235, .12) !important;
}
.home-card[data-page] .card-icon::after { display: none !important; }

/* 品牌标识与时钟同步主色 */
.brand-mark { background: var(--biz-primary) !important; }

/* ==========================================================================
   v48c · 强调色统一到主色
   原 v34 为每个页面单独配了标题装饰色（事故橙、清障黄、新闻粉…），
   商务风要求统一 → 全部收敛到 #2F54EB；数据语义色（预警等级等）保持不动。
   ========================================================================== */

/* 1. 模块标题装饰竖条 */
#page-home.active .module-header h2::before,
#page-accident.active .module-header h2::before,
#page-clearance.active .module-header h2::before,
#page-vehicle.active .module-header h2::before,
#page-personnel.active .module-header h2::before,
#page-roaditems.active .module-header h2::before,
#page-news.active .module-header h2::before,
#page-warning.active .module-header h2::before,
#page-admin.active .module-header h2::before,
.module-header h2::before {
    background: var(--biz-primary) !important;
    background-image: none !important;
}

/* 2. 标签页（表单类型 / 预览切换）选中态 */
.sub-tab.active,
.preview-tab.active,
.preview-tabs .preview-tab.active {
    background: var(--biz-primary) !important;
    background-image: none !important;
    border-color: var(--biz-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.sub-tab:hover:not(.active),
.preview-tab:hover:not(.active) {
    color: var(--biz-primary) !important;
    border-color: rgba(47, 84, 235, .45) !important;
}

/* 3. 仪表/进度类强调元素 */
.stats-bar-fill { background: var(--biz-primary) !important; }
.stats-bar-track { background: var(--biz-bg-2) !important; }

/* 4. 表格与步骤类的强调文字 */
.record-actions .btn-secondary:hover { color: var(--biz-primary) !important; }

/* 5. 让"添加/新建"类的主操作始终落在主色上 */
.roaditem-add-panel button[type="submit"],
.form-actions button[type="submit"] {
    background: var(--biz-primary) !important;
    border-color: var(--biz-primary) !important;
    color: #fff !important;
}
.roaditem-add-panel button[type="submit"]:hover,
.form-actions button[type="submit"]:hover {
    background: var(--biz-primary-hover) !important;
    border-color: var(--biz-primary-hover) !important;
}

/* ==========================================================================
   v48d · 渐变文字 → 实色
   原设计多处用 background-clip:text 做渐变字，主色切换后失效/发白看不清
   （`.logo`、首页副标题尤为明显）。商务风直接用实色文字。
   注意：不碰横幅内的白字（.brief-title 等，它们在深色底上）。
   ========================================================================== */
.logo,
.home-welcome h1,
.home-welcome p,
.home-subtitle {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
.logo { color: var(--biz-text) !important; font-weight: 600 !important; }
.home-welcome h1 { color: var(--biz-text) !important; }
.home-welcome p,
.home-subtitle { color: var(--biz-text-3) !important; }

/* 登录卡内的品牌名同步 */
.lg-card .logo, .login-box .logo { color: var(--biz-text) !important; }

/* ==========================================================================
   v48e · 主按钮彻底统一为主色
   v34 层用 `.btn-primary { background: var(--brand-grad) !important; filter: ... }`，
   与 v48 同特异性且同样 important，优先级依赖顺序容易反复；
   这里用 `.btn.btn-primary` 提高特异性彻底压住，并清掉渐变与滤镜。
   ========================================================================== */
.btn.btn-primary,
.btn-primary,
.btn-small.btn-primary,
.btn-large.btn-primary,
.btn-primary.truck-type-btn {
    background: var(--biz-primary) !important;
    background-image: none !important;
    border-color: var(--biz-primary) !important;
    color: #fff !important;
    filter: none !important;
    box-shadow: 0 2px 8px rgba(47, 84, 235, .20) !important;
}
.btn.btn-primary:hover,
.btn-primary:hover,
.btn-small.btn-primary:hover,
.btn-large.btn-primary:hover {
    background: var(--biz-primary-hover) !important;
    background-image: none !important;
    border-color: var(--biz-primary-hover) !important;
    filter: none !important;
    box-shadow: 0 4px 12px rgba(47, 84, 235, .28) !important;
}
.btn.btn-primary:active { background: var(--biz-primary-active) !important; }

/* 危险按钮同样提高特异性，避免被上面的同级规则反复覆盖 */
.btn.btn-small[style*="dc2626"] {
    background: var(--biz-danger-soft) !important;
    background-image: none !important;
    border-color: #FFCCC7 !important;
    color: var(--biz-danger) !important;
    filter: none !important;
    box-shadow: none !important;
}
.btn.btn-small[style*="dc2626"]:hover {
    background: var(--biz-danger) !important;
    border-color: var(--biz-danger) !important;
    color: #fff !important;
}

/* ==========================================================================
   v48f · 覆盖各页面的"主题渐变按钮"
   v34 为每个页面写了 `#page-x.active .btn-primary { background: linear-gradient(var(--pg), var(--pg2)) }`，
   这是 id 级特异性（1,1,0），高于一切 class 组合，导致主按钮呈蓝→青渐变（青端看着发绿）。
   这里用同样的 id 级特异性 + 置后 + !important 收敛为纯主色。
   ========================================================================== */
#page-home.active .btn-primary,      #page-home.active .btn.btn-primary,
#page-accident.active .btn-primary,  #page-accident.active .btn.btn-primary,
#page-clearance.active .btn-primary, #page-clearance.active .btn.btn-primary,
#page-vehicle.active .btn-primary,   #page-vehicle.active .btn.btn-primary,
#page-personnel.active .btn-primary, #page-personnel.active .btn.btn-primary,
#page-roaditems.active .btn-primary, #page-roaditems.active .btn.btn-primary,
#page-news.active .btn-primary,      #page-news.active .btn.btn-primary,
#page-warning.active .btn-primary,   #page-warning.active .btn.btn-primary,
#page-admin.active .btn-primary,     #page-admin.active .btn.btn-primary {
    background: var(--biz-primary) !important;
    background-image: none !important;
    border-color: var(--biz-primary) !important;
    color: #fff !important;
    filter: none !important;
    box-shadow: 0 2px 8px rgba(47, 84, 235, .20) !important;
}
#page-home.active .btn-primary:hover,
#page-accident.active .btn-primary:hover,
#page-clearance.active .btn-primary:hover,
#page-vehicle.active .btn-primary:hover,
#page-personnel.active .btn-primary:hover,
#page-roaditems.active .btn-primary:hover,
#page-news.active .btn-primary:hover,
#page-warning.active .btn-primary:hover,
#page-admin.active .btn-primary:hover {
    background: var(--biz-primary-hover) !important;
    background-image: none !important;
    border-color: var(--biz-primary-hover) !important;
    filter: none !important;
    box-shadow: 0 4px 12px rgba(47, 84, 235, .28) !important;
}

/* ==========================================================================
   v49 · 布局填充与视觉层次
   1) 主内容区限宽居中，两侧不再大片留白
   2) 轻微主色氛围渐变背景，打破纯白空洞
   3) 模块标题下加细分割线，模块节奏清晰
   4) 首页欢迎区卡片化，零散内容整合进容器
   （纯 CSS 覆盖，不改 DOM / JS）
   ========================================================================== */

/* ---------- 1. 主内容区：限宽 + 居中 ---------- */
.app-content {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* ---------- 2. 页面背景：极轻微的主色氛围（顶部一层淡光） ---------- */
body {
    background:
        radial-gradient(1100px 360px at 50% -120px, rgba(47, 84, 235, .05), transparent 62%),
        linear-gradient(180deg, #F7F8FC 0%, #F5F6FA 100%) !important;
    background-attachment: fixed !important;
}
#login-page {
    background: linear-gradient(160deg, #F7F8FC 0%, #EEF1FF 46%, #EAF8F7 100%) !important;
}

/* ---------- 3. 模块标题：下方细分割线 ---------- */
.module-header {
    border-bottom: 1px solid var(--biz-border) !important;
    padding-bottom: 14px !important;
    margin-bottom: 24px !important;
}

/* ---------- 4. 首页欢迎区卡片化 ---------- */
.home-welcome {
    background: var(--biz-card) !important;
    border: 1px solid var(--biz-border) !important;
    border-radius: var(--biz-r-card) !important;
    box-shadow: var(--biz-shadow) !important;
    padding: 30px 24px 26px !important;
    margin-bottom: 22px !important;
}
.home-version { margin-top: 16px !important; }

/* ---------- 5. 登录卡在新背景上的阴影略加强，层次分明 ---------- */
.login-box, .lg-card {
    box-shadow: 0 8px 28px rgba(29, 57, 196, .10) !important;
}

/* ==========================================================================
   v49b · 收尾两处
   1) 首页卡片组撑满欢迎卡宽度（原约 550px，在 1320px 容器里偏挤）
   2) 表单类型标签（有路产/无路产等）选中态：v34 存在 id 级
      `#page-x.active .sub-tab.active` 彩色规则，用同等特异性统一为主色
   ========================================================================== */
.home-cards {
    max-width: 920px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#page-home.active .sub-tab.active,
#page-accident.active .sub-tab.active,
#page-clearance.active .sub-tab.active,
#page-vehicle.active .sub-tab.active,
#page-personnel.active .sub-tab.active,
#page-roaditems.active .sub-tab.active,
#page-news.active .sub-tab.active,
#page-warning.active .sub-tab.active,
#page-admin.active .sub-tab.active,
.sub-tab.active {
    background: var(--biz-primary) !important;
    background-image: none !important;
    border-color: var(--biz-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
}
.sub-tab:hover:not(.active) {
    color: var(--biz-primary) !important;
    border-color: rgba(47, 84, 235, .45) !important;
    background: rgba(47, 84, 235, .06) !important;
}

/* ==========================================================================
   v49c · 首页卡片网格定型：桌面 4 列，第 7 张卡跨 2 列正好补满第二行
   （原 auto-fit 在拉宽容器后自动排成 6+1，视觉散）
   ========================================================================== */
.home-cards {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}
.home-card:last-child { grid-column: span 2 !important; }

@media (max-width: 768px) {
    .home-cards { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .home-card:last-child { grid-column: span 2 !important; }
}