/* ================================================
   汽车产品体验管理系统 - 样式
   ================================================ */

/* 默认科技蓝主题 */
:root, [data-theme="tech-blue"] {
    --primary: #1a73e8;
    --primary-dark: #1557b0;
    --primary-light: #e8f0fe;
    --secondary: #5f6368;
    --success: #34a853;
    --danger: #ea4335;
    --warning: #fbbc04;
    --bg: #f8f9fa;
    --card-bg: #ffffff;
    --text: #202124;
    --text-secondary: #5f6368;
    --border: #dadce0;
    --shadow: 0 1px 3px rgba(0,0,0,0.12);
    --radius: 8px;
    --tabbar-height: 60px;

    /* 字号体系 */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 24px;

    /* 间距体系 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* 圆角体系 */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* 阴影层级 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.16);

    /* 过渡曲线 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* 字体 */
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
}

/* 专业蓝主题（麦肯锡风格） */
[data-theme="professional"] {
    --primary: #2c3e50;
    --primary-dark: #1a252f;
    --primary-light: #ecf0f1;
    --secondary: #7f8c8d;
    --success: #27ae60;
    --danger: #c0392b;
    --warning: #f39c12;
    --bg: #f5f6f7;
    --card-bg: #ffffff;
    --text: #2c3e50;
    --text-secondary: #5d6d7e;
    --border: #bdc3c7;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --radius: 4px;
}

/* 暗色主题 */
[data-theme="dark"] {
    --primary: #4a90d9;
    --primary-dark: #3a7bc8;
    --primary-light: #2c3e50;
    --secondary: #95a5a6;
    --success: #2ecc71;
    --danger: #e74c3c;
    --warning: #f1c40f;
    --bg: #1e1e1e;
    --card-bg: #2d2d2d;
    --text: #e0e0e0;
    --text-secondary: #a0a0a0;
    --border: #404040;
    --shadow: 0 2px 8px rgba(0,0,0,0.4);
    --radius: 6px;
}

/* 清新绿主题 */
[data-theme="fresh-green"] {
    --primary: #27ae60;
    --primary-dark: #1e8449;
    --primary-light: #e8f8f0;
    --secondary: #7f8c8d;
    --success: #2ecc71;
    --danger: #c0392b;
    --warning: #f39c12;
    --bg: #fafbf9;
    --card-bg: #ffffff;
    --text: #2c3e50;
    --text-secondary: #5d6d7e;
    --border: #d5e5d9;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --radius: 6px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* 搜索高亮 */
mark {
    background: #fff3cd;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

html, body {
    height: 100%;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
}

#app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ================================================
   TabBar
   ================================================ */
.tabbar {
    display: flex;
    height: var(--tabbar-height);
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 4px;
}

.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px 4px;
    transition: color 0.2s;
}

.tab.active {
    color: var(--primary);
}

.tab .icon {
    font-size: 22px;
    line-height: 1;
}

.tab .label {
    font-size: 11px;
    font-weight: 500;
}

.pages {
    flex: 1;
    overflow: hidden;
}

/* ================================================
   页面
   ================================================ */
.page {
    display: none;
    padding: 16px 8px;
    overflow: hidden;
}

.page.active {
    display: flex;
    flex-direction: column;
    height: var(--vh, 100vh);
    height: 100dvh;
    padding-top: 12px;
}

/* ================================================
   测评执行 Tab 内容容器
   ================================================ */
.eval-tab-content {
    animation: fadeIn 0.2s ease;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}

/* iOS 全屏模式（刘海屏底部区域） */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .eval-tab-content {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes cardPulse {
    0%, 100% { border-left-color: var(--primary); }
    50% { border-left-color: var(--primary-light); }
}
@keyframes sceneCardExit {
    to { opacity: 0; transform: scale(0.96); }
}
@keyframes sceneCardEnter {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes pillActivate {
    0% { transform: scale(1); }
    40% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.page-content {
    padding: 0 4px calc(var(--tabbar-height) + 20px);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ================================================
   体验要素列表
   ================================================ */
.base-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    transition: opacity 0.15s, background 0.15s, box-shadow 0.15s;
    /* 修复移动端列表区域无法滑动 - 允许垂直滚动 */
    touch-action: pan-y;
    user-select: none;
}

.base-list-item:last-child {
    border-bottom: none;
}

.base-list-item.dragging {
    opacity: 0.5;
    background: var(--primary-light);
}

.base-list-item.drag-over {
    border-top: 3px solid var(--primary);
}

.base-list-item.drag-over-invalid {
    border-top: 3px solid #e53935;
}

/* 测评体系表格拖拽样式 */
/* 用车场景排序箭头按钮 */
/* 排序按钮样式 */
.btn-move-up,
.btn-move-down {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 10px;
    color: var(--secondary);
    margin: 0 1px;
    line-height: 1;
}

.btn-move-up:hover,
.btn-move-down:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* 禁用状态的排序按钮 */
.btn-move-up.disabled,
.btn-move-down.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* 排序数字显示 */
.system-drag-row .sort-num {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    font-size: 11px;
    color: var(--text-light);
    padding: 0 4px;
}

.base-item-display {
    flex: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    min-width: 0;
}

.base-item-display:hover {
    opacity: 0.7;
}

.item-label {
    font-size: 14px;
    color: var(--text);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sort-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sort-btns .sort-btn,
.sort-btns .delete-btn {
    opacity: 0.4;
    transition: opacity 0.15s;
}

.base-list-item:hover .sort-btns .sort-btn,
.base-list-item:hover .sort-btns .delete-btn {
    opacity: 1;
}

.drag-handle {
    cursor: grab;
    padding: 8px 12px;
    color: #999;
    font-size: 18px;
    user-select: none;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
    touch-action: none;
}

@media (hover: hover) {
    .base-list-item:hover .drag-handle {
        opacity: 1;
    }
}

/* 移动端始终显示拖拽手柄和排序按钮 */
@media (hover: none) {
    .drag-handle {
        opacity: 1;
        color: #aaa;
    }
    .sort-btns .sort-btn,
    .sort-btns .delete-btn {
        opacity: 1;
    }
}

.drag-handle:active {
    cursor: grabbing;
}

/* 内联编辑样式 */
.base-item-edit {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.base-item-edit .edit-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px; /* 更大便于触摸 */
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    box-sizing: border-box;
}

.base-item-edit .edit-journey-select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    box-sizing: border-box;
}

.edit-actions {
    display: flex;
    gap: 8px;
}

.edit-actions .btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 14px;
}

/* 子级属性样式 */
.base-list-item.sub-item {
    padding-left: 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.base-list-item.sub-item .item-label {
    color: var(--text-secondary);
}

/* 添加子级按钮 */
.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.sub-parent-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* 产品属性分组 */
.attr-group {
    margin-bottom: 8px;
}

.attr-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    cursor: pointer;
    user-select: none;
}

.checkbox-item.sub {
    padding-left: 20px;
    font-size: 13px;
}

/* 专属体验要求展开项 */
.special-system-item {
    border-bottom: 1px solid var(--border);
}
.special-system-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
}
.special-system-header .checkbox-item {
    flex: 1;
    min-width: 0;
    border: none;
    margin: 0;
}
.special-expand-btn {
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    user-select: none;
}
.special-expand-btn:hover {
    background: var(--bg);
}
.special-detail {
    padding: 2px 12px 2px 32px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.3;
    background: var(--bg);
    border-radius: 6px;
    margin: 0 8px 6px 8px;
}
.special-detail > div {
    white-space: pre-line;
}

.sort-btn, .delete-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
}

.sort-btn:active, .delete-btn:active {
    background: var(--border);
}

.delete-btn {
    color: var(--danger);
}

.special-toggle-btn {
    font-size: 9px;
    padding: 1px 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: transparent;
    color: #999;
    cursor: pointer;
    line-height: 1.5;
    vertical-align: middle;
    transition: all .2s;
}
.special-toggle-btn.active {
    background: #e91e63;
    color: #fff;
    border-color: #e91e63;
}
.special-toggle-btn:hover {
    border-color: #e91e63;
    color: #e91e63;
}
.special-toggle-btn.active:hover {
    background: #c2185b;
    border-color: #c2185b;
    color: #fff;
}

/* ================================================
   页面头部
   ================================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.page-header h1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

/* 任务页已选计数空态不占位，避免顶部出现额外空隙 */
#selected-count:empty {
    display: none;
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* 页头动作按钮：无边框极简样式（仅图标+文字），不影响页面内其它 .btn-secondary */
.page-header .btn-secondary,
.page-header .dashboard-toggle-btn,
.page-header .user-menu-btn {
    background: none;
    border: none;
    box-shadow: none;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1;
}
.page-header .btn-secondary,
.page-header .dashboard-toggle-btn {
    color: var(--primary);
}
.page-header .user-menu-btn {
    color: var(--text);
}
.page-header .btn-secondary:hover,
.page-header .dashboard-toggle-btn:hover,
.page-header .user-menu-btn:hover {
    background: var(--hover-bg);
}

/* 页头图标：统一 SVG 尺寸与对齐 */
.page-header .btn,
.page-header .dashboard-toggle-btn,
.page-header .user-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.page-header .hdr-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.page-header .user-avatar {
    line-height: 1;
}

/* ================================================
   统一线性图标 .ico（单色 SVG，尺寸由宽高属性决定）
   ================================================ */
.ico {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    flex-shrink: 0;
    display: inline-block;
}
/* 底部导航图标 */
.tab .icon .ico {
    width: 24px;
    height: 24px;
    vertical-align: -4px;
}
/* 页面标题图标 */
.page-header h1 .ico {
    width: 22px;
    height: 22px;
    vertical-align: -5px;
    margin-right: 6px;
}
/* 弹窗/区块 h2 标题图标 */
h2 .ico {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    margin-right: 4px;
}
/* 下拉菜单图标 */
.dropdown-item .ico {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}
/* 页头按钮内 uiIcon（无边框极简按钮） */
.page-header .btn .ico,
.page-header .dashboard-toggle-btn .ico,
.page-header .user-menu-btn .ico {
    width: 16px;
    height: 16px;
}
/* 日历事件卡片/通知面板内的小图标 */
.calendar-event-vehicle .ico,
.calendar-event-location .ico,
.calendar-event-time .ico,
.cell-person .ico,
.notif-item-meta .ico {
    vertical-align: -2px;
    margin-right: 2px;
}

/* ================================================
   统计卡片
   ================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow);
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 分数形式的统计卡片 */
.stat-score .stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.stat-score .stat-value #stat-tasks-done,
.stat-score .stat-value #stat-projects-done {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.stat-sep {
    font-size: 20px;
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0 1px;
}

.stat-score .stat-value #stat-tasks-total,
.stat-score .stat-value #stat-projects-total {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ================================================
   区块
   ================================================ */
.section {
    margin-bottom: 16px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

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

.section-header h2 {
    font-size: 16px;
    font-weight: 600;
}

/* ================================================
   任务卡片
   ================================================ */
.task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.task-card:hover {
    box-shadow: var(--shadow-md);
}

.task-card.selectable {
    cursor: default;
}

.task-card.selectable:hover {
    box-shadow: var(--shadow-sm);
}

.report-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
    position: relative;
    overflow: hidden;
}
.report-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-light), var(--primary));
    border-radius: 0 2px 2px 0;
}

/* 首页报告区域 - 支持上下滚动 */
.scrollable-reports-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.scrollable-reports-list::-webkit-scrollbar {
    width: 6px;
}

.scrollable-reports-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.scrollable-reports-list::-webkit-scrollbar-track {
    background: transparent;
}

.report-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-left: 4px;
}

.report-progress-text-pulse {
    animation: progressPulse 1.5s ease-in-out infinite;
}

.report-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}

.report-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.report-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 12px;
    padding-left: 4px;
}

.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.task-no {
    font-size: 12px;
    color: var(--text-secondary);
}

.task-score {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary);
}

.task-checkbox {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.task-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.task-card-row {
    display: flex;
    align-items: center;
}

.task-summary {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    line-height: 1.4;
}

.task-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--secondary);
    color: #fff;
}

.task-status.in-progress {
    background: var(--warning);
    color: #000;
}

.task-status.completed {
    background: var(--success);
    color: #fff;
}

.task-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.task-icons {
    flex-shrink: 0;
}

.task-icons .edit-icon,
.task-icons .delete-icon,
.task-icons .view-detail-icon {
    margin-left: 8px;
}

.edit-icon, .delete-icon {
    font-size: 12px;
    cursor: pointer;
    opacity: 0.6;
    padding: 2px;
}

.edit-icon:hover, .delete-icon:hover {
    opacity: 1;
}

.task-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.task-meta > .btn {
    margin-left: auto;
}

.task-meta > .delete-icon {
    margin-left: auto;
}

.task-meta-right {
    justify-content: flex-end;
}

.task-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.task-card-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.task-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* 任务卡片参与者进度 */
.task-card .task-participants {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.task-card .participant-label {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
    cursor: pointer;
    user-select: none;
}
.task-card .participant-label:hover {
    color: var(--primary, #007aff);
}

/* 参与者展开箭头 */
.participant-arrow {
    display: inline-block;
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.2s ease;
}
.task-card .task-participants.expanded .participant-arrow {
    transform: rotate(180deg);
}

/* 参与者列表默认隐藏，展开时显示 */
.task-card .task-participants:not(.expanded) .participant-list {
    display: none;
}
.task-card .task-participants.expanded .participant-list {
    display: flex;
}

.task-card .participant-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-card .participant-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.task-card .participant-name {
    width: 50px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-card .participant-progress {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    /* 统一长度：扣除百分比和删除图标占位 */
    min-width: 80px;
}

.task-card .participant-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #007aff 0%, #34c759 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

@media (prefers-color-scheme: dark) {
    .task-card .participant-progress .progress-bar {
        background: linear-gradient(90deg, #0a84ff 0%, #30d158 100%);
    }
}

.task-card .participant-percent {
    width: 30px;
    text-align: right;
    color: var(--text-secondary);
}

/* 删除图标占位：统一预留18px，即使没有删除图标也占位 */
.task-card .participant-delete {
    width: 18px;
    text-align: center;
}

.task-card .participant-more {
    font-size: 11px;
    color: var(--text-light);
    padding-left: 58px;
}

/* ================================================
   按钮
   ================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.btn-warning {
    background: #FFC107;
    color: #333;
    border: 1px solid #e0a800;
}

.btn-warning:hover {
    background: #e0a800;
    color: #fff;
}

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

.btn-block {
    width: 100%;
}

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

/* ================================================
   表单
   ================================================ */
.form-group {
    margin-bottom: 14px;
}

.form-group.text-content > div {
    white-space: pre-wrap;
    word-break: break-word;
}

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

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    transition: all 0.2s var(--ease-out);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    /* 自动高度调节 */
    min-height: 40px;
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,0.15), inset 0 1px 2px rgba(0,0,0,0.05);
    outline: none;
}

/* 复选框不需要最小高度限制 */
.form-group input[type="checkbox"] {
    min-height: unset;
    width: 18px;
    height: 18px;
}

/* AI分析弹窗中的用户旅程和过程任务下拉框保持单行 */
#ai-search-modal select#ai-journey,
#ai-search-modal select#ai-task {
    min-height: unset;
    height: 36px;
    padding: 6px 12px;
}

/* 自动高度文本框 */
textarea.auto-height {
    min-height: 40px;
    overflow-x: hidden;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}

.form-group input[type="number"] {
    width: 100%;
}

/* 添加/编辑表单 */
.add-item-form,
.edit-item-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: var(--radius);
}

.add-item-form input,
.edit-item-form input[type="text"],
.edit-item-form select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    transition: all 0.2s;
}

.add-item-form input:focus,
.edit-item-form input[type="text"]:focus,
.edit-item-form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.checkbox-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 13px;
    background: var(--bg);
    border-radius: 6px;
    cursor: pointer;
}

.checkbox-item input {
    display: none;
}

.checkbox-item.selected {
    background: var(--primary);
    color: #fff;
}

/* 单选按钮组 */
.radio-group {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.radio-item {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 13px;
    background: var(--bg);
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border);
    width: fit-content;
}

.radio-item input {
    margin-right: 6px;
    width: 14px;
    height: 14px;
    padding: 0;
    min-height: unset;
    border: none;
    background: none;
    box-shadow: none;
}

.radio-item span {
    font-weight: 500;
}

.radio-item small {
    color: var(--text-secondary);
    font-size: 11px;
    margin-left: 4px;
}

.radio-item:has(input:checked) {
    border-color: var(--primary);
    background: rgba(26, 115, 232, 0.1);
}

/* 时间范围输入 */
.time-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-range input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}

.time-range span {
    color: var(--text-secondary);
}

/* 执行记录列表 */
.executions-section {
    background: var(--bg);
    border-radius: 12px;
    padding: 0 16px;
    margin-bottom: 16px;
}

.executions-section .section-header h3 {
    font-size: 15px;
    font-weight: 500;
}

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

.execution-card .execution-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.execution-card .execution-task {
    font-weight: 500;
    font-size: 14px;
}

.execution-card .execution-status {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.execution-status.in_progress {
    background: #e3f2fd;
    color: #1565c0;
}

.execution-status.completed {
    background: #e8f5e9;
    color: #2e7d32;
}

.execution-card .execution-info {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 16px;
}

.execution-card .execution-info span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.execution-card .execution-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.execution-card .execution-progress {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.execution-card .execution-progress .progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ================================================
   空状态
   ================================================ */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.empty-state p {
    margin-bottom: 12px;
}

/* ================================================
   弹窗
   ================================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 200;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal.active {
    display: flex;
    /* 修复安卓弹性滚动穿透 */
    overscroll-behavior: contain;
    /* iOS Safari 100dvh 问题：使用 -webkit-fill-available 作为回退 */
    height: 100dvh;
    height: -webkit-fill-available;
    overflow-y: hidden;
    animation: fadeIn 0.2s var(--ease-out);
}

/* 筛选弹窗：去掉 overflow 裁剪，避免原生 select 下拉选项被遮挡 */
#filter-modal.modal.active {
    overflow-y: auto;
}
#filter-modal .modal-content {
    overflow: visible !important;
    padding-bottom: 12px;
}

.modal.active .modal-content {
    animation: scaleIn 0.25s var(--ease-out);
}

/* modal-full 在 active 状态下填满视口 */
.modal.active .modal-content.modal-full {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    height: 100dvh;
    height: 100%; /* 兼容 Chrome 地址栏 */
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-content {
    background: var(--card-bg);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    /* 统一自适应高度：不拉伸占满屏幕，短内容取自然高度，长内容内部滚动 */
    max-height: 85vh;
    max-height: calc(100dvh - 40px);
    overflow: visible;
    display: flex;
    flex-direction: column;
    /* 修复移动端弹窗内容显示不全 */
    height: auto;
    flex: none;
    /* 短内容垂直居中（modal-full 用 align-self:stretch 覆盖） */
    align-self: center;
    /* iOS Safari需要min-height:0让flex布局正确计算 */
    min-height: 0;
}

/* modal-full 模式下内容填满 */
.modal.active .modal-content.modal-full {
    flex: 1;
    max-width: 100%;
    max-height: none;
    height: auto;
    border-radius: 0;
}

.modal-full {
    /* 填满整个视口 - 使用 flex 布局 */
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

.modal-lg .modal-content {
    max-width: 500px;
}

/* ========== 日历弹窗布局 ========== */
#task-calendar-modal .modal-content {
    max-width: 92vw;
    min-width: 700px;
    width: auto;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}
#task-calendar-modal .task-calendar {
    flex-shrink: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#task-calendar-modal #calendar-agenda {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: visible;
    animation: agendaFadeIn 0.3s ease;
}
@keyframes agendaFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========== 日历收起/展开动效 ========== */
/* 月份导航栏 — 淡出 + 折叠 */
.task-calendar .calendar-nav {
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}
.task-calendar.collapsed .calendar-nav {
    opacity: 0;
    height: 0;
    margin-bottom: 0;
    padding: 0;
    pointer-events: none;
}

/* 收起后日期导航条微调 */
.task-calendar.collapsed .date-nav {
    margin: 2px 0;
}

/* 日历网格区域 — 高度渐变折叠 */
.task-calendar .calendar-grid-wrapper {
    max-height: 480px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.3s ease;
}
.task-calendar.collapsed .calendar-grid-wrapper {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

/* 当前月份文字 — 纯展示，不可点击 */
.task-calendar .current-month {
    user-select: none;
}

/* 车型筛选栏过渡 */
.calendar-vehicle-summary {
    flex-shrink: 0;
    transition: opacity 0.25s ease, margin 0.3s ease;
}
.task-calendar.collapsed .calendar-vehicle-summary {
    opacity: 0.6;
    margin-top: 0;
}

.date-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 2px;
    padding: 6px 0;
}
/* 日期标签 — 整个条可点击展开/收起日历 */
.date-nav-label {
    display: inline-flex;
    align-items: center;
    min-width: 160px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #1a73e8;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 20px;
    background: rgba(26,115,232,0.08);
    border: 1px solid rgba(26,115,232,0.15);
    transition: all 0.2s ease;
    user-select: none;
}
.date-nav-label:hover {
    color: #1557b0;
    background: rgba(26,115,232,0.14);
    border-color: rgba(26,115,232,0.3);
}
.date-nav-label:active {
    background: rgba(26,115,232,0.2);
    transform: scale(0.97);
}
.date-nav-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-secondary, #666);
    transition: all 0.15s;
    line-height: 1;
    padding: 0;
}
.date-nav-btn:hover {
    background: var(--primary, #1a73e8);
    border-color: var(--primary, #1a73e8);
    color: #fff;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.calendar-nav button {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
}

.calendar-nav button:hover {
    background: var(--bg);
}

.calendar-nav .current-month {
    font-size: 16px;
    font-weight: 600;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    min-height: 58px;
    padding: 4px 2px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.calendar-day:hover {
    background: var(--primary-light);
}

.calendar-day.has-tasks {
    background: var(--primary-light, #e8f0fe);
}

.calendar-day.selected {
    background: var(--primary-light);
    border-color: var(--primary);
    font-weight: 600;
}

.calendar-day.other-month {
    color: var(--text-secondary);
    opacity: 0.5;
}

.calendar-day.today {
    border: 2px solid var(--primary);
    font-weight: 600;
}


/* 日历日格徽标 */
.calendar-day-badge {
    display: inline-block;
    font-size: 9px;
    padding: 0 4px;
    border-radius: 3px;
    margin-top: 2px;
    line-height: 1.6;
    white-space: nowrap;
}
.calendar-day-badge.vehicle { background: #e8f0fe; color: #1a73e8; }
.calendar-day-badge.event { background: #e6f4ea; color: #1e8e3e; }

/* 日历日程面板 */
.calendar-agenda {
    margin-top: 12px;
    border-top: 1px solid var(--border, #ddd);
    padding-top: 8px;
    max-height: 340px;
    overflow-y: auto;
}
.agenda-date-header {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text, #333);
}
.agenda-all-day {
    margin-bottom: 10px;
    padding: 6px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 12px;
}
.agenda-all-day-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}
.agenda-all-day-item .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.agenda-all-day-item .status-dot.public { background: #4285f4; }
.agenda-all-day-item .status-dot.private { background: #ff9800; }

.agenda-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 24px 0;
}

/* 矩阵日程表 */
.agenda-matrix {
    overflow-x: auto;
}
.matrix-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 12px;
}
.matrix-header {
    display: flex;
    background: #f8f9fa;
    font-weight: 600;
}
.matrix-header .matrix-cell {
    background: #f8f9fa;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 2px solid var(--border, #ddd);
    white-space: nowrap;
}
.matrix-header .matrix-cell:first-child {
    flex: none;
    width: 65px;
    min-width: 0;
    box-sizing: border-box;
}
.matrix-header .matrix-time-cell {
    background: #f8f9fa;
    border-bottom: 2px solid var(--border, #ddd);
}
.matrix-row {
    display: flex;
}
.matrix-row:last-child .matrix-cell {
    border-bottom: none;
}
.matrix-time-cell {
    flex: none;
    width: 65px;
    box-sizing: border-box;
    padding: 8px 4px;
    vertical-align: top;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #666);
    white-space: nowrap;
    text-align: center;
    border-bottom: 1px solid var(--border, #eee);
}
.matrix-cell {
    flex: 1;
    min-width: 140px;
    box-sizing: border-box;
    padding: 6px 6px;
    vertical-align: top;
    border-bottom: 1px solid var(--border, #eee);
    border-left: 1px solid var(--border, #f0f0f0);
}
.matrix-cell-empty {
    color: #eee;
    font-size: 11px;
}
.matrix-event-item + .matrix-event-item {
    border-top: 1px dashed var(--border, #ddd);
    margin-top: 6px;
    padding-top: 6px;
}
.cell-title {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 2px;
    color: var(--text, #333);
}
.cell-location {
    font-size: 10px;
    color: var(--text-secondary, #999);
    margin-bottom: 2px;
}
.cell-location.has-photos {
    color: var(--primary, #1a73e8);
    cursor: pointer;
}
.cell-location.has-photos:hover {
    text-decoration: underline;
}
.photo-indicator {
    font-size: 9px;
    vertical-align: middle;
}
.cell-people {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--border, #eee);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
}
.cell-person {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    color: var(--text-secondary, #666);
    white-space: nowrap;
}
.cell-person.cp-lead {
    color: #e65100;
    font-weight: 500;
}
.cell-person .mcp-name {
    margin-left: 2px;
}
.cell-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 4px;
}
.cell-tags .event-process-tag {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 9px;
    white-space: nowrap;
}
.cell-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2px;
}
.cell-actions .btn-event-xs {
    padding: 1px 6px;
    font-size: 10px;
    border-radius: 3px;
    border: 1px solid var(--border, #ddd);
    cursor: pointer;
    background: #fff;
    line-height: 1.6;
}
.cell-actions .btn-event-xs.btn-primary {
    background: var(--primary, #1a73e8);
    color: #fff;
    border-color: var(--primary, #1a73e8);
}
.cell-actions .btn-event-xs.btn-secondary {
    background: #f5f5f5;
    color: #666;
}
.cell-actions .event-registered-badge {
    color: #34a853;
    font-size: 11px;
    font-weight: 600;
}
.cell-actions .event-declined-badge {
    color: #ea4335;
    font-size: 11px;
    font-weight: 600;
}
/* 矩阵左上角对角线的单元格 */
.diagonal-cell {
    position: relative;
    width: 56px;
    height: 36px;
    overflow: hidden;
}
.diagonal-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--border, #ddd) calc(50% - 0.5px), var(--border, #ddd) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.diagonal-label {
    position: absolute;
    font-size: 10px;
    font-weight: 400;
    color: #999;
    line-height: 1;
}
.diagonal-label.tl { top: 2px; left: 2px; }
.diagonal-label.br { bottom: 2px; right: 2px; }
.cell-count {
    font-size: 10px;
    color: var(--text-secondary, #999);
}

/* AM/PM 分隔线 */
.pm-divider {
    padding: 1px 2px !important;
    text-align: center;
}
.pm-label {
    display: block;
    font-size: 9px;
    color: var(--primary, #1a73e8);
    font-weight: 400;
    line-height: 1;
}
.matrix-participant-list {
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.mcp-name {
    display: inline-block;
    font-size: 9px;
    padding: 0 4px;
    background: #e8f0fe;
    color: #1a73e8;
    border-radius: 3px;
    line-height: 1.6;
}
.mcp-name.declined {
    background: #fce8e6;
    color: #ea4335;
}





/* 月历车型筛选激活状态 */
.calendar-vehicle-pill {
    cursor: pointer;
}
.calendar-vehicle-pill:hover {
    opacity: 0.8;
}
.calendar-vehicle-pill.active {
    background: var(--primary);
    color: #fff;
}

/* 月历车型汇总 */
.calendar-vehicle-summary {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.calendar-vehicle-pill {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin: 2px 4px 2px 0;
}

.calendar-task-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.calendar-task-item:last-child {
    border-bottom: none;
}

.calendar-task-item:hover {
    background: var(--bg);
    margin: 0 -12px;
    padding: 6px 12px;
}

.calendar-task-name {
    font-size: 13px;
    font-weight: 500;
}

.calendar-task-status {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}


.eval-desc-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.modal-header .close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    /* 修复安卓移动端弹性滚动穿透 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--card-bg);
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
}

.modal-sm .modal-content {
    max-width: 320px;
}

/* 体验测评要求弹窗底部按钮 */
.system-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}
.system-detail-footer .nav-btns,
.system-detail-footer .action-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.system-detail-footer .btn {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
}

/* ================================================
   进度条
   ================================================ */
.eval-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #007aff 0%, #34c759 100%);
    border-radius: 3px;
    transition: width 0.3s;
}

@media (prefers-color-scheme: dark) {
    .progress-fill {
        background: linear-gradient(90deg, #0a84ff 0%, #30d158 100%);
    }
}

.eval-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ================================================
   评分
   ================================================ */
.eval-score-section {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    text-align: center;
}

.eval-score-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.eval-stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 10px 0;
}

.star-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 28px;
    cursor: pointer;
    transition: color 0.1s, opacity 0.1s, transform 0.1s;
    padding: 0;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    position: relative;
}

/* macOS Dock 风格：悬浮放大 + 邻星微扩 */
.eval-stars > div:has(.star-btn:hover) {
    z-index: 2;
}
.eval-stars > div:has(+ div > .star-btn:hover) {
    z-index: 1;
}
.eval-stars > div:has(.star-btn:hover) .star-btn {
    transform: scale(1.5);
    z-index: 1;
}
.eval-stars > div:has(+ div > .star-btn:hover) .star-btn,
.eval-stars > div:has(.star-btn:hover) + div .star-btn {
    transform: scale(1.2);
    z-index: 1;
}

@media (max-width: 360px) {
    .eval-stars {
        gap: 2px;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .eval-stars::-webkit-scrollbar {
        display: none;
    }
    .star-btn {
        width: 26px;
        height: 26px;
        font-size: 22px;
        flex-shrink: 0;
    }
}

@media (min-width: 361px) and (max-width: 400px) {
    .eval-stars {
        gap: 4px;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .eval-stars::-webkit-scrollbar {
        display: none;
    }
    .star-btn {
        width: 28px;
        height: 28px;
        font-size: 24px;
        flex-shrink: 0;
    }
}

@media (min-width: 401px) and (max-width: 500px) {
    .eval-stars {
        gap: 6px;
    }
    .star-btn {
        width: 30px;
        height: 30px;
        font-size: 26px;
        flex-shrink: 0;
    }
}


.eval-stars, .star-row {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.star-btn.filled {
    opacity: 1;
}

.star-btn.selected {
    opacity: 1;
    transform: scale(1.1);
}

.star-btn.initial {
    color: #bbb;
    opacity: 0.5;
}

/* hover预览状态（使用JS添加class切换） */
.star-btn.preview {
    opacity: 1;
}

/* 10分制星星颜色 - 已评分状态（data-score） */
.eval-stars[data-score="1"] .star-btn.filled,
.eval-stars[data-score="2"] .star-btn.filled,
.eval-stars[data-score="3"] .star-btn.filled,
.eval-stars[data-score="4"] .star-btn.filled { color: #e53935; opacity: 1; }

.eval-stars[data-score="5"] .star-btn.filled,
.eval-stars[data-score="6"] .star-btn.filled { color: #fb8c00; opacity: 1; }

.eval-stars[data-score="7"] .star-btn.filled,
.eval-stars[data-score="8"] .star-btn.filled,
.eval-stars[data-score="9"] .star-btn.filled,
.eval-stars[data-score="10"] .star-btn.filled { color: #43a047; opacity: 1; }

/* 10分制星星颜色 - 悬浮预览状态（颜色略深于已评分，形成区分） */
.eval-stars[data-preview="1"] .star-btn.preview,
.eval-stars[data-preview="2"] .star-btn.preview,
.eval-stars[data-preview="3"] .star-btn.preview,
.eval-stars[data-preview="4"] .star-btn.preview { color: #c62828; opacity: 1; }

.eval-stars[data-preview="5"] .star-btn.preview,
.eval-stars[data-preview="6"] .star-btn.preview { color: #e65100; opacity: 1; }

.eval-stars[data-preview="7"] .star-btn.preview,
.eval-stars[data-preview="8"] .star-btn.preview,
.eval-stars[data-preview="9"] .star-btn.preview,
.eval-stars[data-preview="10"] .star-btn.preview { color: #2e7d32; opacity: 1; }

/* 未选中时显示灰色 */
.star-btn:not(.filled):not(.preview) {
    color: #ddd;
    opacity: 1;
}

/* 多车同评 - 描述必填警告（与单车评分 _flashField 蓝色提示一致） */
._multi-desc.desc-warn {
    border-color: #1a73e8 !important;
    background: #e8f0fe !important;
}
._multi-desc-warn {
    color: #1a73e8;
    font-size: 12px;
    margin-top: 4px;
    padding: 4px 8px;
    background: #e8f0fe;
    border-radius: 4px;
}

/* 多车同评 - 重点过程任务 badge */
.car-key-badge {
    display: inline-block;
    font-size: 9px;
    color: #ff6b00;
    font-weight: 700;
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid #ff6b00;
    border-radius: 3px;
    line-height: 1.4;
    vertical-align: middle;
}

/* 多车同评 - 专属过程任务 badge */
.badge-zhuan {
    color: #7c3aed;
    border-color: #7c3aed;
}
    font-size: 13px;
    color: var(--text-secondary);
}

.eval-score-hint {
    background: #fff8e1;
    padding: 10px 12px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 12px;
    color: #8a6d3b;
}

/* ================================================
   测评照片上传
   ================================================ */
.eval-photos {
    margin-top: 12px;
    /* 确保照片区域底部有足够空间，避免被遮挡 */
    padding-bottom: 20px;
}

.eval-photos label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.photo-upload-area {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.photo-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.photo-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f5f5f5);
    font-size: 11px;
    color: var(--text-light, #999);
    text-align: center;
}

.photo-preview-item .delete-photo {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    transition: opacity 0.2s, background 0.2s;
    font-size: 16px;
    line-height: 1;
}

.photo-preview-item:hover .delete-photo {
    opacity: 1;
    background: rgba(234,67,53,0.9);
}

/* 车辆照片删除按钮（独立于评分照片网格） */
#task-photo-preview .delete-photo {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    transition: opacity 0.2s, background 0.2s;
    font-size: 16px;
    line-height: 1;
}
#task-photo-preview .delete-photo:hover {
    opacity: 1;
    background: rgba(234,67,53,0.9);
}

/* 照片优劣标记底栏（可点击） */
.photo-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    background: rgba(0,0,0,0.45);
    letter-spacing: 1px;
}
.photo-tag::before { content: '点击标记'; font-size: 10px; opacity: 0.7; }
.photo-tag.pro { background: rgba(34,197,94,0.85); }
.photo-tag.pro::before { content: '👍 优势'; opacity: 1; }
.photo-tag.con { background: rgba(239,68,68,0.85); }
.photo-tag.con::before { content: '👎 劣势'; opacity: 1; }
/* 照片优劣角标（与报告一致：右上角 优/劣 单字） */
.pc-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    line-height: 1.6;
    color: #fff;
    pointer-events: none;
    z-index: 2;
}
.pc-badge.pc-pro { background: rgba(46,125,50,0.85); }
.pc-badge.pc-con { background: rgba(198,40,40,0.85); }

/* 上传中状态 */
.photo-preview-item.uploading {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f5f5f5);
}

.photo-preview-item.uploading .upload-loading {
    font-size: 11px;
    color: var(--text-light, #999);
    text-align: center;
}

/* 视频预览 */
.video-preview-item {
    position: relative;
}

.video-preview-item .video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    pointer-events: none;
}

.video-preview-item:hover .video-play-icon {
    background: rgba(26,115,232,0.9);
}

/* ================================================
   活动照片
   ================================================ */
.event-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.event-photo-item {
    position: relative;
    width: 128px;
    height: 96px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border, #eee);
    flex-shrink: 0;
}
.event-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}
.event-photo-item .delete-photo {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    transition: opacity 0.2s, background 0.2s;
    font-size: 16px;
    line-height: 1;
}
.event-photo-item:hover .delete-photo {
    opacity: 1;
    background: rgba(234,67,53,0.9);
}
.event-photo-item.pending {
    opacity: 0.7;
}
.event-photo-item.pending::after {
    content: '待上传';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 2px;
}

/* ================================================
   导航条
   ================================================ */
.eval-nav-bar {
    margin-bottom: 12px;
}

.eval-nav-label {
    width: 100%;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.eval-nav-group {
    margin-bottom: 10px;
}

.eval-nav-group-title {
    font-size: 12px;
    color: var(--primary);
    font-weight: 500;
    margin-bottom: 4px;
    padding-left: 2px;
}

.eval-nav-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.eval-nav-item {
    padding: 6px 10px;
    font-size: 12px;
    background: var(--bg);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.eval-nav-item.done {
    background: #e8f5e9;
    color: #2e7d32;
}

.eval-nav-item.active {
    background: var(--primary) !important;
    color: #fff;
}

.eval-nav-item.removed {
    background: #fffbe6;
    color: #999;
    text-decoration: line-through;
}

.eval-item-removed {
    background: #fffbe6 !important;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid #ffe58a;
}

/* ================================================
   AI输入区域
   ================================================ */
.ai-input-section {
    background: #f0f4ff;
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid #d0e0ff;
}

.ai-input-section .form-group {
    margin-bottom: 8px;
}

.ai-input-section textarea {
    font-size: 13px;
}

.ai-analysis-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: var(--primary);
    color: #fff;
}

/* ================================================
   Toast
   ================================================ */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 300;
    opacity: 0;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    transform: translateX(-50%) translateY(4px);
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ================================================
   确认弹窗
   ================================================ */
#confirm-modal .modal-body {
    text-align: center;
    padding: 16px 12px;
}

#confirm-modal .modal-body p,
#confirm-modal #confirm-message {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: pre-line;
    line-height: 1.5;
}

#confirm-modal .modal-content {
    max-width: 360px;
}

/* ================================================
   设置页面
   ================================================ */
.settings-group {
    margin-bottom: 20px;
}

.settings-group h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.settings-group h3.collapsible {
    cursor: pointer;
    user-select: none;
}

.settings-group h3.collapsible:hover {
    opacity: 0.7;
}

.base-data-list {
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.base-data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.base-data-item:last-child {
    border-bottom: none;
}

.base-data-item:active {
    background: var(--bg);
}

.base-data-item .count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.base-data-item .arrow {
    font-size: 18px;
    color: var(--text-secondary);
}

/* ================================================
   浮动按钮
   ================================================ */
.fab {
    position: fixed;
    right: 20px;
    bottom: calc(var(--tabbar-height) + 20px);
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
    border: none;
    box-shadow: 0 2px 8px rgba(26,115,232,0.3);
    cursor: pointer;
    z-index: 50;
    opacity: 0.8;
    transition: all 0.2s;
}

.fab:hover {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(26,115,232,0.4);
}

/* ================================================
   测评体系列表 - 原生table实现
   ================================================ */
.data-table {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    min-height: 100%;
}

/* 原生表格样式 */
.data-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

/* 表头 */
.data-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table th {
    padding: 14px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
    background: var(--card-bg);
}

/* 数据行 */
.data-table td {
    padding: 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr {
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.data-table tbody tr td:first-child {
    border-left: 2px solid transparent;
}

.data-table tbody tr[style*="--jcolor"] td:first-child {
    border-left-color: var(--jcolor);
}

.data-table tbody tr:hover {
    background: rgba(0,0,0,0.03);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.data-table tbody tr:active {
    background: rgba(0,0,0,0.05);
}

/* 表内标签芯片换行 */
.data-table td .tag {
    margin-bottom: 2px;
    line-height: 1.6;
}

/* 列宽定义 - 通过colgroup统一管理 */
.data-table .col-id { width: 60px; }
.data-table .col-journey { width: 100px; }
.data-table .col-task { width: 130px; }
.data-table .col-scene { width: 150px; }
.data-table .col-experience { width: 250px; }
.data-table .col-product_attrs { width: 120px; }
.data-table .col-user_profiles { width: 100px; }
.data-table .col-use_cases { width: 100px; }
.data-table .col-updated_at { width: 70px; }
.data-table .col-created_by_name { width: 80px; }

/* 长文本列：允许完整换行显示 */
.data-table td.col-scene,
.data-table td.col-experience {
    word-break: break-word;
    line-height: 1.4;
    padding: 12px;
    font-size: 13px;
    vertical-align: middle;
}

/* 桌面端允许更多行 */
@media (min-width: 768px) {
    .data-table td.col-scene,
    .data-table td.col-experience {
        white-space: normal;
    }
}

/* 隐藏列 */
.data-table .col-hidden {
    display: none;
}

/* 新建记录高亮 */
.data-table tr.highlight-row {
    background: #e8f5e9 !important;
    transition: background 0.5s ease-out;
}

/* 表格横向滚动容器 */
#system-table {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-height: calc(100dvh - var(--tabbar-height) - 140px);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 表格工具栏 */
.table-toolbar {
    position: relative;
    margin-bottom: 8px;
}

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

/* 列设置菜单 */
.col-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px;
    z-index: 100;
    min-width: 120px;
}

.col-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
}

.col-menu-item:hover {
    background: var(--bg);
}

.col-menu-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
}
}

/* ================================================
   筛选栏
   ================================================ */
.filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.filter-bar-compact {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.filter-bar::-webkit-scrollbar {
    height: 4px;
}

.filter-bar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.filter-bar select,
.filter-bar input {
    flex: 0 0 auto;
    min-width: 100px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

.filter-bar input {
    min-width: 80px;
}

/* 筛选按钮——有筛选条件时的状态 */
#filter-btn.has-filter {
    background: var(--primary);
    color: #fff;
}
#filter-btn.has-filter .filter-summary {
    font-weight: 400;
    opacity: 0.9;
    margin-left: 2px;
}
#article-filter-btn.has-filter {
    background: var(--primary);
    color: #fff;
}
#article-filter-btn.has-filter .filter-summary {
    font-weight: 400;
    opacity: 0.9;
    margin-left: 2px;
}

/* ================================================
   标签
   ================================================ */
.tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    background: var(--bg);
    color: var(--text-secondary);
    border-radius: 4px;
    margin-right: 4px;
}

.tag-special {
    background: #e3f2fd;
    color: #1565c0;
    font-weight: 500;
}

/* ================================================
   AI加载状态
   ================================================ */
.btn.loading {
    opacity: 0.7;
}

.btn.loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ================================================
   数据分析弹窗
   ================================================ */
.stats-overview {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.stats-card {
    text-align: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary), #4285f4);
    border-radius: 10px;
    color: #fff;
}

.stats-num {
    font-size: 28px;
    font-weight: 700;
}

.stats-label {
    font-size: 12px;
    opacity: 0.9;
}

.stats-section {
    margin-bottom: 24px;
}

.stats-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.stats-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stats-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-bar-label {
    width: 100px;
    font-size: 13px;
    color: var(--text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.stats-bar-track {
    flex: 1;
    height: 20px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}

.stats-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.stats-bar-fill.attr {
    background: #34a853;
}

.stats-bar-fill.profile {
    background: #fbbc04;
}

.stats-bar-fill.usecase {
    background: #ea4335;
}

.stats-bar-fill.task {
    background: #9c27b0;
}

.stats-bar-fill.year {
    background: #00bcd4;
}

.stats-bar-count {
    width: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
}

/* Loading indicator */
.loading-indicator {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}
.loading-indicator::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 报告编辑区域 */
.report-edit-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.report-edit-section .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}
.report-edit-section .form-group {
    flex: 1;
}
.report-edit-section .form-group label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.report-edit-section .form-group input,
.report-edit-section .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    box-sizing: border-box;
}
.report-edit-section .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* 弹窗加载状态 */
.modal .loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    width: 100%;
}

/* Markdown渲染样式 */
.markdown-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}
.markdown-body h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 16px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.markdown-body h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 14px 0 10px 0;
}
.markdown-body h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 8px 0;
}
.markdown-body p {
    margin: 8px 0;
}
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
}
.markdown-body th, .markdown-body td {
    padding: 6px 8px;
    border: 1px solid var(--border);
    text-align: left;
    word-break: break-word;
    white-space: normal;
}
.markdown-body th {
    background: var(--bg);
    font-weight: 600;
}
.markdown-body code {
    background: var(--bg);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 13px;
}
.markdown-body pre {
    background: var(--bg);
    padding: 12px;
    border-radius: var(--radius);
    overflow-x: auto;
}
.markdown-body ul, .markdown-body ol {
    margin: 8px 0;
    padding-left: 20px;
}
.markdown-body li {
    margin: 4px 0;
}
.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}
.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 8px 0;
}

/* 旅程分组样式 */
.journey-group {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.journey-group-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg);
    cursor: pointer;
    user-select: none;
}
.journey-group-header:hover {
    background: #f5f5f5;
}
.journey-arrow {
    margin-right: 8px;
    font-size: 10px;
    transition: transform 0.2s;
    color: var(--text-light);
}
.journey-arrow.collapsed {
    transform: rotate(0deg);
}
.journey-arrow:not(.collapsed) {
    transform: rotate(90deg);
}
.journey-name {
    font-weight: 600;
    color: var(--text);
}
.journey-count {
    margin-left: 8px;
    font-size: 12px;
    color: var(--text-light);
}
.count-badge {
    font-size: 12px;
    color: var(--text-light);
    font-weight: normal;
    margin-left: 4px;
}
.journey-group-content {
    padding: 8px;
    background: #fff;
}
.journey-group .base-list-item {
    margin-left: 20px;
}
.journey-filter {
    align-items: center;
    padding: 8px 0;
}

/* ================================================
   单车测评新布局 - 固定区 + 滚动区
   ================================================ */
#eval-modal-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0;
    /* 确保在iOS Safari上正确填满可用高度 */
    min-height: 0;
    flex: 1;
    /* 兼容 iPhone 安全区域 */
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: -webkit-calc(env(safe-area-inset-bottom));
    /* 兼容 Chrome 地址栏展开时的布局问题 */
    height: 100%;
}

/* 体验内容编辑弹窗 - textarea 限制最大高度 */
#experience-edit-modal .modal-content {
    overflow: hidden;
}

textarea#experience-edit-textarea {
    max-height: calc(90vh - 150px) !important;
    overflow-y: auto !important;
}

.eval-fixed {
    flex-shrink: 0;
    background: var(--card-bg);
    padding: 0 16px;
}

.eval-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0 8px;
    /* 确保底部内容不被遮挡（兼容iPhone安全区域 + modal-footer高度） */
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 120px);
    padding-bottom: -webkit-calc(env(safe-area-inset-bottom, 16px) + 120px);
}

.eval-btn-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0;
}

.eval-nav-pills {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    flex-wrap: nowrap !important;
}

.eval-nav-pills-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.eval-nav-pills-wrapper::-webkit-scrollbar {
    display: none;
}

.eval-pill {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    white-space: nowrap;
}

.eval-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.eval-pill.done {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
}

/* 专属体验要求胶囊样式 */
.eval-pill.special::after {
    content: '专';
    font-size: 8px;
    color: #ff6b00;
    margin-left: 2px;
    vertical-align: super;
    font-weight: 700;
}

/* 重点体验属性胶囊样式 - 使用内联span，无需CSS伪元素 */

/* 产品属性"重点"标记按钮 */
.focus-toggle {
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f5f5f5;
    color: #999;
    cursor: pointer;
    line-height: 1.5;
    vertical-align: middle;
    margin-left: 6px;
    transition: all .2s;
    user-select: none;
    font-weight: 600;
}
.focus-toggle.active {
    background: #ff6f00;
    color: #fff;
    border-color: #ff6f00;
    font-weight: 700;
}
.focus-toggle:hover {
    border-color: #ff6f00;
    color: #ff6f00;
    background: #fff8e1;
}
.focus-toggle.active:hover {
    background: #e65100;
    border-color: #e65100;
    color: #fff;
}

/* 单车测评场景胶囊样式 */
.eval-nav-pills .eval-pill.scene-pill {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-light);
    font-size: 12px;
    border: 1px solid var(--border);
}

.eval-nav-pills .eval-pill.scene-pill.active {
    background: var(--primary-light, #e3f2fd);
    color: var(--primary);
    border-color: var(--primary);
}

.eval-scene-info {
    padding: 8px 0;
    font-size: 13px;
}

.eval-scene-info .info-row {
    margin-bottom: 4px;
}

.eval-detail-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 12px;
    margin: 12px 0;
    box-shadow: var(--shadow);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.eval-detail-card.scene-exit {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
}
.eval-detail-card.scene-enter,
.multi-eval-wrapper.scene-enter {
    animation: sceneCardEnter 0.2s var(--ease-out) forwards;
}


.task-card.completed-card {
    border-left: 3px solid var(--success, #34C759);
}

.task-card.pending-card {
    border-left: 3px solid #9e9e9e;
}

.task-card.inprogress-card {
    border-left: 3px solid #ff9800;
}

.task-card.completed-card:active {
    background: var(--bg);
}

/* 生成报告按钮 */
.report-icon {
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
}

.report-icon:hover {
    opacity: 0.7;
}

.report-btn {
    padding: 2px 8px;
    background: var(--success, #34C759);
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.report-btn:hover {
    opacity: 0.85;
}

/* 报告链接（已生成报告） */
.report-link {
    color: var(--primary, #007AFF);
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
    margin-left: 8px;
}

.report-link:hover {
    opacity: 0.7;
}

/* 用户菜单 */
.user-info-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}

.user-menu-btn:hover {
    background: var(--hover-bg);
}

.user-avatar {
    font-size: 14px;
}

.dropdown-arrow {
    font-size: 8px;
    color: var(--text-light);
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    z-index: 100;
}

.user-dropdown.active {
    display: block;
}

.more-menu-wrap {
    position: relative;
}

.more-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    z-index: 100;
}

.dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}

.dropdown-item:hover {
    background: var(--hover-bg);
}
.dropdown-item-advice {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 用户弹窗顶部：我的积分 */
.dropdown-contrib {
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
}
.dropdown-contrib:hover {
    background: var(--hover-bg);
}
.dropdown-contrib-main {
    display: flex;
    align-items: baseline;
}
.dropdown-contrib-label {
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
}
.dropdown-contrib-value {
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    margin-left: 8px;
    white-space: nowrap;
}
.dropdown-contrib-rank {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    white-space: nowrap;
}
.dropdown-contrib-more {
    color: var(--primary);
    margin-left: 6px;
    font-size: 11px;
}
.dropdown-contrib-balance {
    font-size: 11px;
    color: #16a34a;
    margin-top: 3px;
    white-space: nowrap;
}

.logout-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--card-bg);
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.logout-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* 移除首页统计卡片 */
.stats-grid {
    display: none;
}

/* ========== 场景浏览区域样式 - 2026-05-07 ========== */
.scene-browser {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 8px);
    padding: 12px;
    margin-bottom: 12px;
}

.scene-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}

.scene-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.scene-slide.active {
    border-color: var(--primary, #007AFF);
    background: var(--bg, #fff);
}

.scene-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.scene-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text, #333);
}

.scene-read-badge {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-secondary, #e0e0e0);
    color: var(--text-light, #666);
}

.scene-read-badge.read {
    background: #e8f5e9;
    color: #2e7d32;
}

.scene-content {
    font-size: 13px;
    color: var(--text-light, #666);
    line-height: 1.5;
}

.scene-content .scene-experience {
    margin-bottom: 8px;
}

.scene-criteria {
    font-size: 12px;
    color: var(--text-light, #999);
}

/* 圆点指示器 */
.scene-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
}

.scene-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border, #ddd);
    cursor: pointer;
    transition: all 0.2s;
}

.scene-dot.active {
    background: var(--primary, #007AFF);
    transform: scale(1.2);
}

.scene-dot.read {
    background: #34c759;
}

/* 胶囊式场景导航 */
.scene-nav-capsules {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    /* justify-content 由 JS 动态控制：不溢出时 center，溢出时 flex-start */
}

/* 隐藏 WebKit 滚动条 */
.scene-nav-capsules::-webkit-scrollbar {
    display: none;
}

.scene-nav-pill {
    flex-shrink: 0;
    min-width: 36px;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg, #f5f5f5);
    border: 1.5px solid var(--border, #ddd);
    border-radius: 16px;
    cursor: pointer;
    color: var(--text-light, #999);
    transition: all 0.2s ease;
}

.scene-nav-pill:hover {
    border-color: var(--primary, #007aff);
    color: var(--primary, #007aff);
}

.scene-nav-pill.active {
    background: var(--primary, #007aff);
    border-color: var(--primary, #007aff);
    color: #fff;
    font-weight: 600;
    animation: pillActivate 0.3s var(--ease-out);
}

.scene-nav-pill.viewed {
    color: var(--success, #34c759);
    border-color: var(--success, #34c759);
}

.scene-nav-pill.viewed.active {
    background: var(--primary, #007aff);
    border-color: var(--primary, #007aff);
    color: #fff;
}

.scene-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.scene-counter {
    font-size: 13px;
    color: var(--text-light, #666);
}

/* 评分锁定区域 */
.task-scoring-area {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 8px);
    padding: 16px;
    margin-top: 12px;
}

.score-locked {
    text-align: center;
    padding: 24px;
}

.lock-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.lock-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #333);
    margin-bottom: 8px;
}

.lock-hint {
    font-size: 14px;
    color: var(--text-light, #666);
}

.score-unlocked {
    background: #f0f7ff;
    border-radius: 8px;
    padding: 16px;
}

.score-header {
    font-size: 14px;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 12px;
    text-align: center;
}

.score-input-area {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
}

/* 星星按钮 */
.star-btn.filled {
    /* 颜色由 data-score CSS规则 和 JS setScore 共同控制 */
}

/* ================================================
   任务信息查看模式 - 多选字段显示样式
   ================================================ */

/* 纯文本显示（用户画像、用途） */
.view-only-text {
    color: var(--text, #333);
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

/* 产品属性树形层级显示 */
.attr-view-group {
    margin-bottom: 10px;
}

/* 无二级子项的一级属性：独占一行靠左，避免被挤在分组块之间 */
#task-product-attrs .attr-leaf-row {
    flex-basis: 100%;
}
/* 覆盖 .form-group label 的 display:block，保持胶囊内容宽度 */
#task-product-attrs .attr-leaf-row .checkbox-item {
    display: inline-flex;
}

.attr-view-parent {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #666);
    padding: 4px 0;
    border-bottom: 1px dashed var(--border, #ddd);
    margin-bottom: 6px;
}

.attr-view-children {
    padding-left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.attr-view-child {
    display: inline-block;
    font-size: 13px;
    color: var(--text, #333);
    background: var(--bg, #f5f5f5);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border, #ddd);
}

.attr-view-standalone {
    display: inline-block;
    font-size: 13px;
    color: var(--text, #333);
    background: var(--bg, #f5f5f5);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border, #ddd);
}

/* 庆祝完成全部评分 */
#confetti-canvas {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

/* ================================================
   全局动画
   ================================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes highlightFade {
    0% { background-color: #fff3cd; box-shadow: 0 0 0 2px #ffc107; }
    100% { background-color: transparent; box-shadow: none; }
}

/* ================================================
   体验数据看板样式
   ================================================ */
.dashboard-toggle-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--card-bg);
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    margin-right: 6px;
}
.dashboard-toggle-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}
.dash-section { margin-bottom: 10px; }
.dash-section-header { color: var(--text,#202124); border-left: 3px solid #007aff; padding-left: 11px !important; border-radius: 7px 0 0 0; }
.dash-section-header:hover { background: #e0e0e0 !important; }
.dash-section-header .dash-arrow { display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:10px;color:#666;background:#ddd;border-radius:3px;transition:transform .2s, background .2s; }
.dash-section-header:hover .dash-arrow { background:#bbb; }
.dash-empty {
    text-align: center;
    padding: 30px 16px;
    color: var(--text-secondary, #999);
    font-size: 13px;
}
.dash-dropdown label:hover { background: #f5f5f5; }
.dash-filter-select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border, #ddd);
    border-radius: var(--radius, 4px);
    background: #fff;
    max-height: 36px;
    min-width: 90px;
}



/* 下拉菜单：所有设备均可滚动 */
.dash-filter-dd, #dash-task-dropdown {
    max-height: 40vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 数据明细表：容器内滚动 + 冻结表头（表头粘在容器顶部，翻数据行时保持可见） */
#detail-table-body thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f5f5f5;
    box-shadow: 0 1px 0 var(--border, #ddd);
}

@media (max-width: 767px) {

    /* 系统表横向滚动 + 排序列不换行 */
    #system-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #system-table table {
        min-width: 780px;
    }
    #system-table td.col-actions {
        white-space: nowrap;
    }

    .dashboard-wrapper {
        padding: 0 4px 40px !important;
    }

    .dash-section-header {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    .dash-module-body {
        padding: 10px !important;
    }

    .dash-module-body .dash-empty {
        padding: 24px 0 !important;
        font-size: 12px !important;
    }

    .dash-chart-mobile {
        height: 220px !important;
    }

    .dash-chart-mobile-tall {
        height: 260px !important;
    }

    .dash-table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .dash-table-scroll table {
        min-width: 600px;
        width: auto !important;
    }

    .dash-filter-dd, #dash-task-dropdown {
        max-height: 60vh;
    }

    #dash-filter-tags {
        font-size: 10px !important;
    }
    #dash-filter-tags span {
        padding: 1px 6px !important;
        font-size: 10px !important;
    }

    /* ===== 测评任务卡片移动端适配 ===== */
    .task-card {
        padding: 10px !important;
        min-width: 0 !important;
        word-break: break-word !important;
    }

    .task-name {
        font-size: 14px !important;
    }

    .task-meta {
        font-size: 11px !important;
        line-height: 1.5 !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .task-status {
        font-size: 10px !important;
        padding: 1px 6px !important;
    }

    /* ===== 日历弹窗移动端适配 ===== */
    #task-calendar-modal .modal-content {
        min-width: auto !important;
        max-width: 98vw !important;
    }

    /* 矩阵表移动端紧凑 */
    .matrix-time-cell {
        flex: none !important;
        width: 55px !important;
        padding: 4px 1px !important;
        font-size: 11px !important;
        color: var(--text) !important;
        white-space: nowrap !important;
    }
    .matrix-cell {
        min-width: 80px !important;
        padding: 4px !important;
        font-size: 11px !important;
    }
    .matrix-header .matrix-cell {
        padding: 4px 4px !important;
        font-size: 11px !important;
    }
    .matrix-header .matrix-cell:first-child {
        width: 55px !important;
        min-width: 0 !important;
    }

    .pm-divider {
        padding: 1px 2px !important;
        line-height: 12px !important;
    }
    .pm-label {
        font-size: 8px !important;
    }

    /* 统计弹窗：条状图间距 */
    .stats-bar-label {
        width: 60px;
        font-size: 11px;
    }
    #stats-modal .modal-body {
        padding: 8px;
    }
}

/* ========== 月历活动（Calendar Events） ========== */

.calendar-events-header {
    font-weight: 600;
    margin: 12px 0 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border, #ddd);
    font-size: 12px;
    color: var(--text-secondary, #666);
}

.calendar-event-item {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #eee);
    font-size: 12px;
    background: #f8fffb;
    border-radius: 6px;
    margin-bottom: 6px;
}
.calendar-event-item:last-child { border-bottom: none; }

.calendar-event-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
    color: var(--text, #333);
}

.calendar-event-vehicle {
    font-size: 12px;
    font-weight: 500;
    color: var(--primary, #1a73e8);
    margin-top: 1px;
}

.calendar-event-time {
    font-size: 11px;
    color: var(--primary, #1a73e8);
    margin-top: 1px;
}

.calendar-event-location {
    font-size: 11px;
    color: var(--text-secondary, #666);
    margin-top: 1px;
}

.calendar-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.event-process-tag {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    cursor: pointer;
}
.cell-tags .event-process-tag-completed,
.event-process-tag-completed {
    background: #c8e6c9;
    color: #2e7d32;
}

.calendar-event-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}

.event-registered-badge {
    color: #34a853;
    font-size: 12px;
    font-weight: 600;
}

.event-declined-badge {
    color: #ea4335;
    font-size: 12px;
    font-weight: 600;
}

.btn-event-xs {
    padding: 2px 10px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid var(--border, #ddd);
    cursor: pointer;
    background: #fff;
    line-height: 1.8;
}
.btn-event-xs.btn-primary {
    background: var(--primary, #1a73e8);
    color: #fff;
    border-color: var(--primary, #1a73e8);
}
.btn-event-xs.btn-secondary {
    background: #f5f5f5;
    color: #666;
}

/* 活动编辑弹窗 */
#event-form-task-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: var(--radius, 6px);
    font-size: 14px;
    box-sizing: border-box;
}

#event-focus-tasks {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border, #eee);
    border-radius: var(--radius, 6px);
    padding: 6px 8px;
}

.event-focus-task-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 13px;
}

.event-focus-task-item input[type="checkbox"] {
    margin: 0;
}

.event-focus-task-item[data-used="1"] {
    opacity: 0.55;
}
/* 保留 data-used 标记仅作视觉参考，不限制再次勾选 */

/* 活动编辑弹窗时间并排 */
.event-time-row {
    display: flex;
    gap: 8px;
}
.event-time-row > div { flex: 1; }

/* 参与者列表 */
.event-participant-count {
    font-size: 11px;
    color: var(--primary, #1a73e8);
    cursor: pointer;
}
.event-participant-count:hover {
    text-decoration: underline;
}
.event-participant-list {
    margin-top: 4px;
    padding: 4px 6px;
    background: #f8f9fa;
    border-radius: 4px;
}
.event-participant-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.event-participant-name {
    display: inline-block;
    font-size: 11px;
    padding: 1px 6px;
    background: #e8f0fe;
    border-radius: 3px;
    color: var(--primary, #1a73e8);
}
.event-participant-name.declined {
    background: #fce8e6;
    color: #ea4335;
}

/* 日历里创建活动按钮 */
.calendar-create-event-btn {
    width: 100%;
    margin-top: 8px;
    padding: 4px 0;
    font-size: 12px;
    border: 1px dashed var(--border, #ccc);
    background: #fafafa;
    border-radius: 4px;
    cursor: pointer;
    color: var(--primary, #1a73e8);
    text-align: center;
}
.calendar-create-event-btn:hover {
    background: #e8f0fe;
    border-color: var(--primary, #1a73e8);
}

/* 活动详情弹出（编辑/删除） */
.calendar-event-edit-btn {
    margin-left: auto;
    font-size: 11px;
    cursor: pointer;
    color: var(--primary, #1a73e8);
    background: none;
    border: none;
    padding: 2px 4px;
}
.calendar-event-edit-btn:hover {
    text-decoration: underline;
}
.calendar-event-copy-btn {
    font-size: 11px;
    cursor: pointer;
    color: var(--primary, #1a73e8);
    background: none;
    border: none;
    padding: 2px 4px;
}
.calendar-event-copy-btn:hover {
    text-decoration: underline;
}


/* ================================================
   PWA 安装引导横幅
   ================================================ */
#install-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--primary, #1a73e8);
    color: #fff;
    padding: 10px 16px;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
#install-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
}
#install-banner-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}
#install-banner-text {
    flex: 1;
    min-width: 0;
}
#install-banner-title {
    font-weight: 700;
    font-size: 14px;
}
#install-banner-desc {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
}
#install-banner-btn {
    flex-shrink: 0;
    background: #fff;
    color: var(--primary, #1a73e8);
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
#install-banner-btn:active {
    opacity: 0.8;
}
#install-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}


/* ================================================
   安装指引弹窗
   ================================================ */
#install-guide-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
#install-guide-content {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
#install-guide-content h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}
#install-guide-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
}
#install-guide-content p {
    margin: 6px 0 16px;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    text-align: center;
}
.install-guide-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 14px;
    color: #333;
}
.install-guide-step:last-child {
    border-bottom: none;
}
.install-guide-step .step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary, #1a73e8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
#install-guide-close {
    margin-top: 16px;
    padding: 8px 24px;
    background: var(--primary, #1a73e8);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

/* ================================================
   通知徽标 & 面板
   ================================================ */
.notif-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ea4335;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.notif-date-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #666);
    padding: 8px 0 4px;
    border-bottom: 1px solid var(--border, #eee);
    margin-bottom: 4px;
}
.notif-date-group + .notif-date-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border, #eee);
}
.notif-item {
    padding: 10px 12px;
    margin: 4px 0;
    border-radius: 6px;
    cursor: pointer;
    background: var(--card-bg, #fff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
    transition: all 0.2s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
    border-left: 3px solid var(--primary, #1a73e8);
}
.notif-item:hover {
    background: var(--primary-light, #e8f0fe);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
    border-left-width: 5px;
}
.notif-item:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}

/* 通知弹窗：自适应高度 + 逐渐打开动效 */
#notification-modal.active .modal-content {
    width: calc(100vw - 24px);
    max-width: 420px;
    min-width: 280px;
    align-self: center;
    flex: none;
    max-height: 70vh;
    animation: slideUpIn 0.3s var(--ease-out);
}
#notification-modal .modal-body {
    flex: none;
    overflow-y: auto;
    max-height: 55vh;
    padding: 12px 16px;
}
.notif-item-highlight {
    animation: highlightFade 2s ease-out forwards;
}
.notif-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #333);
}
.notif-item-meta {
    font-size: 11px;
    color: var(--text-secondary, #999);
    margin: 2px 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.notif-item-role {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--primary, #1a73e8);
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
}

/* 星星提示动效：未评分时点击保存并下一步触发 */
@keyframes starHint {
    0%, 100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(26,115,232,0.4); }
    20% { transform: translateX(-4px); box-shadow: 0 0 0 4px rgba(26,115,232,0.3); }
    40% { transform: translateX(4px); box-shadow: 0 0 0 6px rgba(26,115,232,0.2); }
    60% { transform: translateX(-3px); box-shadow: 0 0 0 4px rgba(26,115,232,0.15); }
    80% { transform: translateX(2px); box-shadow: 0 0 0 2px rgba(26,115,232,0.1); }
}
.star-hint {
    animation: starHint 0.5s ease-out;
}

/* Toggle switch */
.toggle-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-group .toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.toggle-item input[type="checkbox"] {
    display: none;
}
.toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-item input:checked + .toggle-slider {
    background: #1a73e8;
}
.toggle-item input:checked + .toggle-slider::after {
    transform: translateX(16px);
}
.toggle-label {
    font-size: 13px;
    color: #333;
}

/* ========== flex gap 兼容（iOS 12 等不支持 flex gap）==========
   仅当 <html> 带 no-flex-gap 标记时生效，用子元素 margin 模拟间距。
   现代浏览器支持 flex gap，不会命中 no-flex-gap，布局完全不变。 */
.no-flex-gap .fgap-2 > * + * { margin-left: 2px; }
.no-flex-gap .fgap-3 > * + * { margin-left: 3px; }
.no-flex-gap .fgap-4 > * + * { margin-left: 4px; }
.no-flex-gap .fgap-6 > * + * { margin-left: 6px; }
.no-flex-gap .fgap-8 > * + * { margin-left: 8px; }
.no-flex-gap .fgap-10 > * + * { margin-left: 10px; }
.no-flex-gap .fgap-12 > * + * { margin-left: 12px; }
.no-flex-gap .fgap-16 > * + * { margin-left: 16px; }
.no-flex-gap .fgap-v-4 > * + * { margin-top: 4px; }
.no-flex-gap .fgap-v-10 > * + * { margin-top: 10px; }
.no-flex-gap .fgap-v-12 > * + * { margin-top: 12px; }
/* 登录/管理后台页面级 flex gap 兜底（仅这些页面使用的类） */
.no-flex-gap .modal-actions > * + * { margin-left: 12px; }
.no-flex-gap .code-row > * + * { margin-left: 8px; }
.no-flex-gap .role-tags > * + * { margin-left: 4px; }
.no-flex-gap .role-checkbox-item > * + * { margin-left: 4px; }
.no-flex-gap .perm-group-row > * + * { margin-left: 8px; }
.no-flex-gap .perm-item > * + * { margin-left: 8px; }