/* My Stats — NIGHT mixed palette (v2).  Loaded after the main stylesheet.
   Everything is scoped under .ms2 (the wrapper only My Stats renders).
   Hues kept: Bubblegum Pink #EE6983, Glaucous #667BC6,
   Turquoise #66D0BC, Raspberry #CD2C58 - now used as dark gradients over a near-black night base.
   Chart lines (JS): Spotify green #1ED760, Apple Music red #FA2D48. */

.ms2{
  --ms-pink:#EE6983; --ms-glaucous:#667BC6; --ms-turq:#66D0BC; --ms-rasp:#CD2C58;
  --ms-night:#0E0C14; --ms-surface:#16131F;
  --ms-ink:#F4F1FA;                       /* main text on dark */
  --ms-edge:rgba(102,123,198,.28);        /* Glaucous hairline */
  --ms-shadow:0 14px 30px -16px rgba(0,0,0,.75);

  /* Re-point system tokens inside this page only (existing utility classes follow). */
  --color-fg:244 241 250;
  --color-mist:168 163 190;
  --color-ink-surface:22 19 31;
  --color-ink-border:102 123 198;
  --theme-card-bg:var(--ms-surface);
  --theme-card-border:var(--ms-edge);
  --theme-accent:#CD2C58;
  --theme-accent-strong:#EE6983;
  --theme-accent-soft:rgba(238,105,131,.18);
  --theme-accent-soft-2:rgba(102,208,188,.18);
  --theme-scrollbar-thumb:rgba(102,123,198,.55);

  color:var(--ms-ink);
  min-height:calc(100vh - 4.0625rem);
  background-color:var(--ms-night);
  background-image:
    radial-gradient(ellipse 80% 46% at 12% 0%,rgba(102,123,198,.30),rgba(102,123,198,0) 70%),
    radial-gradient(ellipse 70% 42% at 92% 4%,rgba(205,44,88,.24),rgba(205,44,88,0) 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(102,208,188,.10),rgba(102,208,188,0) 70%);
}
.ms2 :focus-visible{outline:2px solid var(--ms-turq);outline-offset:2px}

/* ---------- Text roles ---------- */
.ms2 .text-violet-bright{color:var(--ms-pink)}
.ms2 .text-red-400{color:#FF6B8A}
.ms2 .text-spotify{color:var(--ms-glaucous)}

/* ---------- Cards: dark surface with a two-colour gradient wash per accent ---------- */
.ms2 .ms-card{
  --acc:var(--ms-pink); --acc-a:rgba(238,105,131,.30);
  --g1:rgba(238,105,131,.20); --g2:rgba(205,44,88,.12);
  position:relative;
  background-color:var(--ms-surface);
  background-image:
    linear-gradient(155deg,var(--g1) 0%,rgba(22,19,31,0) 58%),
    linear-gradient(330deg,var(--g2) 0%,rgba(22,19,31,0) 62%);
  border:1px solid var(--ms-edge);
  box-shadow:inset 0 3px 0 var(--acc),var(--ms-shadow);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:border-color .16s ease,transform .16s ease;
}
.ms2 .ms-acc-pink     {--acc:var(--ms-pink);     --acc-a:rgba(238,105,131,.30); --g1:rgba(238,105,131,.22); --g2:rgba(205,44,88,.13)}
.ms2 .ms-acc-glaucous {--acc:var(--ms-glaucous); --acc-a:rgba(102,123,198,.35); --g1:rgba(102,123,198,.26); --g2:rgba(102,208,188,.09)}
.ms2 .ms-acc-turquoise{--acc:var(--ms-turq);     --acc-a:rgba(102,208,188,.35); --g1:rgba(102,208,188,.18); --g2:rgba(102,123,198,.14)}
/* Recently Played tables: Spotify #1DB954, Apple Music #FF0436 */
.ms2 .ms-acc-spotify{--acc:#1DB954; --acc-a:rgba(29,185,84,.35); --g1:rgba(29,185,84,.24); --g2:rgba(29,185,84,.08); border-color:rgba(29,185,84,.4)}
.ms2 .ms-acc-apple  {--acc:#FF0436; --acc-a:rgba(255,4,54,.35);  --g1:rgba(255,4,54,.24);  --g2:rgba(255,4,54,.08);  border-color:rgba(255,4,54,.4)}
.ms2 .ms-acc-spotify .ms-thead{background:linear-gradient(90deg,#1DB954 0%,#0E6A30 100%)}
.ms2 .ms-acc-apple   .ms-thead{background:linear-gradient(90deg,#FF0436 0%,#8A0220 100%)}
.ms2 .ms-acc-spotify .ms-row:hover{background:rgba(29,185,84,.14)}
.ms2 .ms-acc-apple   .ms-row:hover{background:rgba(255,4,54,.14)}
.ms2 .ms-acc-spotify .ms-thumb{border-color:rgba(29,185,84,.4)}
.ms2 .ms-acc-apple   .ms-thumb{border-color:rgba(255,4,54,.4)}
/* stat-card surfaces */
.ms2 .ms-surface-grad{--g1:rgba(102,123,198,.30); --g2:rgba(205,44,88,.16)}
.ms2 .ms-surface-white{--g1:rgba(238,105,131,.22); --g2:rgba(102,123,198,.14)}
.ms2 .ms-card:hover{border-color:var(--acc)}

.ms2 .ms-stat::after{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid var(--acc-a);
  border-radius:calc(var(--theme-radius-card,1.5rem) - 6px);
}
.ms2 .ms-statnum{color:var(--ms-ink)}
.ms2 .ms-key .ms-statnum{color:var(--ms-pink)}

/* ---------- Section titles ---------- */
.ms2 .ms-ul-pink{--ul:linear-gradient(90deg,var(--ms-pink),var(--ms-rasp))}
.ms2 .ms-ul-turquoise{--ul:linear-gradient(90deg,var(--ms-turq),var(--ms-glaucous))}
.ms2 .ms-h2::after{content:"";display:block;width:2rem;height:3px;border-radius:3px;margin-top:.5rem;background:var(--ul,linear-gradient(90deg,var(--ms-pink),var(--ms-rasp)))}

/* ---------- Tables ---------- */
.ms2 .ms-thead{
  position:sticky;top:0;z-index:2;
  background:linear-gradient(90deg,#3E4F96 0%,#7A2A55 100%);color:#fff;
  font-size:.6875rem;line-height:1rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:.25rem;
}
.ms2 .ms-th-rank{width:1.75rem;text-align:center}
.ms2 .ms-row{background:transparent;color:var(--ms-ink);transition:background-color .15s ease}
.ms2 .ms-row:hover{background:rgba(238,105,131,.13)}                /* hover: Pink @ 13% */
.ms2 .ms-metric{font-weight:600}

.ms2 .ms-rank{
  display:inline-block;min-width:1.75rem;padding:0;border:0;border-radius:0;background:none;
  color:var(--ms-glaucous);font-weight:600;line-height:1.5rem;text-align:center;
}
.ms2 .ms-rank-top{color:var(--ms-pink)}

.ms2 .ms-thumb{background:rgba(102,123,198,.16);border:1px solid var(--ms-edge)}
.ms2 .ms-thumb-circle{border:0;box-shadow:0 0 0 2px var(--ms-surface),0 0 0 3.5px rgba(238,105,131,.8)}

.ms2 .ms-arrow-up{color:var(--ms-turq)}
.ms2 .ms-arrow-down{color:#FF6B8A}
.ms2 .ms-arrow-flat{color:var(--ms-glaucous)}

/* ---------- Controls ---------- */
.ms2 .ms-btn{background:rgba(255,255,255,.05);border-color:var(--ms-edge);color:var(--ms-ink)}
.ms2 .ms-btn:hover{border-color:var(--ms-pink);color:var(--ms-pink)}
.ms2 .ms-seg{background:rgba(255,255,255,.05);border-radius:9999px;box-shadow:var(--ms-shadow)}
.ms2 .ms-tab{color:var(--ms-ink);background:transparent}
.ms2 .ms-tab:not(.is-on):hover{color:var(--ms-pink)}
.ms2 .ms-tab.is-on{background:linear-gradient(120deg,#CD2C58,#EE6983);color:#fff}
.ms2 .bg-aurora{background-image:linear-gradient(120deg,#CD2C58,#EE6983);background-color:transparent}
.ms2 .text-\[\#0B0A12\]{color:#fff}

/* ---------- Live dot ---------- */
.ms2 .ms-live-dot{width:.5rem;height:.5rem;border-radius:9999px;background:var(--ms-turq);box-shadow:0 0 0 3px rgba(102,208,188,.28)}

.ms2 .ms-tip{background:#1C1830;border-color:var(--ms-edge);color:var(--ms-ink)}

.ms2 .ms-num{position:relative;display:inline-block}
.ms2 .ms-num-out{position:absolute;left:0;top:0;white-space:nowrap}

/* ---------- Motion: short and quiet (unchanged) ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes ms-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes ms-fade{from{opacity:0}to{opacity:1}}
  @keyframes ms-fade-out{from{opacity:1}to{opacity:0}}
  .ms2 .ms-rise,.ms2 .ms-stat,.ms2 .ms-first .ms-card{
    animation:ms-rise 200ms cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:calc(var(--i,0) * 50ms);
  }
  .ms2 .ms-rise{animation-delay:0ms}
  .ms2 .ms-switch{animation:ms-fade 150ms ease both}
  .ms2 .ms-card:hover{transform:translateY(-2px)}
  .ms2 .ms-tab{transition:background-color .15s ease,color .15s ease}
  .ms2 .ms-num-in{animation:ms-fade 150ms ease both}
  .ms2 .ms-num-out{animation:ms-fade-out 150ms ease both}
}
@media (prefers-reduced-motion:reduce){
  .ms2 .ms-num-out{display:none}
  .ms2 .ms-card{transition:border-color .01ms}
}

/* ---------- Day (light) theme: cool white with the same gradients ---------- */
html.light .ms2{
  --ms-ink:#1E1B22; --ms-surface:#fff; --ms-edge:rgba(102,123,198,.28);
  --ms-shadow:0 1px 2px rgba(30,27,34,.05),0 12px 24px -14px rgba(30,27,34,.18);
  --color-fg:30 27 34; --color-mist:94 90 102; --color-ink-surface:255 255 255;
  --theme-card-bg:#fff;
  background-color:#F6F7FC;
  background-image:
    radial-gradient(ellipse 80% 46% at 12% 0%,rgba(102,123,198,.20),rgba(102,123,198,0) 70%),
    radial-gradient(ellipse 70% 42% at 92% 4%,rgba(238,105,131,.16),rgba(238,105,131,0) 70%);
}
html.light .ms2 .ms-card{
  background-image:linear-gradient(155deg,var(--g1) 0%,rgba(255,255,255,0) 58%),linear-gradient(330deg,var(--g2) 0%,rgba(255,255,255,0) 62%);
  box-shadow:inset 0 3px 0 var(--acc),var(--ms-shadow);
}
html.light html.light .ms2 .ms-btn,html.light .ms2 .ms-seg{background:#fff}
html.light .ms2 .ms-tip{background:#fff}
html.light .ms2 .ms-thumb-circle{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(238,105,131,.8)}

/* =====================================================================
   TABLE LOOK (Recently Played / Top Tracks / Top Artists)
   Flat rows on the dark surface: muted header with a hairline, tall rows
   split by hairlines, rounded-square art, bold title + muted subtitle,
   quiet hover. Overrides the earlier table rules above.
   ===================================================================== */
.ms2 .ms-table,
.ms2 .ms-table > .flex-col{gap:0}

/* header: plain muted labels, hairline underneath, no bar */
.ms2 .ms-thead{
  background:var(--ms-surface);color:rgb(var(--color-mist));
  border-radius:0;border-bottom:1px solid rgba(255,255,255,.09);
  padding:.25rem .75rem .75rem;margin-bottom:0;
  font-size:.8125rem;line-height:1.25rem;font-weight:500;letter-spacing:0;text-transform:none;
}
.ms2 .ms-acc-spotify .ms-thead{background:var(--ms-surface);border-bottom-color:rgba(29,185,84,.45)}
.ms2 .ms-acc-apple   .ms-thead{background:var(--ms-surface);border-bottom-color:rgba(255,4,54,.45)}
.ms2 .ms-th-rank{width:1.75rem;text-align:left}

/* rows: tall, flat, hairline separators */
.ms2 .ms-row{
  border-radius:0;background:transparent;
  padding-top:.875rem;padding-bottom:.875rem;padding-left:.75rem;padding-right:.75rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  gap:1rem;
}
.ms2 .ms-row:last-child{border-bottom:0}
.ms2 .ms-row:hover{background:rgba(255,255,255,.04)}
.ms2 .ms-acc-spotify .ms-row:hover{background:rgba(29,185,84,.08)}
.ms2 .ms-acc-apple   .ms-row:hover{background:rgba(255,4,54,.08)}

/* rank: quiet muted number, no colour, no weight */
.ms2 .ms-rank,.ms2 .ms-rank-top{
  color:rgb(var(--color-mist));font-weight:400;text-align:left;min-width:1.75rem;
}

/* art: larger rounded square, no border or ring */
.ms2 .ms-thumb{
  width:2.75rem!important;height:2.75rem!important;
  border:0!important;border-radius:.5rem;background:rgba(255,255,255,.06);
}
.ms2 .ms-thumb-circle{border-radius:9999px;box-shadow:none}

/* text: bold title, muted secondary, firm metric */
.ms2 .ms-row .text-fg.font-semibold,
.ms2 .ms-row .text-fg.font-medium{font-weight:700;color:var(--ms-ink)}
.ms2 .ms-row .text-mist{color:rgb(var(--color-mist))}
.ms2 .ms-metric{font-weight:700;color:var(--ms-ink)}

/* scrollbar sits clear of the hairlines */
.ms2 .ms-table{padding-right:.25rem}

/* day (light) theme */
html.light .ms2 .ms-thead,
html.light .ms2 .ms-acc-spotify .ms-thead,
html.light .ms2 .ms-acc-apple .ms-thead{background:#fff}
html.light .ms2 .ms-thead{border-bottom-color:rgba(30,27,34,.12)}
html.light .ms2 .ms-row{border-bottom-color:rgba(30,27,34,.08)}
html.light .ms2 .ms-row:hover{background:rgba(30,27,34,.04)}
html.light .ms2 .ms-thumb{background:rgba(30,27,34,.06)}

/* =====================================================================
   Top Tracks / Top Artists cards: flat inside, single #0D1C42 outline,
   no top edge line / shadow.  (.flex-col = these two cards only.)
   Table header labels a little bigger on all three table types.
   ===================================================================== */
.ms2 .ms-card.flex-col{
  background-image:none;
  background-color:var(--ms-surface);
  border-color:#0D1C42;
  box-shadow:none;
}
.ms2 .ms-card.flex-col:hover{border-color:#0D1C42}
html.light .ms2 .ms-card.flex-col{background-color:#fff;box-shadow:none}

.ms2 .ms-thead{font-size:.9375rem;line-height:1.375rem}

/* =====================================================================
   Recently Played header row: transparent, title centered, bigger.
   (Spotify / Apple Music cards only. Not sticky, so scrolled rows can't
   slide under the transparent header.)
   ===================================================================== */
.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{
  position:relative;background:transparent;
  justify-content:flex-start;
  font-size:1rem;line-height:1.5rem;font-weight:600;color:var(--ms-ink);
}
/* source name ("Spotify" / "Apple Music") centered across the whole row */
.ms2 .ms-acc-spotify .ms-thead > span:first-child,
.ms2 .ms-acc-apple .ms-thead > span:first-child{text-align:center}
/* "Played" label stays over the time column on the right */
.ms2 .ms-acc-spotify .ms-thead > span:last-child,
.ms2 .ms-acc-apple .ms-thead > span:last-child{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  font-size:.875rem;font-weight:500;color:rgb(var(--color-mist));
}