@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap";:root{--bg-main:#f4f5f7;--bg-card:#fff;--bg-hover:#f9fafb;--text-primary:#1f2937;--text-secondary:#4b5563;--text-muted:#9ca3af;--accent-coral:#e75b4b;--accent-coral-light:#e75b4b1a;--accent-blue:#3b82f6;--accent-green:#10b981;--accent-green-light:#e8f8f0;--accent-orange:#f59e0b;--accent-orange-light:#fff7ed;--border:#e5e7eb;--shadow-sm:0 10px 20px -10px #00000008;--shadow-md:0 20px 40px -15px #0000000d;--shadow-lg:0 25px 50px -12px #0000001a;--radius-sm:8px;--radius-md:24px;--radius-lg:24px;--radius-full:9999px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-main);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Nunito,Inter,-apple-system,sans-serif;line-height:1.5}.app-container{min-height:100vh}.page-content{max-width:1520px;margin:0 auto;padding:24px 32px 48px}.tab-header{background:var(--bg-card);border-bottom:1px solid var(--border);z-index:50;justify-content:space-between;align-items:center;padding:12px 32px;display:flex;position:sticky;top:0}.tab-nav{border-radius:var(--radius-full);background:#f1f5f9;gap:4px;padding:4px;display:flex}.tab-btn{border-radius:var(--radius-full);cursor:pointer;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;background:0 0;border:none;padding:8px 20px;font-size:13px;font-weight:600;transition:all .2s}.tab-btn.active{background:var(--bg-card);color:var(--accent-coral);box-shadow:var(--shadow-sm)}.tab-btn:hover:not(.active){color:var(--text-primary)}.filter-bar{align-items:center;gap:12px;display:flex}.filter-select{border:1.5px solid var(--border);border-radius:var(--radius-full);background:var(--bg-card);cursor:pointer;color:var(--text-primary);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding:8px 32px 8px 16px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;transition:all .2s}.filter-select:hover{background:var(--bg-hover);border-color:#d1d5db}.notification-btn{border-radius:var(--radius-full);border:1px solid var(--border);background:var(--bg-card);cursor:pointer;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;transition:all .2s;display:flex}.notification-btn:hover{background:var(--bg-hover)}.summary-row{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;display:grid}.summary-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px 28px;position:relative;overflow:hidden}.summary-card:before{content:"";height:3px;position:absolute;top:0;left:0;right:0}.summary-card:first-child:before{background:linear-gradient(90deg, var(--accent-coral), #f4a261)}.summary-card:nth-child(2):before{background:linear-gradient(90deg, var(--accent-blue), #6c8eef)}.summary-card:nth-child(3):before{background:linear-gradient(90deg, var(--accent-green), #4dd9a0)}.summary-card:nth-child(4):before{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.summary-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:8px;font-size:11px;font-weight:700}.summary-value{font-size:40px;font-weight:800;line-height:1.1}.summary-card:first-child .summary-value{color:var(--accent-coral)}.summary-sub{color:var(--text-muted);align-items:center;gap:6px;margin-top:8px;font-size:12px;display:flex}.summary-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.chart-row{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;display:grid}.chart-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:none;padding:24px}.chart-title{align-items:center;gap:8px;margin-bottom:4px;font-size:18px;font-weight:800;display:flex}.chart-subtitle{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:700}.chart-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.chart-badge{border-radius:var(--radius-full);background:var(--bg-hover);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--border);padding:4px 12px;font-size:11px;font-weight:800}.team-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.team-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:none;padding:0;overflow:hidden}.team-card-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.team-card-title{align-items:center;gap:12px;display:flex}.team-card-name{text-transform:uppercase;letter-spacing:.02em;font-size:16px;font-weight:800}.team-badge{border-radius:var(--radius-full);color:#fff;letter-spacing:.05em;padding:4px 12px;font-size:11px;font-weight:800}.team-badge.green{background:var(--accent-green)}.team-badge.orange{background:var(--accent-orange)}.team-badge.red{background:var(--accent-coral)}.team-member-count{color:var(--text-muted);font-size:12px;font-weight:700}.staff-row{border-bottom:1px solid var(--border);cursor:pointer;justify-content:space-between;align-items:center;padding:16px 24px;transition:background .15s;display:flex}.staff-row:hover{background:var(--bg-hover)}.staff-row:last-child{border-bottom:none}.staff-left{flex:1;align-items:center;gap:12px;display:flex}.staff-checkbox{width:16px;height:16px;accent-color:var(--accent-coral);cursor:pointer}.staff-name{font-size:13px;font-weight:500}.staff-metrics{align-items:center;gap:16px;display:flex}.staff-metric-label{color:var(--text-muted);text-transform:uppercase;font-size:10px;font-weight:600}.staff-metric-value{font-size:13px;font-weight:700}.staff-metric-value.green{color:var(--accent-green)}.staff-metric-value.orange{color:var(--accent-orange)}.staff-metric-value.red{color:var(--accent-coral)}.view-btn{cursor:pointer;width:28px;height:28px;color:var(--text-muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.view-btn:hover{background:var(--bg-hover);color:var(--accent-coral)}.drawer-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1f293766;position:fixed;inset:0}.drawer{background:var(--bg-main);z-index:101;width:480px;box-shadow:var(--shadow-lg);animation:.3s cubic-bezier(.4,0,.2,1) slideIn;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{border-bottom:1px solid var(--border);background:var(--bg-card);z-index:2;box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;padding:24px;display:flex;position:sticky;top:0}.drawer-title{color:var(--text-primary);font-size:18px;font-weight:800}.drawer-close{background:var(--bg-hover);cursor:pointer;width:36px;height:36px;color:var(--text-secondary);border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.drawer-close:hover{background:var(--accent-coral-light);color:var(--accent-coral)}.drawer-body{background:var(--bg-main);padding:24px}.kpi-gauge-container{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-md);align-items:center;gap:20px;margin-bottom:24px;padding:24px;display:flex}.kpi-gauge{border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;display:flex;position:relative}.kpi-gauge-value{letter-spacing:-.02em;font-size:20px;font-weight:800}.kpi-gauge-label{color:var(--text-muted);text-transform:uppercase;font-size:10px;font-weight:700}.user-info h3{letter-spacing:-.02em;color:var(--text-primary);font-size:20px;font-weight:800}.user-info p{color:var(--text-secondary);align-items:center;gap:6px;margin-top:4px;font-size:13px;display:flex}.compare-table{border-collapse:collapse;width:100%;margin-bottom:20px}.compare-table th{text-transform:uppercase;color:var(--text-muted);text-align:left;border-bottom:2px solid var(--border);padding:10px 12px;font-size:11px;font-weight:600}.compare-table td{border-bottom:1px solid #f1f5f9;padding:12px;font-size:13px;font-weight:500}.compare-table .metric-label{color:var(--text-secondary);font-weight:600}.diff-positive{color:var(--accent-green);font-weight:700}.diff-negative{color:var(--accent-coral);font-weight:700}.modal-overlay{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1f293766;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-card);border-radius:var(--radius-lg);width:90%;max-width:960px;max-height:90vh;box-shadow:var(--shadow-lg);border:none;animation:.25s cubic-bezier(.4,0,.2,1) scaleIn;overflow-y:auto}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:24px 32px;display:flex}.modal-title{align-items:center;gap:12px;font-size:20px;font-weight:800;display:flex}.modal-body{padding:32px}.modal-body-split{grid-template-columns:1fr 1fr;gap:32px;display:grid}.compare-bar{z-index:90;background:var(--bg-card);border-top:1px solid var(--border);justify-content:center;align-items:center;gap:12px;padding:14px 24px;animation:.3s slideUp;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 12px #00000014}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.compare-chip{border-radius:var(--radius-full);background:#f1f5f9;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:500;display:flex}.compare-chip button{cursor:pointer;color:var(--text-muted);background:0 0;border:none;margin-left:4px;font-size:14px}.compare-skip{border-radius:var(--radius-full);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);background:0 0;border:none;padding:8px 20px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;transition:all .2s}.compare-skip:hover{background:var(--bg-hover);color:var(--text-primary)}.compare-go{border-radius:var(--radius-full);background:var(--accent-coral);color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border:none;padding:10px 28px;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;transition:all .2s}.compare-go:hover{background:#d14d3e;transform:translateY(-2px);box-shadow:0 10px 20px -10px #e75b4b66}.ranking-list{list-style:none}.ranking-item{border-bottom:1px solid #f1f5f9;align-items:center;gap:16px;padding:14px 20px;transition:background .15s;display:flex}.ranking-item:hover{background:var(--bg-hover)}.ranking-number{text-align:center;width:32px;font-size:16px;font-weight:800}.ranking-number.gold{color:#f59e0b}.ranking-number.silver{color:#94a3b8}.ranking-number.bronze{color:#cd7f32}.ranking-info{flex:1}.ranking-name{font-size:14px;font-weight:600}.ranking-team{color:var(--text-muted);text-transform:uppercase;font-size:12px}.ranking-percent{font-size:16px;font-weight:800}.threshold-row{align-items:center;gap:12px;margin-bottom:12px;display:flex}.threshold-label{width:80px;font-size:13px;font-weight:600}.threshold-bar-wrap{border-radius:var(--radius-sm);background:#f1f5f9;flex:1;height:28px;overflow:hidden}.threshold-bar{border-radius:var(--radius-sm);height:100%;transition:width .8s}.threshold-bar.high{background:linear-gradient(90deg, var(--accent-green), #4dd9a0)}.threshold-bar.mid{background:linear-gradient(90deg, var(--accent-orange), #f4c86a)}.threshold-bar.low{background:linear-gradient(90deg, var(--accent-coral), #f4a261)}.threshold-value{text-align:right;width:48px;font-size:14px;font-weight:700}.threshold-value.green{color:var(--accent-green)}.threshold-value.orange{color:var(--accent-orange)}.threshold-value.red{color:var(--accent-coral)}.progress-container{margin-top:16px}.progress-header{justify-content:space-between;margin-bottom:6px;display:flex}.progress-name{font-size:13px;font-weight:600}.progress-percent{font-size:13px;font-weight:700}.progress-bar-wrap{background:#f1f5f9;border-radius:3px;height:6px;overflow:hidden}.progress-bar-fill{border-radius:3px;height:100%;transition:width 1s}.progress-goal{color:var(--text-muted);margin-top:4px;font-size:11px}.user-compare-cards{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;display:grid}.user-compare-card{border-radius:var(--radius-md);border:1px solid var(--border);background:#fafbfc;align-items:center;gap:16px;padding:24px;display:flex}.user-avatar{background:var(--accent-coral-light);width:56px;height:56px;color:var(--accent-coral);border-radius:50%;justify-content:center;align-items:center;font-size:24px;display:flex}.colleague-select{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);width:100%;margin-bottom:20px;padding:8px 14px;font-size:13px}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%) 0 0/200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.search-bar{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);align-items:center;gap:8px;padding:8px 16px;display:flex}.search-bar input{background:0 0;border:none;outline:none;flex:1;font-size:13px}.search-icon{color:var(--text-muted);font-size:16px}.open-grid-btn{border-radius:var(--radius-full);background:var(--accent-coral);color:#fff;cursor:pointer;letter-spacing:.02em;border:none;align-items:center;gap:8px;padding:10px 24px;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;transition:all .2s;display:flex}.open-grid-btn:hover{background:#d14d3e;transform:translateY(-2px);box-shadow:0 10px 20px -10px #e75b4b66}.staff-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.staff-header-left h2{font-size:24px;font-weight:800}.staff-header-left p{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;font-size:13px;font-weight:600}.staff-header-right{align-items:center;gap:12px;display:flex}.top-staff-list{list-style:none}.top-staff-item{border-bottom:1px solid #f1f5f9;align-items:center;gap:14px;padding:12px 0;display:flex}.top-staff-item:last-child{border-bottom:none}.top-rank{width:28px;font-size:18px;font-weight:800}.top-rank.r1{color:#f59e0b}.top-rank.r2{color:#94a3b8}.top-rank.r3{color:#cd7f32}.top-rank.r4,.top-rank.r5{color:var(--text-muted)}.top-info{flex:1}.top-name{font-size:14px;font-weight:600}.top-team{color:var(--text-muted);text-transform:uppercase;font-size:11px}.top-kpi{font-size:16px;font-weight:800}.rank-table{border-collapse:collapse;width:100%}.rank-table th{text-transform:uppercase;color:var(--text-muted);text-align:left;border-bottom:2px solid var(--border);padding:12px;font-size:11px;font-weight:600}.rank-table td{border-bottom:1px solid #f1f5f9;padding:12px;font-size:13px}.rank-table tr:hover{background:var(--bg-hover)}@media (width<=1200px){.summary-row,.team-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.summary-row,.chart-row,.team-grid{grid-template-columns:1fr}.drawer{width:100%}.page-content{padding:16px}}