@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap";
:root{--bg-primary:#f7fbff;--bg-secondary:#fff;--bg-card:#fffffff0;--bg-card-hover:#fffffffa;--bg-glass:#ffffffd1;--bg-glass-hover:#fffffff5;--border-subtle:#0c57801a;--border-medium:#0c578033;--border-accent:#008bc752;--text-primary:#102033;--text-secondary:#4d6378;--text-muted:#6e8296;--text-accent:#008bc7;--portal-blue:#008bc7;--portal-blue-dark:#00699b;--portal-blue-light:#18a7df;--portal-blue-soft:#e8f7ff;--portal-blue-glow:#008bc724;--portal-gold:#f2cf00;--portal-gold-dark:#d6a900;--portal-gold-light:#ffe45c;--portal-gold-soft:#fff8cf;--portal-gold-glow:#f2cf0038;--success:#10b981;--success-glow:#10b98126;--warning:#f59e0b;--danger:#ef4444;--danger-glow:#ef444426;--rank-1:#fbbf24;--rank-2:#94a3b8;--rank-3:#cd7f32;--rank-up:#10b981;--rank-down:#ef4444;--chart-1:#3b82f6;--chart-2:#10b981;--chart-3:#f59e0b;--chart-4:#8b5cf6;--chart-5:#ef4444;--chart-6:#06b6d4;--chart-7:#ec4899;--chart-8:#f97316;--chart-9:#14b8a6;--chart-10:#a78bfa;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--font-display:"Outfit","Inter",sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--shadow-sm:0 1px 3px #10203314;--shadow-md:0 12px 28px #1020331a;--shadow-lg:0 24px 70px #10203324;--shadow-glow-blue:0 18px 44px #008bc729;--shadow-glow-gold:0 18px 44px #f2cf0038;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--transition-spring:.5s cubic-bezier(.34,1.56,.64,1)}*,: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-sans);background:linear-gradient(180deg,#fff 0%,var(--bg-primary)44%,#fff 100%);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 12% -10%,#008bc721 0%,#0000 44%),radial-gradient(at 88% 8%,#f2cf002e 0%,#0000 36%),linear-gradient(90deg,#008bc709 1px,#0000 1px) 0 0/44px 44px,linear-gradient(#008bc709 1px,#0000 1px) 0 0/44px 44px;position:fixed;inset:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.page-container{z-index:1;max-width:1400px;padding:var(--space-lg);margin:0 auto;padding-top:96px;position:relative}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.glass-card:hover{background:var(--bg-card-hover);border-color:var(--border-medium);box-shadow:var(--shadow-md)}.glass-card--accent{border-color:var(--border-accent);box-shadow:var(--shadow-glow-blue)}.glass-card--gold{box-shadow:var(--shadow-glow-gold);border-color:#f59e0b33}.navbar{z-index:100;height:76px;padding:0 var(--space-xl);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);background:#ffffffe6;justify-content:space-between;align-items:center;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 10px 30px #10203314}.navbar__brand{align-items:center;gap:var(--space-sm);min-width:220px;display:flex}.navbar__logo{object-fit:contain;border-radius:10px;width:auto;height:46px}.navbar__logo-card{background:#fff;border:1px solid #008bc71f;border-radius:16px;justify-content:center;align-items:center;width:136px;height:52px;padding:4px 10px;display:flex;box-shadow:0 8px 22px #008bc71a}.navbar__title{font-family:var(--font-display);font-size:var(--text-sm);color:var(--text-primary);text-transform:uppercase;letter-spacing:.04em;font-weight:700;line-height:1.1}.navbar__title span{color:var(--portal-blue);display:block}.navbar__nav{gap:var(--space-xs);display:flex}.navbar__link{align-items:center;gap:var(--space-sm);padding:var(--space-sm)var(--space-md);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary);transition:all var(--transition-fast);cursor:pointer;border:1px solid #0000;font-weight:500;display:flex}.navbar__link-label-mobile{display:none}.navbar__link:hover{color:var(--text-primary);background:var(--portal-blue-soft)}.navbar__link--active{color:var(--portal-blue-dark);background:linear-gradient(135deg,var(--portal-blue-soft),#fff);border-color:var(--border-accent);box-shadow:inset 0 -2px 0 var(--portal-gold)}.navbar__user{align-items:center;gap:10px;display:flex}.navbar__user-pill{border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);background:#fff;border-radius:40px;align-items:center;gap:8px;padding:4px 12px 4px 4px;display:flex}.navbar__user-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.7rem;font-weight:700;display:flex}.navbar__user-name{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:.78rem;font-weight:700;overflow:hidden}.navbar__logout{color:#dc2626;cursor:pointer;transition:all var(--transition-fast);background:#fff5f5;border:1px solid #ef44442e;border-radius:10px;padding:7px 11px;font-size:.75rem;font-weight:700}.navbar__logout:hover{background:#fee2e2}.page-header{margin-bottom:var(--space-2xl)}.page-header__title{align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-size:var(--text-4xl);margin-bottom:var(--space-sm);color:var(--portal-blue-dark);font-weight:800;display:flex}.page-header__title-icon{justify-content:center;align-items:center;font-size:.9em;line-height:1;display:inline-flex}.page-header__subtitle{font-size:var(--text-lg);color:var(--text-muted)}.kpi-grid{gap:var(--space-md);margin-bottom:var(--space-2xl);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.kpi-grid--4{grid-template-columns:repeat(4,1fr)}.kpi-grid--3{grid-template-columns:repeat(3,1fr)}.kpi-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center;align-items:center;gap:var(--space-sm);transition:all var(--transition-base);box-shadow:var(--shadow-sm);flex-direction:column;display:flex;position:relative;overflow:hidden}.kpi-card:before{content:"";background:linear-gradient(90deg,var(--portal-blue),var(--portal-gold));height:4px;position:absolute;inset:0 0 auto}.kpi-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-md);transform:translateY(-2px)}.kpi-card__label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.kpi-card__value{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--text-primary);font-weight:800}.kpi-card__value--blue{color:var(--portal-blue-light)}.kpi-card__value--gold{color:var(--portal-gold-light)}.kpi-card__value--success{color:var(--success)}.kpi-card__value--danger{color:var(--danger)}.ranking-list{gap:var(--space-sm);flex-direction:column;display:flex}.ranking-item{align-items:center;gap:var(--space-md);padding:var(--space-md)var(--space-lg);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-base);display:flex}.ranking-item:hover{background:var(--bg-card-hover);border-color:var(--border-medium);transform:translate(4px)}.ranking-item--top1{background:linear-gradient(135deg,#fffdf0,#fff);border-color:#fbbf244d;box-shadow:0 16px 34px #f2cf0024}.ranking-item--top2{background:linear-gradient(135deg,#f6f9fc,#fff);border-color:#94a3b84d;box-shadow:0 14px 30px #4d63781a}.ranking-item--top3{background:linear-gradient(135deg,#fff7ed,#fff);border-color:#cd7f324d;box-shadow:0 14px 30px #cd7f321a}.ranking-item__position{font-family:var(--font-display);font-size:var(--text-2xl);text-align:center;min-width:48px;font-weight:800}.ranking-item__avatar{border-radius:var(--radius-full);background:linear-gradient(135deg,var(--portal-blue),var(--portal-blue-light));width:48px;height:48px;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:#fff;flex-shrink:0;justify-content:center;align-items:center;display:flex}.ranking-item__info{flex:1;min-width:0}.ranking-item__name{font-weight:600;font-size:var(--text-base);color:var(--text-primary)}.ranking-item__detail{font-size:var(--text-sm);color:var(--text-muted)}.ranking-item__score{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--portal-gold-light);text-align:right;min-width:80px;font-weight:800}.ranking-item__variation{align-items:center;gap:var(--space-xs);font-size:var(--text-sm);justify-content:flex-end;min-width:60px;font-weight:600;display:flex}.ranking-item__variation--up{color:var(--rank-up)}.ranking-item__variation--down{color:var(--rank-down)}.ranking-item__variation--same{color:var(--text-muted)}.progress-bar{border-radius:var(--radius-full);background:#e7f0f7;width:100%;height:6px;overflow:hidden}.progress-bar__fill{border-radius:var(--radius-full);background:linear-gradient(90deg,var(--portal-blue),var(--portal-blue-light));height:100%;transition:width var(--transition-slow)}.progress-bar__fill--gold{background:linear-gradient(90deg,var(--portal-gold),var(--portal-gold-light))}.chart-container{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.chart-container__title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-primary);margin-bottom:var(--space-md);align-items:center;gap:var(--space-sm);font-weight:600;display:flex}.mata-mata-grid{gap:var(--space-md);grid-template-columns:repeat(2,1fr);display:grid}.gauge-wrapper{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.gauge-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;text-align:center;font-weight:600}.gauge-value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800}.badge{align-items:center;gap:var(--space-xs);border-radius:var(--radius-full);font-size:var(--text-xs);padding:2px 10px;font-weight:600;display:inline-flex}.badge--blue{background:var(--portal-blue-glow);color:var(--portal-blue-light);border:1px solid #3b82f633}.badge--gold{background:var(--portal-gold-glow);color:var(--portal-gold-light);border:1px solid #f59e0b33}.badge--success{background:var(--success-glow);color:var(--success);border:1px solid #10b98133}.badge--danger{background:var(--danger-glow);color:var(--danger);border:1px solid #ef444433}.tabs{gap:var(--space-xs);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-xs);margin-bottom:var(--space-xl);background:#ffffffb8;display:flex}.tab{padding:var(--space-sm)var(--space-md);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-secondary);text-align:center;cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex:1;font-weight:500}.tab:hover{color:var(--text-primary)}.tab--active{background:linear-gradient(135deg,var(--portal-blue),var(--portal-blue-light));color:#fff;font-weight:600;box-shadow:0 8px 22px #008bc738}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}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 scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes countUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #fbbf241a}50%{box-shadow:0 0 40px #fbbf2440}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in{animation:fadeIn var(--transition-slow)ease forwards}.animate-slide-left{animation:slideInLeft var(--transition-slow)ease forwards}.animate-slide-right{animation:slideInRight var(--transition-slow)ease forwards}.animate-scale{animation:scaleIn var(--transition-slow)ease forwards}.animate-pulse-glow{animation:3s ease-in-out infinite pulse-glow}.stagger-children>*{animation:fadeIn var(--transition-slow)ease both}.stagger-children>:first-child{animation-delay:0s}.stagger-children>:nth-child(2){animation-delay:50ms}.stagger-children>:nth-child(3){animation-delay:.1s}.stagger-children>:nth-child(4){animation-delay:.15s}.stagger-children>:nth-child(5){animation-delay:.2s}.stagger-children>:nth-child(6){animation-delay:.25s}.stagger-children>:nth-child(7){animation-delay:.3s}.stagger-children>:nth-child(8){animation-delay:.35s}.stagger-children>:nth-child(9){animation-delay:.4s}.stagger-children>:nth-child(10){animation-delay:.45s}@media (max-width:1024px){.mata-mata-grid{grid-template-columns:1fr}.kpi-grid--4{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.page-container{padding:var(--space-md);padding-top:150px}.navbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand user""nav nav";align-items:center;gap:10px 12px;height:auto;min-height:126px;padding:10px 12px 12px;display:grid}.navbar__nav{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;grid-area:nav;gap:8px;width:100%;padding:2px 2px 8px;display:flex;overflow:auto hidden}.navbar__nav::-webkit-scrollbar{display:none}.navbar__brand{grid-area:brand;gap:8px;min-width:auto}.navbar__logo-card{border-radius:18px;width:126px;height:54px}.navbar__logo{height:46px}.navbar__title{display:none}.navbar__user{grid-area:user;justify-content:flex-end;gap:6px}.navbar__user-pill{border-radius:999px;padding:4px}.navbar__user-name{display:none}.navbar__logout{border-radius:999px;padding:8px 10px;font-size:.72rem}.navbar__link{scroll-snap-align:start;white-space:nowrap;background:#ffffffb8;border-color:#0c578014;border-radius:16px;flex:none;justify-content:center;gap:7px;min-width:104px;min-height:48px;padding:9px 12px;font-size:.82rem;font-weight:800;box-shadow:0 6px 18px #1020330d}.navbar__link-icon{font-size:1rem;line-height:1}.navbar__link-label{display:none}.navbar__link-label-mobile{display:inline}.navbar__link--active{box-shadow:inset 0 -3px 0 var(--portal-gold),0 8px 22px #008bc71f;background:#fff}.page-header__title{font-size:var(--text-2xl)}.kpi-grid,.kpi-grid--4,.kpi-grid--3{grid-template-columns:repeat(2,1fr)}.ranking-item{padding:var(--space-sm)var(--space-md)}.ranking-item__score{font-size:var(--text-lg)}}@media (max-width:480px){.page-container{padding-top:142px}.navbar{gap:8px;min-height:118px;padding:9px 10px 10px}.navbar__logo-card{width:116px;height:48px;padding:4px 8px}.navbar__logo{height:40px}.navbar__user-avatar{width:28px;height:28px}.navbar__logout{padding:7px 9px}.navbar__nav{gap:7px;padding-bottom:7px}.navbar__link{border-radius:14px;min-width:calc(33.3333vw - 11.3333px);max-width:116px;min-height:44px;padding:8px 10px;font-size:.76rem}.kpi-grid,.kpi-grid--4,.kpi-grid--3{grid-template-columns:1fr}}