:root{--primary-blue:#0284c7;--primary-blue-dark:#0369a1;--primary-blue-light:#0366d6;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--info:#3b82f6;--neutral-50:#f9fafb;--neutral-100:#f3f4f6;--neutral-200:#e5e7eb;--neutral-300:#d1d5db;--neutral-400:#9ca3af;--neutral-500:#6b7280;--neutral-600:#4b5563;--neutral-700:#374151;--neutral-800:#1f2937;--neutral-900:#111827;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-mono:source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #00000012;--shadow-lg:0 8px 16px #0000001a;--shadow-xl:0 16px 24px #00000026;--shadow-2xl:0 24px 48px #0003;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.3s cubic-bezier(.4, 0, .2, 1);--transition-slow:.5s cubic-bezier(.4, 0, .2, 1);--gradient-blue:linear-gradient(135deg, #0284c7 0%, #0369a1 100%);--gradient-success:linear-gradient(135deg, #10b981 0%, #059669 100%);--gradient-warning:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);--gradient-error:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);--gradient-soft-blue:linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);font-family:var(--font-family);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#1e293bde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;background-color:#fff;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow-x:hidden}body{min-height:100vh;font-family:var(--font-family);color:var(--neutral-900);background:linear-gradient(135deg,#f0f9ff 0%,#f0f4f8 50%,#e0f2fe 100%);margin:0;font-size:16px;line-height:1.6}#root{flex-direction:column;display:flex}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:700;line-height:1.2}h1{font-size:2.25rem}h2{font-size:1.875rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin:0}a{color:var(--primary-blue);transition:color var(--transition-base);text-decoration:none}a:hover{color:var(--primary-blue-dark);text-decoration:underline}button{cursor:pointer;background:0 0;border:none;font-family:inherit}button:disabled{opacity:.5;cursor:not-allowed}input,textarea,select{font-family:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#64748b1a}::-webkit-scrollbar-thumb{transition:background var(--transition-base);background:#64748b4d;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#64748b80}*{scrollbar-color:#64748b4d #64748b1a;scrollbar-width:thin}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-muted{color:var(--neutral-500)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-error{color:var(--error)}.text-info{color:var(--info)}.flex{display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-col{flex-direction:column;display:flex}.gap-2{gap:8px}.gap-4{gap:16px}.gap-6{gap:24px}.m-0{margin:0}.p-0{padding:0}.rounded{border-radius:8px}.rounded-lg{border-radius:12px}.rounded-xl{border-radius:16px}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}@media print{body{background:#fff}h1,h2,h3,h4,h5,h6{page-break-after:avoid}p{page-break-inside:avoid}}@media (width<=768px){:root{font-size:15px}h1{font-size:1.875rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}}@media (width<=480px){:root{font-size:14px}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1rem}h4{font-size:.95rem}}.dashboard-container{background:linear-gradient(135deg,#f0f9ff 0%,#f0f4f8 50%,#e0f2fe 100%);min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.dashboard-main{max-width:1600px;margin:0 auto;padding:40px 20px}.section-header{justify-content:space-between;align-items:center;margin-bottom:35px;padding:0 10px;animation:.6s ease-out slideInDown;display:flex}.section-header h2{color:#1e293b;letter-spacing:-.5px;margin:0;font-size:28px;font-weight:700}.update-indicator{letter-spacing:.5px;border-radius:20px;padding:6px 16px;font-size:12px;font-weight:600;transition:all .3s;display:inline-block}.update-indicator.idle{color:#047857;background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);box-shadow:0 4px 12px #10b98126}.update-indicator.loading{color:#b45309;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);animation:2s infinite pulse}.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-bottom:40px;animation:.8s ease-out .2s both fadeIn;display:grid}@media (width>=768px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1200px){.metrics-grid{grid-template-columns:repeat(3,1fr)}}@media (width>=1600px){.metrics-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=768px){.metrics-grid{grid-template-columns:1fr}}.error-banner{background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);border-left:4px solid #dc2626;border-radius:8px;margin-bottom:24px;padding:16px 20px;animation:.4s ease-out slideInDown}.error-banner span{color:#991b1b;font-size:14px;font-weight:600;display:block}.error-banner p{color:#b91c1c;opacity:.9;margin:6px 0 0;font-size:13px}.dashboard-footer{text-align:center;color:#64748b;border-top:1px solid #64748b1a;margin-top:40px;padding:20px;font-size:13px}.dashboard-footer p{margin:4px 0}.info-footer{text-align:center;background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%);border:1px solid #cbd5e1;border-radius:8px;margin-top:40px;padding:20px;animation:.5s ease-out slideInUp}.info-footer p{color:#475569;margin:8px 0;font-size:14px;font-weight:500}@media (width<=640px){.dashboard-main{padding:20px 12px}.section-header{flex-direction:column;align-items:flex-start;margin-bottom:25px}.section-header h2{margin-bottom:12px;font-size:24px}.dashboard-footer{font-size:12px}}.header{sticky:top;z-index:100;background:linear-gradient(135deg,#fff 0%,#f8fafc 50%,#f1f5f9 100%);border-bottom:2px solid #0f172a14;animation:.5s ease-out slideDown;position:sticky;top:0;box-shadow:0 8px 32px #0f172a14}.header-container{justify-content:space-between;align-items:center;gap:30px;max-width:1600px;margin:0 auto;padding:16px 32px;display:flex}.header-left{flex-shrink:0}.logo-section{align-items:center;gap:12px;display:flex}.logo-icon{background:linear-gradient(135deg,#e0f2fe 0%,#bae6fd 100%);border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;font-size:28px;display:flex;box-shadow:0 4px 12px #0366d626}.logo-section h1{background:linear-gradient(135deg,#0366d6 0%,#0284c7 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;margin:0;font-size:20px;font-weight:700}.header-center{flex:1;justify-content:center;align-items:center;gap:20px;min-width:0;display:flex}.info-item{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#fff9 0%,#f8fafc99 100%);border:1px solid #0f172a0f;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-width:130px;padding:10px 16px;transition:all .3s;display:flex}.info-item:hover{background:linear-gradient(135deg,#fffc 0%,#f8fafccc 100%);border-color:#0366d633;transform:translateY(-2px);box-shadow:0 8px 16px #0366d61a}.info-label{color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;font-weight:600}.info-value{color:#1e293b;text-align:center;font-size:14px;font-weight:700}.divider{background:linear-gradient(#0000 0%,#cbd5e1 50%,#0000 100%);width:2px;height:40px;margin:0 8px}.signal-item{flex-direction:row;gap:8px;min-width:160px;padding:10px 12px}.signal-icon{align-items:center;font-size:24px;display:flex}.signal-info{flex-direction:column;align-items:flex-start;display:flex}.signal-display{align-items:baseline;gap:4px;display:flex}.signal-value{color:#1e293b;font-size:15px;font-weight:700}.signal-label{color:#0ea5e9;font-size:11px;font-weight:600}.header-right{flex-shrink:0}.dropdown-container{position:relative}.dropdown-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0284c7 0%,#0369a1 100%);border:none;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;font-size:14px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 12px #0284c74d}.dropdown-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0284c766}.dropdown-button:active{transform:translateY(0)}.dropdown-icon{font-size:10px;transition:transform .3s;display:inline-block}.dropdown-icon.open{transform:rotate(180deg)}.dropdown-menu{z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff;border:1px solid #0f172a14;border-radius:12px;min-width:180px;animation:.3s ease-out slideDown;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 12px 40px #0f172a26}.dropdown-item{color:#1e293b;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:12px 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.dropdown-item:hover{color:#0284c7;background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%)}.dropdown-item.active{color:#0284c7;background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);font-weight:600}.checkmark{color:#fff;text-align:center;opacity:0;background:linear-gradient(135deg,#0284c7 0%,#0369a1 100%);border-radius:4px;width:16px;height:16px;font-size:12px;line-height:16px;transition:all .3s;display:inline-block;transform:scale(0)}.dropdown-item.active .checkmark{opacity:1;transform:scale(1)}.signal-bar{background:linear-gradient(90deg,#e0e7ff 0%,#ddd6fe 100%);height:3px;position:relative;overflow:hidden}.signal-bar-fill{background:linear-gradient(90deg,#10b981 0%,#34d399 100%);height:100%;transition:width .6s;box-shadow:0 0 20px #10b98180}@media (width<=1024px){.header-container{gap:16px;padding:16px 20px}.logo-section h1{font-size:18px}.divider{display:none}.header-center{gap:12px}.info-item{min-width:110px;padding:8px 12px}.info-label{font-size:10px}.info-value{font-size:13px}}@media (width<=768px){.header-container{flex-wrap:wrap;gap:12px;padding:12px 16px}.logo-section{gap:8px}.logo-section h1{font-size:16px}.logo-icon{width:36px;height:36px;font-size:24px}.header-center{order:3;gap:8px;width:100%}.info-item{min-width:90px;padding:6px 10px}.signal-item{min-width:140px}.dropdown-button{padding:10px 16px;font-size:13px}}@media (width<=480px){.header-container{padding:12px}.logo-section{flex:1;gap:6px}.logo-section h1{font-size:14px}.logo-icon{width:32px;height:32px;font-size:18px}.header-center{order:3;justify-content:flex-start;gap:6px;width:100%}.info-item{min-width:auto;padding:4px 8px;font-size:12px}.info-label{display:none}.info-value{font-size:12px}.signal-item{min-width:auto}.dropdown-button{padding:8px 12px;font-size:12px}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.metric-card{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:1px solid #0f172a0f;border-radius:16px;flex-direction:column;gap:16px;min-height:240px;padding:24px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 8px 24px #0f172a14}.metric-card:before{content:"";opacity:.3;background:linear-gradient(90deg,currentColor 0%,#0000 100%);height:3px;position:absolute;top:0;left:0;right:0}.metric-card:hover{border-color:#0f172a1f;transform:translateY(-8px);box-shadow:0 16px 48px #0f172a26}.metric-card.blue{--accent-color:#0284c7;--light-bg:#f0f9ff;--gradient:linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%)}.metric-card.purple{--accent-color:#7c3aed;--light-bg:#faf5ff;--gradient:linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%)}.metric-card.orange{--accent-color:#ea580c;--light-bg:#fff7ed;--gradient:linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)}.metric-card.red{--accent-color:#dc2626;--light-bg:#fef2f2;--gradient:linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%)}.metric-card.green{--accent-color:#16a34a;--light-bg:#f0fdf4;--gradient:linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)}.status-indicator{border-radius:50%;width:6px;height:6px;animation:2s infinite pulse-indicator;position:absolute;top:0;right:0;box-shadow:0 0 12px}.metric-card.success .status-indicator{background-color:#10b981}.metric-card.warning .status-indicator{background-color:#f59e0b}.metric-card.error .status-indicator{background-color:#ef4444}.card-decoration{background:radial-gradient(circle, var(--accent-color) 0%, transparent 70%);opacity:.04;pointer-events:none;border-radius:50%;width:300px;height:300px;position:absolute;top:-50%;right:-50%}.card-header{z-index:2;align-items:center;gap:12px;display:flex;position:relative}.card-icon{background:var(--gradient);border-radius:12px;justify-content:center;align-items:center;width:56px;height:56px;font-size:32px;display:flex;box-shadow:0 4px 12px #0000000f}.card-title{color:#64748b;text-transform:uppercase;letter-spacing:.5px;flex:1;margin:0;font-size:14px;font-weight:600}.card-divider{z-index:2;background:linear-gradient(90deg,#0000 0%,#0f172a14 50%,#0000 100%);height:1px;margin:0 -24px;position:relative}.card-content{z-index:2;flex-direction:column;flex:1;justify-content:center;gap:16px;display:flex;position:relative}.value-container{align-items:baseline;gap:8px;display:flex}.main-value{color:#1e293b;letter-spacing:-1px;font-size:36px;font-weight:700;line-height:1}.metric-card.blue .main-value{color:#0284c7}.metric-card.purple .main-value{color:#7c3aed}.metric-card.orange .main-value{color:#ea580c}.metric-card.red .main-value{color:#dc2626}.metric-card.green .main-value{color:#16a34a}.unit{color:#94a3b8;margin-left:4px;font-size:13px;font-weight:500}.trend-indicator{background:#64748b0d;border-radius:8px;align-items:center;gap:6px;width:fit-content;padding:8px 12px;display:flex}.trend-icon{color:var(--accent-color);font-size:16px;font-weight:700}.trend-text{color:#475569;font-size:12px;font-weight:600}.metric-card.loading{pointer-events:none;opacity:.6}.skeleton-loader{flex-direction:column;gap:12px;display:flex}.skeleton-value{background:linear-gradient(90deg,#64748b0d 25%,#64748b1a 50%,#64748b0d 75%) 0 0/200% 100%;border-radius:8px;height:40px;animation:2s infinite shimmer}.skeleton-unit{background:linear-gradient(90deg,#64748b0d 25%,#64748b1a 50%,#64748b0d 75%) 0 0/200% 100%;border-radius:4px;width:80px;height:16px;animation:2s .2s infinite shimmer}.card-shine{opacity:0;pointer-events:none;background:linear-gradient(135deg,#fff0 0%,#fff3 50%,#fff0 100%);border-radius:16px;transition:opacity .6s;position:absolute;inset:0}.metric-card:hover .card-shine{opacity:1}@keyframes pulse-indicator{0%,to{opacity:1}50%{opacity:.5}}@media (width<=1200px){.metric-card{min-height:220px;padding:20px}.main-value{font-size:32px}.card-icon{width:48px;height:48px;font-size:28px}}@media (width<=768px){.metric-card{gap:14px;min-height:200px;padding:18px}.main-value{font-size:28px}.card-icon{width:44px;height:44px;font-size:24px}.card-title{font-size:13px}.metric-card:hover{transform:translateY(-4px)}}@media (width<=480px){.metric-card{gap:12px;min-height:180px;padding:16px}.main-value{font-size:24px}.card-icon{width:40px;height:40px;font-size:20px}.card-title{font-size:12px}.trend-indicator{justify-content:center;width:100%}.metric-card:hover{transform:translateY(-2px)}}