:root{--primary:#2c5aa0;--primary-new:#00aff0;--primary-btn:#00aeef;--primary-title:#4168b2;--primary-header:linear-gradient(116deg,#00aeef 0%,#4168b2 100%);--primary-light:#3a6bc0;--primary-dark:#1e3d72;--secondary:#f8f9fa;--accent:#ff6b35;--text:#333;--text-light:#6c757d;--border:#dee2e6;--card-bg:#fff;--shadow:0 4px 12px #00000014;--sidebar-bg:#fff;--sidebar-text:#333;--sidebar-hover:#f5f7fa}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text);background-color:#f5f7fa;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.header{background:var(--primary-new);color:#fff;padding:20px 0;box-shadow:0 2px 10px #0000001a}.header h1{margin-bottom:5px;font-size:28px;font-weight:600}.header p{opacity:.9;margin-bottom:0}.navigation{background-color:var(--card-bg);box-shadow:var(--shadow);border-radius:12px;margin-bottom:30px;padding:20px}.nav-tabs{border:none;flex-wrap:wrap;gap:10px;display:flex}.nav-tabs .nav-item{margin-bottom:0}.nav-tabs .nav-link{color:var(--text);background-color:var(--secondary);border:none;border-radius:8px;align-items:center;padding:12px 20px;font-weight:500;transition:all .3s;display:flex}.nav-tabs .nav-link:hover{background-color:var(--primary-light);color:#fff;transform:translateY(-2px)}.nav-tabs .nav-link.active{background-color:var(--primary);color:#fff;box-shadow:0 4px 8px #2c5aa04d}.nav-tabs .nav-link i{margin-right:8px;font-size:18px}.container.my-4{margin-top:30px!important;margin-bottom:30px!important}.content-section{display:none}.content-section.active{display:block}.section-title{color:var(--primary-new);margin-bottom:25px;padding-bottom:10px;font-size:28px;font-weight:600;position:relative}.section-title:after{content:"";background-color:var(--accent);width:60px;height:3px;position:absolute;bottom:0;left:0}.metric-card{text-align:center;color:#fff;background:linear-gradient(135deg,#2c5aa0e6,#4682ffcc);border-radius:16px;padding:30px 20px;transition:all .4s;position:relative;overflow:hidden;box-shadow:0 6px 20px #2c5aa040}.metric-card:first-child{background:linear-gradient(135deg,#4a6cf7,#6c8efb)}.metric-card:nth-child(2){background:linear-gradient(135deg,#38b2ac,#319795)}.metric-card:nth-child(3){background:linear-gradient(135deg,#f6ad55,#f687b3)}.metric-card:nth-child(4){background:linear-gradient(135deg,#fc8181,#f56565)}.metric-card:after{content:"";filter:blur(40px);background:#ffffff26;border-radius:50%;width:200px;height:200px;position:absolute;top:-30%;right:-30%}.metric-card:hover{transform:translateY(-6px)scale(1.03);box-shadow:0 12px 24px #0003}.metric-card i{opacity:.9;margin-bottom:12px;font-size:36px;transition:transform .3s}.metric-card:hover i{transform:scale(1.1)}.metric-value{letter-spacing:.5px;font-size:38px;font-weight:700}.metric-label{opacity:.9;margin-bottom:8px;font-size:16px;font-weight:500}.metric-change{color:#ffffffe6;font-size:13px;font-weight:600}.metric-change i{margin-right:4px;font-size:12px}.capitalize-text{text-transform:capitalize}.filter-card{background-color:var(--card-bg);box-shadow:var(--shadow);border:none;border-radius:12px;margin-bottom:30px;padding:25px}.filter-card h5{color:var(--primary-new);margin-bottom:20px;font-size:18px;font-weight:600}.filter-wrapper{flex-wrap:wrap;align-items:flex-end;gap:25px;display:flex}.custom-select-wrapper{flex-direction:column;flex:1;min-width:180px;display:flex}.custom-select-wrapper h6{color:var(--text);margin-bottom:8px;font-size:14px;font-weight:600}select{border:1px solid var(--border);color:var(--text);cursor:pointer;background-color:#fff;border-radius:8px;padding:12px 15px;font-size:14px;transition:all .3s}select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #2c5aa01a}button{cursor:pointer;background-color:var(--primary);color:#fff;border:none;border-radius:8px;min-width:140px;padding:12px;font-size:14px;font-weight:600;transition:all .3s;box-shadow:0 2px 5px #2c5aa033}button:hover{background-color:var(--primary-light);transform:translateY(-2px);box-shadow:0 4px 8px #2c5aa04d}button:active{transform:translateY(0)}.filter-card{background:#fff;border-radius:12px;width:340px;padding:16px;font-family:Inter,sans-serif;box-shadow:0 2px 8px #00000014}.filter-wrapper{flex-direction:column;gap:14px;display:flex}.custom-select-wrapper h6{margin-bottom:6px;font-size:14px;font-weight:600}input#date-range{cursor:pointer;border:1px solid #ccc;border-radius:8px;width:100%;padding:8px 10px;font-size:14px}button#applyFilters{color:#fff;cursor:pointer;background-color:#2c5aa0;border:none;border-radius:8px;padding:8px 12px;font-weight:600}.chart-card{background-color:var(--card-bg);box-shadow:var(--shadow);border:none;border-radius:12px;margin-bottom:30px;padding:25px}.chart-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.chart-title{color:var(--primary-new);font-size:20px;font-weight:600}.chart-description{color:var(--text-light);margin-top:5px;font-size:14px}.export-icon{gap:12px;display:flex}.icon-wrap{background-color:var(--secondary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s;display:flex}.icon-wrap:hover{background-color:var(--primary-light)}.icon-wrap img{filter:invert(30%);width:20px;height:20px}.icon-wrap:hover img{filter:invert()}canvas{border:1px solid var(--border);background:#fff;border-radius:8px;padding:15px}.chart-container{height:400px;position:relative}.segmentation-chart-container{height:350px;position:relative}.chart-legend{flex-wrap:wrap;gap:20px;margin-top:15px;display:flex}.legend-item{align-items:center;gap:8px;display:flex}.legend-color{border-radius:4px;width:16px;height:16px}.engagement-description{background-color:var(--secondary);border-radius:8px;margin-top:20px;padding:15px}.engagement-description h6{color:var(--primary-new);margin-bottom:10px;font-weight:600}.engagement-description p{margin-bottom:10px;font-size:14px}.engagement-description p:last-child{margin-bottom:0}.segmentation-tabs .btn-group{border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.segmentation-tabs .btn{border:1px solid var(--primary);color:var(--primary);padding:8px 16px;font-weight:500}.segmentation-tabs .btn.active{background-color:var(--primary);color:#fff}.api-status{color:#fff;box-shadow:var(--shadow);z-index:1000;border-radius:8px;padding:10px 20px;font-weight:500;display:none;position:fixed;bottom:20px;right:20px}.api-status.success{background-color:#28a745}.api-status.warning{color:#212529;background-color:#ffc107}.api-status.error{background-color:#dc3545}.loading-overlay{z-index:9999;background-color:#ffffffe6;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.loading-overlay.hidden{display:none}@media (max-width:768px){.content-section{padding:15px}.filter-wrapper{gap:15px}.custom-select-wrapper{min-width:100%}.chart-header{flex-direction:column;align-items:flex-start;gap:15px}.export-icon{align-self:flex-end}.metric-value{font-size:24px}.nav-tabs .nav-link{padding:10px 15px;font-size:14px}.nav-tabs .nav-link i{font-size:16px}}.spinner{border:4px solid #0000001a;border-top-color:#3a6bc0;border-radius:50%;width:70px;height:70px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}