.language-selector{position:relative}.language-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;font-size:14px;color:inherit;transition:all .2s}.language-toggle:hover{background:#fff3}.language-toggle .flag{font-size:16px}.language-toggle .lang-name{font-weight:500}.language-toggle .dropdown-arrow{font-size:10px;opacity:.7;transition:transform .2s}.language-selector:has(.language-dropdown) .dropdown-arrow{transform:rotate(180deg)}.language-dropdown{position:absolute;top:calc(100% + 4px);right:0;min-width:140px;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;overflow:hidden;z-index:1000;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.language-option{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border:none;background:none;cursor:pointer;font-size:14px;color:#333;transition:background .2s;text-align:left}.language-option:hover{background:#f5f5f5}.language-option.active{background:#e7f3ff;color:#0d6efd}.language-option .flag{font-size:18px}.language-option .lang-name{flex:1}.language-option .check{color:#0d6efd;font-weight:700}.login-language-selector .language-toggle{background:#ffffff1a;border-color:#ffffff4d;color:#fff}.login-language-selector .language-toggle:hover{background:#fff3}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);padding:20px;position:relative}.login-language-selector{position:absolute;top:20px;right:20px}.login-language-selector .language-selector{background:#ffffff26;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-language-selector .language-selector:hover{background:#ffffff40}.login-language-selector .current-language{color:#fff}.login-language-selector .language-dropdown{right:0;left:auto}.login-card{background:#fffffff2;border-radius:16px;padding:40px;width:100%;max-width:400px;box-shadow:0 20px 60px #0000004d}.login-header{text-align:center;margin-bottom:32px}.login-logo{font-size:48px;display:block;margin-bottom:16px}.login-header h1{margin:0;font-size:24px;color:#1a1a2e;font-weight:600}.login-header p{margin:8px 0 0;color:#666;font-size:14px}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:500;color:#333}.form-group input{padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;transition:all .2s ease;outline:none}.form-group input:focus{border-color:#0f3460;box-shadow:0 0 0 3px #0f34601a}.form-group input::placeholder{color:#aaa}.login-button{padding:14px 24px;background:linear-gradient(135deg,#0f3460,#16213e);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:8px}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #0f34604d}.login-button:disabled{opacity:.7;cursor:not-allowed}.login-error{background:#fff2f2;border:1px solid #ffcdd2;color:#c62828;padding:12px 16px;border-radius:8px;font-size:14px;display:flex;align-items:center;gap:8px}.login-footer{margin-top:24px;text-align:center;padding-top:20px;border-top:1px solid #eee}.login-footer p{margin:0;color:#888;font-size:13px}.test-accounts{margin-top:24px;padding-top:20px;border-top:1px solid #eee}.test-accounts-header{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#333;margin-bottom:12px}.test-accounts-header .hint{font-size:12px;color:#999;font-weight:400}.accounts-list{display:flex;flex-direction:column;gap:8px}.account-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;background:#f9fafb;cursor:pointer;transition:all .2s;text-align:left}.account-btn:hover{border-color:var(--accent-color);background:#fff}.account-btn.active{border-color:var(--accent-color);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-color) 15%,transparent)}.account-role{padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap}.account-info{display:flex;flex-direction:column;gap:2px}.account-name{font-size:14px;font-weight:600;color:#1f2937}.account-desc{font-size:12px;color:#6b7280}.dashboard{padding:20px}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dashboard h2{margin:0;font-size:28px;color:#1a1a1a}.refresh-btn{padding:8px 16px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:14px;color:#374151;transition:all .2s}.refresh-btn:hover{background:#e5e7eb}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;gap:20px;transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.stat-card.vehicles{border-left:4px solid #3b82f6}.stat-card.tasks{border-left:4px solid #10b981}.stat-card.records{border-left:4px solid #f59e0b}.stat-card.api-stats{border-left:4px solid #8b5cf6}.stat-icon{font-size:48px;opacity:.9}.stat-content{flex:1}.stat-content h3{margin:0 0 10px;font-size:16px;color:#6b7280;font-weight:500}.stat-value{font-size:36px;font-weight:700;margin:5px 0;color:#1a1a1a}.stat-detail{font-size:14px;color:#6b7280;margin:0}.stat-detail .success-text{color:#10b981}.stat-detail .error-text{color:#ef4444}.stat-detail .divider{margin:0 8px;color:#d1d5db}.trends-section{margin-bottom:30px}.trends-section>h3{margin:0 0 20px;font-size:20px;color:#1a1a1a}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:20px}.charts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.chart-card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px #0000001a}.chart-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.chart-icon{font-size:24px}.chart-header h4{margin:0;font-size:16px;color:#374151;flex:1}.chart-total{font-size:13px;color:#6b7280;background:#f3f4f6;padding:4px 10px;border-radius:12px}.bar-chart{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:20px}.bar-item{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.bar-wrapper{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}.bar{width:70%;min-height:4px;border-radius:4px 4px 0 0;transition:height .5s ease;position:relative}.bar-value{position:absolute;top:-20px;left:50%;transform:translate(-50%);font-size:11px;font-weight:600;color:#374151}.bar-label{font-size:11px;color:#6b7280;margin-top:8px;white-space:nowrap}.line-chart{position:relative;height:150px}.line-chart svg{width:100%;height:120px}.line-chart polyline,.line-chart polygon{transition:all .5s ease}.data-point{transition:r .2s}.data-point:hover{r:4}.line-labels{display:flex;justify-content:space-between;margin-top:8px}.line-label{font-size:11px;color:#6b7280}.line-values{display:flex;justify-content:space-between;position:absolute;top:0;left:0;right:0;pointer-events:none}.line-value{font-size:10px;color:#9ca3af;opacity:0}.line-chart:hover .line-value{opacity:1}.donut-chart-card{min-width:280px}.donut-chart{display:flex;align-items:center;gap:20px}.donut-chart svg{width:120px;height:120px;flex-shrink:0}.donut-segment{transition:transform .2s;transform-origin:center}.donut-segment:hover{transform:scale(1.05)}.donut-total{font-size:16px;font-weight:700;fill:#1a1a1a}.donut-label{font-size:8px;fill:#6b7280}.donut-legend{flex:1;display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;gap:8px;font-size:13px}.legend-color{width:12px;height:12px;border-radius:3px;flex-shrink:0}.legend-label{flex:1;color:#6b7280}.legend-value{font-weight:600;color:#374151}.activity-card{min-height:200px}.activity-list{display:flex;flex-direction:column;gap:12px}.activity-item{display:flex;align-items:center;gap:10px;font-size:14px;color:#4b5563;padding:10px;background:#f9fafb;border-radius:8px}.activity-dot{width:8px;height:8px;border-radius:50%;background:#9ca3af;flex-shrink:0}.activity-dot.success{background:#10b981;box-shadow:0 0 8px #10b98180}.activity-dot.info{background:#3b82f6;box-shadow:0 0 8px #3b82f680}.activity-dot.warning{background:#f59e0b;box-shadow:0 0 8px #f59e0b80}.system-info{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 8px #0000001a}.system-info h3{margin:0 0 20px;font-size:20px;color:#1a1a1a}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}.info-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e5e7eb}.info-label{color:#6b7280;font-weight:500}.info-value{color:#1a1a1a;font-weight:600}.status-ok{color:#10b981}.loading,.error{padding:40px;text-align:center;font-size:18px}.error{color:#ef4444}@media screen and (max-width: 768px){.dashboard{padding:16px}.dashboard-header{flex-direction:column;align-items:flex-start;gap:12px}.dashboard h2{font-size:24px}.stats-grid,.charts-grid,.charts-row{grid-template-columns:1fr}.donut-chart{flex-direction:column}.bar-chart{height:120px}.stat-card{padding:20px}.stat-icon{font-size:36px}.stat-value{font-size:28px}}.test-accounts-card{background:linear-gradient(135deg,#667eea,#764ba2);padding:24px;border-radius:16px;color:#fff;margin-top:24px}.test-accounts-card h3{margin:0 0 8px;font-size:20px;font-weight:600}.accounts-desc{margin:0 0 20px;opacity:.9;font-size:14px}.accounts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.account-item{background:#fffffff2;border-radius:12px;padding:16px;color:#1a1a1a}.account-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.role-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff}.role-badge.admin{background:#dc2626}.role-badge.operator{background:#2563eb}.role-badge.analyst{background:#7c3aed}.role-badge.readonly{background:#6b7280}.permission-tag{font-size:11px;color:#6b7280;background:#f3f4f6;padding:2px 8px;border-radius:10px}.account-info{background:#f8fafc;border-radius:8px;padding:12px;margin-bottom:12px}.credential{display:flex;align-items:center;gap:8px;margin-bottom:6px}.credential:last-child{margin-bottom:0}.credential .label{font-size:12px;color:#6b7280;min-width:36px}.credential code{background:#e0e7ff;color:#3730a3;padding:2px 8px;border-radius:4px;font-family:Monaco,Menlo,monospace;font-size:13px;font-weight:500}.permission-list{margin:0;padding:0;list-style:none;font-size:12px}.permission-list li{padding:4px 0;color:#4b5563}.permission-list li:first-child{padding-top:0}@media (max-width: 768px){.accounts-grid{grid-template-columns:1fr}.test-accounts-card{padding:16px}}.export-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.export-modal-content{background:#fff;border-radius:12px;width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 40px #0003;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.export-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #eee}.export-modal-header h3{margin:0;font-size:18px;color:#1a1a2e}.export-modal-header .close-btn{width:32px;height:32px;border:none;background:#f5f5f5;border-radius:50%;font-size:20px;cursor:pointer;color:#666;transition:all .2s}.export-modal-header .close-btn:hover{background:#e9ecef;color:#333}.export-modal-body{padding:20px;overflow-y:auto;flex:1}.column-select-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #eee}.select-info{font-size:14px;color:#666}.select-info strong{color:#0d6efd}.quick-actions{display:flex;gap:8px}.quick-actions button{padding:4px 12px;font-size:12px;border:1px solid #dee2e6;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s}.quick-actions button:hover{background:#f8f9fa;border-color:#adb5bd}.column-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.column-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f8f9fa;border-radius:8px;cursor:pointer;transition:all .2s;border:2px solid transparent}.column-item:hover{background:#e9ecef}.column-item.selected{background:#e7f3ff;border-color:#0d6efd}.column-item input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#0d6efd}.column-name{font-size:14px;color:#333;-webkit-user-select:none;user-select:none}.export-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid #eee;background:#f8f9fa;border-radius:0 0 12px 12px}.btn-cancel{padding:10px 20px;border:1px solid #dee2e6;background:#fff;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.btn-cancel:hover{background:#e9ecef}.btn-export{padding:10px 24px;border:none;background:#10b981;color:#fff;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-export:hover:not(:disabled){background:#059669}.btn-export:disabled{background:#9ca3af;cursor:not-allowed}@media (max-width: 480px){.column-grid{grid-template-columns:1fr}.column-select-header{flex-direction:column;gap:12px;align-items:flex-start}}.vehicle-management{padding:20px}.btn-secondary{background:#6b7280;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:background .2s}.btn-clear-all{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.column-selector-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:100;min-width:200px;margin-top:4px}.column-selector-header{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #e5e7eb;font-weight:600;font-size:13px}.column-selector-actions{display:flex;gap:8px}.column-selector-actions button{padding:4px 8px;font-size:11px;border:1px solid #d1d5db;border-radius:4px;background:#f9fafb;cursor:pointer}.column-selector-list{padding:8px 12px;max-height:300px;overflow-y:auto}.column-option{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;font-size:13px}.column-option input{cursor:pointer}.sort-icon{font-size:12px;color:#9ca3af;padding:4px 6px;border-radius:4px;transition:all .2s;cursor:pointer;min-width:20px;text-align:center}.filter-icon{font-size:10px;color:#9ca3af;transition:color .2s,transform .2s}.status-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151;cursor:pointer;padding:6px 8px;border-radius:4px;transition:background .2s}.date-input-group input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.btn-clear{padding:6px 12px;background:#f3f4f6;color:#4b5563;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.btn-apply{padding:6px 12px;background:#3b82f6;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.data-table .actions{display:flex;gap:8px;justify-content:center}.status-idle{background:#dbeafe;color:#1e40af}.status-inspecting{background:#dcfce7;color:#166534}.status-charging{background:#fef3c7;color:#92400e}.status-maintaining{background:#e0e7ff;color:#3730a3}.status-offline{background:#f3f4f6;color:#374151}.battery-cell{display:flex;align-items:center;gap:8px}.battery-bar{width:50px;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.battery-fill{height:100%;transition:width .3s}.battery-high .battery-fill{background:linear-gradient(90deg,#10b981,#34d399)}.battery-medium .battery-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.battery-low .battery-fill{background:linear-gradient(90deg,#f97316,#fb923c)}.battery-critical .battery-fill{background:linear-gradient(90deg,#ef4444,#f87171)}.btn-edit,.btn-delete{padding:5px 10px;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.empty-state{text-align:center;padding:60px 20px;color:#6b7280}.empty-state p{font-size:16px;margin-bottom:16px}.page-size-select{padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;margin-right:8px;cursor:pointer}.modal-content{background:#fff;padding:24px;border-radius:12px;width:90%;max-width:480px;max-height:90vh;overflow-y:auto;animation:modalFadeIn .2s ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}.form-group input:disabled{background:#f3f4f6;color:#6b7280}@media (max-width: 768px){.header{flex-direction:column;gap:12px;align-items:stretch}.header-actions{justify-content:center}.pagination{flex-direction:column;gap:12px}.pagination-controls{flex-wrap:wrap;justify-content:center}.filter-dropdown{left:auto;right:0}}.task-management{padding:20px}.header h2{margin:0;font-size:28px;color:#1a1a1a}.header-actions{display:flex;gap:12px;align-items:center}.btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #3b82f64d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 8px #3b82f666}.btn-secondary{background:#6b7280;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer}.btn-secondary:hover{background:#4b5563}.btn-refresh{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.btn-clear-all{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer}.btn-clear-all:hover{background:#fee2e2}.btn-export{background:#f0fdf4;color:#059669;border:1px solid #a7f3d0;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.btn-invert{background:#f0f9ff;color:#0284c7;border:1px solid #bae6fd;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.btn-columns{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.column-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .2s;font-size:13px;color:#4b5563}.btn-primary.disabled,.btn-edit.disabled,.btn-delete.disabled{opacity:.5;cursor:not-allowed}.btn-primary.disabled:hover,.btn-edit.disabled:hover,.btn-delete.disabled:hover{transform:none;box-shadow:none}.route-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-batch-delete{background:#dc2626;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.error-message{background:#fee2e2;color:#dc2626;padding:12px;border-radius:8px;margin-bottom:20px;border-left:4px solid #dc2626}.table-container{background:#fff;border-radius:12px;overflow:visible;box-shadow:0 2px 12px #00000014;margin-bottom:20px}.data-table{width:100%;border-collapse:collapse}.table-header-row{background:linear-gradient(to bottom,#f8fafc,#f1f5f9)}.filter-wrapper{position:relative;padding:0;border-bottom:2px solid #e2e8f0;min-width:100px}.filter-header:hover{background:#3b82f60d}.filter-header.has-filter{background:#3b82f614}.filter-header.has-filter .header-label{color:#2563eb;font-weight:600}.header-label{font-size:13px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.5px;flex:1}.sort-icon{font-size:12px;color:#9ca3af;padding:4px 6px;border-radius:4px;cursor:pointer;min-width:20px;text-align:center;transition:all .2s}.sort-icon:hover{background:#3b82f61a;color:#3b82f6}.filter-icon{font-size:10px;color:#9ca3af}.filter-icon.active{color:#3b82f6}.filter-dropdown{position:absolute;top:100%;left:0;min-width:220px;background:#fff;border-radius:8px;box-shadow:0 8px 24px #00000026;z-index:1000;padding:12px;border:1px solid #e5e7eb;animation:dropdownFadeIn .15s ease-out}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.filter-title{font-size:12px;font-weight:600;color:#6b7280;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #f3f4f6}.filter-range input{flex:1;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;width:80px}.filter-range input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.range-sep{color:#9ca3af;font-weight:500}.text-filter input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;margin-bottom:10px;box-sizing:border-box}.text-filter input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.status-select-actions{display:flex;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #eee}.btn-select-all,.btn-select-invert{flex:1;padding:6px 12px;border:1px solid #dee2e6;border-radius:4px;font-size:12px;cursor:pointer;background:#f8f9fa;color:#495057;transition:all .2s}.btn-select-all:hover,.btn-select-invert:hover{background:#e9ecef;border-color:#adb5bd}.status-options{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.status-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151;cursor:pointer;padding:6px 8px;border-radius:4px}.status-checkbox:hover{background:#f3f4f6}.status-checkbox input[type=checkbox]{accent-color:#3b82f6}.status-dot{width:10px;height:10px;border-radius:50%}.date-range{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.date-input-group label{font-size:12px;color:#6b7280}.date-input-group input{padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px}.date-input-group input:focus{outline:none;border-color:#3b82f6}.filter-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:8px;border-top:1px solid #f3f4f6}.btn-clear{padding:6px 12px;background:#f3f4f6;color:#4b5563;border:none;border-radius:4px;font-size:12px;cursor:pointer}.btn-clear:hover{background:#e5e7eb}.btn-apply{padding:6px 12px;background:#3b82f6;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer}.btn-apply:hover{background:#2563eb}.actions-header{padding:12px 16px;font-size:13px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #e2e8f0;text-align:center}.data-table tbody tr{transition:background .15s}.data-table tbody tr:hover{background:#f8fafc}.data-table td{padding:12px 16px;font-size:14px;color:#1f2937;border-bottom:1px solid #f1f5f9}.id-cell{font-family:Monaco,Menlo,monospace;font-size:13px;color:#6b7280}.data-table .actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.status-badge{padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500;white-space:nowrap}.status-pending{background:#fef3c7;color:#92400e}.status-progress{background:#dbeafe;color:#1e40af}.status-completed{background:#dcfce7;color:#166534}.status-failed{background:#fee2e2;color:#991b1b}.status-cancelled{background:#f3f4f6;color:#374151}.priority-badge{background:#e0e7ff;color:#3730a3;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600}.btn-start,.btn-complete,.btn-cancel-task,.btn-edit,.btn-delete{padding:4px 8px;border:none;border-radius:4px;font-size:11px;cursor:pointer;transition:all .2s}.btn-start{background:#dcfce7;color:#166534}.btn-start:hover{background:#bbf7d0}.btn-complete{background:#dbeafe;color:#1e40af}.btn-complete:hover{background:#bfdbfe}.btn-cancel-task{background:#fef3c7;color:#92400e}.btn-cancel-task:hover{background:#fde68a}.btn-edit{background:#f0f9ff;color:#0369a1}.btn-edit:hover{background:#e0f2fe}.btn-delete{background:#fef2f2;color:#dc2626}.btn-delete:hover{background:#fee2e2}.loading-cell,.empty-cell{text-align:center;padding:40px 20px!important;color:#6b7280}.loading-spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px}.pagination{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000f}.pagination-info{font-size:14px;color:#6b7280}.pagination-info strong{color:#1f2937}.page-size-select{padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;margin-right:8px}.page-btn{padding:6px 12px;border:1px solid #d1d5db;background:#fff;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.page-ellipsis{padding:0 4px;color:#9ca3af}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000}.modal-content{background:#fff;padding:24px;border-radius:12px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto}.modal-content h3{margin:0 0 20px;font-size:20px;color:#1a1a1a}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;color:#374151;font-size:14px;font-weight:500}.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;padding-top:16px;border-top:1px solid #f3f4f6}.record-management{padding:20px;max-width:1400px;margin:0 auto}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header h2{margin:0;color:#1a1a2e;font-size:24px}.header-actions{display:flex;gap:12px}.btn-clear-all{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;background:#dc3545;color:#fff;transition:all .2s}.btn-clear-all:hover{background:#c82333}.column-selector{position:relative}.btn-columns{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.btn-columns:hover{background:#ede9fe;border-color:#c4b5fd}.column-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 25px #0000001a;z-index:1000;min-width:200px;padding:8px 0}.column-dropdown-header{padding:8px 12px;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb;margin-bottom:4px}.column-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .2s;font-size:14px;color:#4b5563}.column-option input[type=checkbox]{width:16px;height:16px;accent-color:#3b82f6}.btn-view{background:#3b82f6;color:#fff;border:none;padding:4px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.btn-view:hover{background:#2563eb}.actions-header{width:100px;text-align:center}.actions{text-align:center}.checkbox-col input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#3b82f6}.data-table tbody tr.selected{background:#eff6ff!important}.data-table tbody tr.selected:hover{background:#dbeafe!important}.error-message{padding:12px 16px;background:#f8d7da;color:#721c24;border-radius:8px;margin-bottom:20px}.table-container{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:visible}.data-table{width:100%;border-collapse:collapse;table-layout:fixed}.data-table th,.data-table td{text-align:left;border-bottom:1px solid #eee}.data-table th{background:#f8f9fa;font-weight:600;color:#495057;position:relative}.data-table td{padding:12px 16px;color:#333}.data-table tbody tr:hover{background:#f8f9fa}.filter-wrapper{position:relative;padding:0!important}.filter-header{display:flex;align-items:center;gap:6px;padding:12px 16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.filter-header:hover{background:#e9ecef}.filter-header.has-filter{background:#e7f3ff}.header-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sort-icon{padding:2px 6px;border-radius:4px;font-size:12px;color:#6c757d;cursor:pointer;min-width:20px;text-align:center;transition:all .2s}.sort-icon:hover{background:#dee2e6;color:#212529}.sort-icon.sort-asc{color:#10b981;background:#10b9811a}.sort-icon.sort-desc{color:#f59e0b;background:#f59e0b1a}.sort-icon.sort-none{opacity:.5}.filter-icon{font-size:10px;color:#adb5bd;transition:transform .2s}.filter-icon.active{color:#0d6efd}.filter-dropdown{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;padding:16px;z-index:1000;border:1px solid #e9ecef}.filter-title{font-weight:600;color:#212529;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #eee}.number-filter input{width:100%;padding:8px 12px;border:1px solid #dee2e6;border-radius:6px;font-size:14px;box-sizing:border-box}.number-filter input:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 3px #0d6efd26}.filter-range{display:flex;align-items:center;gap:8px;margin-bottom:12px}.filter-range input{flex:1;min-width:0}.range-sep{color:#6c757d;font-weight:500}.text-filter input[type=text]{width:100%;padding:10px 12px;border:1px solid #dee2e6;border-radius:6px;font-size:14px;margin-bottom:12px;box-sizing:border-box}.text-filter input[type=text]:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 3px #0d6efd26}.match-type{display:flex;gap:16px;margin-bottom:12px}.match-type label{display:flex;align-items:center;gap:6px;font-size:13px;color:#4b5563;cursor:pointer}.match-type input[type=radio]{accent-color:#3b82f6}.date-filter .date-range{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.date-input-group{display:flex;flex-direction:column;gap:4px}.date-input-group label{font-size:12px;color:#6c757d;font-weight:500}.date-input-group input{padding:8px 12px;border:1px solid #dee2e6;border-radius:6px;font-size:14px}.date-input-group input:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 3px #0d6efd26}.filter-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid #eee;margin-top:12px}.btn-clear,.btn-apply{padding:6px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.btn-clear{background:#f8f9fa;color:#495057;border:1px solid #dee2e6}.btn-clear:hover{background:#e9ecef}.btn-apply{background:#0d6efd;color:#fff}.btn-apply:hover{background:#0b5ed7}.id-cell{font-family:Monaco,Menlo,monospace;color:#6c757d;font-size:13px}.issues-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;font-weight:500;background:#e9ecef;color:#495057}.issues-badge.has-issues{background:#fff3cd;color:#856404}.loading-cell,.empty-cell{text-align:center;padding:60px 20px!important;color:#6c757d}.loading-spinner{display:inline-block;width:24px;height:24px;border:3px solid #e9ecef;border-top-color:#0d6efd;border-radius:50%;animation:spin .8s linear infinite;margin-right:12px;vertical-align:middle}.pagination{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;border-radius:0 0 12px 12px;border-top:1px solid #eee;margin-top:-1px}.pagination-info{color:#6c757d;font-size:14px}.pagination-info strong{color:#212529}.pagination-controls{display:flex;align-items:center;gap:6px}.page-size-select{padding:6px 12px;border:1px solid #dee2e6;border-radius:6px;font-size:14px;margin-right:12px;cursor:pointer}.page-btn{padding:6px 12px;border:1px solid #dee2e6;background:#fff;border-radius:6px;cursor:pointer;font-size:14px;color:#495057;transition:all .2s}.page-btn:hover:not(:disabled){background:#e9ecef;border-color:#adb5bd}.page-btn.active{background:#0d6efd;border-color:#0d6efd;color:#fff}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-ellipsis{padding:6px 8px;color:#6c757d}@media (max-width: 1200px){.data-table{display:block;overflow-x:auto}}@media (max-width: 768px){.pagination{flex-direction:column;gap:12px}.pagination-controls{flex-wrap:wrap;justify-content:center}}.operation-log-management{padding:20px;min-width:0}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}.page-header h2{margin:0;color:#1f2937;font-size:clamp(18px,4vw,24px)}.header-actions{display:flex;gap:10px;flex-wrap:wrap}.btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover{background:#2563eb}.btn-secondary{background:#e5e7eb;color:#374151}.btn-secondary:hover{background:#d1d5db}.btn-refresh{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.btn-refresh:hover{background:#dcfce7;border-color:#86efac}.btn-clear-all{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.btn-clear-all:hover{background:#fee2e2;border-color:#fca5a5}.btn-export{background:#f0fdf4;color:#059669;border:1px solid #a7f3d0;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.btn-export:hover{background:#d1fae5;border-color:#6ee7b7}.btn-invert{background:#f0f9ff;color:#0284c7;border:1px solid #bae6fd;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.btn-invert:hover{background:#e0f2fe;border-color:#7dd3fc}.btn-batch-delete{background:#dc2626;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.btn-batch-delete:hover{background:#b91c1c}.btn-batch-delete.disabled{background:#9ca3af;cursor:not-allowed}.checkbox-col{width:40px;text-align:center;padding:12px 8px!important}.checkbox-col input[type=checkbox]{width:16px;height:16px;cursor:pointer}.col-actions{width:60px;text-align:center}.btn-delete-small{background:none;border:none;cursor:pointer;padding:4px 8px;font-size:14px;opacity:.6;transition:opacity .2s}.btn-delete-small:hover{opacity:1}tr.selected{background:#eff6ff!important}.error-message{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:12px;border-radius:6px;margin-bottom:20px}.table-container{overflow-x:auto;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.data-table{width:100%;border-collapse:collapse;font-size:14px}.data-table th{background:#f9fafb;padding:12px 8px;text-align:left;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;position:relative;white-space:nowrap}.data-table th.sortable{cursor:pointer}.data-table th.sortable:hover{background:#f3f4f6}.sort-indicator{margin-left:4px;padding:2px 4px;border-radius:4px;font-size:11px;transition:all .2s}.sort-indicator.sort-none{color:#9ca3af;opacity:.5}.sort-indicator.sort-asc{color:#10b981;background:#10b9811a}.sort-indicator.sort-desc{color:#f59e0b;background:#f59e0b1a}.th-content{display:flex;align-items:center;gap:4px}.filter-toggle{background:none;border:none;cursor:pointer;padding:2px 4px;font-size:10px;opacity:.6;transition:opacity .2s}.filter-toggle:hover,.filter-toggle.active{opacity:1}.filter-toggle.has-filter{color:#3b82f6;opacity:1}.filter-dropdown{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:10px;box-shadow:0 4px 12px #00000026;z-index:100;min-width:180px}.filter-dropdown.status-dropdown{min-width:150px}.filter-input{width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:13px;margin-bottom:6px}.filter-input:last-child{margin-bottom:0}.filter-row{display:flex;align-items:center;gap:6px}.filter-row .filter-input{width:70px;margin-bottom:0}.filter-label{font-size:12px;color:#6b7280;margin-bottom:4px}.filter-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #e5e7eb}.filter-actions .btn-clear,.filter-actions .btn-apply{flex:1;padding:6px 12px;font-size:12px;border-radius:4px;cursor:pointer;transition:all .2s}.filter-actions .btn-clear{background:#f9fafb;color:#6b7280;border:1px solid #d1d5db}.filter-actions .btn-clear:hover{background:#f3f4f6}.filter-actions .btn-apply{background:#3b82f6;color:#fff;border:none}.filter-actions .btn-apply:hover{background:#2563eb}.time-dropdown{min-width:220px}.status-select-actions{display:flex;gap:8px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #e5e7eb}.status-select-actions button{flex:1;padding:4px 8px;font-size:12px;border:1px solid #d1d5db;border-radius:4px;background:#f9fafb;cursor:pointer;transition:all .2s}.status-select-actions button:hover{background:#e5e7eb}.status-option{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer}.status-option input{cursor:pointer}.data-table td{padding:10px 8px;border-bottom:1px solid #e5e7eb;color:#4b5563}.data-table tbody tr:hover{background:#f9fafb}.loading-cell,.empty-cell{text-align:center;padding:40px!important;color:#9ca3af}.method-badge{display:inline-block;padding:2px 8px;border-radius:4px;color:#fff;font-size:11px;font-weight:600}.status-badge{display:inline-block;padding:2px 8px;border-radius:4px;color:#fff;font-size:12px;font-weight:500}.path-cell{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.request-data-cell{max-width:200px}.request-data-cell details{cursor:pointer}.request-data-cell summary{color:#3b82f6;font-size:12px}.request-data-content{background:#f3f4f6;padding:8px;border-radius:4px;font-size:11px;max-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-all;margin-top:6px}.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;flex-wrap:wrap}.pagination-info{color:#6b7280;font-size:14px;margin-right:10px}.pagination-btn{padding:6px 12px;border:1px solid #d1d5db;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s}.pagination-btn:hover:not(:disabled){background:#f3f4f6;border-color:#3b82f6}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.pagination-ellipsis{color:#9ca3af}.page-size-select{padding:6px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:13px;cursor:pointer}.column-selector-wrapper{position:relative}.column-selector-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 16px #00000026;z-index:200;min-width:220px;max-height:400px;overflow:hidden;display:flex;flex-direction:column}.column-selector-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #e5e7eb;background:#f9fafb;font-weight:600;color:#374151;font-size:13px}.column-selector-actions{display:flex;gap:6px}.column-selector-actions button{padding:4px 8px;font-size:11px;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;transition:all .2s}.column-selector-actions button:hover{background:#e5e7eb}.column-selector-list{padding:8px 0;overflow-y:auto;max-height:320px}.column-option{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .15s;font-size:13px;color:#374151}.column-option:hover{background:#f3f4f6}.column-option input{cursor:pointer;width:16px;height:16px;accent-color:#3b82f6}.col-id{width:70px;min-width:70px}.col-username{width:100px;min-width:80px}.col-method{width:80px;min-width:70px}.col-path{width:auto;min-width:150px}.col-endpoint{width:150px;min-width:120px}.col-status{width:80px;min-width:70px}.col-ip{width:120px;min-width:100px}.col-duration{width:90px;min-width:80px}.col-time{width:160px;min-width:140px}.col-request-data{width:150px;min-width:120px}.col-user-agent{width:200px;min-width:150px;max-width:300px}.user-agent-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}@media screen and (max-width: 1400px){.operation-log-management{padding:16px}.col-path,.col-time{min-width:120px}}@media screen and (max-width: 1200px){.data-table{font-size:13px}.data-table th,.data-table td{padding:8px 6px}.col-id{width:60px;min-width:60px}.col-username{width:80px;min-width:70px}.col-method{width:70px;min-width:60px}.col-ip{width:100px;min-width:90px}.col-duration{width:70px;min-width:60px}.col-time{width:140px;min-width:120px}}@media screen and (max-width: 992px){.page-header{flex-direction:column;align-items:flex-start}.header-actions{width:100%;justify-content:flex-start}.btn{padding:6px 12px;font-size:13px}.column-selector-dropdown{left:0;right:auto}}@media screen and (max-width: 768px){.operation-log-management{padding:12px}.data-table{font-size:12px}.data-table th,.data-table td{padding:6px 4px}.method-badge,.status-badge{padding:2px 6px;font-size:10px}.pagination{flex-direction:column;gap:12px}.pagination-btn{padding:4px 8px;font-size:12px}.filter-dropdown{min-width:160px;padding:8px}.filter-input{padding:4px 6px;font-size:12px}}@media screen and (max-width: 576px){.header-actions{flex-wrap:wrap}.btn{flex:1 1 calc(50% - 5px);text-align:center;min-width:100px}.column-selector-wrapper,.column-selector-wrapper .btn{width:100%}.column-selector-dropdown{width:100%;left:0;right:0}.path-cell{max-width:100px}}*{margin:0;padding:0;box-sizing:border-box}.loading-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#fff;gap:16px}.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.App{min-height:100vh;background:#f5f7fa;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:0;box-shadow:0 2px 12px #0000001a;position:sticky;top:0;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;max-width:1600px;margin:0 auto}.logo{display:flex;align-items:center;gap:15px}.logo-icon{font-size:36px;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.logo h1{font-size:28px;font-weight:700;margin:0}.header-info{display:flex;align-items:center;gap:15px}.user-info{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#fff3;border-radius:20px;font-size:14px;font-weight:500}.logout-btn{padding:8px 16px;background:#ffffff26;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s ease}.logout-btn:hover{background:#ffffff40}.status-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#fff3;border-radius:20px;font-size:14px;font-weight:500}.status-indicator:before{content:"";width:8px;height:8px;background:#10b981;border-radius:50%;animation:blink 2s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.sidebar{width:240px;background:#fff;box-shadow:2px 0 8px #0000000d;position:fixed;left:0;top:80px;bottom:0;overflow-y:auto;z-index:50}.nav-items{padding:20px 0}.nav-item{width:100%;display:flex;align-items:center;gap:15px;padding:16px 24px;border:none;background:transparent;cursor:pointer;font-size:16px;color:#4b5563;transition:all .2s;text-align:left}.nav-item:hover{background:#f3f4f6;color:#667eea}.nav-item.active{background:linear-gradient(90deg,#667eea15 0%,transparent 100%);color:#667eea;border-left:4px solid #667eea;font-weight:600}.nav-icon{font-size:24px}.main-content{margin-left:240px;margin-top:80px;padding:30px;min-height:calc(100vh - 80px);max-width:1400px}@media (max-width: 768px){.header-content{padding:15px 20px}.logo h1{font-size:20px}.logo-icon{font-size:28px}.sidebar{width:100%;position:static;box-shadow:none;border-bottom:1px solid #e5e7eb}.nav-items{display:flex;overflow-x:auto;padding:0}.nav-item{flex-direction:column;gap:5px;padding:12px 20px;min-width:100px;text-align:center;font-size:14px}.nav-item.active{border-left:none;border-bottom:3px solid #667eea}.main-content{margin-left:0;margin-top:0;padding:20px 15px}.header-info{display:none}}.btn-primary{background:#3b82f6;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 8px #3b82f64d}.loading{text-align:center;padding:40px;font-size:18px;color:#6b7280}.error-message{background:#fee2e2;color:#dc2626;padding:12px 16px;border-radius:8px;margin-bottom:20px;border-left:4px solid #dc2626;font-size:14px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}