:root {
            --sidebar-width: 220px;
            --sidebar-collapsed-width: 64px;
            --header-height: 60px;
            --sidebar-bg: #1d1e1f;
            --sidebar-hover-bg: #2d2e2f;
            --sidebar-active-bg: #409EFF;
            --sidebar-text: #a3a6ad;
            --sidebar-text-active: #ffffff;
            --content-bg: #f0f2f5;
            --card-bg: #ffffff;
            --border-color: #e4e7ed;
            --text-primary: #303133;
            --text-secondary: #606266;
            --text-muted: #909399;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--content-bg); }
        
        /* App Layout */
        .app-container { min-height: 100vh; display: flex; flex-direction: column; }
        .app-header {
            height: var(--header-height);
            background: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        .app-header .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            font-weight: 600;
            color: #409EFF;
        }
        .app-header .logo .el-icon { font-size: 24px; }
        .app-header .header-actions { display: flex; align-items: center; gap: 12px; }
        
        .app-body {
            display: flex;
            margin-top: var(--header-height);
            min-height: calc(100vh - var(--header-height));
        }
        
        /* Sidebar */
        .app-sidebar {
            width: var(--sidebar-width);
            background: var(--sidebar-bg);
            position: fixed;
            top: var(--header-height);
            left: 0;
            bottom: 0;
            transition: width 0.3s ease;
            overflow-x: hidden;
            overflow-y: auto;
            z-index: 999;
        }
        .app-sidebar.collapsed { width: var(--sidebar-collapsed-width); }
        .app-sidebar::-webkit-scrollbar { width: 4px; }
        .app-sidebar::-webkit-scrollbar-thumb { background: #3d3e3f; border-radius: 2px; }
        
        .sidebar-menu { padding: 12px 0; }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 14px 20px;
            color: var(--sidebar-text);
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            border-left: 3px solid transparent;
        }
        .menu-item:hover { background: var(--sidebar-hover-bg); color: #fff; }
        .menu-item.active {
            background: rgba(64, 158, 255, 0.15);
            color: var(--sidebar-active-bg);
            border-left-color: var(--sidebar-active-bg);
        }
        .menu-item .el-icon { font-size: 18px; min-width: 18px; }
        .menu-item span { margin-left: 12px; font-size: 14px; transition: opacity 0.2s; }
        .app-sidebar.collapsed .menu-item span { opacity: 0; width: 0; margin-left: 0; }
        .app-sidebar.collapsed .menu-item { justify-content: center; padding: 14px; }
        
        .menu-divider {
            height: 1px;
            background: #3d3e3f;
            margin: 12px 16px;
        }
        .menu-title {
            padding: 8px 20px;
            font-size: 12px;
            color: #6b6d71;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .app-sidebar.collapsed .menu-title { display: none; }
        .app-sidebar.collapsed .menu-divider { margin: 12px 8px; }
        
        /* Main Content */
        .app-main {
            flex: 1;
            margin-left: var(--sidebar-width);
            padding: calc(var(--header-height) + 24px) 24px 24px;
            transition: margin-left 0.3s ease;
            min-height: calc(100vh - var(--header-height));
        }
        .app-main.expanded { margin-left: var(--sidebar-collapsed-width); }
        
        /* Page Header */
        .page-header {
            margin-bottom: 24px;
        }
        .page-header h2 {
            font-size: 22px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .page-header p {
            font-size: 14px;
            color: var(--text-muted);
        }
        
        /* Cards */
        .page-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        }
        
        /* User Cards */
        .user-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }
        .user-grid-five {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
        .user-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            transition: transform 0.2s, box-shadow 0.2s;
            border: 1px solid var(--border-color);
            min-width: 0;
        }
        .user-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .user-card.selected {
            border-color: #409EFF;
        }
        .user-select {
            margin-left: auto;
        }
        .user-card-header { display: flex; align-items: center; margin-bottom: 16px; }
        .user-avatar {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            object-fit: cover;
            border: 2px solid #f0f2f5;
        }
        .user-info { margin-left: 14px; flex: 1; overflow: hidden; }
        .user-name { font-size: 16px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
        .user-id { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
        
        .user-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            background: #f8f9fa;
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 14px;
        }
        .stat-item { text-align: center; }
        .stat-value { font-size: 20px; font-weight: 700; }
        .stat-value.primary { color: #409EFF; }
        .stat-value.success { color: #67C23A; }
        .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
        
        .user-remark {
            font-size: 12px;
            color: var(--text-muted);
            padding: 10px 12px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 14px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .user-remark:hover { background: #f0f2f5; }
        .user-remark.empty { font-style: italic; color: #c0c4cc; }
        .user-remark-empty-text { color: #c0c4cc; }
        
        .user-actions { display: flex; flex-wrap: wrap; gap: 8px; }
        .user-status { margin-top: 12px; }
        
        /* Filter Bar */
        .filter-bar {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 20px;
            padding: 16px 20px;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        .filter-bar .el-input, .filter-bar .el-select { width: 180px; }
        .user-filter-bar .search-input { width: 260px; }
        .user-filter-bar .compact-filter { width: 150px; }
        .native-filter-select {
            height: 32px;
            padding: 0 12px;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            background: #fff;
            color: var(--text-primary);
            font-size: 14px;
            outline: none;
        }
        .native-filter-select:focus {
            border-color: #409EFF;
        }
        .contact-method-select {
            width: 100% !important;
        }
        .contact-method-select-dropdown {
            min-width: 180px !important;
        }
        .contact-method-select-dropdown .el-select-dropdown__item {
            white-space: nowrap;
        }
        .el-table .locked-billing-row td {
            background: #f5f7fa !important;
        }
        .el-table .locked-billing-row .cell {
            color: #909399;
        }
        .el-table .locked-billing-row .el-tag {
            opacity: 0.78;
        }
        .user-visible-filter-panel {
            margin-bottom: 20px;
            padding: 16px 20px;
            background: #fdf6ec;
            border: 2px solid #e6a23c;
            border-radius: 12px;
        }
        .user-visible-filter-title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 12px;
        }
        .user-visible-filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: end;
        }
        .user-visible-filter-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 140px;
        }
        .user-visible-filter-item span {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .user-visible-filter-item .el-input,
        .user-visible-filter-item .el-select,
        .user-visible-filter-item .native-filter-select {
            width: 100%;
        }
        .user-visible-filter-search {
            min-width: 260px;
            flex: 1.2;
        }
        .user-visible-filter-summary {
            margin-top: 12px;
            font-size: 14px;
            color: var(--text-secondary);
        }
        .billing-filter-bar {
            margin-bottom: 20px;
        }
        .finance-board {
            margin-bottom: 20px;
            padding: 20px 22px;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
            border: 1px solid #e6edf5;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
        }
        .finance-board-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }
        .finance-board-title {
            font-size: 18px;
            font-weight: 700;
            color: #1f2937;
        }
        .finance-board-subtitle {
            margin-top: 6px;
            font-size: 13px;
            color: #7b8794;
        }
        .finance-board-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .finance-kpis {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 14px;
        }
        .finance-kpi-card {
            position: relative;
            overflow: hidden;
            min-height: 128px;
            padding: 18px;
            border-radius: 14px;
            border: 1px solid #e6edf5;
            background: #fff;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
        }
        .finance-kpi-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 4px;
            background: #94a3b8;
        }
        .finance-kpi-card.accent-blue::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
        .finance-kpi-card.accent-slate::before { background: linear-gradient(90deg, #475569, #94a3b8); }
        .finance-kpi-card.accent-green::before { background: linear-gradient(90deg, #059669, #34d399); }
        .finance-kpi-card.accent-amber::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
        .finance-kpi-card.accent-red::before { background: linear-gradient(90deg, #dc2626, #f87171); }
        .finance-kpi-card.accent-cyan::before { background: linear-gradient(90deg, #0891b2, #67e8f9); }
        .finance-kpi-label {
            font-size: 13px;
            color: #6b7280;
            margin-bottom: 12px;
        }
        .finance-kpi-value {
            font-size: 28px;
            line-height: 1.2;
            font-weight: 700;
            color: #111827;
            word-break: break-word;
        }
        .finance-kpi-sub {
            margin-top: 10px;
            font-size: 12px;
            line-height: 1.6;
            color: #7b8794;
        }
        .billing-filter-fields {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: flex-end;
            flex: 1;
        }
        .finance-filter-bar {
            display: block;
            padding: 18px 20px;
            border: 1px solid #e8edf3;
            background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
        }
        .finance-filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 14px 12px;
            align-items: end;
        }
        .billing-filter-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 150px;
        }
        .billing-filter-item span {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .billing-filter-item .el-input,
        .billing-filter-item .native-filter-select,
        .billing-filter-item .el-date-editor,
        .billing-filter-item .el-input-number {
            width: 100%;
        }
        .billing-filter-item .el-input-number .el-input__wrapper {
            width: 100%;
        }
        .billing-filter-search {
            min-width: 240px;
        }
        .finance-filter-wide {
            min-width: 0;
            grid-column: span 2;
        }
        .finance-filter-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px dashed #d8e1eb;
        }
        .finance-filter-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .billing-filter-summary {
            display: flex;
            align-items: center;
            min-height: 32px;
            font-size: 14px;
            color: var(--text-secondary);
            padding-left: 4px;
        }
        .finance-table-card {
            border: 1px solid #e8edf3;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
        }
        .finance-subpanel {
            margin-top: 4px;
        }
        .finance-subpanel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 12px;
        }
        .finance-subpanel-title {
            font-size: 16px;
            font-weight: 700;
            color: #1f2937;
        }
        .finance-subpanel-subtitle {
            margin-top: 4px;
            font-size: 13px;
            color: #7b8794;
        }
        .batch-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding: 16px 20px;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        .batch-selection {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            color: var(--text-secondary);
            font-size: 14px;
        }
        .batch-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .list-pagination-bar {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
        }
        
        /* Dashboard */
        .dashboard-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .dashboard-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }
        .dashboard-kpi-card {
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid #edf2fc;
            border-radius: 14px;
            padding: 18px;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
        }
        .dashboard-kpi-label {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 10px;
        }
        .dashboard-kpi-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
        }
        .dashboard-kpi-unit {
            font-size: 13px;
            color: var(--text-muted);
            margin-left: 6px;
        }
        .dashboard-kpi-compare {
            margin-top: 10px;
            font-size: 12px;
            color: var(--text-muted);
        }
        .dashboard-kpi-compare.up { color: #67C23A; }
        .dashboard-kpi-compare.down { color: #F56C6C; }
        .dashboard-kpi-compare.flat { color: var(--text-muted); }
        .dashboard-summary-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        .dashboard-side-list {
            display: grid;
            gap: 12px;
        }
        .dashboard-side-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 10px;
            background: #f8fafc;
        }
        .dashboard-side-item-label {
            font-size: 13px;
            color: var(--text-muted);
        }
        .dashboard-side-item-value {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .dashboard-chart-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .dashboard-chart-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        .dashboard-chart-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        .dashboard-chart-subtitle {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 12px;
        }
        .dashboard-chart {
            width: 100%;
            height: 320px;
        }
        .dashboard-ranking-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f0f2f5;
        }
        .dashboard-ranking-row:last-child { border-bottom: none; }
        .dashboard-ranking-left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }
        .dashboard-ranking-index {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #ecf5ff;
            color: #409EFF;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            flex-shrink: 0;
        }
        .dashboard-ranking-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .dashboard-ranking-meta {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .dashboard-ranking-stats {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .dashboard-ranking-stat {
            text-align: right;
        }
        .dashboard-ranking-stat strong {
            display: block;
            font-size: 15px;
            color: var(--text-primary);
        }
        .dashboard-ranking-stat span {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* Task Cards */
        .task-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            border-left: 4px solid #409EFF;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
        .task-user { font-weight: 600; font-size: 15px; color: var(--text-primary); }
        .task-user span { font-weight: 400; color: var(--text-muted); font-size: 13px; }
        .task-progress { color: #409EFF; font-weight: 600; font-size: 15px; }
        .task-log { font-size: 13px; color: var(--text-muted); margin-top: 12px; font-family: monospace; }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }
        .empty-state .el-icon { font-size: 64px; margin-bottom: 16px; color: #dcdfe6; }
        .empty-state p { font-size: 15px; }
        
        /* Form Card */
        .form-card {
            max-width: 500px;
            margin: 0 auto;
            background: var(--card-bg);
            border-radius: 12px;
            padding: 32px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        }
        .form-card .el-form-item { margin-bottom: 20px; }
        
        /* Table Styles */
        .data-table {
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        .data-table .el-table { --el-table-border-color: var(--border-color); }
        .data-table .el-table th { background: #fafafa !important; font-weight: 600; }
        .finance-table-card .el-table th {
            background: #f8fafc !important;
        }
        .old-data-toolbar {
            margin-bottom: 20px;
            padding: 18px 20px;
        }
        .old-data-filter-grid {
            display: grid;
            grid-template-columns: minmax(160px, 220px) minmax(160px, 220px) minmax(220px, 1fr) minmax(260px, 320px);
            gap: 14px;
            align-items: end;
        }
        .old-data-filter-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
            color: var(--text-secondary);
            font-size: 13px;
        }
        .old-data-filter-item .el-select,
        .old-data-filter-item .el-input,
        .old-data-filter-item .el-date-editor {
            width: 100%;
        }
        .old-data-toolbar-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 16px;
        }
        .old-data-stat-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }
        .old-data-stat-card {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 16px 18px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }
        .old-data-stat-card span {
            color: var(--text-muted);
            font-size: 13px;
        }
        .old-data-stat-card strong {
            color: var(--text-primary);
            font-size: 22px;
        }
        .old-data-table .el-table__row {
            cursor: pointer;
        }
        .old-data-empty {
            background: var(--card-bg);
            border-radius: 12px;
        }
        .old-data-detail-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }
        .old-data-detail-name {
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 600;
        }
        .old-data-detail-sub {
            margin-top: 5px;
            color: var(--text-muted);
            font-size: 13px;
        }
        .old-data-detail-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .agent-page-grid {
            display: grid;
            gap: 20px;
            align-items: start;
            grid-template-columns: minmax(0, 1fr);
        }
        .admin-agent-page-grid {
            grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
        }
        .agent-order-page-grid {
            grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
        }
        .agent-order-student-lookup {
            display: flex;
            align-items: stretch;
            gap: 8px;
            width: 100%;
        }
        .agent-order-student-lookup .el-input {
            min-width: 0;
            flex: 1 1 auto;
        }
        .agent-order-student-lookup .el-button {
            flex: 0 0 auto;
            white-space: nowrap;
        }
        .old-customer-check-panel {
            margin: -4px 0 20px 90px;
            padding: 12px 14px;
            border: 1px solid #d9e5e2;
            border-radius: 8px;
            background: #f7fbfa;
            color: var(--text-primary);
            font-size: 13px;
        }
        .old-customer-check-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .old-customer-check-grid {
            display: grid;
            grid-template-columns: minmax(80px, auto) minmax(0, 1fr);
            gap: 7px 12px;
        }
        .old-customer-check-grid span {
            color: var(--text-muted);
        }
        .old-customer-check-grid strong {
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .old-customer-check-km {
            color: #0b7a6e;
        }
        .old-customer-check-meta,
        .old-customer-check-note {
            margin-top: 10px;
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.5;
        }
        .old-customer-check-candidate {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: 7px 0;
            border-top: 1px solid #e7efed;
        }
        .old-customer-check-empty {
            color: var(--text-secondary);
            line-height: 1.5;
        }
        
        /* Map */
        #map, #live-map { height: 400px; width: 100%; border-radius: 8px; }
        
        /* Log Entry */
        .log-entry { margin-bottom: 16px; border-bottom: 1px dashed var(--border-color); padding-bottom: 12px; }
        .log-title { font-weight: 600; color: var(--text-primary); display: flex; justify-content: space-between; margin-bottom: 8px; }
        .log-time { color: var(--text-muted); font-size: 12px; }
        .log-json {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 12px;
            border-radius: 8px;
            font-family: 'Consolas', monospace;
            font-size: 12px;
            overflow-x: auto;
            white-space: pre-wrap;
            word-break: break-all;
        }
        
        /* Mobile Toggle */
        .mobile-toggle { display: none; }
        .mobile-overlay {
            display: none;
            position: fixed;
            top: var(--header-height);
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 998;
        }
        .mobile-overlay.show { display: block; }
        
        /* Responsive */
        @media (max-width: 768px) {
            .mobile-toggle { display: flex; }
            .app-sidebar {
                transform: translateX(-100%);
                width: var(--sidebar-width);
            }
            .app-sidebar.mobile-open { transform: translateX(0); }
            .app-sidebar.collapsed { transform: translateX(-100%); }
            .app-main { margin-left: 0 !important; padding: calc(var(--header-height) + 16px) 16px 16px; }
            .filter-bar { flex-direction: column; align-items: stretch; }
            .filter-bar .el-input, .filter-bar .el-select { width: 100%; }
            .user-filter-bar .search-input, .user-filter-bar .compact-filter { width: 100%; }
            .user-visible-filter-row { flex-direction: column; align-items: stretch; }
            .user-visible-filter-item, .user-visible-filter-search { width: 100%; min-width: 0; }
            .filter-bar .count { margin-left: 0; margin-top: 8px; text-align: right; }
            .finance-board { padding: 18px 16px; }
            .finance-kpis { grid-template-columns: 1fr; }
            .finance-filter-grid { grid-template-columns: 1fr; }
            .finance-filter-wide { grid-column: span 1; }
            .finance-filter-footer { align-items: stretch; }
            .finance-filter-actions { width: 100%; }
            .finance-filter-actions .el-button { flex: 1; }
            .finance-board-tags { width: 100%; }
            .old-data-filter-grid { grid-template-columns: 1fr; }
            .old-data-stat-grid { grid-template-columns: 1fr; }
            .old-data-toolbar-actions { justify-content: stretch; }
            .old-data-toolbar-actions .el-button { flex: 1; }
            .batch-toolbar { align-items: stretch; }
            .batch-actions { width: 100%; }
            .batch-actions .el-button { flex: 1; }
            .list-pagination-bar { justify-content: center; }
            .user-grid { grid-template-columns: 1fr; }
            .user-grid-five { grid-template-columns: 1fr; }
            .dashboard-summary-grid { grid-template-columns: 1fr; }
            .dashboard-chart-grid { grid-template-columns: 1fr; }
            .dashboard-chart { height: 280px; }
            .dashboard-ranking-row { align-items: flex-start; flex-direction: column; }
            .dashboard-ranking-stats { justify-content: flex-start; }
            .agent-page-grid { grid-template-columns: 1fr !important; }
            .form-card { max-width: none; padding: 20px; }
            .data-table { overflow-x: auto; }
            .old-customer-check-panel { margin-left: 0; }
            .agent-order-student-lookup { flex-wrap: wrap; }
            .agent-order-student-lookup .el-button { width: 100%; }
        }

/* Premium operations theme. This layer intentionally leaves markup text and behavior intact. */
:root {
    --sidebar-width: 236px;
    --sidebar-collapsed-width: 72px;
    --header-height: 68px;
    --sidebar-bg: #1b2426;
    --sidebar-hover-bg: #263235;
    --sidebar-active-bg: #4fb39e;
    --sidebar-text: #aebbb8;
    --sidebar-text-active: #f8fbfa;
    --content-bg: #f3f5f3;
    --card-bg: #ffffff;
    --border-color: #e1e7e4;
    --text-primary: #1d2428;
    --text-secondary: #5f6b70;
    --text-muted: #879196;
    --primary: #0b7a6e;
    --primary-hover: #096b61;
    --primary-soft: #e8f3f0;
    --info: #416b9a;
    --success: #2f8f68;
    --warning: #b7791f;
    --danger: #c65353;
    --surface-subtle: #f7f9f8;
    --radius-sm: 6px;
    --radius-md: 8px;
    --shadow-sm: 0 1px 3px rgba(20, 35, 32, 0.06);
    --shadow-md: 0 12px 32px rgba(20, 35, 32, 0.09);
    --el-color-primary: #0b7a6e;
    --el-color-primary-light-3: #55a49b;
    --el-color-primary-light-5: #86beb8;
    --el-color-primary-light-7: #b7d8d4;
    --el-color-primary-light-8: #d1e7e4;
    --el-color-primary-light-9: #e8f3f0;
    --el-color-primary-dark-2: #086158;
    --el-color-success: #2f8f68;
    --el-color-warning: #b7791f;
    --el-color-danger: #c65353;
    --el-color-info: #66757c;
    --el-border-radius-base: 6px;
    --el-border-radius-small: 4px;
    --el-border-color: #dfe6e3;
    --el-border-color-light: #e8edeb;
    --el-fill-color-light: #f4f7f5;
    --el-fill-color-lighter: #f8faf9;
    --el-text-color-primary: #1d2428;
    --el-text-color-regular: #4f5d62;
    --el-text-color-secondary: #788388;
}

html {
    background: var(--content-bg);
}

body,
button,
input,
select,
textarea {
    font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

body {
    color: var(--text-primary);
    background: var(--content-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    color: #ffffff;
    background: var(--primary);
}

* {
    scrollbar-color: #aebbb8 transparent;
    scrollbar-width: thin;
}

/* Authentication */
.auth-screen {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 32px;
    background: #edf1ef;
}

.auth-screen::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: clamp(12px, 1.4vw, 22px);
    content: "";
    background: var(--primary);
}

.auth-screen::after {
    position: absolute;
    top: 0;
    right: 0;
    width: min(34vw, 460px);
    height: 8px;
    content: "";
    background: var(--warning);
}

.auth-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    min-width: 0;
}

.form-card.auth-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 38px;
    border: 1px solid rgba(27, 36, 38, 0.11);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.auth-login-card {
    border-top: 3px solid var(--primary) !important;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
}

.auth-brand-mark {
    display: flex;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: var(--radius-sm);
    background: var(--primary);
    box-shadow: 0 8px 18px rgba(11, 122, 110, 0.22);
}

.auth-brand-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 26px;
    font-weight: 680;
    line-height: 1.25;
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
}

.auth-loading-card {
    position: relative;
    z-index: 1;
    max-width: 380px !important;
    text-align: center;
}

.auth-loading-icon {
    margin-bottom: 18px;
    color: var(--primary);
    font-size: 38px;
}

.auth-loading-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 650;
}

.auth-loading-copy {
    margin: 0;
    color: var(--text-muted);
}

/* Application frame */
.app-header {
    height: var(--header-height);
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    background: #fbfcfb;
    box-shadow: 0 1px 0 rgba(20, 35, 32, 0.02);
}

.header-leading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.app-header .logo {
    gap: 11px;
    min-width: 0;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 680;
}

.app-header .logo .el-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: var(--radius-sm);
    background: var(--primary);
    font-size: 19px;
}

.app-header .header-actions {
    gap: 9px;
}

.app-header .el-button.is-circle {
    width: 34px;
    height: 34px;
}

.app-sidebar {
    top: var(--header-height);
    width: var(--sidebar-width);
    padding: 10px 9px 18px;
    background: var(--sidebar-bg);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    transition: width 180ms ease, transform 180ms ease;
}

.app-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-menu {
    padding: 2px 0;
}

.menu-item {
    min-height: 43px;
    margin: 2px 0;
    padding: 10px 13px;
    color: var(--sidebar-text);
    border: 0;
    border-radius: var(--radius-sm);
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.menu-item:hover {
    color: #ffffff;
    background: var(--sidebar-hover-bg);
}

.menu-item.active {
    color: var(--sidebar-text-active);
    background: rgba(79, 179, 158, 0.16);
    box-shadow: inset 3px 0 0 var(--sidebar-active-bg);
}

.menu-item .el-icon {
    color: currentColor;
    font-size: 18px;
}

.menu-item span {
    margin-left: 11px;
    font-size: 14px;
    font-weight: 520;
}

.menu-title {
    padding: 14px 13px 7px;
    color: #778784;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0;
}

.menu-divider {
    margin: 13px 10px 5px;
    background: rgba(255, 255, 255, 0.08);
}

.app-sidebar.collapsed .menu-item {
    justify-content: center;
    padding: 10px;
}

.app-main {
    margin-left: var(--sidebar-width);
    min-width: 0;
    padding: calc(var(--header-height) + 28px) 28px 32px;
    transition: margin-left 180ms ease;
}

.app-main.expanded {
    margin-left: var(--sidebar-collapsed-width);
}

.page-header {
    margin-bottom: 22px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--border-color);
}

.page-header h2 {
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 680;
    line-height: 1.3;
}

.page-header p {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Shared surfaces */
.page-card,
.filter-bar,
.batch-toolbar,
.dashboard-chart-card,
.data-table,
.form-card,
.task-card,
.old-data-stat-card,
.old-data-empty,
.finance-board,
.finance-kpi-card,
.user-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.page-card,
.dashboard-chart-card {
    padding: 20px;
}

.filter-bar,
.batch-toolbar {
    padding: 15px 17px;
}

.filter-bar,
.batch-toolbar,
.dashboard-toolbar {
    margin-bottom: 18px;
}

.user-card {
    border-color: var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.user-card:hover {
    transform: none;
    border-color: #bfd1cb;
    box-shadow: 0 8px 22px rgba(20, 35, 32, 0.08);
}

.user-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(11, 122, 110, 0.1);
}

.user-avatar {
    border-radius: var(--radius-sm);
    border-color: var(--border-color);
}

.user-stats,
.user-remark,
.dashboard-side-item {
    border: 1px solid #e9eeec;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.user-remark:hover {
    background: #f0f5f3;
}

.stat-value,
.finance-kpi-value,
.dashboard-kpi-value,
.dashboard-side-item-value,
.old-data-stat-card strong {
    font-variant-numeric: tabular-nums;
}

.stat-value.primary,
.task-progress {
    color: var(--primary);
}

.stat-value.success,
.dashboard-kpi-compare.up {
    color: var(--success);
}

.dashboard-kpi-compare.down {
    color: var(--danger);
}

/* Metrics and charts */
.dashboard-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.dashboard-kpi-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.dashboard-kpi-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--primary);
}

.dashboard-kpi-card:nth-child(4n + 2)::before {
    background: var(--info);
}

.dashboard-kpi-card:nth-child(4n + 3)::before {
    background: var(--warning);
}

.dashboard-kpi-card:nth-child(4n + 4)::before {
    background: var(--success);
}

.dashboard-kpi-label {
    margin-bottom: 11px;
    color: var(--text-secondary);
    font-weight: 520;
}

.dashboard-kpi-value {
    color: var(--text-primary);
    font-size: 29px;
    font-weight: 700;
}

.dashboard-chart-card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.dashboard-chart-title,
.finance-board-title,
.finance-subpanel-title {
    color: var(--text-primary);
    font-weight: 680;
}

.dashboard-ranking-index {
    border-radius: var(--radius-sm);
    color: var(--primary);
    background: var(--primary-soft);
}

.finance-board,
.finance-filter-bar {
    border-color: var(--border-color);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.finance-kpi-card {
    border-radius: var(--radius-md);
    box-shadow: none;
}

.finance-kpi-card.accent-blue::before { background: var(--info); }
.finance-kpi-card.accent-slate::before { background: #66757c; }
.finance-kpi-card.accent-green::before { background: var(--success); }
.finance-kpi-card.accent-amber::before { background: var(--warning); }
.finance-kpi-card.accent-red::before { background: var(--danger); }
.finance-kpi-card.accent-cyan::before { background: #398b91; }

.finance-table-card,
.data-table {
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.task-card {
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
}

/* Element Plus refinements */
.el-button {
    min-height: 32px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.el-button--primary {
    --el-button-bg-color: var(--primary);
    --el-button-border-color: var(--primary);
    --el-button-hover-bg-color: var(--primary-hover);
    --el-button-hover-border-color: var(--primary-hover);
    --el-button-active-bg-color: #075a52;
    --el-button-active-border-color: #075a52;
}

.el-button.is-circle {
    padding: 0;
}

.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner,
.el-input-number .el-input__wrapper,
.el-date-editor.el-input__wrapper {
    border-radius: var(--radius-sm);
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--border-color) inset;
    transition: box-shadow 150ms ease;
}

.el-input__wrapper:hover,
.el-select__wrapper:hover,
.el-textarea__inner:hover,
.el-input-number .el-input__wrapper:hover {
    box-shadow: 0 0 0 1px #aebfba inset;
}

.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus,
.el-input-number .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px var(--primary) inset, 0 0 0 3px rgba(11, 122, 110, 0.09);
}

.el-tag {
    border-radius: 4px;
    font-weight: 600;
}

.el-table {
    --el-table-border-color: var(--border-color);
    --el-table-header-bg-color: #f3f6f4;
    --el-table-row-hover-bg-color: #f1f7f5;
    --el-table-current-row-bg-color: #edf6f3;
    color: var(--text-secondary);
}

.data-table .el-table th,
.finance-table-card .el-table th,
.el-table th.el-table__cell {
    height: 46px;
    color: #3d494e;
    background: #f3f6f4 !important;
    font-size: 13px;
    font-weight: 650;
}

.el-table td.el-table__cell {
    padding: 11px 0;
}

.el-pagination {
    --el-pagination-button-bg-color: #ffffff;
    --el-pagination-hover-color: var(--primary);
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #ffffff;
}

.el-dialog,
.el-message-box {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 22px 64px rgba(20, 35, 32, 0.18);
}

.el-dialog__header,
.el-message-box__header {
    margin: 0;
    padding: 20px 22px 15px;
    border-bottom: 1px solid var(--border-color);
}

.el-dialog__title,
.el-message-box__title {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 680;
}

.el-dialog__body {
    padding: 22px;
}

.el-dialog__footer {
    padding: 14px 22px 20px;
}

.el-drawer {
    border-left: 1px solid var(--border-color);
}

.el-drawer__header {
    margin-bottom: 0;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 680;
}

.el-alert {
    border-radius: var(--radius-sm);
}

.el-upload-dragger {
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.el-tabs__item.is-active,
.el-tabs__item:hover {
    color: var(--primary);
}

.el-tabs__active-bar {
    background: var(--primary);
}

.log-json {
    border: 1px solid #314043;
    border-radius: var(--radius-sm);
    background: #172022;
}

#map,
#live-map {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* Re-map legacy inline accent colors without changing template text or logic. */
[style*="color:#409EFF"] {
    color: var(--primary) !important;
}

[style*="color:#67C23A"] {
    color: var(--success) !important;
}

[style*="color:#F56C6C"] {
    color: var(--danger) !important;
}

@media (max-width: 1024px) {
    :root {
        --sidebar-width: 220px;
    }

    .app-main {
        padding-right: 20px;
        padding-left: 20px;
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .app-header {
        padding: 0 14px;
    }

    .header-leading,
    .app-header .header-actions {
        gap: 7px;
    }

    .app-header .logo {
        font-size: 15px;
    }

    .app-header .logo .el-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .app-sidebar {
        width: min(82vw, 280px);
        padding-right: 9px;
        padding-left: 9px;
        box-shadow: 18px 0 44px rgba(16, 27, 25, 0.2);
    }

    .mobile-overlay {
        top: var(--header-height);
        background: rgba(15, 24, 23, 0.48);
        backdrop-filter: blur(2px);
    }

    .app-main {
        padding: calc(var(--header-height) + 18px) 14px 24px;
    }

    .page-header {
        margin-bottom: 16px;
        padding-bottom: 13px;
    }

    .page-header h2 {
        font-size: 21px;
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-kpi-card {
        min-width: 0;
        padding: 15px 13px;
    }

    .dashboard-kpi-value {
        font-size: 23px;
        overflow-wrap: anywhere;
    }

    .dashboard-kpi-label,
    .dashboard-kpi-compare {
        line-height: 1.45;
    }

    .form-card.auth-card {
        padding: 28px 22px;
    }

    .auth-screen {
        padding: 22px;
    }

    .auth-brand-title {
        font-size: 22px;
    }

    .auth-brand-mark {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .data-table,
    .finance-table-card {
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .auth-login-card .el-form-item {
        display: block;
    }

    .auth-login-card .el-form-item__label {
        display: flex;
        width: auto !important;
        height: auto;
        justify-content: flex-start;
        margin: 0 0 7px;
        padding: 0;
        line-height: 1.4;
    }

    .auth-login-card .el-form-item__content {
        min-width: 0;
        margin-left: 0 !important;
    }

    .app-header .header-actions .el-tag {
        display: none;
    }

    .app-header .logo span {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-kpi-unit {
        display: block;
        margin: 4px 0 0;
    }

    .filter-bar,
    .batch-toolbar,
    .page-card,
    .dashboard-chart-card {
        padding: 14px;
    }
}