/* My Stats v4: Personal View + Level hero, and the three live cards.
   Loaded after mystats-palette3.css. Scoped to .ms2. */

/* ---------- hero row: Personal View (left) + Account Level (right), same size ---------- */
.ms2 .ms-hero{display:grid;grid-template-columns:1fr;gap:.75rem;margin-bottom:1rem}
@media(min-width:640px){.ms2 .ms-hero{grid-template-columns:1fr 1fr;gap:1rem}}
.ms2 .ms-hero-card{border-radius:1.5rem;padding:1.25rem 1.5rem;min-height:9.5rem;display:flex;flex-direction:column;justify-content:center}
.ms2 .ms-hero-level .ms-lvl-row{display:flex;align-items:center;gap:1.25rem}
.ms2 .ms-lvl-badge{
  flex:none;width:5rem;height:5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%,rgba(102,123,198,.45),rgba(0,0,0,.35) 75%);
  border:3px solid var(--ms-glaucous);box-shadow:0 0 22px -4px rgba(102,123,198,.6);
}
.ms2 .ms-lvl-badge span{font-size:2.5rem;font-weight:700;line-height:1;color:var(--ms-ink)}
.ms2 .ms-controls{display:flex;flex-direction:column;align-items:flex-end;gap:.375rem}
@media(max-width:639px){.ms2 .ms-controls{align-items:stretch}}

/* ---------- 3 stat cards ---------- */
.ms2 .ms-stats3 > .ms-card{min-height:9.5rem}
.ms2 .ms-cap{font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:rgb(var(--color-mist));margin-bottom:.75rem}
@media(min-width:640px){.ms2 .ms-cap{font-size:.75rem}}

/* up / down arrow vs yesterday */
.ms2 .ms-delta{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:.375rem;margin-top:.625rem;font-size:.8125rem}
.ms2 .ms-delta-arrow{font-size:.8rem;line-height:1}
.ms2 .ms-delta-n{font-weight:700}
.ms2 .ms-delta-sub{color:rgb(var(--color-mist));font-size:.75rem}
.ms2 .ms-delta-up .ms-delta-arrow,.ms2 .ms-delta-up .ms-delta-n{color:var(--ms-turq)}
.ms2 .ms-delta-down .ms-delta-arrow,.ms2 .ms-delta-down .ms-delta-n{color:#FF6B8A}
.ms2 .ms-delta-flat .ms-delta-arrow,.ms2 .ms-delta-flat .ms-delta-n{color:var(--ms-glaucous)}

/* currently playing */
.ms2 .ms-now-body{display:flex;align-items:center;gap:.875rem}
.ms2 .ms-now-art{flex:none;width:4.25rem;height:4.25rem;border-radius:.625rem;overflow:hidden;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.7)}
.ms2 .ms-now-title{font-weight:700;font-size:1rem;color:var(--ms-ink)}
.ms2 .ms-now-artist{font-size:.8125rem;color:rgb(var(--color-mist));margin-top:.125rem}
.ms2 .ms-now-meta{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.ms2 .ms-now-time{font-size:.75rem;color:rgb(var(--color-mist))}
.ms2 .ms-eq{display:inline-flex;align-items:flex-end;gap:2px;height:.9rem}
.ms2 .ms-eq i{display:block;width:3px;height:30%;border-radius:2px;background:rgb(var(--color-mist));opacity:.6}
.ms2 .ms-eq.is-on i{background:var(--ms-turq);opacity:1}
@media(prefers-reduced-motion:no-preference){
  @keyframes ms-eq{0%,100%{height:25%}50%{height:100%}}
  .ms2 .ms-eq.is-on i{animation:ms-eq 900ms ease-in-out infinite}
  .ms2 .ms-eq.is-on i:nth-child(2){animation-delay:-.3s}
  .ms2 .ms-eq.is-on i:nth-child(3){animation-delay:-.6s}
  .ms2 .ms-eq.is-on i:nth-child(4){animation-delay:-.15s}
  .ms2 .ms-ring-fill{transition:stroke-dashoffset .8s ease}
}

/* circle bar: streams left to the next level + percent */
.ms2 .ms-ring-body{display:flex;align-items:center;gap:1rem}
.ms2 .ms-ring-wrap{position:relative;flex:none;width:5.5rem;height:5.5rem}
.ms2 .ms-ring-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ms2 .ms-ring-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:9}
.ms2 .ms-ring-fill{fill:none;stroke:var(--ms-turq);stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(102,208,188,.55))}
.ms2 .ms-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:var(--ms-ink)}
.ms2 .ms-ring-pct small{font-size:.7rem;margin-left:1px;color:rgb(var(--color-mist))}
.ms2 .ms-ring-left{font-size:1.75rem;line-height:1.1;font-weight:700;color:var(--ms-ink)}
.ms2 .ms-ring-sub{font-size:.75rem;color:rgb(var(--color-mist));margin-top:.25rem}

/* day (light) theme */
html.light .ms2 .ms-now-art{background:rgba(30,27,34,.08)}
html.light .ms2 .ms-ring-track{stroke:rgba(30,27,34,.1)}
html.light .ms2 .ms-lvl-badge{background:radial-gradient(circle at 30% 25%,rgba(102,123,198,.3),rgba(255,255,255,.7) 75%)}

/* the compiled Tailwind build has no md:grid-cols-3, so set the columns here */
.ms2 .ms-stats3{display:grid;grid-template-columns:1fr}
@media(min-width:768px){.ms2 .ms-stats3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v4.1: no cards around the header. Personal View left, Level right, same type size. */
.ms2 .ms-hero{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1rem}
.ms2 .ms-hero-left{flex:1;min-width:0}
.ms2 .ms-hero-level{text-align:right;flex:none}
.ms2 .ms-hero-card{all:unset}

/* v4.2: the three live cards, glass look (dark purple, soft glow, sparkle badge, inset panel).
   Same dark look in day and night theme. */
.ms2 .ms-stats3 > .ms-card{
  border-radius:1.75rem;padding:1.25rem!important;min-height:12rem;
  color:#F4F1FA;
  background-color:#120B1F!important;
  background-image:
    radial-gradient(120% 70% at 0% 0%,rgba(139,70,255,.38),rgba(139,70,255,0) 60%),
    radial-gradient(90% 60% at 100% 100%,rgba(255,122,40,.22),rgba(255,122,40,0) 62%),
    linear-gradient(160deg,#1A0F2E 0%,#0B0714 100%)!important;
  border:1px solid rgba(190,150,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px -18px rgba(120,60,255,.55)!important;
}
.ms2 .ms-stats3 > .ms-card:hover{border-color:rgba(214,180,255,.55)!important}
.ms2 .ms-stats3 > .ms-card::after{display:none}
.ms2 .ms-stats3 .text-fg,.ms2 .ms-stats3 .ms-statnum,.ms2 .ms-stats3 .ms-now-title,.ms2 .ms-stats3 .ms-ring-left,.ms2 .ms-stats3 .ms-ring-pct{color:#fff}
.ms2 .ms-stats3 .ms-key .ms-statnum,.ms2 .ms-stats3 .ms-statnum{color:#fff}
.ms2 .ms-stats3 .ms-cap,.ms2 .ms-stats3 .ms-delta-sub,.ms2 .ms-stats3 .ms-now-artist,.ms2 .ms-stats3 .ms-now-time,.ms2 .ms-stats3 .ms-ring-sub,.ms2 .ms-stats3 .ms-ring-pct small{color:rgba(232,222,255,.68)}

/* title row: round sparkle badge + title */
.ms2 .ms-stats3 .ms-cap{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;
  font-size:.875rem;letter-spacing:0;text-transform:none;font-weight:600;color:#fff;
}
.ms2 .ms-stats3 .ms-cap::before{
  content:"\2726";flex:none;width:2.25rem;height:2.25rem;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;
  background:radial-gradient(circle at 30% 25%,rgba(168,110,255,.65),rgba(60,24,110,.55) 70%);
  border:1px solid rgba(214,180,255,.4);box-shadow:0 0 14px rgba(139,70,255,.55);
}
.ms2 .ms-stats3 .ms-cap .ms-live-dot{order:2}

/* inset glass panel holding the content */
.ms2 .ms-stats3 .ms-statnum,
.ms2 .ms-stats3 .ms-now-body,
.ms2 .ms-stats3 .ms-ring-body{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(214,180,255,.16);border-radius:1.125rem;padding:.875rem 1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ms2 .ms-stats3 .ms-delta{
  margin-top:.625rem;padding:.4rem .75rem;border-radius:9999px;width:fit-content;
  background:rgba(0,0,0,.35);border:1px solid rgba(214,180,255,.16);
}
.ms2 .ms-stats3 .ms-delta-up .ms-delta-arrow,.ms2 .ms-stats3 .ms-delta-up .ms-delta-n{color:#7CF0D8}
.ms2 .ms-stats3 .ms-now-art{border:1px solid rgba(214,180,255,.25)}
.ms2 .ms-stats3 .ms-ring-track{stroke:rgba(255,255,255,.1)}
.ms2 .ms-stats3 .ms-ring-fill{stroke:url(#msRingGrad);filter:drop-shadow(0 0 6px rgba(168,110,255,.7))}
html.light .ms2 .ms-stats3 .ms-ring-track,.ms2 .ms-stats3 .ms-ring-track{stroke:rgba(255,255,255,.2)}
html.light .ms2 .ms-stats3 .ms-now-art{background:rgba(255,255,255,.08)}

/* v4.3: Level sits inside the Personal View block; controls back on the right.
   Palette: #006199 + #EE6983, no violet. */
.ms2 .ms-labelrow{display:flex;align-items:center;gap:1rem}
.ms2 .ms-lvl-chip{color:#006199;filter:brightness(1.5)}
html.light .ms2 .ms-lvl-chip{filter:none}

/* cards */
.ms2 .ms-stats3 > .ms-card{
  background-color:#08121D!important;
  background-image:
    radial-gradient(120% 75% at 0% 0%,rgba(0,97,153,.55),rgba(0,97,153,0) 62%),
    radial-gradient(90% 65% at 100% 100%,rgba(238,105,131,.38),rgba(238,105,131,0) 65%),
    linear-gradient(160deg,#0A1A2A 0%,#0B0A12 100%)!important;
  border:1px solid rgba(238,105,131,.3)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px -18px rgba(0,97,153,.6)!important;
}
.ms2 .ms-stats3 > .ms-card:hover{border-color:rgba(238,105,131,.6)!important}
.ms2 .ms-stats3 .ms-cap::before{display:none}
.ms2 .ms-stats3 .ms-cap{margin-bottom:.875rem}
.ms2 .ms-stats3 .ms-statnum,.ms2 .ms-stats3 .ms-now-body,.ms2 .ms-stats3 .ms-ring-body{border-color:rgba(255,255,255,.14)}
.ms2 .ms-stats3 .ms-cap,.ms2 .ms-stats3 .ms-delta-sub,.ms2 .ms-stats3 .ms-now-artist,.ms2 .ms-stats3 .ms-now-time,.ms2 .ms-stats3 .ms-ring-sub,.ms2 .ms-stats3 .ms-ring-pct small{color:rgba(255,255,255,.7)}
.ms2 .ms-stats3 .ms-cap{color:#fff}
.ms2 .ms-stats3 .ms-delta,.ms2 .ms-stats3 .ms-now-art{border-color:rgba(255,255,255,.16)}
.ms2 .ms-stats3 .ms-delta-up .ms-delta-arrow,.ms2 .ms-stats3 .ms-delta-up .ms-delta-n{color:#5FD3FF}
.ms2 .ms-stats3 .ms-delta-down .ms-delta-arrow,.ms2 .ms-stats3 .ms-delta-down .ms-delta-n{color:#EE6983}
.ms2 .ms-stats3 .ms-eq.is-on i{background:#EE6983}
.ms2 .ms-stats3 .ms-ring-fill{stroke:url(#msRingGrad);filter:drop-shadow(0 0 6px rgba(238,105,131,.6))}

/* buttons match the cards */
.ms2 .ms-btn,.ms2 .ms-seg,html.light .ms2 .ms-btn,html.light .ms2 .ms-seg{
  background:linear-gradient(160deg,#0A1A2A 0%,#0B0A12 100%);
  border:1px solid rgba(238,105,131,.35);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 24px -14px rgba(0,97,153,.7);
}
.ms2 .ms-btn:hover{border-color:#EE6983;color:#fff;background:linear-gradient(160deg,#0A2338 0%,#1a0b14 100%)}
.ms2 .ms-tab,html.light .ms2 .ms-tab{color:rgba(255,255,255,.85)}
.ms2 .ms-tab:not(.is-on):hover{color:#EE6983}
.ms2 .ms-tab.is-on{background:linear-gradient(120deg,#006199,#EE6983);color:#fff}

/* v4.4: Activity (Last 30 days) card in the same glass style as the three live cards.
   Chart line colours are untouched. */
.ms2 .ms-card.ms-activity{
  border-radius:1.75rem;color:#fff;
  background-color:#08121D!important;
  background-image:
    radial-gradient(120% 75% at 0% 0%,rgba(0,97,153,.55),rgba(0,97,153,0) 62%),
    radial-gradient(90% 65% at 100% 100%,rgba(238,105,131,.38),rgba(238,105,131,0) 65%),
    linear-gradient(160deg,#0A1A2A 0%,#0B0A12 100%)!important;
  border:1px solid rgba(238,105,131,.3)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px -18px rgba(0,97,153,.6)!important;
}
.ms2 .ms-card.ms-activity:hover{border-color:rgba(238,105,131,.6)!important}
.ms2 .ms-activity .text-fg{color:#fff}
.ms2 .ms-activity .text-mist,.ms2 .ms-activity .text-violet-bright{color:rgba(255,255,255,.7)}
.ms2 .ms-activity .ms-h2::after{background:linear-gradient(90deg,#006199,#EE6983)}
.ms2 .ms-activity svg{
  padding:.5rem .5rem 0;border-radius:1.125rem;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ms2 .ms-activity .ms-tip{background:#0A1A2A;border-color:rgba(238,105,131,.35);color:#fff}
.ms2 .ms-activity .ms-tip .text-fg{color:#fff}

/* v4.5: username + delta pill live inside the streams-today number panel */
.ms2 .ms-stats3 .ms-today .ms-statnum{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.ms2 .ms-stats3 .ms-today-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);border-radius:1.125rem;padding:.875rem 1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ms2 .ms-today-name{color:#AEAC78;font-weight:600;font-size:.875rem;line-height:1.25rem;margin-bottom:.25rem}
.ms2 .ms-stats3 .ms-today-panel .ms-delta{margin-top:.5rem}

/* v4.6: username in the greeting */
.ms2 .ms-hello-name{color:#FFACAC}
.ms2 .ms-today-name{display:none}

/* v4.7: Top Tracks / Top Artists content a bit bigger (cards only: .ms-card.flex-col) */
.ms2 .ms-card.flex-col{padding:2rem 2.25rem!important}
.ms2 .ms-card.flex-col .ms-h2{font-size:1.75rem;line-height:2.25rem;margin-bottom:1.25rem}
.ms2 .ms-card.flex-col .ms-table{max-height:600px!important}
.ms2 .ms-card.flex-col .ms-thead{font-size:1.0625rem;line-height:1.5rem;padding-bottom:.875rem}
.ms2 .ms-card.flex-col .ms-th-rank{width:2.25rem}
.ms2 .ms-card.flex-col .ms-row{padding-top:1.125rem;padding-bottom:1.125rem;gap:1.25rem}
.ms2 .ms-card.flex-col .ms-thumb{width:3.75rem!important;height:3.75rem!important;border-radius:.75rem}
.ms2 .ms-card.flex-col .ms-thumb-circle{border-radius:9999px}
.ms2 .ms-card.flex-col .ms-rank,.ms2 .ms-card.flex-col .ms-rank-top{font-size:1rem;min-width:2.25rem}
.ms2 .ms-card.flex-col .ms-row .text-sm{font-size:1.1875rem;line-height:1.6rem}
.ms2 .ms-card.flex-col .ms-row .text-xs{font-size:1rem}
.ms2 .ms-card.flex-col .ms-metric{font-size:1.1875rem}
.ms2 .ms-card.flex-col .ms-table > div > div:first-child span:nth-child(2) img,
.ms2 .ms-card.flex-col .ms-row img{width:100%;height:100%}
@media(max-width:639px){
  .ms2 .ms-card.flex-col{padding:1.25rem!important}
  .ms2 .ms-card.flex-col .ms-thumb{width:3rem!important;height:3rem!important}
  .ms2 .ms-card.flex-col .ms-row .text-sm,.ms2 .ms-card.flex-col .ms-metric{font-size:1rem}
}
.ms2 .ms-card.flex-col .ms-row .ms-metric{font-size:1.1875rem}
@media(max-width:639px){.ms2 .ms-card.flex-col .ms-row .ms-metric{font-size:1rem}}

/* v4.8: no rank numbers in Top Tracks / Top Artists; art + names sit at the left */
.ms2 .ms-card.flex-col .ms-rank,
.ms2 .ms-card.flex-col .ms-th-rank{display:none}

/* v4.9: "Track" / "Artist" header label at the far left (drops the empty art-column spacer) */
.ms2 .ms-card.flex-col .ms-thead span[aria-hidden="true"]{display:none}

/* v5.0: Recently Played - "Spotify" / "Apple Music" title flush left, rows line up with it */
.ms2 .ms-acc-spotify .ms-thead,.ms2 .ms-acc-apple .ms-thead,
html.light .ms2 .ms-acc-spotify .ms-thead,html.light .ms2 .ms-acc-apple .ms-thead{justify-content:flex-start;padding-left:0}
.ms2 .ms-acc-spotify .ms-thead > span:first-child,.ms2 .ms-acc-apple .ms-thead > span:first-child{text-align:left}
.ms2 .ms-acc-spotify .ms-row,.ms2 .ms-acc-apple .ms-row{padding-left:0}

/* v5.1: Top Tracks / Top Artists names + counts a little smaller */
.ms2 .ms-card.flex-col .ms-row .text-sm,
.ms2 .ms-card.flex-col .ms-row .ms-metric{font-size:1rem;line-height:1.5rem}
.ms2 .ms-card.flex-col .ms-thead{font-size:.9375rem}
@media(max-width:639px){
  .ms2 .ms-card.flex-col .ms-row .text-sm,.ms2 .ms-card.flex-col .ms-row .ms-metric{font-size:.9375rem}
}