/* ========================================================================
   components.css - 可复用组件样式
   从各页面内联 <style> 中提取的高频重复组件
   依赖 common.css 中的设计变量（Design Tokens）
   ======================================================================== */


/* ================================================================
   1. 页面标题栏 (.page-header)
   渐变背景 + 弹性布局，适用于大多数子页面顶部
   用法：
     <div class="page-header">
       <div>
         <div class="page-title">标题</div>
         <div class="page-subtitle">副标题</div>
       </div>
       <div class="header-actions">...</div>
     </div>
   ================================================================ */
.page-header {
    background: var(--primary-dark);
    color: white;
    padding: 24px 28px;
    border-radius: 16px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.2);
}

.page-title {
    font-size: 24px;
    font-weight: 700;
}

.page-subtitle {
    opacity: 0.9;
    margin-top: 5px;
    font-size: var(--text-md);
}

/* 变体：顶部粘性导航栏（project-tasks / gantt 等使用） */
.page-header.sticky {
    border-radius: 0;
    margin-bottom: 0;
    padding: 16px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.2);
}

/* 页面标题栏内的按钮 */
.btn-back {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: var(--text-base);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-back:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-white {
    background: white;
    color: var(--primary);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-md);
    transition: all var(--transition-md);
    border: none;
    cursor: pointer;
}
.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-home {
    background: white;
    color: var(--primary);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-md);
    transition: all var(--transition-md);
}
.btn-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-create {
    background: #fff;
    color: var(--primary-dark);
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.6);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-create:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}


/* ================================================================
   2. 统计卡片 (.stat-card)
   用于仪表盘和列表页顶部数字概览
   common.css 已有基础 stat-card，此处补充页面级变体
   ================================================================ */

/* 统计概览网格（紧凑版，用于 daily-tasks 等列表页顶部） */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

/* 带头部/详情区域的大卡片（dashboard 使用） */
.stat-card-header {
    padding: 20px 20px 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f0f0f0;
}

.stat-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.stat-badge {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.stat-details {
    padding: 15px 20px 20px;
}

.detail-title {
    font-size: var(--text-sm);
    color: #999;
    margin-bottom: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 统计卡片颜色条变体（project-management 使用）— 去渐变改纯色 */
.stat-card.presales::before  { background: var(--primary); }
.stat-card.postsales::before { background: var(--warning); }
.stat-card.signed::before    { background: var(--success); }
.stat-card.reported::before  { background: var(--info); }
.stat-card.active::before    { background: var(--text-muted); }

/* 统计卡片选中态（project-management 筛选卡片使用） */
.stat-card.card-active {
    outline: 2px solid transparent;
    outline-offset: -2px;
}
.stat-card.presales.card-active  { outline-color: var(--primary); background: #f0f4ff; }
.stat-card.postsales.card-active { outline-color: var(--warning); background: #fffbeb; }
.stat-card.signed.card-active    { outline-color: var(--success); background: #f0fdf4; }
.stat-card.reported.card-active  { outline-color: var(--info); background: #eff6ff; }
.stat-card.active.card-active    { outline-color: var(--primary); background: var(--primary-light); }

.stat-card.card-active::after {
    content: '✓ 筛选中';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 10px;
    font-weight: 600;
}
.stat-card.presales.card-active::after  { color: var(--primary); }
.stat-card.postsales.card-active::after { color: #d97706; }
.stat-card.signed.card-active::after    { color: #059669; }
.stat-card.reported.card-active::after  { color: #2563eb; }
.stat-card.active.card-active::after    { color: var(--primary); }


/* ================================================================
   3. 空状态 (.empty-state)
   列表无数据时的占位提示
   ================================================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.3;
}

.empty-state-text {
    font-size: var(--text-lg);
    color: #666;
    margin-bottom: 20px;
}


/* ================================================================
   4. 模态框 (.modal-overlay / .modal-content)
   全屏遮罩 + 居中白色弹窗
   用法：
     <div class="modal-overlay" id="myModal">
       <div class="modal-content">
         <div class="modal-header">...</div>
         <div class="modal-body">...</div>
         <div class="modal-footer">...</div>
       </div>
     </div>
   注意：common.css 中已有 .modal / .modal-content / .modal-header
         此处的 .modal-overlay 是另一种命名方式，用于 project-tasks / todo-board 等
   ================================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.modal-overlay.show {
    display: flex !important;
}

/* modal-box: modal-overlay 内的白色容器（project-tasks 风格） */
.modal-box {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}
.modal-close:hover {
    color: #333;
}


/* ================================================================
   5. 表单增强样式
   common.css 已有 .form-group / .form-label / .form-input 等基础样式
   此处补充各页面常用的表单增强
   ================================================================ */

/* 表单输入框禁用态 */
.form-input:disabled,
.form-select:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* 表单卡片（用于独立表单页面） */
.form-card {
    background: white;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 表单分组标题 */
.form-section-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e1e8ed;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ================================================================
   6. 加载状态 (.loading / .spinner)
   common.css 已有基础 .loading 和声波动画
   此处补充全屏居中变体
   ================================================================ */
.loading-fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 12px;
    color: var(--primary);
    font-size: 15px;
}


/* ================================================================
   7. 通用操作按钮 (.action-btn)
   列表行内的小操作按钮（编辑/删除等）
   ================================================================ */
.action-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #e1e8ed;
    background: white;
    color: #666;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #eef2ff;
}
.action-btn.delete:hover,
.action-btn.danger:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fee2e2;
}

.task-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}


/* ================================================================
   8. 筛选区域 (.filter-section / .filter-bar)
   列表页顶部的筛选控件容器
   ================================================================ */
.filter-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
.filter-bar label {
    font-size: var(--text-base);
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

.filter-count {
    font-size: var(--text-sm);
    color: #999;
    margin-left: auto;
}

/* 快速筛选按钮组 */
.quick-filters {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.quick-filter-btn {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #e1e8ed;
    background: white;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
}
.quick-filter-btn:hover,
.quick-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}


/* ================================================================
   9. 横向条形图 (.bar-chart)
   仪表盘统计卡片内的水平条形图
   ================================================================ */
.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bar-label {
    width: 240px;
    font-size: var(--text-xs);
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}
.bar-container {
    flex: 1;
    height: 20px;
    background: var(--bg-stripe);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.8s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    min-width: 40px;
}
.bar-fill.purple { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); }
.bar-fill.green  { background: linear-gradient(90deg, var(--success), #34d399); }
.bar-fill.orange { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.bar-fill.blue   { background: linear-gradient(90deg, var(--info), #60a5fa); }
.bar-fill.pink   { background: linear-gradient(90deg, #ec4899, #f472b6); }
.bar-fill.gray   { background: linear-gradient(90deg, #9ca3af, #d1d5db); }
.bar-value {
    font-size: var(--text-xs);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}


/* ================================================================
   10. 环形图 (.donut-chart)
   仪表盘统计卡片内的环形图 + 图例
   ================================================================ */
.donut-chart-container {
    display: flex;
    align-items: center;
    gap: 20px;
}
.donut-chart {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}
.donut-chart svg {
    transform: rotate(-90deg);
}
.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.donut-center-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}
.donut-center-label {
    font-size: var(--text-xs);
    color: #666;
}
.donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
}
.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.legend-text {
    flex: 1;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    font-size: 10px;
}
.legend-value {
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
}


/* ================================================================
   11. 响应式补充
   ================================================================ */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-row {
        flex-direction: column;
    }

    .bar-label {
        width: 120px;
    }
}

/* visual-system-v2-components */
body.visual-v2 {
    background: var(--surface-canvas);
    color: var(--text-primary);
}

body.visual-v2 .header {
    background: var(--brand-primary-strong);
    border-bottom-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

body.visual-v2 :where(
    .welcome-card,
    .calendar-entry-card,
    .todo-stats-card,
    .actions-section,
    .team-section,
    .filters,
    .panel,
    .project-card,
    .projects-list,
    .view-switcher,
    .filter-panel,
    .annual-target-section,
    .analytics-panel,
    .ranking-section,
    .projects-section,
    .extra-chart-card
) {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

body.visual-v2 :where(
    .stat-card,
    .stat-item,
    .todo-stat-item,
    .person-week-card,
    .ranking-item,
    .project-stats
) {
    border-radius: 8px;
}

body.visual-v2 :where(.filters, .filter-panel) {
    padding: var(--space-5);
}

body.visual-v2 :where(.project-card, .stat-card, .action-btn, .ranking-item) {
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

body.visual-v2 :where(.project-card, .stat-card, .action-btn, .ranking-item):hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

body.visual-v2 :where(button, a, input, select, textarea):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

body.visual-v2 .btn {
    min-height: var(--control-height);
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0;
}

body.visual-v2 .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

body.visual-v2 .btn-secondary {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}

body.visual-v2 .btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--text-inverse);
}

body.visual-v2 :where(.btn-analytics, .btn-load-more, .btn-export-excel, .btn-export-pdf, .annual-target-save) {
    min-height: var(--control-height);
    border-radius: 6px;
    box-shadow: none;
}

body.visual-v2 .btn-analytics {
    background: var(--primary-dark);
}

body.visual-v2 .btn-load-more {
    background: var(--brand-accent);
}

body.visual-v2 .btn-export-excel,
body.visual-v2 .annual-target-save {
    background: var(--success);
}

body.visual-v2 .btn-export-pdf {
    background: var(--danger);
}

body.visual-v2 :where(.view-btn, .view-tab, .analytics-tab, .ranking-tab, .qf-chip, .scope-chip, .amount-preset-btn) {
    border-radius: 6px;
    box-shadow: none;
}

body.visual-v2 :where(.view-btn.active, .view-tab.active, .analytics-tab.active, .ranking-tab.active, .qf-chip.qf-active, .scope-chip.active, .amount-preset-btn.active) {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

body.visual-v2 :where(.status-badge, .stat-badge, .filter-count, .projects-count, .tech-badge) {
    border-radius: var(--radius-full);
    font-weight: 600;
}

body.visual-v2 :where(.records-table, .projects-table) thead {
    background: var(--surface-subtle);
}

body.visual-v2 :where(.records-table, .projects-table) th {
    color: var(--text-secondary);
    font-weight: 600;
}

body.visual-v2 :where(.records-table, .projects-table) tbody tr:hover {
    background: var(--surface-selected);
}

body.visual-v2 .action-btn {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text-primary);
}

body.visual-v2.project-detail-page .action-buttons .action-btn {
    border: 1px solid;
}

body.visual-v2.project-detail-page .btn-add-work {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

body.visual-v2.project-detail-page .btn-edit-project {
    background: var(--info-light);
    border-color: #93c5fd;
    color: #1d4ed8;
}

body.visual-v2.project-detail-page .btn-gantt {
    background: #ecfeff;
    border-color: #67e8f9;
    color: #0e7490;
}

body.visual-v2.project-detail-page .btn-gantt.no-phases {
    background: var(--surface-subtle);
    border-color: var(--border);
    color: var(--text-muted);
}

body.visual-v2.project-detail-page .action-btn-success {
    background: var(--success-light);
    border-color: #86efac;
    color: #15803d;
}

body.visual-v2.project-detail-page .action-btn-warning {
    background: var(--warning-light);
    border-color: #fcd34d;
    color: #b45309;
}

body.visual-v2 .action-icon {
    font-size: 20px;
}

body.visual-v2 .stat-value {
    color: var(--text-heading);
}

body.visual-v2.performance-stats-page {
    background: var(--surface-canvas);
}

body.visual-v2 .view-tab.active,
body.visual-v2 .annual-target-save {
    background-image: none;
}

body.visual-v2 .stat-card.presale-signed::before {
    background: var(--success);
}

body.visual-v2 .stat-card.presale-pipeline::before {
    background: var(--info);
}

body.visual-v2 .stat-card.postsale-completed::before {
    background: var(--primary);
}

body.visual-v2 .stat-card.postsale-ongoing::before {
    background: var(--warning);
}

@media (max-width: 768px) {
    body.visual-v2 :where(.filters, .filter-panel) {
        padding: var(--space-4);
    }

    body.visual-v2 :where(.btn, .btn-analytics, .btn-load-more, .btn-export-excel, .btn-export-pdf) {
        min-height: 42px;
    }
}

/* visual-system-v2-density */
body.visual-v2 .stat-card {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

body.visual-v2 :where(.stat-item, .todo-stat-item, .person-week-card, .ranking-item, .project-stats) {
    background: var(--surface-subtle);
    border: 1px solid var(--border-light);
}

body.visual-v2 :where(
    .filter-select,
    .filter-input,
    .filter-item select,
    .filter-item input,
    .page-size-selector select
) {
    min-height: var(--control-height);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface-raised);
    color: var(--text-primary);
}

body.visual-v2 :where(
    .filter-select,
    .filter-input,
    .filter-item select,
    .filter-item input,
    .page-size-selector select
):focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

/* visual-system-v2-chart-detail */
body.visual-v2.data-analytics-page :where(.chart-card, .monthly-chart-block, .chargeback-chart-block),
body.visual-v2.performance-stats-page :where(.analytics-panel, .extra-chart-card) {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

body.visual-v2.data-analytics-page :where(.chart-container, .chargeback-chart-block),
body.visual-v2.performance-stats-page :where(.analytics-chart-container, .extra-chart-container) {
    background: var(--surface-raised);
}

body.visual-v2.data-analytics-page .charts-section {
    grid-template-columns: minmax(0, 1fr);
}

body.visual-v2.data-analytics-page .data-table :where(th, td) {
    padding: 9px 10px;
}

body.visual-v2.data-analytics-page :where(.analytics-tabs, .monthly-report-tabs),
body.visual-v2.performance-stats-page .analytics-tabs {
    border-bottom-color: var(--border);
}

body.visual-v2.data-analytics-page .empty-state,
body.visual-v2.performance-stats-page .empty-state {
    background: var(--surface-subtle);
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    color: var(--text-secondary);
}

body.visual-v2.project-detail-page :where(.project-info-card, .project-detail-card, .progress-panel) {
    border-radius: 8px;
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

body.visual-v2.project-detail-page .progress-panel {
    background: var(--surface-subtle);
}

body.visual-v2.project-detail-page .progress-panel-title { color: var(--text-primary); }
body.visual-v2.project-detail-page :where(.progress-role-engineer, .progress-value.engineer) { color: var(--primary); }
body.visual-v2.project-detail-page :where(.progress-role-pm, .progress-value.pm) { color: var(--success); }
body.visual-v2.project-detail-page :where(.progress-role-procurement, .progress-value.procurement) { color: var(--warning); }
body.visual-v2.project-detail-page .progress-slider-engineer { accent-color: var(--primary); }
body.visual-v2.project-detail-page .progress-slider-pm { accent-color: var(--success); }
body.visual-v2.project-detail-page .progress-slider-procurement { accent-color: var(--warning); }
body.visual-v2.project-detail-page :where(.progress-track, .contributor-progress-track, .upload-progress-track) { background: var(--border); }
body.visual-v2.project-detail-page :where(.progress-fill, .contributor-progress-fill) { background: var(--primary); }

body.visual-v2.project-detail-page .task-stat-total { color: var(--text-primary); }
body.visual-v2.project-detail-page .task-stat-done { color: var(--success); }
body.visual-v2.project-detail-page .task-stat-overdue { color: var(--danger); }

body.visual-v2.project-detail-page :where(.empty-timeline, .empty-docs, .empty-records-state, .files-empty, .files-loading) {
    background: var(--surface-subtle);
    border-radius: 8px;
    color: var(--text-muted);
}


/* visual-system-v3-icons-mobile */
body.visual-v2 :where(
    .header-actions .btn,
    .filter-actions button,
    .view-switcher-label,
    .view-tab,
    .analytics-tab,
    .annual-target-title,
    .annual-target-save,
    .filter-title,
    .monthly-export-btn,
    .action-btn,
    .showcase-add-button,
    .showcase-save-button,
    .task-action-button,
    .doc-button
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.visual-v2 :where(
    .header-actions .btn,
    .filter-actions button,
    .view-switcher-label,
    .view-tab,
    .analytics-tab,
    .annual-target-title,
    .annual-target-save,
    .filter-title,
    .monthly-export-btn,
    .action-btn,
    .showcase-add-button,
    .showcase-save-button,
    .task-action-button,
    .doc-button,
    .icon-close-button
) svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    stroke-width: 2;
}

body.visual-v2.performance-stats-page :where(.filter-actions .btn-primary, .view-tab.active),
body.visual-v2.project-detail-page .task-action-button {
    background-image: none;
}

body.visual-v2.performance-stats-page .analytics-toggle-icon {
    width: 18px;
    height: 18px;
}

body.visual-v2.project-detail-page .icon-close-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
}

@media (max-width: 768px) {
    body.visual-v2.data-analytics-page .filter-actions,
    body.visual-v2.performance-stats-page .filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.visual-v2.data-analytics-page .filter-actions .btn-filter,
    body.visual-v2.performance-stats-page .filter-actions .filter-action-hint {
        grid-column: 1 / -1;
    }

    body.visual-v2.data-analytics-page .filter-actions button,
    body.visual-v2.performance-stats-page .filter-actions button {
        width: 100%;
        min-width: 0;
    }

    body.visual-v2.data-analytics-page .analytics-tabs,
    body.visual-v2.performance-stats-page .analytics-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        padding-bottom: 12px;
    }

    body.visual-v2.data-analytics-page .analytics-tab,
    body.visual-v2.performance-stats-page .analytics-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    body.visual-v2.performance-stats-page .view-switcher {
        align-items: stretch;
        gap: 12px;
    }

    body.visual-v2.performance-stats-page .view-switcher-label {
        justify-content: flex-start;
        width: 100%;
    }

    body.visual-v2.performance-stats-page .view-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body.visual-v2.performance-stats-page .view-tab {
        min-width: 0;
        padding-inline: 12px;
    }

    body.visual-v2.project-detail-page .header-actions,
    body.visual-v2.project-detail-page .doc-actions {
        flex-wrap: wrap;
    }

    body.visual-v2.project-detail-page .header-actions .btn {
        flex: 1 1 150px;
    }

    body.visual-v2.project-detail-page :where(.task-card-header, .panel-heading-row) {
        align-items: stretch;
        gap: 12px;
    }

    body.visual-v2.project-detail-page :where(.task-action-button, .doc-button) {
        min-height: 42px;
    }

    body.visual-v2.project-detail-page .timeline-filter-toolbar {
        width: 100%;
    }

    body.visual-v2.project-detail-page .timeline-filter.compact {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 520px) {
    body.visual-v2.data-analytics-page .filter-actions,
    body.visual-v2.performance-stats-page .filter-actions {
        grid-template-columns: 1fr;
    }

    body.visual-v2.data-analytics-page .filter-actions .btn-filter,
    body.visual-v2.performance-stats-page .filter-actions .filter-action-hint {
        grid-column: auto;
    }

    body.visual-v2.project-detail-page .header-actions .btn,
    body.visual-v2.project-detail-page .doc-actions .doc-button {
        flex-basis: 100%;
        width: 100%;
    }
}


/* visual-system-v4-form-workbench */
body.visual-v2.form-page {
    background: var(--surface-canvas);
    color: var(--text-primary);
}

body.visual-v2.form-page .header-content :where(h1, h2),
body.visual-v2.form-page :where(.btn-back, .back-btn, .btn-home, .header-project-link),
body.visual-v2.form-page :where(.btn-submit, .submit-btn, .btn-cancel, .cancel-btn),
body.visual-v2.form-page .edit-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.visual-v2.form-page :where(.header-content, .container) {
    width: min(100%, 1160px);
}

body.visual-v2.project-form-page .container { max-width: 1120px; }
body.visual-v2.work-record-form-page .container { max-width: 980px; }

body.visual-v2.form-page .form-card {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.visual-v2.form-page :where(.form-title, .form-card > h1) {
    margin: 0 0 var(--space-5);
    color: var(--text-heading);
    font-size: var(--text-2xl);
    letter-spacing: 0;
}

body.visual-v2.form-page .form-section {
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

body.visual-v2.form-page .section-title,
body.visual-v2.form-page .form-section > h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-heading);
    letter-spacing: 0;
}

body.visual-v2.form-page :where(.form-input, .form-select, textarea, input[type="text"], input[type="number"], input[type="date"], input[type="time"], select) {
    min-height: var(--control-height);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface-raised);
    color: var(--text-primary);
}

body.visual-v2.form-page :where(.form-input, .form-select, textarea, input[type="text"], input[type="number"], input[type="date"], input[type="time"], select):focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

body.visual-v2.form-page :where(.quick-template-panel, .project-notice, .info-box, .project-summary-section) {
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.form-page .project-summary-section {
    background: var(--info-light);
    border: 1px solid #93c5fd;
}

body.visual-v2.form-page :where(.btn-actions, .form-actions, .submit-section) {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: flex;
    gap: 12px;
    margin-top: var(--space-5);
    padding: 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

body.visual-v2.form-page :where(.btn-submit, .submit-btn) {
    min-height: 44px;
    padding: 10px 20px;
    background: var(--primary);
    color: var(--text-inverse);
    border: 1px solid var(--primary);
    border-radius: 6px;
    box-shadow: none;
}

body.visual-v2.form-page :where(.btn-cancel, .cancel-btn) {
    min-height: 44px;
    padding: 10px 20px;
    background: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
}

body.visual-v2.form-page :where(.btn-back, .back-btn, .btn-home, .header-project-link) {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 6px;
}

body.visual-v2.form-page .edit-tabs {
    gap: 4px;
    scrollbar-width: thin;
}

body.visual-v2.form-page .edit-tab-btn {
    border-radius: 0;
    letter-spacing: 0;
}

body.visual-v2.form-page :where(.btn-submit, .submit-btn, .edit-tab-btn, .btn-back, .back-btn, .btn-home, .header-project-link) svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

body.visual-v2.form-page .lucide-loader {
    animation: visual-form-spin 0.9s linear infinite;
}

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

@media (max-width: 768px) {
    body.visual-v2.form-page :where(.header-content, .container) {
        width: 100%;
        padding-inline: 12px;
    }

    body.visual-v2.form-page .container { margin-block: 16px; }
    body.visual-v2.form-page .form-section { padding: 16px; }

    body.visual-v2.form-page :where(.btn-actions, .form-actions, .submit-section) {
        bottom: 8px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
    }

    body.visual-v2.form-page :where(.btn-submit, .submit-btn, .btn-cancel, .cancel-btn) {
        width: 100%;
        min-width: 0;
    }

    body.visual-v2.form-page :where(.header-actions, .header-nav) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    body.visual-v2.form-page :where(.btn-actions, .form-actions, .submit-section) {
        grid-template-columns: 1fr;
    }
}


/* visual-system-v4-operations-workbench */
body.visual-v2.operations-page {
    background: var(--surface-canvas);
    color: var(--text-primary);
}

body.visual-v2.operations-page :where(.page-header, .header) {
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

body.visual-v2.operations-page :where(.header-title, .header-content h2, .management-title) {
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0;
}

body.visual-v2.operations-page :where(.page-container, .container) {
    width: min(100%, 1440px);
    margin-inline: auto;
}

body.visual-v2.task-management-page .page-container { max-width: 1560px; }
body.visual-v2.bulk-import-page .container { max-width: 1180px; }

body.visual-v2.operations-page :where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-header,
    .btn-back,
    .admin-tool-btn,
    .action-btn
) {
    min-height: 36px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    letter-spacing: 0;
}

body.visual-v2.operations-page :where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-header,
    .btn-back,
    .admin-tool-btn,
    .action-btn,
    .tab-btn,
    .view-tab
) svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    stroke-width: 2;
}

body.visual-v2.operations-page :where(.toolbar, .admin-tools) {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.task-management-page .toolbar {
    padding: 12px 14px;
    background: var(--bg-card);
}

body.visual-v2.task-management-page .filter-group {
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

body.visual-v2.task-management-page .filter-btn {
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--bg-card);
}

body.visual-v2.task-management-page .table-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.task-management-page .tabulator .tabulator-header,
body.visual-v2.task-management-page .tabulator .tabulator-header .tabulator-col {
    background: var(--surface-subtle);
    border-color: var(--border);
}

body.visual-v2.task-management-page .tabulator .tabulator-row:hover {
    background: var(--primary-light);
}

body.visual-v2.task-management-page .progress-bar-fill {
    background: var(--primary);
}

body.visual-v2.task-management-page .action-btn {
    width: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

body.visual-v2.task-management-page .action-btn.danger {
    color: var(--danger);
}

body.visual-v2.task-management-page :where(.modal-box, .template-card) {
    border-radius: 8px;
}

body.visual-v2.task-management-page .modal-box {
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

body.visual-v2.task-management-page .modal-close,
body.visual-v2.user-management-page .close-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 6px;
    display: inline-grid;
    place-items: center;
}

body.visual-v2.operations-page .lucide-loader {
    animation: operations-spin 0.8s linear infinite;
}

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

/* Gantt workbench */
body.visual-v2.gantt-page #view-tabs {
    box-shadow: none;
    border-bottom: 1px solid var(--border);
    gap: 4px;
    padding-inline: max(24px, calc((100% - 1400px) / 2 + 24px));
}

body.visual-v2.gantt-page .view-tab {
    min-height: 36px;
    padding: 7px 14px;
    border-radius: 6px;
    box-shadow: none;
}

body.visual-v2.gantt-page :where(
    .project-info-card,
    .toolbar,
    .gantt-card,
    .milestones-card,
    #wbs-stats,
    #wbs-toolbar,
    #wbs-body
) {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.gantt-page .project-info-card {
    border-left: 4px solid var(--primary);
}

body.visual-v2.gantt-page .progress-bar-fill {
    background: var(--primary);
}

body.visual-v2.gantt-page .info-label {
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

body.visual-v2.gantt-page :where(.view-btn, .wbs-filter-btn, .wbs-nav-btn) {
    border-radius: 6px;
    box-shadow: none;
}

body.visual-v2.gantt-page :where(.view-btn.active, .wbs-filter-btn.active, .wbs-nav-btn.active) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

body.visual-v2.gantt-page .wbs-stat-item.inprog .wbs-stat-value { color: var(--warning); }
body.visual-v2.gantt-page .wbs-stat-item.done .wbs-stat-value { color: var(--success); }
body.visual-v2.gantt-page .wbs-stat-item.overdue .wbs-stat-value { color: var(--danger); }

/* User administration workbench */
body.visual-v2.user-management-page .container {
    max-width: 1400px;
    padding-block: 20px 32px;
}

body.visual-v2.user-management-page .tabs {
    width: fit-content;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.user-management-page .tab {
    min-height: 38px;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: transparent;
}

body.visual-v2.user-management-page .tab.active {
    background: var(--primary);
    color: #fff;
}

body.visual-v2.user-management-page .admin-tools {
    padding: 10px 12px;
    background: var(--warning-light);
    border-color: #f6d58b;
}

body.visual-v2.user-management-page :where(.admin-tools-title, .admin-tool-btn) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.visual-v2.user-management-page .admin-tool-btn.backfill {
    background: var(--warning);
}

body.visual-v2.user-management-page .admin-tool-btn.feishu {
    background: var(--success);
}

body.visual-v2.user-management-page .panel {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.user-management-page .panel h2 {
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-lg);
}

body.visual-v2.user-management-page .info-box {
    margin: 14px 18px;
}

body.visual-v2.user-management-page .user-table {
    min-width: 860px;
}

body.visual-v2.user-management-page .user-table th {
    padding: 10px 12px;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    text-transform: none;
}

body.visual-v2.user-management-page .user-table td {
    padding: 10px 12px;
}

body.visual-v2.user-management-page .action-buttons {
    flex-wrap: wrap;
    gap: 6px;
}

body.visual-v2.user-management-page .action-btn {
    padding-inline: 10px;
}

body.visual-v2.user-management-page .btn-approve { background: var(--success); color: #fff; }
body.visual-v2.user-management-page .btn-reject { background: var(--danger); color: #fff; }
body.visual-v2.user-management-page .btn-edit { background: var(--primary); color: #fff; }
body.visual-v2.user-management-page .btn-disable { background: var(--text-secondary); color: #fff; }

body.visual-v2.user-management-page .modal-content {
    border-radius: 8px;
}

/* Data management workbench */
body.visual-v2.bulk-import-page .container {
    padding-block: 20px 36px;
}

body.visual-v2.bulk-import-page .tabs {
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.bulk-import-page .tab-btn {
    min-height: 40px;
    padding: 8px 16px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body.visual-v2.bulk-import-page .tab-btn.active {
    color: #fff;
    background: var(--primary);
}

body.visual-v2.bulk-import-page .tab-panel {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.bulk-import-page .card {
    border-radius: 6px;
    background: var(--surface-subtle);
}

body.visual-v2.bulk-import-page :where(.card-title, .drop-icon) {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.visual-v2.bulk-import-page .drop-icon {
    justify-content: center;
    color: var(--primary);
}

body.visual-v2.bulk-import-page .drop-icon svg {
    width: 34px;
    height: 34px;
}

body.visual-v2.bulk-import-page .file-drop {
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.bulk-import-page .template-grid .btn {
    justify-content: flex-start;
    min-height: 40px;
    white-space: normal;
    text-align: left;
}

body.visual-v2.bulk-import-page .code {
    border-radius: 6px;
    background: #172033;
}

body.visual-v2.bulk-import-page .alert {
    border-radius: 6px;
}

@media (max-width: 768px) {
    body.visual-v2.operations-page :where(.page-container, .container) {
        padding-inline: 12px;
    }

    body.visual-v2.operations-page :where(.page-header, .header-content) {
        gap: 10px;
    }

    body.visual-v2.task-management-page .toolbar {
        align-items: stretch;
    }

    body.visual-v2.task-management-page .filter-group {
        width: 100%;
        margin-left: 0;
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    body.visual-v2.gantt-page #view-tabs {
        top: 57px;
        padding: 8px 12px;
        overflow-x: auto;
    }

    body.visual-v2.gantt-page .view-tab {
        flex: 0 0 auto;
    }

    body.visual-v2.gantt-page .info-grid {
        grid-template-columns: 1fr 1fr;
    }

    body.visual-v2.user-management-page .tabs,
    body.visual-v2.bulk-import-page .tabs {
        width: 100%;
        overflow-x: auto;
    }

    body.visual-v2.user-management-page .tab,
    body.visual-v2.bulk-import-page .tab-btn {
        flex: 0 0 auto;
    }

    body.visual-v2.bulk-import-page .tab-panel {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    body.visual-v2.operations-page :where(
        .btn,
        .btn-primary,
        .btn-secondary,
        .btn-danger,
        .btn-header,
        .btn-back,
        .admin-tool-btn
    ) {
        min-height: 40px;
    }

    body.visual-v2.gantt-page .info-grid {
        grid-template-columns: 1fr;
    }

    body.visual-v2.user-management-page .admin-tools {
        align-items: stretch;
    }

    body.visual-v2.user-management-page .admin-tool-btn {
        width: 100%;
    }

    body.visual-v2.bulk-import-page .template-grid {
        grid-template-columns: 1fr;
    }
}


/* visual-system-v5-travel-and-comp */
body.visual-v2.travel-form-page .container { max-width: 1120px; }

body.visual-v2.travel-form-page :where(.form-card h1, .header-content h2) {
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0;
}

body.visual-v2.travel-form-page :where(.transport-option, .status-option, .travel-days-display, .expense-allocation-list) {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.travel-form-page :where(.transport-option.selected, .status-option.selected) {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

body.visual-v2.travel-form-page .expense-total {
    border-radius: 8px;
    background: var(--brand-primary-strong);
}

body.visual-v2.travel-form-page .project-tag {
    border-radius: 6px;
    background: var(--primary-light);
}

body.visual-v2.travel-form-page .btn-add-item {
    min-height: 36px;
    border-width: 1px;
    border-radius: 6px;
}

body.visual-v2.travel-form-page .btn-remove-item {
    border-radius: 6px;
    background: var(--danger);
}

body.visual-v2.travel-form-page .project-search-results {
    border-width: 1px;
    border-radius: 0 0 8px 8px;
}

body.visual-v2.travel-form-page .submit-section {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-canvas) 94%, transparent);
    backdrop-filter: blur(8px);
}

/* Travel list workbench */
body.visual-v2.travel-list-page .container {
    max-width: 1440px;
    padding-block: 20px 36px;
}

body.visual-v2.travel-list-page .summary-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.travel-list-page .summary-item {
    border-right: 1px solid var(--border);
}

body.visual-v2.travel-list-page .summary-item:last-child {
    border-right: 0;
}

body.visual-v2.travel-list-page :where(.analytics-panel, .panel, .travel-card) {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.travel-list-page .analytics-header {
    padding: 14px 16px;
}

body.visual-v2.travel-list-page :where(.analytics-title-icon, .analytics-tab, .panel-title) {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.visual-v2.travel-list-page .analytics-tabs {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.travel-list-page .analytics-tab {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 6px;
}

body.visual-v2.travel-list-page .analytics-tab.active {
    background: var(--primary);
    color: #fff;
}

body.visual-v2.travel-list-page .filters {
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

body.visual-v2.travel-list-page .filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.visual-v2.travel-list-page :where(.btn-filter, .btn-reset, .btn-export, .view-btn) {
    min-height: 36px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body.visual-v2.travel-list-page .btn-filter {
    background: var(--primary);
}

body.visual-v2.travel-list-page .btn-export {
    background: var(--success);
}

body.visual-v2.travel-list-page .view-toggle {
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.travel-list-page .view-btn {
    border: 0;
    background: transparent;
}

body.visual-v2.travel-list-page .view-btn.active {
    background: var(--primary);
    color: #fff;
}

body.visual-v2.travel-list-page .records-table th {
    padding: 10px 12px;
    background: var(--surface-subtle);
}

body.visual-v2.travel-list-page .records-table td {
    padding: 10px 12px;
}

body.visual-v2.travel-list-page .record-actions {
    gap: 6px;
    flex-wrap: wrap;
}

body.visual-v2.travel-list-page .action-btn {
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.visual-v2.travel-list-page .btn-edit { background: var(--primary); color: #fff; }
body.visual-v2.travel-list-page .btn-delete { background: var(--danger); color: #fff; }

/* Comp-time workbench */
body.visual-v2.comp-time-page .container {
    max-width: 1440px;
    padding-block: 20px 36px;
}

body.visual-v2.comp-time-page .page-intro {
    max-width: 1100px;
    color: var(--text-secondary);
}

body.visual-v2.comp-time-page :where(
    .panel,
    .stat-card,
    .analysis-chart-card,
    .ranking-card,
    .overtime-day-detail,
    .hint-box,
    .notice-banner
) {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.comp-time-page .panel {
    padding: 18px;
}

body.visual-v2.comp-time-page .panel-title {
    letter-spacing: 0;
}

body.visual-v2.comp-time-page .filters {
    padding: 12px;
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.comp-time-page .stat-card {
    background: var(--bg-card);
}

body.visual-v2.comp-time-page .stat-card.success {
    border-top-color: var(--success);
}

body.visual-v2.comp-time-page .stat-card.warning {
    border-top-color: var(--warning);
}

body.visual-v2.comp-time-page :where(.analysis-chart-card, .ranking-card) {
    background: var(--surface-subtle);
}

body.visual-v2.comp-time-page .ranking-summary {
    border-radius: 6px;
}

body.visual-v2.comp-time-page :where(.btn, .panel-title) svg,
body.visual-v2.travel-list-page :where(.btn, .analytics-tab, .btn-filter, .btn-reset, .btn-export, .view-btn, .action-btn) svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    body.visual-v2.travel-list-page .summary-row {
        grid-template-columns: repeat(2, 1fr);
    }

    body.visual-v2.travel-list-page .summary-item:nth-child(2) {
        border-right: 0;
    }

    body.visual-v2.travel-list-page .analytics-tabs,
    body.visual-v2.travel-list-page .view-toggle {
        overflow-x: auto;
    }

    body.visual-v2.travel-list-page .analytics-tab,
    body.visual-v2.travel-list-page .view-btn {
        flex: 0 0 auto;
    }

    body.visual-v2.comp-time-page .panel {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    body.visual-v2.travel-form-page .submit-section {
        flex-direction: column;
    }

    body.visual-v2.travel-form-page :where(.submit-btn, .cancel-btn) {
        width: 100%;
    }

    body.visual-v2.travel-list-page .filter-actions > button {
        flex: 1 1 calc(50% - 8px);
    }

    body.visual-v2.comp-time-page .header-actions {
        width: 100%;
        overflow-x: auto;
    }

    body.visual-v2.comp-time-page .header-actions .btn {
        flex: 0 0 auto;
    }
}


/* visual-system-v5-reports-calendar */
body.visual-v2.workspace-page {
    background: var(--surface-canvas);
    color: var(--text-primary);
}

body.visual-v2.workspace-page :where(.btn, .btn-back, button) {
    letter-spacing: 0;
}

body.visual-v2.workspace-page :where(.btn, .btn-back, .export-btn, .kpi-save-btn, .btn-action, .generate-btn, .preview-actions button, .save-template-btn, .save-settings-btn) {
    border-radius: 6px;
}

body.visual-v2.workspace-page :where(.btn, .btn-back, .export-btn, .kpi-save-btn, .btn-action, .generate-btn, .preview-actions button, .save-template-btn, .save-settings-btn) svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

body.visual-v2.workspace-page .lucide-loader {
    animation: workspace-spin 0.8s linear infinite;
}

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

/* Calendar */
body.visual-v2.calendar-page .page-header {
    box-shadow: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

body.visual-v2.calendar-page :where(.btn-back, .detail-edit-link, .modal-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body.visual-v2.calendar-page .legend {
    padding: 4px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
}

body.visual-v2.calendar-page .filter-toggle {
    min-height: 34px;
    border-radius: 6px;
    box-shadow: none;
}

body.visual-v2.calendar-page .main-content {
    max-width: 1440px;
    padding: 18px 24px 32px;
}

body.visual-v2.calendar-page .calendar-frame {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    overflow: hidden;
}

body.visual-v2.calendar-page .event-modal {
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(15,23,42,0.22);
}

body.visual-v2.calendar-page .modal-close {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 6px;
}

/* Annual report */
body.visual-v2.annual-report-page .container { max-width: 1440px; }

body.visual-v2.annual-report-page :where(.kpi-section, .chart-card, .rank-card, .ov-card) {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.annual-report-page .kpi-section {
    background: var(--bg-card);
}

body.visual-v2.annual-report-page .kpi-inputs {
    gap: 12px;
}

body.visual-v2.annual-report-page :where(.kpi-save-btn, .export-btn) {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body.visual-v2.annual-report-page .overview-grid {
    gap: 10px;
}

body.visual-v2.annual-report-page .ov-card {
    padding: 14px;
}

body.visual-v2.annual-report-page .chart-card {
    padding: 16px;
}

body.visual-v2.annual-report-page .rank-table th {
    background: var(--surface-subtle);
}

/* Project report wizard */
body.visual-v2.project-report-page .container { max-width: 1180px; }

body.visual-v2.project-report-page .steps-indicator {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.project-report-page .step {
    min-height: 52px;
}

body.visual-v2.project-report-page .step-number {
    border-radius: 6px;
}

body.visual-v2.project-report-page :where(.select-card, .data-preview, .report-preview, .export-card) {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.project-report-page .period-btn {
    border-radius: 6px;
}

body.visual-v2.project-report-page .period-btn.active {
    background: var(--primary);
    color: #fff;
}

body.visual-v2.project-report-page .action-buttons {
    gap: 8px;
    flex-wrap: wrap;
}

body.visual-v2.project-report-page .btn-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* Weekly brief */
body.visual-v2.weekly-brief-page .container {
    max-width: 1440px;
    gap: 16px;
}

body.visual-v2.weekly-brief-page .panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.weekly-brief-page .panel h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.visual-v2.weekly-brief-page :where(.stats-grid, .notice, .email-target-panel, .auto-send-settings) {
    border-radius: 8px;
}

body.visual-v2.weekly-brief-page .preview-actions {
    gap: 6px;
    flex-wrap: wrap;
}

body.visual-v2.weekly-brief-page :where(.generate-btn, .preview-actions button, .save-template-btn, .save-settings-btn) {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body.visual-v2.weekly-brief-page .generate-btn {
    background: var(--primary);
}

body.visual-v2.weekly-brief-page .email-btn {
    background: var(--success);
}

@media (max-width: 768px) {
    body.visual-v2.calendar-page .page-header {
        align-items: stretch;
    }

    body.visual-v2.calendar-page .calendar-header-actions,
    body.visual-v2.calendar-page .legend {
        overflow-x: auto;
    }

    body.visual-v2.calendar-page .filter-toggle {
        flex: 0 0 auto;
    }

    body.visual-v2.annual-report-page .overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.visual-v2.project-report-page .steps-indicator {
        overflow-x: auto;
    }

    body.visual-v2.project-report-page .step {
        flex: 0 0 150px;
    }

    body.visual-v2.weekly-brief-page .container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body.visual-v2.calendar-page .main-content { padding: 12px; }
    body.visual-v2.annual-report-page .overview-grid { grid-template-columns: 1fr; }
    body.visual-v2.project-report-page .action-buttons .btn-action { width: 100%; }
    body.visual-v2.weekly-brief-page .preview-actions button { flex: 1 1 calc(50% - 6px); }
}


/* visual-system-v6-daily-overtime */
body.visual-v2.daily-tasks-page .container {
    max-width: 1400px;
    padding-block: 20px 36px;
}

body.visual-v2.daily-tasks-page .page-header {
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.daily-tasks-page :where(.page-title, .btn-home, .btn-white, .btn-create, .action-btn),
body.visual-v2.overtime-list-page :where(.back-btn, .btn-new, .toolbar-title) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    letter-spacing: 0;
}

body.visual-v2.daily-tasks-page .page-title svg {
    width: 24px;
    height: 24px;
}

body.visual-v2.daily-tasks-page :where(.btn-home, .btn-white, .btn-create) {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 6px;
}

body.visual-v2.daily-tasks-page .btn-create {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

body.visual-v2.daily-tasks-page .stats-overview {
    gap: 10px;
}

body.visual-v2.daily-tasks-page .stat-card {
    min-height: 72px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
    text-align: left;
}

body.visual-v2.daily-tasks-page .stat-icon {
    color: var(--primary);
}

body.visual-v2.daily-tasks-page .stat-icon svg {
    width: 20px;
    height: 20px;
}

body.visual-v2.daily-tasks-page :where(.filter-section, .tasks-list) {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.daily-tasks-page .filter-section {
    padding: 16px;
}

body.visual-v2.daily-tasks-page :where(.filter-group select, .filter-group input) {
    min-height: 38px;
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--bg-card);
}

body.visual-v2.daily-tasks-page .quick-filter-btn {
    min-height: 32px;
    border-radius: 6px;
}

body.visual-v2.daily-tasks-page .task-item {
    padding: 14px 16px;
}

body.visual-v2.daily-tasks-page .task-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
}

body.visual-v2.daily-tasks-page .action-btn {
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 6px;
}

body.visual-v2.daily-tasks-page :where(.btn-home, .btn-white, .btn-create, .action-btn) svg,
body.visual-v2.overtime-list-page :where(.back-btn, .btn-new, .toolbar-title) svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* Daily task create and edit */
body.visual-v2.daily-task-form-page .container {
    max-width: 980px;
    padding-block: 20px 36px;
}

body.visual-v2.daily-task-form-page .page-header {
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.daily-task-form-page :where(.page-title, .btn-home, .btn-delete) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body.visual-v2.daily-task-form-page .page-title svg {
    width: 24px;
    height: 24px;
}

body.visual-v2.daily-task-form-page .form-card {
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.daily-task-form-page .form-section-title {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-heading);
}

body.visual-v2.daily-task-form-page .type-selector {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

body.visual-v2.daily-task-form-page .type-option {
    min-height: 94px;
    padding: 13px 10px;
    border-width: 1px;
    border-radius: 8px;
}

body.visual-v2.daily-task-form-page .type-option.selected {
    box-shadow: inset 0 0 0 1px var(--primary);
}

body.visual-v2.daily-task-form-page .subtype-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.daily-task-form-page .subtype-btn,
body.visual-v2.daily-task-form-page .quick-duration-btn {
    min-height: 32px;
    border-radius: 6px;
}

body.visual-v2.daily-task-form-page .btn-delete {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 6px;
}

body.visual-v2.daily-task-form-page :where(.btn-home, .btn-delete, .btn-submit, .btn-cancel) svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* Overtime list */
body.visual-v2.overtime-list-page :where(.container, .header-content) {
    max-width: 1200px;
}

body.visual-v2.overtime-list-page .container {
    padding-block: 20px 36px;
}

body.visual-v2.overtime-list-page .back-btn,
body.visual-v2.overtime-list-page .btn-new {
    min-height: 36px;
    border-radius: 6px;
}

body.visual-v2.overtime-list-page .btn-new {
    background: var(--primary);
    box-shadow: none;
}

body.visual-v2.overtime-list-page .stats-bar {
    gap: 10px;
}

body.visual-v2.overtime-list-page .stat-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.overtime-list-page .toolbar {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: none;
}

body.visual-v2.overtime-list-page .filter-row {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.overtime-list-page .filter-select {
    min-height: 38px;
    border-width: 1px;
    border-color: var(--border-strong);
    border-radius: 6px;
}

body.visual-v2.overtime-list-page .record-card {
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.overtime-list-page .record-card:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
}

/* Overtime application */
body.visual-v2.overtime-form-page :where(.container, .header-content) {
    max-width: 920px;
}

body.visual-v2.overtime-form-page .container {
    padding-block: 20px 36px;
}

body.visual-v2.overtime-form-page :where(.header-record-link, .notice-box, .radio-option, .duration-label, .btn-submit, .feishu-approval-button) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.visual-v2.overtime-form-page .page-header {
    padding: 20px 22px;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.overtime-form-page .page-header h1 {
    color: var(--text-heading);
}

body.visual-v2.overtime-form-page .form-card {
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.overtime-form-page .form-section-title {
    color: var(--text-heading);
    border-bottom: 1px solid var(--border);
}

body.visual-v2.overtime-form-page :where(.form-input, .form-select, .form-textarea) {
    border-width: 1px;
    border-radius: 6px;
    background: var(--bg-card);
}

body.visual-v2.overtime-form-page .radio-option {
    min-height: 46px;
    padding: 11px 14px;
    border-width: 1px;
    border-radius: 6px;
}

body.visual-v2.overtime-form-page .duration-display {
    border: 1px solid #fcd34d;
    border-radius: 6px;
    background: var(--warning-light);
}

body.visual-v2.overtime-form-page .notice-box {
    align-items: flex-start;
    border-radius: 8px;
}

body.visual-v2.overtime-form-page .notice-box strong {
    white-space: nowrap;
}

body.visual-v2.overtime-form-page .btn-submit {
    justify-content: center;
    min-height: 46px;
    border-radius: 6px;
    background: var(--primary);
    box-shadow: none;
}

body.visual-v2.overtime-form-page .feishu-approval-button {
    border-radius: 6px;
}

body.visual-v2.overtime-form-page :where(.header-record-link, .notice-box, .radio-option, .duration-label, .btn-submit, .feishu-approval-button) svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    body.visual-v2.daily-tasks-page .filter-row {
        align-items: stretch;
    }

    body.visual-v2.daily-tasks-page .filter-group,
    body.visual-v2.daily-tasks-page .filter-group select,
    body.visual-v2.daily-tasks-page .filter-group input {
        width: 100%;
    }

    body.visual-v2.daily-tasks-page .btn-create-push {
        margin-left: 0;
    }

    body.visual-v2.daily-task-form-page .form-card,
    body.visual-v2.overtime-form-page .form-card {
        padding: 16px;
    }

    body.visual-v2.overtime-list-page .filter-select {
        flex: 1 1 180px;
    }
}

@media (max-width: 480px) {
    body.visual-v2.daily-tasks-page .stats-overview,
    body.visual-v2.overtime-list-page .stats-bar {
        grid-template-columns: 1fr 1fr;
    }

    body.visual-v2.daily-tasks-page .page-header,
    body.visual-v2.daily-task-form-page .page-header {
        align-items: stretch;
    }

    body.visual-v2.daily-tasks-page .btn-home,
    body.visual-v2.daily-task-form-page .btn-home {
        width: 100%;
    }

    body.visual-v2.overtime-list-page .toolbar {
        align-items: stretch;
    }

    body.visual-v2.overtime-list-page .btn-new {
        width: 100%;
    }

    body.visual-v2.overtime-form-page .radio-group {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* visual-system-v7-profile-and-cases */
body.visual-v2.profile-suite-page {
    background: var(--surface-canvas);
    color: var(--text-primary);
}

body.visual-v2.profile-suite-page .header {
    box-shadow: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

body.visual-v2.profile-suite-page :where(.header-title, .back-btn, .cp-btn, .cs-btn, .btn-add, .btn-save-fab, .btn-seed, .edit-link, .filter-title, .cs-toolbar-title) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    letter-spacing: 0;
}

body.visual-v2.profile-suite-page :where(.back-btn, .cp-btn, .cs-btn, .btn-add, .btn-save-fab, .btn-seed, .edit-link) {
    min-height: 36px;
    border-radius: 6px;
}

body.visual-v2.profile-suite-page :where(.header-title, .back-btn, .cp-btn, .cs-btn, .btn-add, .btn-save-fab, .btn-seed, .edit-link, .filter-title, .cs-toolbar-title) svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

body.visual-v2.profile-suite-page .header-title svg {
    width: 19px;
    height: 19px;
}

/* Profile editor */
body.visual-v2.profile-editor-page .profile-main {
    width: min(100%, 1040px);
    max-width: 1040px;
    padding: 20px 16px 96px;
}

body.visual-v2.profile-editor-page .profile-card {
    margin-bottom: 14px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.profile-editor-page .profile-card h2 {
    margin-bottom: 14px;
    color: var(--text-heading);
    border-bottom-color: var(--border);
}

body.visual-v2.profile-editor-page .form-row {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
}

body.visual-v2.profile-editor-page :where(.form-row input, .form-row textarea, .form-row select, .exp-row input) {
    min-height: 38px;
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--bg-card);
}

body.visual-v2.profile-editor-page .exp-row {
    grid-template-columns: 96px 96px minmax(170px, 1.2fr) minmax(140px, 1fr) minmax(140px, 1fr) 34px;
    gap: 8px;
    padding: 10px;
    border-color: var(--border);
    border-radius: 8px;
    background: var(--surface-subtle);
}

body.visual-v2.profile-editor-page .ext-project-row {
    grid-template-columns: 150px minmax(0, 1fr) 34px;
}

body.visual-v2.profile-editor-page .btn-remove {
    width: 32px;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
}

body.visual-v2.profile-editor-page .btn-add {
    padding: 7px 12px;
    border-style: solid;
    background: var(--primary-light);
}

body.visual-v2.profile-editor-page .profile-actions {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.96);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
}

body.visual-v2.profile-editor-page .profile-actions :where(.btn-save-fab, .btn-seed) {
    position: static;
    margin: 0;
    padding: 9px 14px;
    box-shadow: none;
}

body.visual-v2.profile-editor-page .btn-save-fab {
    background: var(--primary);
}

body.visual-v2.profile-editor-page .btn-seed {
    background: var(--warning);
}

/* Capability profile */
body.visual-v2.capability-profile-page .cp-wrapper {
    width: min(100%, 1180px);
    max-width: 1180px;
    padding: 20px 16px 36px;
}

body.visual-v2.capability-profile-page .cp-toolbar {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.capability-profile-page :where(.cp-toolbar select, .cp-toolbar input) {
    min-height: 36px;
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--bg-card);
}

body.visual-v2.capability-profile-page .cp-btn {
    background: var(--primary);
}

body.visual-v2.capability-profile-page .cp-btn.ghost {
    color: var(--primary);
    border-color: var(--primary);
}

body.visual-v2.capability-profile-page .cp-section {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
    overflow-x: auto;
}

body.visual-v2.capability-profile-page .cp-section h3 {
    position: sticky;
    left: 0;
    padding: 12px 16px;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border);
    background: var(--surface-subtle);
}

body.visual-v2.capability-profile-page :where(.ref-table, .ws-table) {
    min-width: 720px;
}

body.visual-v2.capability-profile-page :where(.ref-table th, .ref-table td, .ws-table th, .ws-table td) {
    padding: 9px 12px;
    border-color: var(--border);
}

body.visual-v2.capability-profile-page .member-grid {
    gap: 10px;
    padding: 14px;
}

body.visual-v2.capability-profile-page .member-card {
    border-radius: 8px;
    background: var(--bg-card);
}

body.visual-v2.capability-profile-page .chip {
    border-radius: 6px;
}

/* Case library */
body.visual-v2.case-library-page .cs-wrapper {
    width: min(100%, 1180px);
    max-width: 1180px;
    padding: 20px 16px 36px;
}

body.visual-v2.case-library-page .cs-toolbar {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.case-library-page .cs-toolbar-title {
    justify-content: flex-start;
}

body.visual-v2.case-library-page .cs-filters label {
    min-height: 32px;
    padding: 5px 10px;
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface-subtle);
}

body.visual-v2.case-library-page .cs-filters label.active {
    background: var(--primary);
    border-color: var(--primary);
}

body.visual-v2.case-library-page :where(.cs-toolbar-row select, .cs-toolbar-row input[type=text]) {
    min-height: 36px;
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--bg-card);
}

body.visual-v2.case-library-page .cs-btn {
    background: var(--primary);
}

body.visual-v2.case-library-page .cs-btn.ghost {
    background: var(--bg-card);
    color: var(--primary);
    border-color: var(--primary);
}

body.visual-v2.case-library-page .cs-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    color: var(--text-primary);
    background: transparent;
    border-radius: 0;
}

body.visual-v2.case-library-page .cs-stat {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 8px;
    background: var(--bg-card);
}

body.visual-v2.case-library-page .cs-stat .num {
    color: var(--text-heading);
    letter-spacing: 0;
}

body.visual-v2.case-library-page .cs-stat .lbl {
    color: var(--text-secondary);
    opacity: 1;
}

body.visual-v2.case-library-page .case-card {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
    overflow-x: auto;
}

body.visual-v2.case-library-page .case-card .hd {
    position: sticky;
    left: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-subtle);
}

body.visual-v2.case-library-page .case-table {
    min-width: 760px;
}

body.visual-v2.case-library-page :where(.case-table th, .case-table td) {
    padding: 9px 12px;
    border-color: var(--border);
}

body.visual-v2.case-library-page .case-card .hd .cats span {
    border-radius: 6px;
}

body.visual-v2.case-library-page .edit-link {
    padding: 5px 9px;
}

body.visual-v2.case-library-page .empty-state {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.case-library-page .empty-state .ic svg {
    width: 42px;
    height: 42px;
    color: var(--text-muted);
}

/* Case tagging */
body.visual-v2.case-tagging-page .wrap {
    width: min(100%, 1440px);
    max-width: 1440px;
    padding: 20px 16px 36px;
}

body.visual-v2.case-tagging-page .toolbar {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.case-tagging-page .filter-title {
    color: var(--text-heading);
}

body.visual-v2.case-tagging-page :where(.toolbar input, .toolbar select) {
    min-height: 36px;
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--bg-card);
}

body.visual-v2.case-tagging-page .btn {
    background: var(--primary);
}

body.visual-v2.case-tagging-page .proj-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
    overflow-x: auto;
}

body.visual-v2.case-tagging-page .proj-row {
    min-width: 1060px;
    grid-template-columns: minmax(180px, 1.2fr) minmax(150px, 1fr) minmax(360px, 2.5fr) minmax(130px, 0.8fr) 82px;
    padding: 10px 14px;
    border-bottom-color: var(--border);
}

body.visual-v2.case-tagging-page .proj-row.header {
    background: var(--surface-subtle);
}

body.visual-v2.case-tagging-page .cat-pills label {
    border-radius: 6px;
}

body.visual-v2.case-tagging-page .tag-input {
    min-height: 32px;
    border-radius: 6px;
}

body.visual-v2.case-tagging-page .pagination-bar {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
}

body.visual-v2.case-tagging-page .pager-btn {
    border-radius: 6px;
}

body.visual-v2.case-tagging-page .pager-btn.active {
    background: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 768px) {
    body.visual-v2.profile-editor-page .form-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    body.visual-v2.profile-editor-page .form-row label {
        padding-top: 0;
    }

    body.visual-v2.profile-editor-page .exp-row {
        grid-template-columns: 1fr 1fr;
    }

    body.visual-v2.profile-editor-page .ext-project-row {
        grid-template-columns: 120px minmax(0, 1fr) 34px;
    }

    body.visual-v2.capability-profile-page .cp-toolbar,
    body.visual-v2.case-library-page .cs-toolbar-row {
        align-items: stretch;
    }

    body.visual-v2.case-library-page .cs-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.visual-v2.case-library-page .cs-toolbar-fill,
    body.visual-v2.case-tagging-page .toolbar-spacer {
        display: none;
    }

    body.visual-v2.case-tagging-page .search-input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    body.visual-v2.profile-editor-page .profile-actions {
        right: 12px;
        bottom: 12px;
        left: 12px;
    }

    body.visual-v2.profile-editor-page .profile-actions :where(.btn-save-fab, .btn-seed) {
        flex: 1 1 auto;
    }

    body.visual-v2.profile-editor-page .profile-actions .btn-seed span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.visual-v2.capability-profile-page .cp-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    body.visual-v2.capability-profile-page .toolbar-inline {
        display: grid;
        grid-template-columns: 1fr;
    }

    body.visual-v2.case-library-page .cs-stats {
        grid-template-columns: 1fr 1fr;
    }

    body.visual-v2.case-library-page .cs-toolbar-row :where(select, input[type=text], .cs-btn) {
        width: 100%;
    }

    body.visual-v2.case-tagging-page .toolbar {
        align-items: stretch;
    }

    body.visual-v2.case-tagging-page .toolbar :where(input, select, .btn) {
        width: 100%;
    }

    body.visual-v2.case-tagging-page .pagination-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* visual-system-v8-admin-operations */
body.visual-v2.admin-operations-page {
    background: var(--bg-base);
    color: var(--text-primary);
}

body.visual-v2.admin-operations-page :where(.container, .wrap) {
    width: min(100% - 32px, 1400px);
    margin-inline: auto;
}

body.visual-v2.admin-operations-page :where(.header, .topbar) {
    box-shadow: none;
    border-bottom: 1px solid var(--border);
}

body.visual-v2.admin-operations-page :where(.header-title, .page-title, .topbar h1, .logo) {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.visual-v2.admin-operations-page :where(button, .btn, .back-link, .topbar a) svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

body.visual-v2.admin-operations-page :where(.action-bar, .filter-bar, .tabs, .section-block, .projects-list, .request-card, .match-card, .stat-card, .info-banner) {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.admin-operations-page :where(.btn, .btn-action, .row-btn, .tab-btn, .admin-sync-btn, .logout-btn, .confirm-btn, .skip-btn) {
    min-height: 36px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body.visual-v2.membership-requests-page .container {
    max-width: 1120px;
    margin-top: 24px;
}

body.visual-v2.membership-requests-page .tabs {
    padding: 4px;
    background: var(--surface);
    border-bottom-width: 1px;
}

body.visual-v2.membership-requests-page .tab-btn {
    border: 1px solid transparent;
    margin: 0;
}

body.visual-v2.membership-requests-page .tab-btn.active {
    background: var(--primary-light);
    border-color: #c7d2fe;
}

body.visual-v2.membership-requests-page .request-card {
    padding: 14px 16px;
}

body.visual-v2.membership-requests-page .empty {
    border: 1px dashed var(--border);
    border-radius: 8px;
}

body.visual-v2.recycle-bin-page .container {
    max-width: 1280px;
    padding-top: 24px;
}

body.visual-v2.recycle-bin-page .info-banner {
    padding: 16px 18px;
    border-width: 1px;
    background: var(--warning-light);
}

body.visual-v2.recycle-bin-page .info-banner-icon svg,
body.visual-v2.recycle-bin-page .stat-icon svg,
body.visual-v2.recycle-bin-page .empty-icon svg {
    width: 24px;
    height: 24px;
}

body.visual-v2.recycle-bin-page .stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.visual-v2.recycle-bin-page .stat-card {
    min-width: 0;
    padding: 14px 16px;
}

body.visual-v2.recycle-bin-page .action-bar {
    padding: 12px 14px;
}

body.visual-v2.recycle-bin-page .projects-list {
    overflow-x: auto;
}

body.visual-v2.recycle-bin-page :where(.list-header, .list-row) {
    min-width: 980px;
    padding: 12px 14px;
}

body.visual-v2.recycle-bin-page .confirm-modal-content {
    border-radius: 8px;
}

body.visual-v2.feishu-calibration-page .topbar {
    padding: 0 24px;
    min-height: 64px;
}

body.visual-v2.feishu-calibration-page .topbar a {
    color: rgba(255, 255, 255, 0.9);
}

body.visual-v2.feishu-calibration-page .container {
    max-width: 1280px;
    padding-top: 24px;
}

body.visual-v2.feishu-calibration-page .action-bar {
    padding: 12px 14px;
}

body.visual-v2.feishu-calibration-page .stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body.visual-v2.feishu-calibration-page .stat-card {
    min-width: 0;
    padding: 12px 14px;
    text-align: left;
    border-top-width: 3px;
}

body.visual-v2.feishu-calibration-page .tabs {
    padding: 4px;
}

body.visual-v2.feishu-calibration-page .tab-btn {
    border: 1px solid transparent;
}

body.visual-v2.feishu-calibration-page .match-card {
    padding: 14px 16px;
}

body.visual-v2.feishu-calibration-page .match-side {
    border: 1px solid var(--border);
    border-radius: 6px;
}

body.visual-v2.feishu-approvals-page .container {
    max-width: 1500px;
}

body.visual-v2.feishu-approvals-page .page-header {
    color: var(--text-primary) !important;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
}

body.visual-v2.feishu-approvals-page .page-title {
    color: var(--text-heading);
}

body.visual-v2.feishu-approvals-page .admin-sync-btn {
    color: #fff;
    background: var(--primary);
}

body.visual-v2.feishu-approvals-page :where(.section-block, .filter-bar) {
    overflow: hidden;
}

body.visual-v2.feishu-approvals-page .section-header {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

body.visual-v2.feishu-approvals-page .filter-bar {
    margin: 12px;
    padding: 12px 14px;
}

body.visual-v2.feishu-approvals-page .table-wrap {
    padding: 0 12px 12px;
}

body.visual-v2.feishu-approvals-page .pagination-bar {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

@media (max-width: 768px) {
    body.visual-v2.admin-operations-page :where(.container, .wrap) {
        width: min(100% - 20px, 1400px);
        padding-inline: 0;
    }

    body.visual-v2.membership-requests-page .tabs,
    body.visual-v2.feishu-calibration-page .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    body.visual-v2.membership-requests-page .tab-btn,
    body.visual-v2.feishu-calibration-page .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    body.visual-v2.recycle-bin-page .stats-row,
    body.visual-v2.feishu-calibration-page .stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.visual-v2.recycle-bin-page .action-bar,
    body.visual-v2.feishu-calibration-page .action-bar,
    body.visual-v2.feishu-approvals-page .filter-bar {
        align-items: stretch;
    }

    body.visual-v2.feishu-approvals-page .filter-bar :where(select, input) {
        width: 100%;
        min-width: 0;
    }
}

/* visual-system-v9-support-pages */
body.visual-v2.guide-page {
    background: var(--bg-base);
    color: var(--text-primary);
}

body.visual-v2.guide-page .guide-top-nav {
    min-height: 64px;
    box-shadow: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

body.visual-v2.guide-page :where(.guide-top-nav .logo, .top-actions, .top-actions a, .print-btn, .guide-content h1) {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.visual-v2.guide-page :where(.guide-top-nav svg, .guide-content h1 svg) {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

body.visual-v2.guide-page .guide-layout {
    max-width: 1440px;
    gap: 20px;
}

body.visual-v2.guide-page .guide-sidebar {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.guide-page .guide-content {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.guide-page .guide-content section {
    scroll-margin-top: 80px;
}

body.visual-v2.pending-approval-page {
    background: var(--bg-base);
}

body.visual-v2.pending-approval-page .pending-container {
    max-width: 680px;
    margin: 36px auto;
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

body.visual-v2.pending-approval-page .icon {
    color: var(--warning);
}

body.visual-v2.pending-approval-page .icon svg {
    width: 44px;
    height: 44px;
}

body.visual-v2.pending-approval-page :where(.status-title, .guide-link, .button-group .btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.visual-v2.pending-approval-page .status-box,
body.visual-v2.pending-approval-page .info-grid,
body.visual-v2.pending-approval-page .steps,
body.visual-v2.pending-approval-page .guide-link-panel,
body.visual-v2.pending-approval-page .contact-info {
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.todo-board-page {
    background: var(--bg-base);
}

body.visual-v2.todo-board-page .todo-board-container {
    width: min(100% - 32px, 1500px);
    margin-inline: auto;
    padding-block: 24px 36px;
}

body.visual-v2.todo-board-page .board-filters {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.todo-board-page :where(.header-actions .btn, .nav-arrow, .modal-close, .modal-footer .btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

body.visual-v2.todo-board-page :where(.nav-arrow, .modal-close) svg {
    width: 16px;
    height: 16px;
}

body.visual-v2.todo-board-page .todo-card,
body.visual-v2.todo-board-page .priority-section,
body.visual-v2.todo-board-page .modal-content {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.todo-board-page .empty-state-icon svg {
    width: 36px;
    height: 36px;
}

body.visual-v2.report-workbench-page {
    background: var(--bg-base);
}

body.visual-v2.report-workbench-page .container {
    width: min(100% - 32px, 1500px);
    max-width: none;
    padding-block: 24px 36px;
}

body.visual-v2.report-workbench-page .alert,
body.visual-v2.report-workbench-page .panel,
body.visual-v2.report-workbench-page .history-details {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}

body.visual-v2.report-workbench-page .layout {
    gap: 16px;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.45fr);
}

body.visual-v2.report-workbench-page .panel {
    padding: 18px;
}

body.visual-v2.report-workbench-page :where(.header-title, .panel h3, .action-bar .btn, .header-actions .btn) {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.visual-v2.report-workbench-page :where(.header-icon svg, .panel h3 svg) {
    width: 20px;
    height: 20px;
}

body.visual-v2.report-workbench-page .action-bar {
    padding: 10px 0 0;
    border-top: 1px solid var(--border);
    box-shadow: none;
}

body.visual-v2.report-workbench-page .secondary-action-bar {
    padding-top: 12px;
}

body.visual-v2.report-workbench-page .editor {
    min-height: 520px;
    border-radius: 6px;
}

@media (max-width: 900px) {
    body.visual-v2.guide-page .guide-layout,
    body.visual-v2.report-workbench-page .layout {
        grid-template-columns: 1fr;
    }

    body.visual-v2.guide-page .guide-sidebar {
        position: static;
        max-height: 260px;
    }
}

@media (max-width: 600px) {
    body.visual-v2.pending-approval-page .pending-container {
        margin: 16px 10px;
        padding: 20px 16px;
    }

    body.visual-v2.todo-board-page .todo-board-container,
    body.visual-v2.report-workbench-page .container {
        width: min(100% - 20px, 1500px);
    }

    body.visual-v2.todo-board-page .board-filters {
        align-items: stretch;
    }

    body.visual-v2.todo-board-page .board-filters :where(select, .time-view-bar) {
        width: 100%;
    }

    body.visual-v2.report-workbench-page .action-bar {
        align-items: stretch;
    }

    body.visual-v2.report-workbench-page .action-bar :where(.btn, input) {
        width: 100%;
    }
}


/* visual-system-v10-login-and-error */
body.visual-v2.login-page {
    align-items: stretch;
    justify-content: stretch;
    padding: clamp(24px, 4vw, 56px);
    background: var(--surface-canvas);
}
body.login-page .login-container {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr);
    width: min(1120px, 100%);
    max-width: none;
    min-height: min(780px, calc(100vh - 48px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}
body.login-page :where(.login-auth-panel, .login-info-panel) { padding: clamp(32px, 5vw, 64px); }
body.login-page .login-auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--brand-primary-strong);
    border-right: 0;
}
body.login-page .login-info-panel { overflow-y: auto; background: var(--surface-subtle); }
body.login-page .logo {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 0 24px;
    color: var(--text-inverse);
    font-size: 26px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}
body.login-page .login-eyebrow {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.login-page .title {
    margin-bottom: 12px;
    color: var(--text-inverse);
    font-size: clamp(28px, 3vw, 36px);
    letter-spacing: 0;
}
body.login-page .subtitle {
    max-width: 38ch;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
}
body.login-page .google-btn {
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-primary);
    background: var(--surface-raised);
    box-shadow: none;
}
body.login-page .login-auth-panel :where(.loading, .login-help) { color: rgba(255, 255, 255, 0.75); }
body.login-page .login-auth-panel .link-button { color: #bcd3ff; }
body.login-page .google-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--focus-ring);
}
body.login-page :where(.loading, .error-message, .login-help, .idle-banner) { text-align: left; }
body.login-page .error-message {
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: var(--danger-light);
    color: #991b1b;
}
body.login-page .idle-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    border-color: #fcd34d;
    border-radius: 6px;
    background: var(--warning-light);
}
body.login-page .idle-banner[hidden] { display: none; }
body.login-page .divider { margin: 0 0 24px; text-align: left; }
body.login-page .divider::before { display: none; }
body.login-page .divider span {
    padding: 0;
    color: var(--text-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    background: transparent;
}
body.login-page .info-box { padding: 0; color: var(--text-secondary); background: transparent; }
body.login-page .info-box > strong { color: var(--text-heading); }
body.login-page .info-box ul { margin-left: 18px; }
body.login-page .login-update-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--surface-raised);
}
body.login-page .login-domain-card { border-left-color: var(--info); background: var(--info-light); }
body.login-page .login-release-card { border-left-color: var(--primary); background: var(--surface-raised); }
body.login-page .login-history-card { border-left-color: var(--text-muted); background: var(--surface-subtle); }
body.login-page .login-version-note { color: var(--text-muted); }

body.visual-v2.error-page {
    display: grid;
    min-height: 100vh;
    padding: 24px;
    place-items: center;
    background: var(--surface-canvas);
}
body.error-page .error-shell {
    width: min(520px, 100%);
    padding: 40px;
    text-align: center;
    border: 1px solid var(--border);
    border-top: 4px solid var(--warning);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
}
body.error-page .error-code {
    color: var(--warning);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
}
body.error-page .error-icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 20px auto;
    place-items: center;
    color: var(--primary);
    font-size: 30px;
    border-radius: 8px;
    background: var(--primary-light);
}
body.error-page h1 {
    margin-bottom: 10px;
    color: var(--text-heading);
    font-size: 28px;
    letter-spacing: 0;
}
body.error-page p { margin-bottom: 28px; color: var(--text-secondary); line-height: 1.6; }
body.error-page .error-actions { display: flex; justify-content: center; gap: 10px; }
body.error-page .error-actions :where(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
@media (max-width: 820px) {
    body.visual-v2.login-page { padding: 20px; background: var(--surface-canvas); }
    body.login-page .login-container { grid-template-columns: 1fr; min-height: 0; }
}
@media (max-width: 560px) {
    body.visual-v2.login-page, body.visual-v2.error-page { padding: 12px; }
    body.login-page :where(.login-auth-panel, .login-info-panel), body.error-page .error-shell { padding: 28px 22px; }
    body.error-page .error-actions { flex-direction: column; }
    body.error-page .error-actions :where(a, button) { width: 100%; }
}

/* visual-system-v11-round9-icon-unification */
body.visual-v2.dashboard-page :where(.logo-icon, .qe-icon, .calendar-entry-icon, .action-icon) { display: inline-flex; align-items: center; justify-content: center; }
body.visual-v2.dashboard-page :where(.logo-icon, .qe-icon, .calendar-entry-icon, .action-icon) svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    stroke-width: 2;
}
body.visual-v2.dashboard-page .action-icon svg { color: var(--primary); }
body.visual-v2.dashboard-page :where(.header-guide-link, .btn-link-primary, .btn-link-secondary, .btn-link-danger, .btn-link-warning),
body.visual-v2.work-records-page :where(.btn, .btn-batch, .qf-chip, .btn-filter, .btn-reset, .action-btn),
body.visual-v2.project-management-page :where(.btn, .scope-chip, .btn-clear-filters, .btn-toggle-advanced, .view-btn, .analytics-tab, .action-btn, .list-action-btn, .pm-risk-edit, .export-button, .merge-btn, .card-filter-banner-clear),
body.visual-v2.edit-project-page :where(.category-btn, .btn-template, .btn, .btn-add-todo, .btn-restore, .btn-delete, .member-approval-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
body.visual-v2.dashboard-page :where(.header-guide-link, .btn-link-primary, .btn-link-secondary, .btn-link-danger, .btn-link-warning) svg,
body.visual-v2.work-records-page :where(.btn, .btn-batch, .qf-chip, .btn-filter, .btn-reset, .action-btn, .summary-lead-cell) svg,
body.visual-v2.project-management-page :where(.btn, .scope-chip, .btn-clear-filters, .btn-toggle-advanced, .view-btn, .analytics-tab, .action-btn, .list-action-btn, .pm-risk-edit, .export-button, .export-close, .merge-btn, .card-filter-banner-clear) svg,
body.visual-v2.edit-project-page :where(.category-btn, .btn-template, .btn, .btn-add-todo, .btn-restore, .btn-delete, .member-approval-link) svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke-width: 2;
}
body.visual-v2.project-management-page .stat-icon { display: inline-flex; align-items: center; justify-content: center; }
body.visual-v2.project-management-page .stat-icon svg { width: 22px; height: 22px; color: var(--primary); }

/* round9 修正：图标布局规则不得覆盖各页隐藏辅助类（保持更高优先级） */
body.visual-v2.dashboard-page .dashboard-hidden,
body.visual-v2.project-management-page .pm-hidden,
body.visual-v2.edit-project-page .is-hidden {
    display: none;
}

/* visual-system-v11-round10-headings-and-tables */
body.visual-v2 .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.visual-v2 .table-scroll > table { min-width: 100%; }

/* visual-system-v11-analytics-engineer-multiselect */
body.visual-v2.data-analytics-page .ms-dropdown { position: relative; }
body.visual-v2.data-analytics-page .ms-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: var(--surface-raised);
}
body.visual-v2.data-analytics-page .ms-toggle svg { width: 14px; height: 14px; flex: 0 0 auto; }
body.visual-v2.data-analytics-page .ms-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
}
body.visual-v2.data-analytics-page .ms-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
}
body.visual-v2.data-analytics-page .ms-option:hover { background: var(--primary-light); }
body.visual-v2.data-analytics-page .ms-option input { flex: 0 0 auto; }
body.visual-v2.data-analytics-page .ms-option-all { border-bottom: 1px solid var(--border); margin-bottom: 4px; font-weight: 600; }