@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg0:#060d18;
  --bg1:#0d1a2d;
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.13);
  --green:#22d37a;
  --green2:#4ade80;
  --red:#f05a7a;
  --red2:#f87171;
  --blue:#3b82f6;
  --blue2:#60a5fa;
  --gold:#f59e0b;
  --gold2:#fbbf24;
  --teal:#06b6d4;
  --purple:#a78bfa;
  --text1:#e8f1ff;
  --text2:#94a3b8;
  --text3:#4a6080;
}

html,body{height:100%;background:var(--bg0);font-family:'Outfit',sans-serif;color:var(--text1);-webkit-font-smoothing:antialiased}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:99px}

@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes barGrow{from{width:0!important}to{}}
@keyframes toastIn{
  from{opacity:0;transform:translateX(-50%) translateY(20px) scale(.9)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes floatDot{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes shimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}

.fade-up{animation:fadeSlideUp .35s ease both}
.fade-up-1{animation:fadeSlideUp .35s .05s ease both}
.fade-up-2{animation:fadeSlideUp .35s .1s ease both}
.bar-animate{animation:barGrow .7s cubic-bezier(.4,0,.2,1) both}
.dot1{animation:floatDot 1.4s 0s ease-in-out infinite}
.dot2{animation:floatDot 1.4s .2s ease-in-out infinite}
.dot3{animation:floatDot 1.4s .4s ease-in-out infinite}
.modal-box{animation:fadeSlideUp .25s ease both}

.row-card{transition:background .15s,border .15s,transform .15s}
.tab-btn{transition:background .2s,color .2s,box-shadow .2s,transform .15s}
.year-item{transition:background .15s,border-color .15s}
.summary-card{transition:transform .15s,box-shadow .15s;cursor:default}
.tap-cell{transition:color .15s,background .15s;border-radius:6px;padding:2px 4px}
.action-btn{transition:background .18s,transform .15s,box-shadow .18s}

.noise-overlay{
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:1000;opacity:.4;
}

@media(min-width:768px){
  .app-shell{max-width:560px!important}
  .summary-grid{gap:12px!important}
}