@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
:root{--color-bg-primary:#0b0f19;--color-bg-secondary:#111827;--color-bg-card:#1a2235;--color-bg-card-hover:#1e293b;--color-bg-input:#1e293b;--color-border:#ffffff14;--color-border-strong:#ffffff26;--color-text-primary:#f1f5f9;--color-text-secondary:#94a3b8;--color-text-muted:#64748b;--color-accent-cyan:#22d3ee;--color-accent-cyan-dim:#22d3ee26;--color-accent-amber:#fbbf24;--color-accent-amber-dim:#fbbf2426;--color-accent-emerald:#34d399;--color-accent-emerald-dim:#34d39926;--color-accent-rose:#fb7185;--color-accent-rose-dim:#fb718526;--color-accent-violet:#a78bfa;--color-accent-violet-dim:#a78bfa26;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:9999px;--shadow-card:0 4px 24px #00000059;--shadow-glow-cyan:0 0 20px #22d3ee33;--shadow-glow-amber:0 0 20px #fbbf2433;--font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.75rem;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--sidebar-width:240px;--header-height:64px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-bg-primary);min-height:100vh;line-height:1.6}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in{animation:fadeIn var(--transition-base)ease-out forwards}.animate-pulse{animation:2s ease-in-out infinite pulse}.app-shell{min-height:100vh;display:flex}.main-content{margin-left:var(--sidebar-width);padding:var(--space-xl);flex:1;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--color-bg-secondary);border-right:1px solid var(--color-border);z-index:50;height:100vh;padding:var(--space-lg)0;flex-direction:column;display:flex;position:fixed;top:0;left:0}.sidebar-brand{align-items:center;gap:var(--space-sm);padding:0 var(--space-lg);margin-bottom:var(--space-xl);display:flex}.sidebar-brand-icon{border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-accent-cyan),var(--color-accent-violet));width:36px;height:36px;font-weight:800;font-size:var(--font-size-lg);color:#0b0f19;justify-content:center;align-items:center;display:flex}.sidebar-brand-text{font-weight:700;font-size:var(--font-size-lg);color:var(--color-text-primary)}.sidebar-brand-sub{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:400}.sidebar-nav{gap:var(--space-xs);padding:0 var(--space-sm);flex-direction:column;display:flex}.sidebar-link{align-items:center;gap:var(--space-sm);padding:var(--space-sm)var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text-secondary);transition:all var(--transition-fast);font-weight:500;display:flex}.sidebar-link:hover{background:var(--color-bg-card);color:var(--color-text-primary)}.sidebar-link--active,.sidebar-link--active:hover{background:var(--color-accent-cyan-dim);color:var(--color-accent-cyan)}.sidebar-link svg{flex-shrink:0;width:18px;height:18px}.sidebar-footer{padding:var(--space-md)var(--space-lg);border-top:1px solid var(--color-border);margin-top:auto}.sidebar-footer-text{font-size:var(--font-size-xs);color:var(--color-text-muted)}.page-header{margin-bottom:var(--space-xl)}.page-title{font-size:var(--font-size-3xl);color:var(--color-text-primary);letter-spacing:-.02em;font-weight:800}.page-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-top:var(--space-xs)}.kpi-grid{gap:var(--space-lg);margin-bottom:var(--space-xl);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base);animation:fadeInScale var(--transition-slow)ease-out forwards}.card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-card);transform:translateY(-2px)}.kpi-card{position:relative;overflow:hidden}.kpi-card:before{content:"";border-radius:var(--radius-lg)var(--radius-lg)0 0;height:3px;position:absolute;top:0;left:0;right:0}.kpi-card--cyan:before{background:linear-gradient(90deg,var(--color-accent-cyan),transparent)}.kpi-card--amber:before{background:linear-gradient(90deg,var(--color-accent-amber),transparent)}.kpi-card--emerald:before{background:linear-gradient(90deg,var(--color-accent-emerald),transparent)}.kpi-icon{border-radius:var(--radius-md);width:42px;height:42px;margin-bottom:var(--space-md);font-size:var(--font-size-xl);justify-content:center;align-items:center;display:flex}.kpi-icon--cyan{background:var(--color-accent-cyan-dim);color:var(--color-accent-cyan)}.kpi-icon--amber{background:var(--color-accent-amber-dim);color:var(--color-accent-amber)}.kpi-icon--emerald{background:var(--color-accent-emerald-dim);color:var(--color-accent-emerald)}.kpi-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.kpi-value{font-size:var(--font-size-4xl);color:var(--color-text-primary);letter-spacing:-.03em;font-weight:800;line-height:1.1}.kpi-sub{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-xs)}.data-table-wrapper{overflow-x:auto}.data-table{border-collapse:collapse;width:100%}.data-table th{text-align:left;font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;padding:var(--space-sm)var(--space-md);border-bottom:1px solid var(--color-border);font-weight:600}.data-table td{padding:var(--space-sm)var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);transition:background var(--transition-fast)}.data-table tr:hover td{background:var(--color-bg-card-hover);color:var(--color-text-primary)}.data-table .rank-badge{border-radius:var(--radius-full);width:28px;height:28px;font-size:var(--font-size-xs);justify-content:center;align-items:center;font-weight:700;display:inline-flex}.rank-badge--1{background:var(--color-accent-amber-dim);color:var(--color-accent-amber)}.rank-badge--2{background:var(--color-accent-cyan-dim);color:var(--color-accent-cyan)}.rank-badge--3{background:var(--color-accent-emerald-dim);color:var(--color-accent-emerald)}.rank-badge--default{color:var(--color-text-muted);background:#ffffff0f}.product-bar{border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-accent-cyan),var(--color-accent-violet));height:6px;transition:width var(--transition-slow)}.filter-bar{align-items:flex-end;gap:var(--space-md);margin-bottom:var(--space-xl);padding:var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.filter-group{gap:var(--space-xs);flex-direction:column;display:flex}.filter-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.filter-input{background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-sm)var(--space-md);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);transition:border-color var(--transition-fast);min-width:160px}.filter-input:focus{border-color:var(--color-accent-cyan);box-shadow:0 0 0 3px var(--color-accent-cyan-dim);outline:none}.filter-input::-webkit-calendar-picker-indicator{filter:invert()}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm)var(--space-lg);border-radius:var(--radius-sm);font-size:var(--font-size-sm);transition:all var(--transition-fast);cursor:pointer;font-weight:600;display:inline-flex}.btn--primary{background:var(--color-accent-cyan);color:#0b0f19;border:none}.btn--primary:hover{box-shadow:var(--shadow-glow-cyan);background:#06b6d4}.btn--primary:active{transform:scale(.98)}.alarm-container{top:var(--space-lg);right:var(--space-lg);z-index:9999;gap:var(--space-sm);flex-direction:column;max-width:380px;display:flex;position:fixed}.alarm-toast{align-items:flex-start;gap:var(--space-sm);padding:var(--space-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-accent-rose);border-radius:var(--radius-md);background:#111827f2;animation:.3s ease-out forwards slideInRight;display:flex;box-shadow:0 8px 32px #fb718533}.alarm-icon{font-size:var(--font-size-xl);flex-shrink:0;animation:1.5s ease-in-out infinite pulse}.alarm-title{font-size:var(--font-size-sm);color:var(--color-accent-rose);font-weight:700}.alarm-message{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:2px}.alarm-time{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-xs)}.alarm-dismiss{font-size:var(--font-size-lg);color:var(--color-text-muted);transition:color var(--transition-fast);margin-left:auto;padding:2px}.alarm-dismiss:hover{color:var(--color-text-primary)}.skeleton{background:linear-gradient(90deg,var(--color-bg-card)25%,var(--color-bg-card-hover)50%,var(--color-bg-card)75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}.skeleton-line{height:16px;margin-bottom:var(--space-sm)}.skeleton-block{height:40px}.empty-state{padding:var(--space-2xl);color:var(--color-text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state-icon{margin-bottom:var(--space-md);opacity:.4;font-size:3rem}.empty-state-text{font-size:var(--font-size-sm)}.chart-container{width:100%;height:350px;margin-bottom:var(--space-xl)}.section-title{font-size:var(--font-size-xl);color:var(--color-text-primary);margin-bottom:var(--space-md);font-weight:700}@media (max-width:768px){.sidebar{display:none}.main-content{padding:var(--space-md);margin-left:0}.kpi-grid{grid-template-columns:1fr}.filter-bar{flex-direction:column;align-items:stretch}.kpi-value{font-size:var(--font-size-3xl)}}