@import "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap";:root{--bg-main:#fff;--bg-card:#ffffffe6;--bg-hover:#f1f5f9;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--accent-coral:#e11d48;--accent-coral-light:#e11d481a;--accent-blue:#0284c7;--accent-green:#059669;--accent-green-light:#0596691a;--accent-orange:#d97706;--accent-orange-light:#d977061a;--accent-purple:#7c3aed;--border:#e2e8f0;--shadow-sm:0 4px 6px -1px #0000000d, 0 2px 4px -1px #00000008;--shadow-md:0 10px 15px -3px #0000000d, 0 4px 6px -2px #00000006;--shadow-lg:0 20px 25px -5px #0000000d, 0 10px 10px -5px #00000005;--radius-sm:10px;--radius-md:20px;--radius-lg:28px;--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;background-image:radial-gradient(circle at 100% 0,#0284c708 0%,#0000 40%),radial-gradient(circle at 0 100%,#7c3aed08 0%,#0000 40%);font-family:Be Vietnam Pro,-apple-system,sans-serif;line-height:1.5}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all .3s}.glass-card:hover{box-shadow:var(--shadow-md), 0 0 20px #00000005;border-color:#0000001a;transform:translateY(-2px)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-stagger-1{animation:.6s cubic-bezier(.16,1,.3,1) .1s both fadeInUp}.animate-stagger-2{animation:.6s cubic-bezier(.16,1,.3,1) .2s both fadeInUp}.animate-stagger-3{animation:.6s cubic-bezier(.16,1,.3,1) .3s both fadeInUp}.animate-stagger-4{animation:.6s cubic-bezier(.16,1,.3,1) .4s both fadeInUp}.animate-stagger-5{animation:.6s cubic-bezier(.16,1,.3,1) .5s both fadeInUp}.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 24px;font-size:13px;font-weight:700;transition:all .3s}.tab-btn.active{background:linear-gradient(135deg, var(--accent-coral), #e11d48);color:#fff;text-shadow:0 1px 2px #0000001a;box-shadow:0 4px 12px #e8634a4d}.tab-btn:hover:not(.active){color:var(--text-primary);background:#0000000d}.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:24px;margin-bottom:32px;display:grid}.summary-card{background:var(--bg-card);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);box-shadow:var(--shadow-sm);padding:24px 28px;transition:all .3s;position:relative;overflow:hidden}.summary-card:hover{box-shadow:var(--shadow-md);border-color:#0000001a;transform:translateY(-4px)}.summary-card:before{content:"";height:4px;position:absolute;top:0;left:0;right:0}.summary-card:first-child:before{background:linear-gradient(90deg, var(--accent-coral), #f43f5e)}.summary-card:nth-child(2):before{background:linear-gradient(90deg, var(--accent-blue), #0ea5e9)}.summary-card:nth-child(3):before{background:linear-gradient(90deg, var(--accent-green), #10b981)}.summary-card:nth-child(4):before{background:linear-gradient(90deg, var(--accent-purple), #a855f7)}.summary-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:8px;font-size:11px;font-weight:700}.summary-value{letter-spacing:-1px;font-size:42px;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:12px;font-size:12px;display:flex}.summary-dot{border-radius:50%;width:6px;height:6px;display:inline-block;box-shadow:0 0 8px}.chart-row{grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:24px;display:grid}.chart-card{background:var(--bg-card);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);box-shadow:var(--shadow-md);flex-direction:column;padding:24px;display:flex}.col-span-1,.col-span-2{grid-column:span 12}@media (width>=1024px){.col-span-1{grid-column:span 4}.col-span-2{grid-column:span 8}}.chart-title{color:var(--text-primary);letter-spacing:-.5px;align-items:center;gap:10px;margin-bottom:4px;font-size:18px;font-weight:800;display:flex}.chart-subtitle{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:12px;font-weight:600}.chart-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.chart-badge{border-radius:var(--radius-full);color:var(--text-primary);text-transform:uppercase;letter-spacing:1px;border:1px solid var(--border);background:#ffffff0d;padding:4px 12px;font-size:10px;font-weight:700}.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)}.member-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;display:grid}.member-card{flex-direction:column;gap:16px;padding:24px;display:flex}.member-header{border-bottom:1px solid var(--border);align-items:center;gap:16px;padding-bottom:16px;display:flex}.member-avatar{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));color:#fff;justify-content:center;align-items:center;width:56px;height:56px;font-size:20px;font-weight:800;display:flex;box-shadow:0 4px 10px #0284c74d}.member-name{color:var(--text-primary);margin-bottom:4px;font-size:16px;font-weight:800}.member-role{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:12px;font-weight:600}.member-kpi-main{align-items:baseline;gap:8px;margin-bottom:8px;display:flex}.member-kpi-value{letter-spacing:-1px;font-size:36px;font-weight:800;line-height:1}.member-kpi-label{color:var(--text-muted);text-transform:uppercase;font-size:12px;font-weight:700}.member-stats{background:var(--bg-hover);border-radius:var(--radius-sm);grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;display:grid}.member-stat-item{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.member-stat-val{color:var(--text-primary);font-size:15px;font-weight:800}.member-stat-lbl{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:700}@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}}