:root{--bg-primary:#f0f2f5;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f8f9fb;--bg-input:#f5f7fa;--text-primary:#1a1d26;--text-secondary:#5a6474;--text-muted:#8c95a4;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-glow:#2563eb26;--accent-light:#2563eb14;--gradient-1:linear-gradient(135deg, #7c3aed, #a855f7);--gradient-2:linear-gradient(135deg, #10b981, #34d399);--gradient-3:linear-gradient(135deg, #f43f5e, #fb7185);--gradient-4:linear-gradient(135deg, #f59e0b, #fbbf24);--gradient-5:linear-gradient(135deg, #06b6d4, #22d3ee);--gradient-revenue:linear-gradient(135deg, #7c3aed, #6366f1);--gradient-countries:linear-gradient(135deg, #0d9488, #14b8a6);--gradient-active:linear-gradient(135deg, #059669, #10b981);--success:#10b981;--success-bg:#10b9811a;--danger:#f43f5e;--danger-bg:#f43f5e1a;--warning:#f59e0b;--warning-bg:#f59e0b1a;--info:#2563eb;--info-bg:#2563eb14;--border:#2563eb26;--border-light:#e5e7eb;--shadow:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 6px #0000000a, 0 2px 4px #00000008;--shadow-lg:0 10px 25px #00000014;--shadow-glow:0 0 20px #2563eb14;--radius:12px;--radius-sm:8px;--radius-xs:6px;--sidebar-width:240px;--sidebar-bg:#1e293b;--sidebar-text:#94a3b8;--sidebar-active-bg:#2563eb;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes countUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes shakeX{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes shake{0%,to{transform:rotate(0)}15%{transform:rotate(12deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}@keyframes slideInRight{0%{opacity:0;transform:translate(120%)}to{opacity:1;transform:translate(0)}}.animate-in{animation:.4s ease-out both fadeInUp}.animate-in-1{animation-delay:50ms}.animate-in-2{animation-delay:.1s}.animate-in-3{animation-delay:.15s}.animate-in-4{animation-delay:.2s}.animate-in-5{animation-delay:.25s}.animate-in-6{animation-delay:.3s}.app-layout{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);z-index:100;flex-direction:column;padding:20px 12px;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.sidebar-logo{align-items:center;gap:10px;margin-bottom:32px;padding:8px 12px;display:flex}.sidebar-logo .logo-icon{background:var(--sidebar-active-bg);color:#fff;border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;font-size:17px;font-weight:800;display:flex}.sidebar-logo h2{color:#fff;letter-spacing:-.3px;font-size:15px;font-weight:700}.sidebar-section{margin-bottom:8px}.sidebar-section-title{color:#475569;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:2px;padding:8px 14px 6px;font-size:10px;font-weight:600}.sidebar-nav{flex-direction:column;gap:2px;display:flex}.nav-item{border-radius:var(--radius-sm);color:var(--sidebar-text);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:13.5px;font-weight:500;text-decoration:none;transition:all .2s;display:flex;position:relative}.nav-item:hover{color:#e2e8f0;background:#ffffff0f}.nav-item.active{background:var(--sidebar-active-bg);color:#fff;font-weight:600;box-shadow:0 2px 8px #2563eb4d}.nav-item .icon{text-align:center;width:22px;font-size:17px}.main-content{margin-left:var(--sidebar-width);background:var(--bg-primary);flex:1;min-height:100vh;padding:24px 32px}.page-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.page-header h1{letter-spacing:-.3px;color:var(--text-primary);font-size:22px;font-weight:700}.page-header .subtitle{color:var(--text-secondary);margin-top:2px;font-size:13px}.header-badge{background:var(--success-bg);color:var(--success);border:1px solid #10b98133;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:12px;font-weight:600;display:inline-flex}.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;transition:all .2s}.card:hover{box-shadow:var(--shadow-md)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:24px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);cursor:default;box-shadow:var(--shadow);padding:20px;transition:all .2s;position:relative;overflow:hidden}.stat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.stat-card .stat-header{justify-content:space-between;align-items:flex-start;margin-bottom:10px;display:flex}.stat-card .stat-icon{border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.stat-card .stat-trend{border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700}.stat-card .stat-value{letter-spacing:-.5px;color:var(--text-primary);margin-bottom:2px;font-size:26px;font-weight:800;animation:.5s ease-out both countUp}.stat-card .stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:500}.stat-card.gradient-purple{background:var(--gradient-revenue);border:none}.stat-card.gradient-purple .stat-value,.stat-card.gradient-purple .stat-label,.stat-card.gradient-purple .stat-icon,.stat-card.gradient-purple .stat-trend{color:#fff!important}.stat-card.gradient-purple .stat-icon{background:#fff3}.stat-card.gradient-teal{background:var(--gradient-countries);border:none}.stat-card.gradient-teal .stat-value,.stat-card.gradient-teal .stat-label,.stat-card.gradient-teal .stat-icon{color:#fff!important}.stat-card.gradient-teal .stat-icon{background:#fff3}.stat-card.gradient-green{background:var(--gradient-active);border:none}.stat-card.gradient-green .stat-value,.stat-card.gradient-green .stat-label,.stat-card.gradient-green .stat-icon{color:#fff!important}.stat-card.gradient-green .stat-icon{background:#fff3}.stat-card:before{content:"";border-radius:12px 12px 0 0;height:3px;position:absolute;top:0;left:0;right:0}.stat-card.blue:before{background:var(--accent)}.stat-card.blue .stat-icon{background:var(--info-bg);color:var(--accent)}.stat-card.blue:hover{border-color:#2563eb33}.stat-card.green:before{background:var(--success)}.stat-card.green .stat-icon{background:var(--success-bg);color:var(--success)}.stat-card.green:hover{border-color:#10b98133}.stat-card.red:before{background:var(--danger)}.stat-card.red .stat-icon{background:var(--danger-bg);color:var(--danger)}.stat-card.red:hover{border-color:#f43f5e33}.stat-card.amber:before{background:var(--warning)}.stat-card.amber .stat-icon{background:var(--warning-bg);color:var(--warning)}.stat-card.amber:hover{border-color:#f59e0b33}.stat-card.cyan:before{background:#06b6d4}.stat-card.cyan .stat-icon{color:#06b6d4;background:#06b6d41a}.stat-card.cyan:hover{border-color:#06b6d433}.stat-card.purple:before{background:#7c3aed}.stat-card.purple .stat-icon{color:#7c3aed;background:#7c3aed1a}.stat-card.purple:hover{border-color:#7c3aed33}.analytics-grid{grid-template-columns:2fr 1fr;gap:16px;margin-bottom:24px;display:grid}.chart-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;transition:all .2s;overflow:hidden}.chart-card:hover{box-shadow:var(--shadow-md)}.chart-card h3{color:var(--text-primary);align-items:center;gap:8px;margin-bottom:16px;font-size:15px;font-weight:700;display:flex}.bar-chart{align-items:flex-end;gap:8px;height:140px;padding-top:10px;display:flex}.bar-chart .bar-col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;height:100%;display:flex}.bar-chart .bar{border-radius:4px 4px 0 0;width:100%;min-height:4px;transition:height .8s cubic-bezier(.4,0,.2,1);position:relative}.bar-chart .bar.delivered{background:var(--gradient-2)}.bar-chart .bar.failed{background:var(--gradient-3)}.bar-chart .bar-label{color:var(--text-muted);font-size:10px;font-weight:500}.ring-chart{border-radius:50%;justify-content:center;align-items:center;width:160px;height:160px;margin:0 auto 16px;display:flex;position:relative;box-shadow:0 2px 12px #0000000f}.ring-chart .ring-center{background:var(--bg-card);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:100px;height:100px;display:flex;position:absolute}.ring-chart .ring-center .ring-value{font-size:22px;font-weight:800}.ring-chart .ring-center .ring-label{color:var(--text-muted);font-size:11px}.ring-legend{flex-direction:column;gap:8px;display:flex}.ring-legend-item{color:var(--text-secondary);align-items:center;gap:8px;font-size:13px;display:flex}.ring-legend-dot{border-radius:3px;width:10px;height:10px}.speed-gauge{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.speed-item{text-align:center;background:var(--bg-input);border-radius:var(--radius-sm);border:1px solid var(--border-light);flex:1;min-width:90px;padding:12px}.speed-item .speed-value{color:var(--text-primary);font-size:20px;font-weight:800}.speed-item .speed-label{color:var(--text-muted);text-transform:uppercase;margin-top:2px;font-size:11px}.table-wrapper{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);box-shadow:var(--shadow);transition:all .2s;overflow:hidden}.table-wrapper:hover{box-shadow:var(--shadow-md)}.table-header{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.table-header h3{color:var(--text-primary);font-size:15px;font-weight:700}table{border-collapse:collapse;width:100%;font-size:13px}thead th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border-light);background:var(--bg-input);white-space:nowrap;padding:12px 16px;font-size:11px;font-weight:600}tbody tr{border-bottom:1px solid #f1f3f5;transition:all .15s}tbody tr:hover{background:#f8fafc}tbody tr:last-child{border-bottom:none}tbody td{color:var(--text-primary);white-space:nowrap;padding:10px 16px}.badge{border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-flex}.badge.delivered,.badge.success{background:var(--success-bg);color:var(--success)}.badge.failed,.badge.danger{background:var(--danger-bg);color:var(--danger)}.badge.pending,.badge.warning{background:var(--warning-bg);color:var(--warning)}.badge.submitted,.badge.info{background:var(--info-bg);color:var(--info)}.result-icon{border-radius:8px;justify-content:center;align-items:center;width:26px;height:26px;font-size:12px;font-weight:700;display:inline-flex}.result-icon.success{background:var(--success-bg);color:var(--success)}.result-icon.fail{background:var(--danger-bg);color:var(--danger)}.result-icon.pending{background:var(--warning-bg);color:var(--warning)}.progress-bar{background:#f1f3f5;border-radius:3px;height:6px;overflow:hidden}.progress-bar .progress-fill{border-radius:3px;height:100%;transition:width 1s cubic-bezier(.4,0,.2,1)}.progress-bar .progress-fill.green{background:var(--gradient-2)}.progress-bar .progress-fill.red{background:var(--gradient-3)}.progress-bar .progress-fill.blue{background:var(--accent)}.btn{border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font);border:none;align-items:center;gap:8px;padding:9px 18px;transition:all .2s;display:inline-flex}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px #2563eb33}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #2563eb4d}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-light);background:#fff}.btn-secondary:hover{background:#f9fafb;border-color:#d1d5db}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-sm{border-radius:var(--radius-xs);padding:6px 12px;font-size:12px}.btn-ghost{color:var(--text-secondary);border-radius:var(--radius-xs);background:0 0;padding:6px 10px}.btn-ghost:hover{background:var(--accent-light);color:var(--accent)}.input,.select{border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-family:var(--font);background:#fff;outline:none;padding:9px 14px;transition:all .2s}.input:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2563eb1a}.input::placeholder{color:var(--text-muted)}.form-group{margin-bottom:14px}.form-group label{color:var(--text-primary);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-group .input,.form-group .select{width:100%}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0006;justify-content:center;align-items:center;animation:.15s ease-out fadeInUp;display:flex;position:fixed;inset:0}.modal{border:1px solid var(--border-light);border-radius:var(--radius);min-width:440px;max-width:540px;box-shadow:var(--shadow-lg);background:#fff;padding:28px;animation:.2s ease-out scaleIn}.modal h2{color:var(--text-primary);margin-bottom:20px;font-size:18px;font-weight:700}.modal-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.login-page{background:var(--bg-primary);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-box{border:1px solid var(--border-light);border-radius:var(--radius);width:420px;box-shadow:var(--shadow-lg);z-index:1;background:#fff;padding:40px 36px;animation:.3s ease-out scaleIn;position:relative}.login-box h1{text-align:center;color:var(--text-primary);margin-bottom:4px;font-size:24px;font-weight:800}.login-box .login-subtitle{text-align:center;color:var(--text-muted);margin-bottom:28px;font-size:14px}.login-box .form-group{margin-bottom:16px}.login-box .input{width:100%;padding:11px 14px}.login-logo-wrapper{text-align:center;margin-bottom:16px}.login-logo-icon{background:var(--accent);border-radius:14px;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto;font-size:28px;animation:3s ease-in-out infinite float;display:flex;box-shadow:0 4px 16px #2563eb40}.pagination{border-top:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.pagination-info{color:var(--text-muted);font-size:13px}.pagination-buttons{gap:6px;display:flex}.loading{text-align:center;color:var(--text-muted);padding:40px}.loading .spinner{border:3px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;margin:0 auto 12px;animation:.7s linear infinite spin}.empty-state{text-align:center;color:var(--text-muted);padding:50px 20px}.empty-state .icon{margin-bottom:12px;font-size:42px}.live-dot{background:var(--success);border-radius:50%;width:8px;height:8px;animation:2s infinite pulse;display:inline-block;box-shadow:0 0 6px #10b98166}.revenue-row{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;display:grid}.date-filter-bar{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);box-shadow:var(--shadow);z-index:100;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding:16px 20px;display:flex;position:relative;overflow:visible}.date-quick-buttons{flex-wrap:wrap;gap:8px;display:flex}.date-quick-btn{border:1px solid var(--border-light);color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font);white-space:nowrap;background:#fff;border-radius:20px;align-items:center;gap:6px;padding:7px 16px;transition:all .2s;display:inline-flex}.date-quick-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.date-quick-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px #2563eb40}.date-range-inputs{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.date-input-group{flex-direction:column;gap:4px;display:flex}.date-input-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.date-input{min-width:145px}.mobile-menu-btn{z-index:200;border:1px solid var(--border-light);width:40px;height:40px;color:var(--text-primary);cursor:pointer;box-shadow:var(--shadow-md);background:#fff;border-radius:10px;justify-content:center;align-items:center;font-size:18px;transition:all .2s;display:none;position:fixed;top:14px;left:14px}.mobile-menu-btn:hover{background:var(--accent);color:#fff}.sidebar-overlay{z-index:90;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0006;display:none;position:fixed;inset:0}@media (width<=1200px){.analytics-grid,.revenue-row{grid-template-columns:1fr}.date-filter-bar{flex-direction:column;align-items:stretch}}@media (width<=768px){.sidebar{box-shadow:none;transition:transform .3s;transform:translate(-100%)}.sidebar.open{transform:translate(0);box-shadow:4px 0 24px #00000026}.mobile-menu-btn{display:flex}.sidebar-overlay{display:block}.main-content{margin-left:0;padding:64px 16px 16px}.stats-grid{grid-template-columns:repeat(2,1fr)}.date-quick-buttons{width:100%}.date-quick-btn{flex:1;justify-content:center;font-size:12px}.date-range-inputs{flex-direction:column;width:100%}.date-input{min-width:unset;width:100%}.page-header{flex-direction:column;align-items:flex-start;gap:10px}.page-header h1{font-size:18px}.login-box{width:90%;padding:28px 24px}}@media (width<=480px){.stats-grid{grid-template-columns:1fr}.main-content{padding:64px 12px 12px}}