/* ================================================================
   STUDI V3 — KINETIC PREMIUM SYSTEM
   High-contrast motion language, calm surfaces, lime accent.
   ================================================================ */
:root{
  --bg:#f1f2ec;
  --side:#f7f7f1;
  --surface:#fbfcf7;
  --surface-2:#e9eee4;
  --surface-3:#ebe9e2;
  --line:rgba(21,42,33,.11);
  --text:#18261f;
  --muted:#6d7f75;
  --sage:#b9ec6b;
  --sage-deep:#244936;
  --mint:#dff2aa;
  --apricot:#eeb98e;
  --lav:#b9ace3;
  --rose:#d8aaa7;
  --blue:#9bbec5;
  --shadow:0 20px 55px rgba(26,47,36,.075);
  --shadow-strong:0 34px 100px rgba(17,37,28,.14);
}

/* Fixed sidebar without weekly footer collisions. */
.sidebar{
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr) auto auto!important;
  gap:0!important;
  background:rgba(247,247,241,.93)!important;
  border-right:1px solid rgba(24,44,34,.09)!important;
  box-shadow:10px 0 34px rgba(23,43,33,.025);
}
.sidebar .nav{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:start;
  padding-right:3px;
  scrollbar-width:thin;
  scrollbar-color:#cbd6c4 transparent;
}
.side-card{
  margin-top:12px!important;
  padding:14px 15px!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,#eef3df,#e5edd7)!important;
  border:1px solid rgba(63,93,64,.11)!important;
  box-shadow:none!important;
}
.weekly-side-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.weekly-side-top b{font-size:10.5px!important}
.weekly-side-top span{font:800 10px Manrope,sans-serif;color:#41644d}
.side-card p{font-size:9px!important;line-height:1.45!important;margin:6px 0 9px!important}
.side-card small{display:block;font-size:8px;color:#799080;margin-top:7px}
.side-progress{height:4px!important;background:rgba(70,105,75,.12)!important}
.side-progress i{background:#79a95a!important}
.profile-mini{padding-top:13px!important;margin-top:0!important}

@media(max-height:830px) and (min-width:761px){
  .side-card p,.side-card small{display:none!important}
  .side-card{padding:10px 12px!important}
  .profile-mini{padding-top:9px!important}
}

/* Navigation */
.brand-symbol{background:#a8dc62!important;box-shadow:0 10px 28px rgba(113,159,72,.18)!important}
.nav a{border:1px solid transparent}
.nav a:hover{background:#edf1e7!important;color:#1f3d2e!important;transform:translateX(3px)!important}
.nav a.active{
  background:#1a3026!important;
  color:#eff8e8!important;
  border-color:#1a3026!important;
  box-shadow:0 10px 24px rgba(17,40,29,.12);
}
.nav a.active .ico{color:#b9ec6b}

/* Global cards are quieter; accent comes from hierarchy rather than saturation. */
.card{
  background:rgba(251,252,247,.93)!important;
  border-color:rgba(27,51,39,.09)!important;
  box-shadow:0 10px 30px rgba(25,47,35,.045)!important;
}
.card.hover:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(97,135,80,.20)!important;
  box-shadow:0 24px 60px rgba(22,46,33,.085)!important;
}

/* Hero: dark, graphic, kinetic; lime only as a controlled accent. */
#p-index .hero{
  min-height:clamp(505px,64vh,675px)!important;
  border-radius:38px!important;
  background:
    radial-gradient(circle at 79% 20%,rgba(185,236,107,.18),transparent 24%),
    radial-gradient(circle at 68% 77%,rgba(113,90,192,.12),transparent 27%),
    linear-gradient(125deg,#13251d 0%,#1d382b 52%,#294536 100%)!important;
  border:1px solid rgba(215,239,202,.09)!important;
  box-shadow:0 36px 105px rgba(15,34,24,.22)!important;
}
#p-index .hero:before{
  content:'STUDI'!important;
  color:transparent!important;
  -webkit-text-stroke:1px rgba(220,244,202,.09);
  font-size:clamp(120px,16vw,270px)!important;
  right:-.02em!important;
  bottom:-.12em!important;
  transform:translate3d(calc(var(--hero-x) * -.12),calc(var(--hero-y) * -.12),0)!important;
}
#p-index .hero:after{
  opacity:.17!important;
  mix-blend-mode:soft-light!important;
}
#p-index .hero .eyebrow{color:#b9ec6b!important}
#p-index .hero h1{color:#f2f6ed!important}
#p-index .hero h1 em{color:#b9ec6b!important}
#p-index .hero .lead{color:#bdcbbf!important}
#p-index .hero .btn.primary{
  background:#b9ec6b!important;
  color:#16271e!important;
  box-shadow:0 14px 32px rgba(185,236,107,.14)!important;
}
#p-index .hero .btn.secondary{
  color:#eff5ed!important;
  background:rgba(244,250,240,.08)!important;
  border-color:rgba(240,249,235,.16)!important;
  backdrop-filter:blur(14px);
}
#p-index .hero-orb{
  background:
    radial-gradient(circle at 38% 34%,#eab88c 0 13%,#b9ec6b 14% 46%,#335e49 47% 100%)!important;
  filter:saturate(.86)!important;
  opacity:.84!important;
}
#p-index .hero-ring{border-color:rgba(208,239,191,.09)!important}
#p-index .hero-pill{
  background:rgba(185,236,107,.12)!important;
  border-color:rgba(185,236,107,.18)!important;
}

/* Staggered hero entrance — clip/reveal rather than bouncing. */
#p-index:not([hidden]) .hero-copy .eyebrow{
  animation:v3RevealUp .55s cubic-bezier(.16,1,.3,1) .05s both;
}
#p-index:not([hidden]) .hero-copy h1{
  animation:v3Headline .82s cubic-bezier(.16,1,.3,1) .10s both;
}
#p-index:not([hidden]) .hero-copy .lead{
  animation:v3RevealUp .70s cubic-bezier(.16,1,.3,1) .20s both;
}
#p-index:not([hidden]) .hero-copy .head-actions{
  animation:v3RevealUp .70s cubic-bezier(.16,1,.3,1) .28s both;
}
@keyframes v3RevealUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes v3Headline{
  from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(22px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}

/* Hero information cards: less floating-dashboard, more glass telemetry. */
.hero-float-card{
  background:rgba(15,34,25,.46)!important;
  border-color:rgba(222,245,207,.10)!important;
  color:#edf5e9!important;
  box-shadow:0 18px 48px rgba(8,22,14,.16)!important;
}
.hero-float-card span{color:#b9ec6b!important}
.hero-float-card small{color:#adbcaf!important}
.hero-float-two{animation-delay:-6s!important}

/* A thin kinetic accent sweeps slowly across the hero, never flashing. */
#p-index .hero .studi-scroll-cue{color:#aebdae!important}
#p-index .hero .studi-scroll-cue i{background:rgba(185,236,107,.35)!important}
#p-index .hero .studi-scroll-cue i:after{background:#b9ec6b!important}

/* Remove the old static ticker-box feeling; turn it into a clean editorial divider. */
.studi-marquee{
  background:transparent!important;
  border:0!important;
  border-top:1px solid rgba(25,48,35,.09)!important;
  border-bottom:1px solid rgba(25,48,35,.09)!important;
  border-radius:0!important;
  margin:22px 0 6px!important;
}
.studi-marquee-track{
  color:#65766c!important;
  padding:10px 0!important;
  letter-spacing:2.3px!important;
}
.studi-marquee-track i{color:#79a95a!important}

/* Route/page progress line */
#studiPageProgress{
  position:fixed;
  left:236px;
  right:0;
  top:0;
  z-index:75;
  height:2px;
  pointer-events:none;
  background:rgba(29,57,43,.04);
}
#studiPageProgress i{
  display:block;width:100%;height:100%;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,#b9ec6b,#7ba45c);
  transition:transform .08s linear;
}

/* Route transition wipe */
#studiRouteWipe{
  position:fixed;
  left:236px;right:0;top:0;bottom:0;
  z-index:74;pointer-events:none;
  transform:translateX(-105%);
  background:linear-gradient(100deg,rgba(185,236,107,0) 0%,rgba(185,236,107,.16) 44%,rgba(24,47,36,.06) 60%,transparent 100%);
}
#studiRouteWipe.run{animation:v3RouteWipe .52s cubic-bezier(.65,0,.2,1)}
@keyframes v3RouteWipe{
  0%{transform:translateX(-105%)}
  100%{transform:translateX(105%)}
}

/* Spotify dock becomes a real compact player, not a fake decorative footer. */
.music-dock{
  background:rgba(20,36,29,.93)!important;
  border-color:rgba(220,241,209,.10)!important;
  box-shadow:0 22px 64px rgba(15,31,22,.19)!important;
  color:#ecf4e9!important;
}
.music-dock .dock-meta b{color:#f2f6ee!important}
.music-dock .dock-meta small{color:#aebcaf!important}
.music-dock .spotify-badge{color:#b9ec6b!important}
.music-dock .dock-cover{
  background:linear-gradient(145deg,#365c48,#b9ec6b)!important;
  background-size:cover!important;background-position:center!important;
}
.music-dock.has-cover .dock-cover:before,
.music-dock.has-cover .dock-cover:after{display:none!important}
.music-dock .dock-controls button{color:#dce8da!important}
.music-dock .dock-play{background:#b9ec6b!important;color:#16271e!important}
.music-dock .dock-progress{background:rgba(240,248,237,.12)!important}
.music-dock .dock-progress i{background:#b9ec6b!important}
.music-dock .dock-volume{color:#99aa9e!important}
.music-dock .dock-open{color:#b9ec6b!important}
.music-dock .dock-window-controls button{
  background:rgba(239,247,235,.08)!important;color:#cbd9cc!important;
}
.music-dock.spotify-playing .dock-wave i{animation-play-state:running!important}
.music-dock:not(.spotify-playing) .dock-wave i{animation-play-state:paused!important;transform:scaleY(.35)!important}

/* Login page is intentionally preserved and upgraded. */
.gate{
  background:
    radial-gradient(circle at 82% 15%,rgba(185,236,107,.14),transparent 27%),
    radial-gradient(circle at 10% 90%,rgba(126,101,208,.12),transparent 30%),
    #101a15!important;
}
.gate-top .brand{color:#eef5eb!important}
.gate .gate-hero{
  background:
    radial-gradient(circle at 80% 18%,rgba(185,236,107,.18),transparent 24%),
    linear-gradient(128deg,#15271f,#213b2e)!important;
  border-color:rgba(220,241,209,.09)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.21)!important;
}
.gate .gate-hero .eyebrow{color:#b9ec6b!important}
.gate .gate-hero h1{color:#f0f5ed!important}
.gate .gate-hero h1 em{color:#b9ec6b!important}
.gate .gate-hero .lead{color:#b8c7bb!important}
.gate-card{
  background:rgba(251,252,247,.97)!important;
  border-color:rgba(230,240,225,.10)!important;
  box-shadow:0 28px 86px rgba(0,0,0,.19)!important;
}
.gate-grid{animation:v3GateIn .72s cubic-bezier(.16,1,.3,1) both!important}
@keyframes v3GateIn{
  from{opacity:0;transform:translateY(16px) scale(.988)}
  to{opacity:1;transform:none}
}
.gate-google{background:#1b3227!important;color:#f4f7f2!important}
.gate-google .g-dot{background:#b9ec6b!important;color:#16271e!important}

/* Keep motion premium rather than exhausting. */
.studi-reveal{
  transform:translateY(12px)!important;
  filter:blur(1.5px)!important;
  transition-duration:.58s!important;
}
.studi-reveal.studi-in{filter:none!important}
@media(max-width:1120px) and (min-width:761px){
  #studiPageProgress,#studiRouteWipe{left:76px}
}
@media(max-width:760px){
  #studiPageProgress,#studiRouteWipe{left:0}
  #p-index .hero{border-radius:28px!important}
  .hero-float-card{display:none!important}
}

/* Respect motion accessibility. */
@media(prefers-reduced-motion:reduce){
  #studiRouteWipe{display:none!important}
  #p-index:not([hidden]) .hero-copy>*{animation:none!important}
}